pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move the dashboard tab filters into a button bar, and add a refresh button. Fixes #1505

pull/3/head
Dave Page 2016-08-03 13:39:32 +01:00
parent 4f90a5d4f4
commit 5d52767ba7
4 changed files with 100 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/pgadmin/dashboard/static/css/dashboard.css
View File

@ -42,6 +42,31 @@
line-height: 30px;
}
.dashboard-tab-btn-group {
background-color: #D2D2D2;
border: 2px solid #A9A9A9;
left: 0px;
right: 0px;
padding: 2px;
}
.dashboard-tab-btn-group button {
padding: 5px;
}
.dashboard-tab-btn-group > button {
margin: 2px 3px 2px 0px;
min-width: 40px;
}
.dashboard-tab-btn-group > button:first-child {
margin-left: 3px;
}
.dashboard-tab-btn-group > button:last-child {
margin-right: 3px;
}
.graph-container {
margin-top: 10px;
height: 150px;

18
web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
View File

@ -64,25 +64,37 @@
<ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
<li role="presentation" class="active dashboard-tab"><a href="#tab_panel_database_activity"
aria-controls="tab_database_activity"
role="tab" data-toggle="tab">Sessions</a>
role="tab" data-toggle="tab">{{ gettext('Sessions') }}</a>
</li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_database_locks"
aria-controls="tab_database_locks" role="tab"
data-toggle="tab">Locks</a></li>
data-toggle="tab">{{ gettext('Locks') }}</a></li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_database_prepared"
aria-controls="tab_database_prepared" role="tab"
data-toggle="tab">Prepared Transactions</a></li>
data-toggle="tab">{{ gettext('Prepared Transactions') }}</a></li>
</ul>
<!-- 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="{{ gettext('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="{{ gettext('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="{{ gettext('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>

42
web/pgadmin/dashboard/templates/dashboard/js/dashboard.js
View File

@ -290,10 +290,10 @@ function(r, $, pgAdmin, _, Backbone) {
});
// Render the filter
$(container).before(filter.render().el);
$('#' + 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": "0px"});
$(filter.el).css({float: "right", margin: "5px", "margin-right": "2px", "margin-top": "3px"});
// Stash objects for future use
$(container).data('data', data);
@ -592,6 +592,27 @@ function(r, $, pgAdmin, _, Backbone) {
}
});
// Handle button clicks
$("button").click(function(e){
switch(this.id) {
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;
}
});
},
// Rock n' roll on the database dashboard
@ -783,6 +804,23 @@ function(r, $, pgAdmin, _, Backbone) {
}
});
// Handle button clicks
$("button").click(function(e){
switch(this.id) {
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;
}
});
}
};

24
web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
View File

@ -64,31 +64,47 @@
<ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
<li role="presentation" class="active dashboard-tab"><a href="#tab_panel_server_activity"
aria-controls="tab_server_activity"
role="tab" data-toggle="tab">Sessions</a>
role="tab" data-toggle="tab">{{ gettext('Sessions') }}</a>
</li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_locks"
aria-controls="tab_server_locks" role="tab"
data-toggle="tab">Locks</a></li>
data-toggle="tab">{{ gettext('Locks') }}</a></li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_prepared"
aria-controls="tab_server_prepared" role="tab"
data-toggle="tab">Prepared Transactions</a></li>
data-toggle="tab">{{ gettext('Prepared Transactions') }}</a></li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_config"
aria-controls="tab_server_config" role="tab"
data-toggle="tab">Configuration</a></li>
data-toggle="tab">{{ gettext('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="{{ gettext('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="{{ gettext('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="{{ gettext('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="{{ gettext('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>