+++ /dev/null
-{% extends "base.html" %}
-
-{% block content %}
-
-<script>
- $(document).ready(function(){
- // Pre-populated initial data at page load
- var content_data = {{ content_data }};
-
- var refresh = function() {
- $.get("{{ url_prefix }}/filesystem_data/" + content_data.fs_status.filesystem.id + "/", function(data) {
- _.extend(content_data.fs_status, data);
- setTimeout(refresh, 5000);
- });
- };
-
- // Generate a "width: xx%" style string for use with a progress
- // bar element showing a pool's used space.
- rivets.formatters.pool_size_bar = function(pool){
- var ratio = pool.used / pool.avail;
-
- return "width: " + Math.round(ratio * 100).toString() + "%";
- };
-
- rivets.bind($("div#content"), content_data.fs_status);
- setTimeout(refresh, 5000);
-
- // Convert ceph-mgr's time series format (list of 2-tuples
- // with seconds-since-epoch timestamps) into what chart.js
- // can handle (list of objects with millisecs-since-epoch
- // timestamps)
- var convert_timeseries = function(source_series)
- {
- var data = [];
- _.each(source_series, function(dp) {
- data.push({
- x: dp[0] * 1000,
- y: dp[1]
- });
- });
-
- return data;
- };
-
- var delta_timeseries = function(source_series)
- {
- var i;
- var prev = source_series[0];
- var result = [];
- for (i = 1; i < source_series.length; i++) {
- var cur = source_series[i];
- var tdelta = cur[0] - prev[0];
- var vdelta = cur[1] - prev[1];
- var rate = vdelta / tdelta;
-
- result.push({
- x: cur[0] * 1000,
- y: rate
- });
-
- prev = cur;
- }
- return result;
- };
-
- var charts = {};
-
- var lhs_counter = 'mds.inodes';
- var lhs_transform = convert_timeseries;
- var rhs_counter = "mds_server.handle_client_request";
- var rhs_transform = delta_timeseries;
-
- var draw_chart = function() {
- $.get("{{ url_prefix }}/mds_counters/" + content_data.fs_status.filesystem.id + "/", function(data) {
- var top_chart = true;
-
- // Cull any chart elements that correspond to MDSs no
- // longer present in the data
- var existing_mds_names = {};
- _.each(data, function(mds_data, mds_name) {
- existing_mds_names[mds_name] = true;
- });
-
- $("#mds_charts canvas").each(function(i, e) {
- var el_mds_name = e.id.replace("mds_chart_", "");
- if (existing_mds_names[el_mds_name] != true) {
- e.remove();
- }
- });
-
-
- _.each(data, function(mds_data, mds_name) {
- if (! $("#mds_chart_" + mds_name).length) {
- // Construct new chart
- $("#mds_charts").append(
- $("<canvas height='64' id='mds_chart_" + mds_name + "'></canvas>")
- );
-
- var ctx = $("#mds_chart_" + mds_name);
- var lhs_data = lhs_transform(mds_data[lhs_counter]);
- var rhs_data = rhs_transform(mds_data[rhs_counter]);
-
- var chartInstance = new Chart(ctx, {
- type: 'line',
- data: {
- datasets: [
- {
- label: lhs_counter,
- yAxisID: 'LHS',
- data: lhs_data,
- tension: 0.1,
- borderColor: "#dd2222",
-
- },
- {
- label: rhs_counter,
- yAxisID: 'RHS',
- data: rhs_data,
- tension: 0.1,
- borderColor: "#2222dd",
- },
- ]
- },
- 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'
- }
- }
- }],
- yAxes: [{
- id: 'LHS',
- type: 'linear',
- position: 'left',
- ticks: {fontColor:"#ddd"},
- min: 0
- }, {
- id: 'RHS',
- type: 'linear',
- position: 'right',
- ticks: {fontColor:"#ddd"},
- min: 0
- }]
- }
- }
- });
- charts[mds_name] = chartInstance;
- } else {
- // Update existing chart
- var chart = charts[mds_name];
- var lhs_data = lhs_transform(mds_data[lhs_counter]);
- var rhs_data = rhs_transform(mds_data[rhs_counter]);
- chart.data.datasets[0].data = lhs_data;
- chart.data.datasets[1].data = rhs_data;
- chart.update(0);
- };
-
- // FIXME: update the visibility of axes etc
- // when charts come and go.
- top_chart = false;
- });
-
- setTimeout(draw_chart, 5000);
- });
- };
-
- // TODO periodic refresh
- draw_chart();
-
- });
-</script>
-
-
-<section class="content-header">
- <h1>
- Filesystem {filesystem.name}
- </h1>
-</section>
-
-<section class="content">
- <p style="font-size: 1.3em;">
- <i class="fa fa-desktop"></i> Clients: <span style="font-weight:bold;">{filesystem.client_count}</span>
- <a rv-href="filesystem.clients_url">Detail...</a>
- </p>
-
- <div class="row">
- <div class="col-sm-6">
- <div class="box">
- <div class="box-header">
- <h3 class="box-title">Ranks</h3>
- </div>
- <div class="box-body">
- <table class="table table-condensed">
- <thead>
- <tr>
- <th>Rank</th>
- <th>State</th>
- <th>Daemon</th>
- <th>Activity</th>
- <th>Dentries</th>
- <th>Inodes</th>
- </tr>
- </thead>
- <tbody>
- <tr rv-each-rank="filesystem.ranks">
- <td>{rank.rank}</td>
- <td>{rank.state}</td>
- <td>{rank.mds}</td>
- <td>{rank.activity}</td>
- <td>{rank.dns | dimless}</td>
- <td>{rank.inos | dimless}</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <div class="col-sm-6">
- <div class="box">
- <div class="box-header">
- <h3 class="box-title">Pools</h3>
- </div>
- <div class="box-body">
- <table class="table table-condensed">
- <thead>
- <tr>
- <th>Pool</th>
- <th>Type</th>
- <th>Used</th>
- <th>Avail</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- <tr rv-each-pool="filesystem.pools">
- <td>{pool.pool}</td>
- <td>{pool.type}</td>
- <td>{pool.used | dimless}</td>
- <td>{pool.avail | dimless}</td>
- <td>
- <div class="progress"
- style="width: 100px; height: 20px;">
- <div class="progress-bar progress-bar-red"
- rv-style="pool | pool_size_bar"></div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-
- </div>
- <div class="box">
- <div class="box-header">
- <h3 class="box-title">Standby daemons</h3>
- </div>
- <div class="box-body">
- <table>
- <thead>
- <tr rv-show="standbys | length">
- <th>Daemon</th>
- </tr>
- </thead>
- <tbody>
- <tr rv-each-standby="standbys">
- <td>{standby.name}</td>
- </tr>
- <tr class="ceph-none-found" rv-hide="standbys | length">
- <td>None found</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
- <div id="mds_charts" style="color: #ddd;">
- </div>
-
-</section>
-<!-- /.content -->
-
-{% endblock %}
Code Review / stor4nfv.git / blobdiff