<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> |