ui/app/components/info-multi-stats/template.hbs

87 lines
4.0 KiB
Handlebars

{{#if showGraphs}}
<div class="row">
<div class="col span-6">
<div >
<div>
<label class="section text-muted">{{t 'infoMultiStats.cpuSection.labelText'}}</label>
<div class="container-legend pull-right">
<span class="ml-20 legend-circle-system"></span> {{t 'infoMultiStats.cpuSection.system'}}
<span class="ml-10 legend-circle-user"></span> {{t 'infoMultiStats.cpuSection.user'}}
</div>
<hr>
<div class="info-graph {{unless active 'hide'}}">
<div id="cpuGraph"></div>
</div>
<div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
<i class="icon icon-spinner icon-spin"></i> {{t 'infoMultiStats.connecting'}}
</div>
<div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
{{t 'infoMultiStats.utilizationStats'}}
</div>
</div>
</div>
<div class="no-padding-margin mt-20">
<div>
<label class="section text-muted">{{t 'infoMultiStats.networkSection.labelText'}}</label>
<div class="container-legend pull-right">
<span class="ml-20 legend-circle-transmit"></span> {{t 'infoMultiStats.networkSection.transmit'}}
<span class="ml-10 legend-circle-receive"></span> {{t 'infoMultiStats.networkSection.receive'}}
</div>
<hr>
<div class="info-graph {{unless active 'hide'}}">
<div id="networkGraph"></div>
</div>
<div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
<i class="icon icon-spinner icon-spin"></i> {{t 'infoMultiStats.connecting'}}
</div>
<div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
{{t 'infoMultiStats.utilizationStats'}}
</div>
</div>
</div>
</div>
<div class="col span-6">
<div>
<div>
<label class="section text-muted">{{t 'infoMultiStats.memorySection.labelText'}}</label>
<div class="container-legend pull-right">
<span class="ml-20 legend-circle-used"></span> {{t 'infoMultiStats.memorySection.used'}}
</div>
<hr>
<div class="{{unless active 'hide'}}">
<div id="memoryGraph"></div>
</div>
<div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
<i class="icon icon-spinner icon-spin"></i> {{t 'infoMultiStats.connecting'}}
</div>
<div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
{{t 'infoMultiStats.utilizationStats'}}
</div>
</div>
</div>
<div class="no-padding-margin mt-20">
<div>
<label class="section text-muted">{{t 'infoMultiStats.storageSection.labelText'}}</label>
<div class="container-legend pull-right">
<span class="ml-20 legend-circle-write"></span> {{t 'infoMultiStats.storageSection.write'}}
<span class="ml-10 legend-circle-read"></span> {{t 'infoMultiStats.storageSection.read'}}
</div>
<hr>
<div class="info-graph {{unless active 'hide'}}">
<div id="storageGraph"></div>
</div>
<div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
<i class="icon icon-spinner icon-spin"></i> {{t 'infoMultiStats.connecting'}}
</div>
<div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
{{t 'infoMultiStats.utilizationStats'}}
</div>
</div>
</div>
</div>
</div>
{{/if}}