Skip to content

Commit

Permalink
mgr/dashboard: update health display
Browse files Browse the repository at this point in the history 
This takes account of the new health format, also
expands and visually cleans up the frontpage
where we put the health information.

Dark backgrounds make it much easier to use
red/amber/green colours to grab attention.

Signed-off-by: John Spray <john.spray@redhat.com>
  • Loading branch information
John Spray committed Jun 23, 2017
1 parent bf5c0d1 commit f756114
Show file tree
Hide file tree
Showing 7 changed files with 427 additions and 128 deletions.
128 changes: 112 additions & 16 deletions src/pybind/mgr/dashboard/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

var refresh = function() {
$.get("/toplevel_data", function(data) {
_.extend(toplevel_data.health, data.health);
_.extend(toplevel_data, data);
setTimeout(refresh, refresh_interval);
});
};
Expand All @@ -60,6 +60,14 @@
}
}

rivets.formatters.health_ok = function(status_str) {
if (status_str == "HEALTH_OK") {
return true;
} else {
return false;
}
}

var truncate = function(n, max_width) {
var stringized = n.toString();
var parts = stringized.split(".");
Expand Down Expand Up @@ -103,33 +111,116 @@
return format_number(n, 1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']);
};

<!--rivet.formatters.mon_summary = function(mon_map) {-->
<!--}-->
/* This is useful if you need to display some alternative text
* when a collection is empty using rv-hide */
rivets.formatters.length = function(val) {
return val.length;
}

rivets.bind($("#health"), toplevel_data.health);
rivets.bind($("#health"), toplevel_data);
rivets.bind($("section.sidebar"), toplevel_data);
setTimeout(refresh, refresh_interval);
});
</script>

<link rel="shortcut icon" href="http://ceph.com/wp-content/themes/ceph/favicon.ico">
<link rel="shortcut icon" href="/static/favicon.ico">

<style>
div.box {
background-color: #222d32;
color: #fff;
}

div.info-box {
background-color: #222d32;
color: #fff;
}

.box {
border-top-color: #b8c7ce;
}

div.box-header {
color: #b8c7ce;
}

a.logo {
background-color: #222d32;
}

body {
background-color: #222d32;
}

.navbar {
background-color: #222d32;
color: #222d32;
}

div#content {
background-color: #424d52;
color: #ddd;
}

div.progress-bar {
border-width: 1px;
border-color: #ddd;
}

.ceph-log {
font-family: monospace;
background-color: #333;
color: #ddd;
}

.nav-tabs>li.active>a {
background-color: #424d52;
color: #ddd;
}

.navbar a {
color: #b8c7ce;
}

.ceph-none-found {
color: #8aa4af;
font-style: italic;
padding-left: 15px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

table.ceph-chartbox {
margin-left: 40px;
}

.ceph-chartbox td {
padding-left: 35px;
text-align: center;
font-weight: bold;
}

</style>

</head>

<body class="hold-transition skin-blue sidebar-mini">
<body class="hold-transition sidebar-mini sidebar-collapse">
<div class="wrapper">

<!-- Main Header -->
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="/" class="logo">
<!--
<span class="logo-mini"><b>A</b>LT</span>
<span class="logo-lg"><b>Admin</b>LTE</span> -->
<span class="logo-lg">
<img src="/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
width="123px" height="34px"/>
</span>
<span class="logo-mini">
<img src="/static/logo-mini.png"
width="34px" height="34px"/>
</span>
</a>

<!-- Header Navbar -->
Expand All @@ -140,10 +231,11 @@
<span class="sr-only">Toggle navigation</span>
</a>

<div id="health" style="font-size: 20px; padding: 12px 12px;">
Health:&nbsp;
<span rv-style="overall_status | health_color">
{overall_status}
<div id="health" style="font-size: 18px; padding: 12px 12px;">
<span rv-hide="health_status | health_ok" >
<span rv-style="health_status | health_color">
{health_status}
</span>
</span>
</div>

Expand All @@ -156,17 +248,19 @@
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<aside class="main-sidebar skin-blue">

<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<!-- Optionally, you can add icons to the links -->
<li><a href="/health"><i class="fa fa-heart"></i>
<li><a href="/health">
<i class="fa fa-heartbeat" rv-style="health_status | health_color"></i>
<span>Cluster health</span></a>
</li>
<li><a href="/servers"><i class="fa fa-server"></i>
<li><a href="/servers">
<i class="fa fa-server"></i>
<span>Servers</span></a>
</li>
<li class="treeview active">
Expand All @@ -179,6 +273,7 @@
<li rv-each-pool="rbd_pools">
<a rv-href="pool.url">{pool.name}</a>
</li>
<li class="ceph-none-found" rv-hide="rbd_pools | length">None found</li>
</ul>
</li>
<li class="treeview active">
Expand All @@ -191,6 +286,7 @@
<li rv-each-filesystem="filesystems">
<a rv-href="filesystem.url">{filesystem.name}</a>
</li>
<li class="ceph-none-found" rv-hide="filesystems | length">None found</li>
</ul>
</li>
</ul>
Expand Down
5 changes: 1 addition & 4 deletions src/pybind/mgr/dashboard/clients.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,12 @@

<section class="content-header">
<h1>
Clients
Clients of <a rv-href="fs_url">{fs_name}</a>
</h1>
</section>

<section class="content">
<div class="box">
<div class="box-header">
<h3 class="box-title">Clients</h3>
</div>
<div class="box-body">
<table class="table table-bordered">
<thead>
Expand Down
16 changes: 9 additions & 7 deletions src/pybind/mgr/dashboard/filesystem.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,18 @@
},
]
},
options:{
legend: {
position: 'right',
display: top_chart
}
},
options: {
legend: {
position: 'top',
display: top_chart,
labels:{fontColor: "#ddd"}
},
scales: {
xAxes: [{
position: 'top',
type: 'time',
display: top_chart,
ticks: {fontColor:"#ddd"},
time: {
displayFormats: {
quarter: 'MMM YYYY'
Expand All @@ -143,11 +143,13 @@
id: 'LHS',
type: 'linear',
position: 'left',
ticks: {fontColor:"#ddd"},
min: 0
}, {
id: 'RHS',
type: 'linear',
position: 'right',
ticks: {fontColor:"#ddd"},
min: 0
}]
}
Expand Down Expand Up @@ -281,7 +283,7 @@ <h3 class="box-title">Standby daemons</h3>
</div>
</div>

<div id="mds_charts">
<div id="mds_charts" style="color: #ddd;">
</div>

</section>
Expand Down
Loading

0 comments on commit f756114

Please sign in to comment.