157 lines
5.4 KiB
HTML
157 lines
5.4 KiB
HTML
<div id="histogramsvg">
|
|
<div id="spinner" ng-show="fetchingAlerts"></div>
|
|
<div>
|
|
<svg id="histogram" ng-attr-width="{{svgWidth}}"
|
|
ng-attr-height="{{svgHeight}}" ng-hide="formDisplayed">
|
|
<g id="header">
|
|
<text x="335" y="14" ng-show="reporttype == 'hosts'">
|
|
State History for Host '{{host}}'
|
|
</text>
|
|
<text x="335" y="14"
|
|
ng-show="reporttype == 'services'">
|
|
State History for Service '{{service}}'
|
|
on Host '{{host}}'
|
|
</text>
|
|
<text x="335" y="31" id="timespan">
|
|
{{startTime | date:'EEE MMM dd HH:mm:ss yyyy'}} to
|
|
{{endTime | date:'EEE MMM dd HH:mm:ss yyyy'}}
|
|
</text>
|
|
</g>
|
|
<g id="grid" transform="translate(60,40)">
|
|
<g id="outline">
|
|
<line x1="0" y1="0" x2="0" y2="196"
|
|
style="stroke-width: 1px; stroke: rgb(0, 0, 0);"></line>
|
|
<line x1="0" y1="196" x2="550" y2="196"
|
|
style="stroke-width: 1px; stroke: rgb(0, 0, 0);"></line>
|
|
<line x1="550" y1="196" x2="550" y2="0"
|
|
style="stroke-width: 1px; stroke: rgb(0, 0, 0);"></line>
|
|
</g>
|
|
<g id="xaxis"></g>
|
|
<g id="xaxis-label">
|
|
<text x="275" y="276" style="text-anchor: middle;">
|
|
{{statisticsBreakdownLabel(breakdown)}}
|
|
</text>
|
|
</g>
|
|
<g id="yaxis" transform="translate(550,0)"></g>
|
|
<g id="yaxis-label">
|
|
<text transform="rotate(-90) translate(-98,-30)"
|
|
style="text-anchor: middle;">
|
|
Number of Events
|
|
</text>
|
|
</g>
|
|
</g>
|
|
<g class="summary" transform="translate(620,40)"
|
|
ng-show="reporttype == 'hosts'">
|
|
<text x="4" y="10" class="label">EVENT TYPE</text>
|
|
<text x="133" y="10" class="value">MIN</text>
|
|
<text x="170" y="10" class="value">MAX</text>
|
|
<text x="206" y="10" class="value">SUM</text>
|
|
<text x="248" y="10" class="value">AVG</text>
|
|
<line x1="4" y1="15" x2="276" y2="15"></line>
|
|
<text x="4" y="28" class="label up">Recovery (Up):</text>
|
|
<text x="133" y="28" class="value">
|
|
{{summary[breakdown].minima.up}}
|
|
</text>
|
|
<text x="170" y="28" class="value">
|
|
{{summary[breakdown].maxima.up}}
|
|
</text>
|
|
<text x="206" y="28" class="value">
|
|
{{summary[breakdown].totals.up}}
|
|
</text>
|
|
<text x="248" y="28" class="value">
|
|
{{summary[breakdown].totals.up / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
<text x="4" y="46" class="label down">Down:</text>
|
|
<text x="133" y="46" class="value">
|
|
{{summary[breakdown].minima.down}}
|
|
</text>
|
|
<text x="170" y="46" class="value">
|
|
{{summary[breakdown].maxima.down}}
|
|
</text>
|
|
<text x="206" y="46" class="value">
|
|
{{summary[breakdown].totals.down}}
|
|
</text>
|
|
<text x="248" y="46" class="value">
|
|
{{summary[breakdown].totals.down / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
<text x="4" y="64" class="label unreachable">
|
|
Unreachable:
|
|
</text>
|
|
<text x="133" y="64" class="value">
|
|
{{summary[breakdown].minima.unreachable}}
|
|
</text>
|
|
<text x="170" y="64" class="value">
|
|
{{summary[breakdown].maxima.unreachable}}
|
|
</text>
|
|
<text x="206" y="64" class="value">
|
|
{{summary[breakdown].totals.unreachable}}
|
|
</text>
|
|
<text x="248" y="64" class="value">
|
|
{{summary[breakdown].totals.unreachable / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
</g>
|
|
<g class="summary" transform="translate(620,40)"
|
|
ng-show="reporttype == 'services'">
|
|
<text x="4" y="10" class="label">EVENT TYPE</text>
|
|
<text x="133" y="10" class="value">MIN</text>
|
|
<text x="170" y="10" class="value">MAX</text>
|
|
<text x="206" y="10" class="value">SUM</text>
|
|
<text x="248" y="10" class="value">AVG</text>
|
|
<line x1="4" y1="15" x2="276" y2="15"></line>
|
|
<text x="4" y="28" class="label ok">Recovery (Ok):</text>
|
|
<text x="133" y="28" class="value">
|
|
{{summary[breakdown].minima.ok}}
|
|
</text>
|
|
<text x="170" y="28" class="value">
|
|
{{summary[breakdown].maxima.ok}}
|
|
</text>
|
|
<text x="206" y="28" class="value">
|
|
{{summary[breakdown].totals.ok}}
|
|
</text>
|
|
<text x="248" y="28" class="value">
|
|
{{summary[breakdown].totals.ok / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
<text x="4" y="46" class="label warning">Warning:</text>
|
|
<text x="133" y="46" class="value">
|
|
{{summary[breakdown].minima.warning}}
|
|
</text>
|
|
<text x="170" y="46" class="value">
|
|
{{summary[breakdown].maxima.warning}}
|
|
</text>
|
|
<text x="206" y="46" class="value">
|
|
{{summary[breakdown].totals.warning}}
|
|
</text>
|
|
<text x="248" y="46" class="value">
|
|
{{summary[breakdown].totals.warning / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
<text x="4" y="64" class="label unknown">Unknown:</text>
|
|
<text x="133" y="64" class="value">
|
|
{{summary[breakdown].minima.unknown}}
|
|
</text>
|
|
<text x="170" y="64" class="value">
|
|
{{summary[breakdown].maxima.unknown}}
|
|
</text>
|
|
<text x="206" y="64" class="value">
|
|
{{summary[breakdown].totals.unknown}}
|
|
</text>
|
|
<text x="248" y="64" class="value">
|
|
{{summary[breakdown].totals.unknown / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
<text x="4" y="82" class="label critical">Critical:</text>
|
|
<text x="133" y="82" class="value">
|
|
{{summary[breakdown].minima.critical}}
|
|
</text>
|
|
<text x="170" y="82" class="value">
|
|
{{summary[breakdown].maxima.critical}}
|
|
</text>
|
|
<text x="206" y="82" class="value">
|
|
{{summary[breakdown].totals.critical}}
|
|
</text>
|
|
<text x="248" y="82" class="value">
|
|
{{summary[breakdown].totals.critical / getBreakdownPeriods() | number:2}}
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|