mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Improvement in the look and feel of the whole application
Changed the SCSS/CSS for the below third party libraries to adopt the new look 'n' feel: - wcDocker - Alertify dialogs, and notifications - AciTree - Bootstrap Navbar - Bootstrap Tabs - Bootstrap Drop-Down menu - Backgrid - Select2 Adopated the new the look 'n' feel for the dialogs, wizard, properties, tab panels, tabs, fieldset, subnode control, spinner control, HTML table, and other form controls. - Font is changed to Roboto - Using SCSS variables to define the look 'n' feel - Designer background images for the Login, and Forget password pages in 'web' mode - Improved the look 'n' feel for the key selection in the preferences dialog - Table classes consistency changes across the application - File Open and Save dialog list view changes Author(s): Aditya Toshniwal & Khushboo Vashi
This commit is contained in:
Ashesh Vashi
@@ -53,7 +53,7 @@ class DashboardModule(PgAdminModule):
|
||||
name='dashboard',
|
||||
priority=1,
|
||||
title=gettext('Dashboard'),
|
||||
icon='fa fa-tachometer',
|
||||
icon='',
|
||||
content='',
|
||||
isCloseable=True,
|
||||
isPrivate=False,
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
.dashboard-container {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.dashboard-link {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -15,8 +6,8 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashboard-tab-panel > li > a {
|
||||
padding: 0px 15px !important;
|
||||
.dashboard-tab-container {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.dashboard-tab {
|
||||
@@ -109,3 +100,11 @@
|
||||
.dashboard-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#dashboard-activity div.tab-content > div.tab-pane table.backgrid.table-bordered {
|
||||
border: none;
|
||||
}
|
||||
|
||||
div#dashboard-activity div.tab-content > div.tab-pane table.backgrid.table-bordered tr > td:first-child {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
@@ -2,8 +2,7 @@ define('pgadmin.dashboard', [
|
||||
'sources/url_for', 'sources/gettext', 'require', 'jquery', 'underscore',
|
||||
'sources/pgadmin', 'backbone', 'backgrid', './charting',
|
||||
'pgadmin.alertifyjs', 'pgadmin.backform',
|
||||
'sources/nodes/dashboard', 'backgrid.filter',
|
||||
'pgadmin.browser', 'bootstrap', 'wcdocker',
|
||||
'sources/nodes/dashboard', 'pgadmin.browser', 'bootstrap', 'wcdocker',
|
||||
], function(
|
||||
url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, charting,
|
||||
Alertify, Backform, NodesDashboard
|
||||
@@ -39,7 +38,7 @@ define('pgadmin.dashboard', [
|
||||
);
|
||||
} else {
|
||||
this.$el.html(
|
||||
'<i class=\'fa fa-times-circle\' data-toggle=\'tooltip\' ' +
|
||||
'<i class=\'fa fa-times-circle text-danger\' data-toggle=\'tooltip\' ' +
|
||||
'title=\'' + gettext('Terminate the session') +
|
||||
'\'></i>'
|
||||
);
|
||||
@@ -590,9 +589,10 @@ define('pgadmin.dashboard', [
|
||||
|
||||
// Set up the grid
|
||||
var grid = new Backgrid.Grid({
|
||||
emptyText: 'No data found',
|
||||
columns: columns,
|
||||
collection: data,
|
||||
className: 'backgrid table-bordered presentation table backgrid-striped',
|
||||
className: 'backgrid presentation table table-bordered table-noouter-border table-hover',
|
||||
});
|
||||
|
||||
// Render the grid
|
||||
@@ -605,17 +605,7 @@ define('pgadmin.dashboard', [
|
||||
collection: data,
|
||||
});
|
||||
|
||||
// Render the filter
|
||||
$('#' + container.id + '_filter').before(filter.render().el);
|
||||
|
||||
// Add some space to the filter and move it to the right
|
||||
$(filter.el).css({
|
||||
float: 'right',
|
||||
margin: '5px',
|
||||
'margin-right': '2px',
|
||||
'margin-top': '3px',
|
||||
});
|
||||
|
||||
filter.setCustomSearchBox($('#txtGridSearch'));
|
||||
// Stash objects for future use
|
||||
$(container).data('data', data);
|
||||
$(container).data('grid', grid);
|
||||
@@ -850,6 +840,13 @@ define('pgadmin.dashboard', [
|
||||
var div_server_prepared = $dashboardContainer.find('#server_prepared').get(0);
|
||||
var div_server_config = $dashboardContainer.find('#server_config').get(0);
|
||||
|
||||
var tab_grid_map = {
|
||||
'tab_server_activity': div_server_activity,
|
||||
'tab_server_locks': div_server_locks,
|
||||
'tab_server_prepared': div_server_prepared,
|
||||
'tab_server_config': div_server_config,
|
||||
};
|
||||
|
||||
// Display server activity
|
||||
if (self.preferences.show_activity) {
|
||||
var server_activity_columns = [{
|
||||
@@ -1099,45 +1096,17 @@ define('pgadmin.dashboard', [
|
||||
|
||||
// (Re)render the appropriate tab
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
|
||||
switch ($(e.target).attr('aria-controls')) {
|
||||
case 'tab_server_activity':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_activity);
|
||||
break;
|
||||
let prevGrid = tab_grid_map[$(e.relatedTarget).attr('aria-controls')];
|
||||
$(prevGrid).data('filtertext', $('#txtGridSearch').val());
|
||||
|
||||
case 'tab_server_locks':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_locks);
|
||||
break;
|
||||
|
||||
case 'tab_server_prepared':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_prepared);
|
||||
break;
|
||||
|
||||
case 'tab_server_config':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_config);
|
||||
break;
|
||||
}
|
||||
let currGrid = tab_grid_map[$(e.target).attr('aria-controls')];
|
||||
$('#txtGridSearch').val($(currGrid).data('filtertext'));
|
||||
pgAdmin.Dashboard.render_grid_data(currGrid);
|
||||
});
|
||||
|
||||
$('button').off('click').on('click', (e) => {
|
||||
let $this = $(e.currentTarget);
|
||||
let targetID = $this.length ? $this[0].id : undefined;
|
||||
switch (targetID) {
|
||||
case 'btn_server_activity_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_activity);
|
||||
break;
|
||||
|
||||
case 'btn_server_locks_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_locks);
|
||||
break;
|
||||
|
||||
case 'btn_server_prepared_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_prepared);
|
||||
break;
|
||||
|
||||
case 'btn_server_config_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_server_config);
|
||||
break;
|
||||
}
|
||||
$('#btn_refresh').off('click').on('click', () => {
|
||||
let currGrid = tab_grid_map[$('#dashboard-activity .nav-tabs .active').attr('aria-controls')];
|
||||
pgAdmin.Dashboard.render_grid_data(currGrid);
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -1147,6 +1116,12 @@ define('pgadmin.dashboard', [
|
||||
var div_database_locks = document.getElementById('database_locks');
|
||||
var div_database_prepared = document.getElementById('database_prepared');
|
||||
|
||||
var tab_grid_map = {
|
||||
'tab_database_activity': div_database_activity,
|
||||
'tab_database_locks': div_database_locks,
|
||||
'tab_database_prepared': div_database_prepared,
|
||||
};
|
||||
|
||||
// Display server activity
|
||||
if (self.preferences.show_activity) {
|
||||
var database_activity_columns = [{
|
||||
@@ -1348,39 +1323,18 @@ define('pgadmin.dashboard', [
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_activity);
|
||||
|
||||
// (Re)render the appropriate tab
|
||||
$('a[data-toggle="tab"]').off('shown.bs.tab').on('shown.bs.tab', function(e) {
|
||||
switch ($(e.target).attr('aria-controls')) {
|
||||
case 'tab_database_activity':
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_activity);
|
||||
break;
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
|
||||
let prevGrid = tab_grid_map[$(e.relatedTarget).attr('aria-controls')];
|
||||
$(prevGrid).data('filtertext', $('#txtGridSearch').val());
|
||||
|
||||
case 'tab_database_locks':
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_locks);
|
||||
break;
|
||||
|
||||
case 'tab_database_prepared':
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_prepared);
|
||||
break;
|
||||
}
|
||||
let currGrid = tab_grid_map[$(e.target).attr('aria-controls')];
|
||||
$('#txtGridSearch').val($(currGrid).data('filtertext'));
|
||||
pgAdmin.Dashboard.render_grid_data(currGrid);
|
||||
});
|
||||
|
||||
// Handle button clicks
|
||||
$('button').off('click').on('click', (e) => {
|
||||
let $this = $(e.currentTarget);
|
||||
let targetID = $this.length ? $this[0].id : undefined;
|
||||
switch (targetID) {
|
||||
case 'btn_database_activity_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_activity);
|
||||
break;
|
||||
|
||||
case 'btn_database_locks_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_locks);
|
||||
break;
|
||||
|
||||
case 'btn_database_prepared_refresh':
|
||||
pgAdmin.Dashboard.render_grid_data(div_database_prepared);
|
||||
break;
|
||||
}
|
||||
$('#btn_refresh').off('click').on('click', () => {
|
||||
let currGrid = tab_grid_map[$('#dashboard-activity .nav-tabs .active').attr('aria-controls')];
|
||||
pgAdmin.Dashboard.render_grid_data(currGrid);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
.dashboard-icon {
|
||||
color: $color-fg;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.dashboard-tab-container {
|
||||
border-left: 1px solid $color-gray-lighter;
|
||||
border-right: 1px solid $color-gray-lighter;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
.dashboard-container {
|
||||
padding-top: $grid-gutter-width/2;
|
||||
padding-bottom: $grid-gutter-width/2;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.dashboard-graph-body {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
margin-bottom: $grid-gutter-width/2;
|
||||
}
|
||||
|
||||
.dashboard-tab-btn-group {
|
||||
@@ -27,25 +35,9 @@
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.dashboard-tab-container .sub-node-form {
|
||||
padding: 0px 0px 0px 1px;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.dashboard-tab-container .subnode-dialog .nav > li > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a,
|
||||
.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a:hover {
|
||||
border-top: 1px solid $color-gray-lighter;
|
||||
border-left: 1px solid $color-gray-lighter;
|
||||
border-right: 1px solid $color-gray-lighter;
|
||||
margin-bottom: -1px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dashboard-tab-container .backgrid .editor {
|
||||
background-color: $color-gray-lighter !important;
|
||||
border-bottom-color: $color-gray-lighter;
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border-radius: $card-border-radius;
|
||||
border: $panel-border;
|
||||
}
|
||||
|
||||
@@ -1,109 +1,109 @@
|
||||
<div class="container-fluid">
|
||||
<div class="dashboard-container">
|
||||
<div class="container-fluid dashboard-container negative-space">
|
||||
<div id="dashboard-graphs" class="dashboard-hidden">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Database sessions') }}</legend>
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Dashboard sessions') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-sessions" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Transactions per second') }}</legend>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Transactions per second') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-tps" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-6">
|
||||
<div id="graph-sessions" class="graph-container"></div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div id="graph-tps" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Tuples in') }}</legend>
|
||||
<div class="col-md-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Tuples in') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-ti" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Tuples out') }}</legend>
|
||||
<div class="col-md-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Tuples out') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-to" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Block I/O') }}</legend>
|
||||
<div class="col-md-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Block I/O') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-bio" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-4">
|
||||
<div id="graph-ti" class="graph-container"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div id="graph-to" class="graph-container"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div id="graph-bio" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboard-activity" class="dashboard-hidden">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Database activity') }}</legend>
|
||||
<div id="dashboard-activity" class="card dashboard-row dashboard-hidden">
|
||||
<div class="card-header">
|
||||
{{ _('Server activity') }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-12 pr-0">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active show" href="#tab_panel_database_activity" aria-controls="tab_database_activity"
|
||||
role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab_panel_database_locks" aria-controls="tab_database_locks"
|
||||
role="tab" data-toggle="tab">{{ _('Locks') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab_panel_database_prepared" aria-controls="tab_database_prepared"
|
||||
role="tab" data-toggle="tab">{{ _('Prepared Transactions') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3 col-12 pl-0 text-right">
|
||||
<div class="navtab-inline-controls">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text fa fa-search" id="labelSearch"></span>
|
||||
</div>
|
||||
<input type="search" class="form-control" id="txtGridSearch" placeholder="Search" aria-label="Search" aria-describedby="labelSearch">
|
||||
</div>
|
||||
<button id="btn_refresh" type="button" class="btn btn-secondary btn-navtab-inline" title="{{ _('Refresh') }}">
|
||||
<span class="fa fa-refresh"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-12">
|
||||
<div class="dashboard-tab-container">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_activity"
|
||||
class="nav-link active"
|
||||
aria-controls="tab_database_activity"
|
||||
role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_locks"
|
||||
class="nav-link"
|
||||
aria-controls="tab_database_locks" role="tab"
|
||||
data-toggle="tab">{{ _('Locks') }}</a></li>
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_prepared"
|
||||
class="nav-link"
|
||||
aria-controls="tab_database_prepared" role="tab"
|
||||
data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
|
||||
</ul>
|
||||
<!-- Nav tabs -->
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="tab_panel_database_activity">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_database_activity_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="database_activity_filter"></div>
|
||||
</div>
|
||||
<div id="database_activity" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="tab_panel_database_locks">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_database_locks_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="database_locks_filter"></div>
|
||||
</div>
|
||||
<div id="database_locks" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="tab_panel_database_prepared">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_database_prepared_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="database_prepared_filter"></div>
|
||||
</div>
|
||||
<div id="database_prepared" class="grid-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2 active show" id="tab_panel_database_activity">
|
||||
<div id="database_activity" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_database_locks">
|
||||
<div id="database_locks" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_database_prepared">
|
||||
<div id="database_prepared" class="grid-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,4 +112,3 @@
|
||||
{{ _('All Dashboard elements are currently disabled.') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,126 +1,121 @@
|
||||
<div class="container-fluid">
|
||||
<div class="dashboard-container">
|
||||
<div id="dashboard-graphs" class="dashboard-hidden">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Server sessions') }}</legend>
|
||||
<div class="container-fluid dashboard-container negative-space">
|
||||
<div id="dashboard-graphs" class="dashboard-hidden">
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Server sessions') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Transactions per second') }}</legend>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-sessions" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-6">
|
||||
<div id="graph-sessions" class="graph-container"></div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div id="graph-tps" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Tuples in') }}</legend>
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Transactions per second') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Tuples out') }}</legend>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Block I/O') }}</legend>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-4">
|
||||
<div id="graph-ti" class="graph-container"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div id="graph-to" class="graph-container"></div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div id="graph-bio" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboard-activity" class="dashboard-hidden">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Server activity') }}</legend>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-12">
|
||||
<div class="dashboard-tab-container">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_activity"
|
||||
class="nav-link active"
|
||||
aria-controls="tab_server_activity"
|
||||
role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_locks"
|
||||
class="nav-link"
|
||||
aria-controls="tab_server_locks" role="tab"
|
||||
data-toggle="tab">{{ _('Locks') }}</a></li>
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_prepared"
|
||||
class="nav-link"
|
||||
aria-controls="tab_server_prepared" role="tab"
|
||||
data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
|
||||
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_config"
|
||||
class="nav-link"
|
||||
aria-controls="tab_server_config" role="tab"
|
||||
data-toggle="tab">{{ _('Configuration') }}</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="tab_panel_server_activity">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_server_activity_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="server_activity_filter"></div>
|
||||
</div>
|
||||
<div id="server_activity" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="tab_panel_server_locks">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_server_locks_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="server_locks_filter"></div>
|
||||
</div>
|
||||
<div id="server_locks" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="tab_panel_server_prepared">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_server_prepared_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="server_prepared_filter"></div>
|
||||
</div>
|
||||
<div id="server_prepared" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="tab_panel_server_config">
|
||||
<div class="dashboard-tab-btn-group pg-prop-btn-group-above">
|
||||
<button id="btn_server_config_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
|
||||
<div id="server_config_filter"></div>
|
||||
</div>
|
||||
<div id="server_config" class="grid-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-tps" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboard-none-show" class="alert alert-info pg-panel-message dashboard-hidden" role="alert">
|
||||
{{ _('All Dashboard elements are currently disabled.') }}
|
||||
<div class="row dashboard-row">
|
||||
<div class="col-md-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Tuples in') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-ti" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Tuples out') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-to" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ _('Block I/O') }}
|
||||
</div>
|
||||
<div class="card-body dashboard-graph-body">
|
||||
<div id="graph-bio" class="graph-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboard-activity" class="card dashboard-row dashboard-hidden">
|
||||
<div class="card-header">
|
||||
{{ _('Server activity') }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-12 pr-0">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active show" href="#tab_panel_server_activity" aria-controls="tab_server_activity"
|
||||
role="tab" data-toggle="tab">{{_('Sessions') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab_panel_server_locks" aria-controls="tab_server_locks"
|
||||
role="tab" data-toggle="tab">{{ _('Locks') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab_panel_server_prepared" aria-controls="tab_server_prepared"
|
||||
role="tab" data-toggle="tab">{{ _('Prepared Transactions') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#tab_panel_server_config" aria-controls="tab_server_config"
|
||||
role="tab" data-toggle="tab">{{ _('Configuration') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3 col-12 pl-0 text-right">
|
||||
<div class="navtab-inline-controls">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text fa fa-search" id="labelSearch"></span>
|
||||
</div>
|
||||
<input type="search" class="form-control" id="txtGridSearch" placeholder="Search" aria-label="Search" aria-describedby="labelSearch">
|
||||
</div>
|
||||
<button id="btn_refresh" type="button" class="btn btn-secondary btn-navtab-inline" title="{{ _('Refresh') }}">
|
||||
<span class="fa fa-refresh"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nav tabs -->
|
||||
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2 active show" id="tab_panel_server_activity">
|
||||
<div id="server_activity" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_locks">
|
||||
<div id="server_locks" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_prepared">
|
||||
<div id="server_prepared" class="grid-container"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_config">
|
||||
<div id="server_config" class="grid-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboard-none-show" class="alert alert-info pg-panel-message dashboard-hidden" role="alert">
|
||||
{{ _('All Dashboard elements are currently disabled.') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid negative-space">
|
||||
<div class="dashboard-container">
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Welcome') }}</legend>
|
||||
</div>
|
||||
<div class="card bg-light">
|
||||
<div class="card-body">
|
||||
<div class="card">
|
||||
<div class="card-header">{{ _('Welcome') }}</div>
|
||||
<div class="card-body p-2">
|
||||
<img src="{{ url_for('dashboard.static', filename='img/welcome_logo.png') }}"
|
||||
alt="{{ config.APP_NAME }} {{ _('logo') }}">
|
||||
<h4>{{ _('Feature rich') }} | {{ _('Maximises PostgreSQL') }} | {{ _('Open Source') }} </h4>
|
||||
@@ -19,20 +17,18 @@
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Quick Links') }}</legend>
|
||||
</div>
|
||||
<div class="card bg-light">
|
||||
<div class="card-body">
|
||||
<div class="card ">
|
||||
<div class="card-header">{{ _('Quick Links') }}</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="row">
|
||||
<div class="col-6 dashboard-link">
|
||||
<a onclick="pgAdmin.Dashboard.add_new_server()">
|
||||
<a href="#" onclick="pgAdmin.Dashboard.add_new_server()">
|
||||
<span class="fa fa-4x dashboard-icon fa-server" aria-hidden="true"></span><br/>
|
||||
{{ _('Add New Server') }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 dashboard-link">
|
||||
<a onclick="pgAdmin.Preferences.show()">
|
||||
<a href="#" onclick="pgAdmin.Preferences.show()">
|
||||
<span id="mnu_preferences" class="fa fa-4x dashboard-icon fa-cogs"
|
||||
aria-hidden="true"></span><br/>
|
||||
{{ _('Configure pgAdmin') }}
|
||||
@@ -45,11 +41,9 @@
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<div class="obj_properties">
|
||||
<legend class="badge">{{ _('Getting Started') }}</legend>
|
||||
</div>
|
||||
<div class="card bg-light">
|
||||
<div class="card-body">
|
||||
<div class="card ">
|
||||
<div class="card-header">{{ _('Getting Started') }}</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="row">
|
||||
<div class="col-3 dashboard-link">
|
||||
<a href="http://www.postgresql.org/docs" target="_blank">
|
||||
|
||||
Reference in New Issue
Block a user