<!DOCTYPE html>
<html ng-app="StatusApp">
<head>
    <meta charset=utf-8/>
    <title>Ceph status</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/testAdmin.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/nv.d3.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/rickshaw.min.css"/>
    <link rel="stylesheet" href="css/tooltip.css"/>
    <link rel="stylesheet" href="css/animation.css">
    <script src="scripts/angular/angular.min.js"></script>
    <script src="scripts/angular/angular-cookies.min.js"></script>
    <script src="scripts/angular/angular-animate.min.js"></script>
    <script src="scripts/angular/angular-sanitize.min.js"></script>
    <script src="scripts/angular-misc/ng-table.min.js"></script>
    <script src="scripts/angular-misc/angular-commons.js"></script>
    <script src="scripts/angular-misc/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <script src="scripts/angular-misc/dialogs.v2.min.js"></script>
    <script src="scripts/angular-misc/D3Directives.js"></script>
    <script src="scripts/d3/d3.v3.min.js" charset="utf-8"></script>
    <script src="scripts/d3/common.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="scripts/d3/colorbrewer.js"></script>
    <script src="scripts/d3/rickshaw.min.js"></script>
    <script src="scripts/d3/nv.d3.min.js" charset="utf-8"></script>
    <script src="scripts/statusApp.js"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        #container{
            max-width: 1250px;
        }
        .button, .closeButton {
            float: right;
            cursor: pointer;
        }
        .closeButton {
            opacity: 0.3;
        }

        #controlPanel {
        border: black solid 1px;
        background-color: white;
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 10px;
        border-radius: 5px;
        vertical-align: middle;
        padding:5px;
        z-index: 10;

    }

    #controlPanelOpen {
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 10px;
        z-index: 0;
    }
    #chart_container {
        position: relative;
        width: 350px;
            height: 50px;
            font-family: Arial, Helvetica, sans-serif;
            float:right;
        text-align: right;
        font-size: .85em;
        }
    #iopschart {
            position: relative;
            left: 40px;
        }
    #y_axis {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 40px;
        }
    #menu {
        list-style: none;
        margin: 0;
        padding: 0;
        }
    #menu li {
        display:inline;
    }
    #menu li a {
        padding:10px ;
        text-align: center ;
        text-decoration: none ;
        }
    #menu li a:hover, #menu li a:focus, #menu li a:active {
        text-decoration: underline ;
        }


    #controlmenu {
        border: black solid 1px;
        position: absolute;
        top: 0px;
        right: 20px;
        margin: 10px;
        border-radius: 5px;
        vertical-align: middle;
        line-height: 40px;
        padding:5px;
        }

    </style>
</head>

<body  ng-controller="statusCtrl">

<header id="header" ng-include src="'partials/header.html'" ng-init="pageTitle='Ceph status'"></header>

<div>
<i id="controlPanelOpen" class="icon-eye-close button" title="show/hide modules" alt="show/view modules" ng-click="viewControlPanel=true"></i>
<div id="controlPanel" ng-show="viewControlPanel" class="animate-show">
    <i class="icon-remove closeButton" ng-click="viewControlPanel=false" style="float:right"></i>
    Display module: <br>
    <input type="checkbox" ng-model="viewMonitorModule" ng-change="showModule('viewMonitorModule',viewMonitorModule)"> Monitors<br>
    <input type="checkbox" ng-model="viewPgStatusModule" ng-change="showModule('viewPgStatusModule',viewPgStatusModule)"> PG status<br>
    <input type="checkbox" ng-model="viewCapacityModule" ng-change="showModule('viewCapacityModule',viewCapacityModule)"> Capacity<br>
    <input type="checkbox" ng-model="viewOsdModule" ng-change="showModule('viewOsdModule',viewOsdModule)"> OSDs<br>
    <input type="checkbox" ng-model="viewPoolModule" ng-change="showModule('viewPoolModule',viewPoolModule)"> Pools<br>
    <input type="checkbox" ng-model="viewMdsModule" ng-change="showModule('viewMdsModule',viewMdsModule)"> MDSs
</div>

<div id="container">
<div id="general_status">
    <div id="chart_container">
        <div id="y_axis"></div>
        <div id="iopschart"></div>
        Read : {{ read | bytes:kB }}/s , Write : {{ write | bytes:kB }} , Recovery : {{ recovery | bytes:kB }}/s
    </div>
    <h2>Cluster health at {{date | date:'HH:mm:ss'}}</h2>
    <div class="health_summary health_status_{{health.severity}}">
        <!-- showing warn or error details -->
        <i ng-controller="ModalDemoCtrl" class="icon-info-sign icon-white button" style="margin:5px" ng-click="open('lg')" ng-hide="healthSeverity =='HEALTH_OK'" title="show details">
            <script type="text/ng-template" id="myModalContent.html">
                <div class="modal-header">
                    <h3 class="modal-title text_health_status_{{ healthSeverity }}">{{ healthSeverity }} details</h3>
                    <div>Filter <input ng-model="search"></div>
                </div>
                <div class="modal-body">
                    <ul>
                        <li ng-repeat="item in details | filter: search">
                            <span ng-bind-html="item"></span>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" ng-click="refresh()">refresh</button>
                    <button class="btn btn-default" ng-click="close()">close</button>
                </div>
            </script>
        </i>
        {{health.summary}}</div>
    <div id="journal">
        <div ng-repeat="key in journal">{{key.date | date:'yyyy-MM-dd HH:mm:ss'}} : {{key.summary}}</div>
        <br>
    </div>

    <h3>history </h3>

</div>

<div id="mon_status" ng-show="viewMonitorModule" class="animate-show">
    <i class="icon-remove closeButton" title="hide" alt="hide" ng-click="showModule('viewMonitorModule',false)" style="float:right"></i>
    <h2>Monitors status</h2>

    <div ng-repeat="mon in mons" class=" tooltips health_status_{{mon.health}} quorum_{{mon.quorum}}">
        <div style="align-content: center">
            <div>
                {{mon.name}}
            <span>
            <table>
                <tr>
                    <td><strong>Monitor</strong></td>
                    <td><strong>{{mon.name}}</strong></td>
                </tr>
                <tr>
                    <td>health_detail</td>
                    <td><strong>{{mon.health_detail}} {{mon.details}} </strong></td>
                </tr>
                <tr>
                    <td>quorum</td>
                    <td>{{mon.quorum}}</td>
                </tr>
                <tr>
                    <td>rank</td>
                    <td>{{mon.rank}}</td>
                </tr>
                <tr>
                    <td>addr</td>
                    <td>{{mon.addr}}</td>
                </tr>
                <tr>
                    <td>skew</td>
                    <td>{{mon.skew}}</td>
                </tr>
                <tr>
                    <td>latency</td>
                    <td>{{mon.latency}}</td>
                </tr>
                <tr>
                    <td>last_updated</td>
                    <td>{{mon.last_updated}}</td>
                </tr>
                <tr>
                    <td colspan="2"><strong>monitor storage</strong><br><em>reflect data of the partition where monitor is installed</em></td>
                </tr>
                <tr>
                    <td>available percent</td>
                    <td>{{mon.avail_percent}}%</td>
                </tr>
                <tr>
                    <td>total</td>
                    <td>{{mon.kb_total*1024 | bytes:kB}}</td>
                </tr>
                <tr>
                    <td>available</td>
                    <td>{{mon.kb_avail*1024 | bytes:kB}}</td>
                </tr>
                <tr>
                    <td>used</td>
                    <td>{{mon.kb_used*1024 | bytes:kB}}</td>
                </tr>
            </table>
            </span>
            </div>

        </div>
    </div>
</div>

<div id="pg_status" ng-show="viewPgStatusModule" class="animate-show">
    <i class="icon-remove closeButton" title="hide" alt="hide" ng-click="showModule('viewPgStatusModule',false)" style="float:right"></i>
    <i ng-class="refreshPGcontrolClass" class="closeButton" title="refresh control" alt="refresh control" ng-click="refreshPGcontrol()" style="float:right"></i>
    <h2 onclick="document.location='poolspgsosds.html'" style="cursor:pointer">{{pgmap.num_pgs}} Placement groups</h2>
    <div ng-show="pgmap.degraded_objects!=0">
        <p class="text-warning"><i class="icon-warning-sign" ></i>
            {{ getPgmapMessage() }}
        </p>
    </div>
    <div id="pg_status_graph">
        <ad-pie id="pie01" value="pgsByState" width="330" labelfield="state_name" valuefield="count"></ad-pie>
    </div>

</div>

<div id="capacity_details" ng-show="viewCapacityModule" class="animate-show">
    <i class="icon-remove closeButton" title="hide" alt="hide" ng-click="showModule('viewCapacityModule',false)" style="float:right"></i>
    <h2>Avail. capacity :<br>{{pgmap.bytes_total - pgmap.bytes_used | bytes:MB}}</h2>
    <br><br>

    <div onclick="document.location='poolManagement.html'" style="cursor:pointer">
        <ad-gauge value="percentUsed" colormode="desc" width="350"></ad-gauge>
        <div class="gaugeLegend">
            {{pgmap.bytes_used | bytes:kB}} used <br>on {{pgmap.bytes_total | bytes:kB}}
        </div>
    </div>
</div>
<div id="osd_status" ng-show="viewOsdModule"  class="animate-show">
    <i class="icon-remove closeButton" title="hide" alt="hide" ng-click="showModule('viewOsdModule',false)" style="float:right"></i>
    <h2 onclick="document.location='osds.html'" class="clickable">{{osdsUp + osdsDown}} OSD </h2>
    <div ng-hide="osdControl<30">
        <a href="probes.html">
        <p class="text-warning"><i class="icon-warning-sign" ></i> osds not verified<br>since {{osdControl|duration}}</p>
        </a>
    </div>
    <div ng-hide="statOK">
        <a href="probes.html">
            <p class="text-warning"><i class="icon-warning-sign" ></i> some osd stats are missing</p>
        </a>
    </div>


    <div id="osd_status_details">
        <table>
            <tr>
                <td>&nbsp;</td>
                <td><div class="clickable"  onclick="document.location='osds.html?state=up'">UP</div></td>
                <td><div class="clickable"  onclick="document.location='osds.html?state=down'">DOWN</div></td>
            </tr>
            <tr>
                <td><div class="clickable"  onclick="document.location='osds.html?state=in'">IN</div></td>
                <td>
                    <div class="health_status_HEALTH_OK mybadge" onclick="document.location='osds.html?state=in+up'">{{osdsInUp}}</div>
                </td>
                <td>
                    <div class={{badgeClass("ERR",osdsInDown)}} onclick="document.location='osds.html?state=in+down'">
                        {{osdsInDown}}
                    </div>
                </td>
            </tr>
            <tr>
                <td><div class="clickable"  onclick="document.location='osds.html?state=out'">OUT</div></td>
                <td>
                    <div class={{badgeClass("WARN",osdsOutUp)}} onclick="document.location='osds.html?state=out+up'">
                        {{osdsOutUp}}
                    </div>
                </td>
                <td>
                    <div class={{badgeClass("WARN",osdsOutDown)}} onclick="document.location='osds.html?state=out+down'">
                        {{osdsOutDown}}
                    </div>
                </td>
            </tr>
            <tr><td colspan="3"><hr></td></tr>
            <tr>
                <td><div class="clickable"  onclick="document.location='osdMap.html?dispoMode=space'">Full</div></td>
                <td>
                    <!--div class={{badgeClass("WARN",osdsNearFull)}} onclick="document.location='osdMap.html?dispoMode=space'">
                        near
                    </div-->
                </td>
                <td>
                    <div class={{badgeClass("ERR",osdsFull)}} onclick="document.location='osdMap.html?dispoMode=space'">
                        full
                    </div>
                </td>
            </tr>
        </table>
    </div>


</div>
<div id="pool_status" ng-show="viewPoolModule" class="animate-show">
    <i class="icon-remove closeButton" title="hide" alt="hide" ng-click="showModule('viewPoolModule',false)" style="float:right"></i>
    <h2 onclick="document.location='poolspgsosds.html'" style="cursor:pointer">{{nbPools}} pools</h2>

    <div id="pool_status_details">
        <table style="float: right">
            <tr>
                <td>clean</td>
                <td>unclean</td>
            </tr>
            <tr><td>
                    <div class={{badgeClass("OK",cleanPools)}} onclick="document.location='poolspgsosds.html'">
                        {{cleanPools}}
                    </div>
                </td>
                <td>
                    <div class={{badgeClass("WARN",uncleanPools)}} onclick="document.location='poolspgsosds.html'">
                        {{uncleanPools}}
                    </div>
                </td>
            </tr>
        </table>


    </div>


</div>

<div id="mds_status" ng-show="viewMdsModule" class="animate-show">
    <i class="icon-remove closeButton" title="hide" alt="hide" ng-click="showModule('viewMdsModule',false)" style="float:right"></i>
    <h2>MDSs</h2>

    <div id="mds_status_details" ng-click="showFs()">
        <table style="float: right">
            <tr>
                <td style="text-align:left">up:in</td>
                <td>
                    <div class={{badgeClass("OK",mdsmap.up)}}>
                        {{mdsmap.up}}
                    </div>
                </td>
                <td>
                    <div class={{badgeClass("OK",mdsmap.in)}} >
                        {{mdsmap.in}}
                    </div>
                </td>
            </tr>
            <tr><td colspan=2 style="text-align:left">up:standby</td>
                <td>
                    <div class={{badgeClass("OK",mdsmap.up_standby)}} >
                        {{mdsmap.up_standby}}
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan=2 style="text-align:left">max</td>
                <td>
                    <div class={{badgeClass("UNKNOWN",mdsmap.max)}}>
                        {{mdsmap.max}}
                    </div>
                </td>
            </tr>
        </table>
    </div>


</div>

</div>
</div>
</body>
</html>
