{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Cluster Status" %}{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title=_("Dashboard") %}
    <link href="{{ STATIC_URL }}dashboard/css/common.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}dashboard/css/dashboard.css" rel="stylesheet">
 
{% endblock page_header %}

{% block main %}
    {% csrf_token %}
     <!--The frame work of dashboard-->
    <div id="framework">
        <!--the main area-->
        <div id="divMain">

            <!--VSM Info summary-->
            <div id="divVSMVersion" class="vsm-block">
                 <h4 id="lblVSMVersionInfo" class="vsm-block-title" >
                 {% trans "VSM Status" %}
                 </h4>
                 <div id="divVSMVersionContent"  class="vsm-block-content">
                    <span id="lblVersionMark" class="vsm-label-90">{% trans "VSM Version" %}:</span>
                    <span id="lblVersion" class="vsm-label-90">--</span>
                    
                    <span id="lblVersionUpdateMark" class="vsm-label-90">{% trans "Uptime" %}:</span>
                    <span id="lblVersionUpdate" class="vsm-label-90">--</span>
                    
                    <span id="lblCephVersionMark" class="vsm-label-90">{% trans "Ceph Version" %}:</span>
                    <span id="lblCephVersion" class="vsm-label-90">--</span>                   
                </div>  
            </div>


            <!--VSM Cluster summary-->
            <div id="divCluster" class="vsm-block">
                <h4 class="vsm-block-title">{% trans "Cluster Status" %}</h4>
                <div id="divVSMVersionContent"  class="vsm-block-content">
                    <div id="divClusterNote" >
                        <div >
                            <span id="lblClusterName" class="vsm-label"></span>        
                            <span id="lblClusterTip" class="cluster-tip cluster-tip-health">--</span>
                        </div>
                        <div id="divClusterContent" class="alert alert-success"  role="alert">
                            
                        </div>
                    </div>
                    <div id="divCapacity">
                        <div id="divClusterGauge"></div>
                        <div id="divCapacityInfo">
                            <table id="tCapacityInfo">
                                <tr>
                                    <td id="tCapacityLabel"><span id="lblCapacityUsedMark">{% trans "Used" %}:</span></td>
                                    <td id="tCapacityValue"><span id="lblCapacityUsed">--</span></td>
                                </tr>
                                <tr>
                                    <td id="tCapacityLabel"><span id="lblCapacityTotalMark">{% trans "Total" %}:</span></td>
                                    <td id="tCapacityValue"><span id="lblCapacityTotal" >--</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!--Storage summary-->
             <div id="divStorage" class="vsm-block">
                <h4 class="vsm-block-title">{% trans "Storage Group" %}</h4>
                <a href="/dashboard/vsm/storage-group-status/" class="vsm-block-link">
                    <img id="imgStorageInfo" class="vsm-status-icon" src="{{ STATIC_URL }}dashboard/img/info_health.png" />
                </a>
                <div id="divStorageContent" class="vsm-block-content">
                    <span id="lblStorageUpdateMark" class="vsm-label-60">{% trans "Updated at" %}:</span>
                    <span id="lblStorageUpdate" class="vsm-label-60">--</span>
                    <br/>
                    <table id="tStorage">
                        <tbody>
                            <tr id="trStorageLabel">
                                <td>{% trans "Normal" %}</td>
                                <td>{% trans "Near Full" %}</td>
                                <td>{% trans "Full" %}</td>
                            </tr>
                            <tr id="trStorageMark">
                                <td>
                                    <div id="divStorageNormal" class="vsm-rect vsm-rect-green">0</div>
                                </td>
                                <td>
                                    <div id="divStorageNearFull" class="vsm-rect vsm-rect-orange">0</div>
                                </td>
                                <td>
                                    <div id="divStorageFull" class="vsm-rect vsm-rect-red">0</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!--OSD Area-->
            <div id="divOSD" class="vsm-block">
                <h4 class="vsm-block-title">{% trans "OSD" %}</h4>
                <a href="/dashboard/vsm/osd-status/" class="vsm-block-link">
                    <img id="imgOSDInfo" class="vsm-status-icon" src="{{ STATIC_URL }}dashboard/img/info_health.png" />
                </a>
                    <div id="divOSDContent" class="vsm-block-content">
                        <span id="lblOSDEpochMark" class="vsm-label-60">{% trans "Epoch" %}:</span>
                        <span id="lblOSDEpoch" class="vsm-label-60">--</span>
                        <br>
                        <span id="lblOSDUpdateMark" class="vsm-label-60">{% trans "Updated at" %}:</span>
                        <span id="lblOSDUpdate" class="vsm-label-60">--</span>
                        <br />
                        <table id="tOSD">
                            <tbody>
                                <tr id="trOSD_Up_Down" >
                                    <td class="td-60"></td>
                                    <td class="td-150">{% trans "Up" %}</td>
                                    <td class="td-150">{% trans "Down" %}</td>
                                </tr>
                                <tr >
                                    <td>{% trans "In" %}</td>
                                    <td>
                                        <div id="divOSD_INUP" class="vsm-rect vsm-rect-green">0</div>
                                    </td>
                                    <td>
                                        <div id="divOSD_INDOWN" class="vsm-rect vsm-rect-red">0</div>
                                    </td>
                                </tr>
                                <tr >
                                    <td>{% trans "Out" %}</td>
                                    <td>
                                        <div id="divOSD_OUTUP" class="vsm-rect vsm-rect-orange">0</div>
                                    </td>
                                    <td>
                                        <div id="divOSD_OUTDOWN" class="vsm-rect vsm-rect-gray">0</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table id="tDeviceCapacity">
                        <tbody>
                            <tr id="trDeviceCapacity">
                                <td>{% trans "Normal" %}</td>
                                <td>{% trans "Near Full" %}</td>
                                <td>{% trans "Full" %}</td>
                            </tr>
                            <tr id="trStorageMark">
                                <td>
                                    <div id="lblOSDCapacityAvailable" class="vsm-rect vsm-rect-green">0</div>
                                </td>
                                <td>
                                    <div id="lblOSDCapacityNearFull" class="vsm-rect vsm-rect-orange">0</div>
                                </td>
                                <td>
                                    <div id="lblOSDCapacityFull" class="vsm-rect vsm-rect-red">0</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    </div>
            </div> 


             <!--Monitor Area-->
            <div id="divMonitor" class="vsm-block">
                <h4 class="vsm-block-title">{% trans "Monitor" %}</h4>
                <a href="/dashboard/vsm/monitor-status/" class="vsm-block-link">
                    <img id="imgMonitorInfo" class="vsm-status-icon" src="{{ STATIC_URL }}dashboard/img/info_health.png" />
                </a>
                <div id="divMonitorContent" class="vsm-block-content">
                    <div>
                        <span id="lblMonitorEpochMark" class="vsm-label-60">{% trans "Epoch" %}:</span>
                        <span id="lblMonitorEpoch" class="vsm-label-60">--</span>
                        <br>
                        <span id="lblMonitorUpdateMark" class="vsm-label-60">{% trans "Updated at" %}:</span>
                        <span id="lblMonitorUpdate" class="vsm-label-60">--</span>
                    </div>
                    <div id="divMonitorRect">

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


            <!--MDS Area-->
            <div id="divMDS" class="vsm-block">
                <h4 class="vsm-block-title">{% trans "MDS" %}</h4>
                <a href="/dashboard/vsm/mds-status/" class="vsm-block-link">
                    <img id="imgMDSInfo" class="vsm-status-icon" src="{{ STATIC_URL }}dashboard/img/info_health.png" />
                </a>
                <div id="divMDSContent" class="vsm-block-content">
                    <div>
                        <span id="lblMDSEpochMark" class="vsm-label-60">{% trans "Epoch" %}:</span>
                        <span id="lblMDSEpoch" class="vsm-label-60">--</span>
                        <br>
                        <span id="lblMDSUpdateMark" class="vsm-label-60">{% trans "Updated at" %}:</span>
                        <span id="lblMDSUpdate" class="vsm-label-60">--</span>
                    </div>
                    <div id="divMDSRect">
                         <table id="tMDS">
                            <tr>
                                <td class="td-100">
                                    {% trans "Data" %}
                                </td>
                                <td class="td-100">
                                    {% trans "In" %}
                                </td>
                                <td class="td-100">
                                    {% trans "Up" %}
                                </td>
                            </tr>
                            <tr>
                                <td class="td-100">
                                     <div id="divMDS_Data" class="vsm-rect vsm-rect-gray">--</div>
                                </td>
                                <td class="td-100">
                                    <div id="divMDS_IN" class="vsm-rect  vsm-rect-green">0</div>
                                </td >
                                <td class="td-100">
                                    <div id="divMDS_UP" class="vsm-rect vsm-rect-blue">0</div>
                                </td >
                            </tr>
                            <tr>
                                <td class="td-100">
                                    {% trans "Metadata" %}
                                </td >
                                <td class="td-100">
                                    {% trans "Failed" %}
                                </td >
                                <td class="td-100">
                                    {% trans "Stopped" %}
                                </td >
                            </tr>
                            <tr>
                                <td class="td-100">
                                    <div id="divMDS_Metadata" class="vsm-rect vsm-rect-gray">--</div>
                                </td>
                                <td class="td-100">
                                    <div id="divMDS_FAILED" class="vsm-rect  vsm-rect-red">0</div>
                                </td >
                                <td class="td-100">
                                    <div id="divMDS_STOPPED" class="vsm-rect vsm-rect-orange">0</div>
                                </td >
                            </tr>
                         </table>
                    </div>
                </div>
            </div>


            <!--Pool Area-->
            <div id="divPG" class="vsm-block">
                <h4 class="vsm-block-title">{% trans "PG" %}</h4>
                <a href="/dashboard/vsm/pg-status/" class="vsm-block-link">
                     <img id="imgMDSInfo" class="vsm-status-icon" src="{{ STATIC_URL }}dashboard/img/info_health.png" />
                </a>
                <div id="divPGContent" class="vsm-block-content">
                    <span id="lblPGUpdateMark" class="vsm-label-60">{% trans "Updated at" %}:</span>
                    <span id="lblPGUpdate" class="vsm-label-60">--</span>
                    <br />
                    <div id="divPGRect"> 
                    </div>
                </div>
               
            </div>
                

            <!--VSM Throughput & Latency-->
            <div id="divPerformance" style="border:0px solid #ccc;overflow:hidden;float:left;width:100%">
                <div id="divPerformanceOption" style="height:60px;line-height:30px;border-bottom:0px solid #ccc;padding:5px;overflow:hidden;width:100%">
                     <h4 style="display:inline-block">{% trans "Performance" %}</h4>
                     <img id="imgExpandCollapse" src="{{ STATIC_URL }}dashboard/img/collapse.png" onclick="ShowPerformance()" />
                     <hr/>
                </div>
                <div id="divPerformanceDisabledText">
                    <label>{% trans "Disabled:" %}</label>
                    <span>{% trans "Performance graphs are disabled. Enable in VSM settings" %}</span>
                </div>
                <div id="divPerformanceContainer" >
                    <div id="divIOPs" class="vsm-block">
                        <h4 class="vsm-block-title">{% trans "IOPS" %}</h4>
                        <div class="vsm-block-content">
                             <div id="divIOPsContent" class="vsm-chart-rect">
                             </div>
                        </div>
                    </div>
                    <div id="divLatency" class="vsm-block">
                         <h4 class="vsm-block-title">{% trans "Latency (MilliSeconds)" %}</h4>
                         <div class="vsm-block-content">
                            <div id="divLatencyContent" class="vsm-chart-rect">
                            </div>
                         </div>
                    </div>
                    <div id="divBandwidth" class="vsm-block">
                         <h4 class="vsm-block-title">{% trans "Bandwidth (MB/s)" %}</h4>
                         <div class="vsm-block-content">
                            <div id="divBandwidthContent" class="vsm-chart-rect">
                            </div>
                         </div>
                    </div>
                    <div id="divCPU" class="vsm-block">
                         <h4 class="vsm-block-title">{% trans "CPU (%)" %}</h4>
                         <div class="vsm-block-content">
                            <div id="divCPUContent" class="vsm-chart-rect">
                            </div>
                         </div>
                    </div>
            </div>
        </div>
    </div>

    <div id="divFooter" style="width:100%;height:60px;clear:both">
    </div>
{% endblock %}
{% block js %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}lib/echarts.js"></script>
    <script src="{{ STATIC_URL }}dashboard/js/message.js"></script> 
    <script src="{{ STATIC_URL }}dashboard/js/dashboard.js"></script>
{% endblock %}