ln.skyscanner/www/vue/ln.skyscanner.issues.html

<div>
    <h1>Aktuelle Störfälle (<span id="lastUpdate">{{ skyscanner.lastIssueUpdate }}</span>)</h1>
    <div style="border-bottom: 1px solid black; margin-bottom: 12px;">
        <div @click="view.CRITICAL = !view.CRITICAL" style="display: inline-block; width: 120px;" v-bind:class="{ DISABLED: !view.CRITICAL }">Kritisch: <span id="nCRITICAL" class="CRITICAL">{{ skyscanner.issues.CRITICAL }}</span></div>
        <div @click="view.WARN = !view.WARN" style="display: inline-block; width: 120px;" v-bind:class="{ DISABLED: !view.WARN }">Warnungen: <span id="nWARN" class="WARN">{{ skyscanner.issues.WARN }}</span></div>
        <div @click="view.OK = !view.OK" style="display: inline-block; width: 120px;" v-bind:class="{ DISABLED: !view.OK }">OK &lt; 600s: <span id="nOK" class="OK" v-bind:class="{ DISABLED: !view.OK }">{{ skyscanner.issues.OK }}</span></div>
    </div>

    <table id="issues" style="width: 100%;">
        <thead>
            <tr>
                <td>Knoten</td>
                <td>Anmerkungen</td>
                <td>Check</td>
                <td>Zeit in aktuellem Status ( / im letzten Status)</td>
                <td>Relevante Messwerte</td>
            </tr>
        </thead>
        <tbody>
            <tr
                v-for="node in CurrentIssues"
                :class="'issue-' + node.checkState"
                v-if="view[node.checkState]"
            >
                <td><router-link :to="'/vue/nodes/' + node.ID" target="_blank">{{ node.Name }}</router-link><br>
                <span style="color: black;">{{ node.Vendor }} / {{ node.Product }}</span></td>
                <td>{{ node.Comment }}</td>
                <td>
                    <span
                        v-for="checkState in node.CheckStates"
                        :class="'issue-' + checkState.CheckState"
                    >{{ checkState.CheckName }}<br></span>
                </td>
                <td>
                    <span
                        v-for="checkState in node.CheckStates"
                        :class="'issue-' + checkState.CheckState"
                    >{{ timespan(checkState.currentStateTime) + " " + checkState.previousCheckState }}<br></span>
                </td>
                <td>
                    <div
                        v-for="checkState in node.CheckStates"
                        v-if="checkState.CheckState != 'OK'"
                        >
                        <div
                            v-for="perfValue in checkState.PerformanceValues"
                            v-if="perfValue.CheckState != 'OK'"
                            >{{ perfValue.PerfName }}</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>