<template> <section class="plugin" id="ports"> <div class="table-row" v-for="(port, portId) in ports" :key="portId"> <div class="table-cell text-left"> <!-- prettier-ignore --> {{ $filters.minSize(port.description ? port.description : port.host + ' ' + port.port, 20) }} </div> <div class="table-cell"></div> <div :class="getPortDecoration(port)" class="table-cell" v-if="port.host"> <span v-if="port.status == 'null'">Scanning</span> <span v-else-if="port.status == 'false'">Timeout</span> <span v-else-if="port.status == 'true'">Open</span> <span v-else>{{ $filters.number(port.status * 1000.0, 0) }}ms</span> </div> <div :class="getWebDecoration(port)" class="table-cell" v-if="port.url"> <span v-if="port.status == 'null'">Scanning</span> <span v-else-if="port.status == 'Error'">Error</span> <span v-else>Code {{ port.status }}</span> </div> </div> </section> </template> <script> export default { props: { data: { type: Object } }, computed: { stats() { return this.data.stats['ports']; }, ports() { return this.stats; } }, methods: { getPortDecoration(port) { if (port.status === null) { return 'careful'; } else if (port.status === false) { return 'critical'; } else if (port.rtt_warning !== null && port.status > port.rtt_warning) { return 'warning'; } return 'ok'; }, getWebDecoration(web) { const okCodes = [200, 301, 302]; if (web.status === null) { return 'careful'; } else if (okCodes.indexOf(web.status) === -1) { return 'critical'; } else if (web.rtt_warning !== null && web.elapsed > web.rtt_warning) { return 'warning'; } return 'ok'; } } }; </script>