90 lines
3.7 KiB
HTML
90 lines
3.7 KiB
HTML
<div>
|
|
<div
|
|
v-if="!node"
|
|
>
|
|
<h3>Daten werden geladen...</h3>
|
|
</div>
|
|
<div
|
|
v-if="node"
|
|
class="flex row"
|
|
>
|
|
<div>
|
|
<h1>Knoten {{ node.Name }} <span v-if="node.Comment">( {{ node.Comment }} )</span></h1>
|
|
|
|
<div class="p">
|
|
<a
|
|
v-for="uri in node.URIs"
|
|
:href="uri.Scheme + '://' + uri.Authority + uri.Path"
|
|
target="_blank"
|
|
class="protolink"
|
|
> {{ uri.Scheme.toUpperCase() }} </a>
|
|
</div>
|
|
|
|
<div class="flex column">
|
|
<h3>Prüfungen</h3>
|
|
|
|
<table id="checkStates">
|
|
<thead>
|
|
<tr>
|
|
<td>Check</td>
|
|
<td>Zeit in aktuellem Status</td>
|
|
<td>Verlauf</td>
|
|
<td>Messwerte</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="checkState in node.CheckStates"
|
|
:class="'issue-' + checkState.CheckState"
|
|
>
|
|
<td>{{ checkState.CheckName }}</td>
|
|
<td>{{ timespan(checkState.currentStateTime) }}</td>
|
|
<td>
|
|
<div
|
|
v-for="hstate in checkState.History.slice(0,8)"
|
|
class="flex row"
|
|
v-bind:class="'issue-'+hstate.NewState"
|
|
>
|
|
<span class="grow">{{ hstate.NewState }}</span>
|
|
<span style="margin-left: 12px;">{{ timespan(hstate.duration) }}</span>
|
|
</div>
|
|
</td>
|
|
<td><div
|
|
v-for="perfValue in checkState.PerformanceValues"
|
|
:class="'issue-' + perfValue.CheckState"
|
|
@click="loadGraph(perfValue)"
|
|
>{{ perfValue.PerfName }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<textarea>{{ JSON.stringify( node ) }}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="flex column grow" id="graphs">
|
|
<div class="controls">
|
|
<div class="center">
|
|
Intervall
|
|
<ln-slider
|
|
v-model="graphInterval"
|
|
v-bind:values="viewIntervals"
|
|
@change="loadGraphs(node,this.graphInterval,this.graphShift);"
|
|
></ln-slider>
|
|
</div>
|
|
<div class="center">
|
|
Verschiebung
|
|
<ln-slider
|
|
v-bind:max="48 * graphInterval"
|
|
v-bind:step="graphInterval * 0.25"
|
|
v-model="graphShift"
|
|
@change="loadGraphs(node,this.graphInterval,this.graphShift);"
|
|
></ln-slider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|