????
Current Path : /usr/lib/python3.6/site-packages/glances/outputs/static/js/components/ |
Current File : //usr/lib/python3.6/site-packages/glances/outputs/static/js/components/plugin-docker.vue |
<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" :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.name }}</div> <div class="table-cell" :class="container.status == 'Paused' ? 'careful' : 'ok'"> {{ container.status }} </div> <div class="table-cell" :class="container.status == 'Paused' ? 'careful' : 'ok'"> {{ 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['docker']; }, 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 }; }); 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>