<template>
    <section v-if="vms.length" id="vms" class="plugin">
        <span class="title">VMs</span>
        <span v-show="vms.length > 1">{{ vms.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}</span>
        <table class="table table-sm table-borderless table-striped table-hover">
            <thead>
                <tr>
                    <td v-show="showEngine">Engine</td>
                    <td :class="['sortable', sorter.column === 'name' && 'sort']"
                        @click="args.sort_processes_key = 'name'">
                        Name
                    </td>
                    <td>Status</td>
                    <td>Core</td>
                    <td :class="['sortable', sorter.column === 'cpu_time' && 'sort']"
                        @click="args.sort_processes_key = 'cpu_time'">
                        CPU%
                    </td>
                    <td :class="['sortable', sorter.column === 'memory_usage' && 'sort']"
                        @click="args.sort_processes_key = 'memory_usage'">
                        MEM
                    </td>
                    <td>/ MAX</td>
                    <td :class="['sortable', sorter.column === 'load_1min' && 'sort']"
                        @click="args.sort_processes_key = 'load_1min'">
                        LOAD 1/5/15min
                    </td>
                    <td>Release</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(vm, vmId) in vms" :key="vmId">
                    <td v-show="showEngine">{{ vm.engine }}</td>
                    <td>{{ vm.name }}</td>
                    <td :class="vm.status == 'stopped' ? 'careful' : 'ok'">
                        {{ vm.status }}
                    </td>
                    <td>
                        {{ $filters.number(vm.cpu_count, 1) }}
                    </td>
                    <td>
                        {{ $filters.number(vm.cpu_time, 1) }}
                    </td>
                    <td>
                        {{ $filters.bytes(vm.memory_usage) }}
                    </td>
                    <td>
                        / {{ $filters.bytes(vm.memory_total) }}
                    </td>
                    <td>
                        {{ $filters.number(vm.load_1min) }}/{{ $filters.number(vm.load_5min) }}/{{
                            $filters.number(vm.load_15min) }}
                    </td>
                    <td>
                        {{ vm.release }}
                    </td>
                </tr>
            </tbody>
        </table>
    </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["vms"];
		},
		views() {
			return this.data.views["vms"];
		},
		vms() {
			const { sorter } = this;
			const vms = (this.stats || []).map((vmData) => {
				return {
					id: vmData.id,
					name: vmData.name,
					status: vmData.status != undefined ? vmData.status : "-",
					cpu_count: vmData.cpu_count != undefined ? vmData.cpu_count : "-",
					cpu_time: vmData.cpu_time != undefined ? vmData.cpu_time : "-",
					cpu_time_rate_per_sec:
						vmData.cpu_time_rate_per_sec != undefined
							? vmData.cpu_time_rate_per_sec
							: "?",
					memory_usage:
						vmData.memory_usage != undefined ? vmData.memory_usage : "-",
					memory_total:
						vmData.memory_total != undefined ? vmData.memory_total : "-",
					load_1min: vmData.load_1min != undefined ? vmData.load_1min : "-",
					load_5min: vmData.load_5min != undefined ? vmData.load_5min : "-",
					load_15min: vmData.load_15min != undefined ? vmData.load_15min : "-",
					release: vmData.release,
					image: vmData.image,
					engine: vmData.engine,
					engine_version: vmData.engine_version,
				};
			});
			return orderBy(
				vms,
				[sorter.column].reduce((retval, col) => {
					if (col === "memory_usage") {
						col = ["memory_usage"];
					}
					return retval.concat(col);
				}, []),
				[sorter.isReverseColumn(sorter.column) ? "desc" : "asc"],
			);
		},
		showEngine() {
			return this.views.show_engine_name;
		},
	},
	watch: {
		sortProcessesKey: {
			immediate: true,
			handler(sortProcessesKey) {
				const sortable = ["load_1min", "cpu_time", "memory_usage", "name"];
				function isReverseColumn(column) {
					return !["name"].includes(column);
				}
				function getColumnLabel(value) {
					const labels = {
						load_1min: "load",
						cpu_time: "CPU time",
						memory_usage: "memory consumption",
						name: "VM name",
						None: "None",
					};
					return labels[value] || value;
				}
				if (!sortProcessesKey || sortable.includes(sortProcessesKey)) {
					this.sorter = {
						column: this.args.sort_processes_key || "cpu_time",
						auto: !this.args.sort_processes_key,
						isReverseColumn,
						getColumnLabel,
					};
				}
			},
		},
	},
};
</script>
