<template> <div v-if="args.disable_process">PROCESSES DISABLED (press 'z' to display)</div> <div v-else> <glances-plugin-processcount :sorter="sorter" :data="data"></glances-plugin-processcount> <div class="row" v-if="!args.disable_amps"> <div class="col-lg-18"> <glances-plugin-amps :data="data"></glances-plugin-amps> </div> </div> <glances-plugin-processlist :sorter="sorter" :data="data" @update:sorter="args.sort_processes_key = $event" ></glances-plugin-processlist> </div> </template> <script> import { store } from '../store.js'; import GlancesPluginAmps from './plugin-amps.vue'; import GlancesPluginProcesscount from './plugin-processcount.vue'; import GlancesPluginProcesslist from './plugin-processlist.vue'; export default { components: { GlancesPluginAmps, GlancesPluginProcesscount, GlancesPluginProcesslist }, props: { data: { type: Object } }, data() { return { store, sorter: undefined }; }, computed: { args() { return this.store.args || {}; }, sortProcessesKey() { return this.args.sort_processes_key; } }, watch: { sortProcessesKey: { immediate: true, handler(sortProcessesKey) { const sortable = [ 'cpu_percent', 'memory_percent', 'username', 'timemillis', 'num_threads', 'io_counters', 'name' ]; function isReverseColumn(column) { return !['username', 'name'].includes(column); } function getColumnLabel(value) { const labels = { io_counters: 'disk IO', cpu_percent: 'CPU consumption', memory_percent: 'memory consumption', cpu_times: 'process time', username: 'user name', name: 'process name', timemillis: 'process time', 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>