diff options
Diffstat (limited to 'glances/outputs/static/js/components/plugin-containers.vue')
| -rw-r--r-- | glances/outputs/static/js/components/plugin-containers.vue | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/glances/outputs/static/js/components/plugin-containers.vue b/glances/outputs/static/js/components/plugin-containers.vue new file mode 100644 index 00000000..10099ccc --- /dev/null +++ b/glances/outputs/static/js/components/plugin-containers.vue @@ -0,0 +1,175 @@ +<template> + <section id="containers-plugin" class="plugin" v-if="containers.length"> + <span class="title">CONTAINERS</span> + {{ containers.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }} + <div class="table"> + <div class="table-row"> + <div class="table-cell text-left">Engine</div> + <div class="table-cell text-left">Pod</div> + <div + class="table-cell text-left" + :class="['sortable', sorter.column === 'name' && 'sort']" + @click="args.sort_processes_key = 'name'" + > + Name + </div> + <div class="table-cell">Status</div> + <div class="table-cell">Uptime</div> + <div + class="table-cell" + :class="['sortable', sorter.column === 'cpu_percent' && 'sort']" + @click="args.sort_processes_key = 'cpu_percent'" + > + CPU% + </div> + <div + class="table-cell" + :class="['sortable', sorter.column === 'memory_percent' && 'sort']" + @click="args.sort_processes_key = 'memory_percent'" + > + MEM + </div> + <div class="table-cell">/MAX</div> + <div class="table-cell">IOR/s</div> + <div class="table-cell">IOW/s</div> + <div class="table-cell">RX/s</div> + <div class="table-cell">TX/s</div> + <div class="table-cell text-left">Command</div> + </div> + <div + class="table-row" + v-for="(container, containerId) in containers" + :key="containerId" + > + <div class="table-cell text-left">{{ container.engine }}</div> + <div class="table-cell text-left">{{ container.pod_id || '-' }}</div> + <div class="table-cell text-left">{{ container.name }}</div> + <div class="table-cell" :class="container.status == 'Paused' ? 'careful' : 'ok'"> + {{ container.status }} + </div> + <div class="table-cell"> + {{ container.uptime }} + </div> + <div class="table-cell"> + {{ $filters.number(container.cpu_percent, 1) }} + </div> + <div class="table-cell"> + {{ $filters.bytes(container.memory_usage) }} + </div> + <div class="table-cell"> + {{ $filters.bytes(container.limit) }} + </div> + <div class="table-cell"> + {{ $filters.bits(container.ior / container.io_time_since_update) }} + </div> + <div class="table-cell"> + {{ $filters.bits(container.iow / container.io_time_since_update) }} + </div> + <div class="table-cell"> + {{ $filters.bits(container.rx / container.net_time_since_update) }} + </div> + <div class="table-cell"> + {{ $filters.bits(container.tx / container.net_time_since_update) }} + </div> + <div class="table-cell text-left"> + {{ container.command }} + </div> + </div> + </div> + </section> +</template> + +<script> +import { orderBy } from 'lodash'; +import { store } from '../store.js'; + +export default { + props: { + data: { + type: Object + } + }, + data() { + return { + store, + sorter: undefined + }; + }, + computed: { + args() { + return this.store.args || {}; + }, + sortProcessesKey() { + return this.args.sort_processes_key; + }, + stats() { + return this.data.stats['containers']; + }, + containers() { + const { sorter } = this; + const containers = (this.stats.containers || []).map((containerData) => { + // prettier-ignore + return { + 'id': containerData.Id, + 'name': containerData.name, + 'status': containerData.Status, + 'uptime': containerData.Uptime, + 'cpu_percent': containerData.cpu.total, + 'memory_usage': containerData.memory.usage != undefined ? containerData.memory.usage : '?', + 'limit': containerData.memory.limit != undefined ? containerData.memory.limit : '?', + 'ior': containerData.io.ior != undefined ? containerData.io.ior : '?', + 'iow': containerData.io.iow != undefined ? containerData.io.iow : '?', + 'io_time_since_update': containerData.io.time_since_update, + 'rx': containerData.network.rx != undefined ? containerData.network.rx : '?', + 'tx': containerData.network.tx != undefined ? containerData.network.tx : '?', + 'net_time_since_update': containerData.network.time_since_update, + 'command': containerData.Command.join(' '), + 'image': containerData.Image, + 'engine': containerData.engine, + 'pod_id': containerData.pod_id + }; + }); + return orderBy( + containers, + [sorter.column].reduce((retval, col) => { + if (col === 'memory_percent') { + col = ['memory_usage']; + } + return retval.concat(col); + }, []), + [sorter.isReverseColumn(sorter.column) ? 'desc' : 'asc'] + ); + } + }, + watch: { + sortProcessesKey: { + immediate: true, + handler(sortProcessesKey) { + const sortable = ['cpu_percent', 'memory_percent', 'name']; + function isReverseColumn(column) { + return !['name'].includes(column); + } + function getColumnLabel(value) { + const labels = { + io_counters: 'disk IO', + cpu_percent: 'CPU consumption', + memory_usage: 'memory consumption', + cpu_times: 'uptime', + name: 'container name', + None: 'None' + }; + return labels[value] || value; + } + if (!sortProcessesKey || sortable.includes(sortProcessesKey)) { + this.sorter = { + column: this.args.sort_processes_key || 'cpu_percent', + auto: !this.args.sort_processes_key, + isReverseColumn, + getColumnLabel + }; + } + } + } + } +}; +</script>
\ No newline at end of file |