mirror of https://github.com/nicolargo/glances.git
153 lines
5.8 KiB
Vue
153 lines
5.8 KiB
Vue
<template>
|
|
<section id="mem" class="plugin">
|
|
<!-- d-none d-xxl-block -->
|
|
<div class="table-responsive">
|
|
<table class="table-sm table-borderless">
|
|
<tbody>
|
|
<tr class="justify-content-between">
|
|
<td scope="col">
|
|
<table class="table table-sm table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="col">MEM</th>
|
|
<td scope="col" class="text-end" :class="getDecoration('percent')"><span>{{
|
|
percent }}%</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row">total:</td>
|
|
<td class="text-end"><span>{{ $filters.bytes(total) }}</span></td>
|
|
</tr>
|
|
<tr v-if="!available_args">
|
|
<td scope="row">used:</td>
|
|
<td class="text-end" :class="getDecoration('used')"><span>{{
|
|
$filters.bytes(used, 2) }}</span></td>
|
|
</tr>
|
|
<tr v-if="available_args">
|
|
<td scope="row">avail:</td>
|
|
<td class="text-end" :class="getDecoration('available')"><span>{{
|
|
$filters.bytes(available, 2) }}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row">free:</td>
|
|
<td class="text-end" :class="getDecoration('free')"><span>{{
|
|
$filters.bytes(free, 2) }}</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
<td>
|
|
<template class="d-none d-xl-block d-xxl-block">
|
|
<table class="table table-sm table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td v-show="active != undefined" scope="col">
|
|
active:
|
|
</td>
|
|
<td v-show="active != undefined" scope="col">
|
|
<span>{{ $filters.bytes(active) }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td v-show="inactive != undefined" scope="col">
|
|
inactive:
|
|
</td>
|
|
<td v-show="inactive != undefined" scope="col">
|
|
<span>{{ $filters.bytes(inactive) }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td v-show="buffers != undefined" scope="col">
|
|
buffers:
|
|
</td>
|
|
<td v-show="buffers != undefined" scope="col">
|
|
<span>{{ $filters.bytes(buffers) }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td v-show="cached != undefined" scope="col">
|
|
cached:
|
|
</td>
|
|
<td v-show="cached != undefined" scope="col">
|
|
<span>{{ $filters.bytes(cached) }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { store } from "../store.js";
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
store,
|
|
};
|
|
},
|
|
computed: {
|
|
config() {
|
|
return this.store.config || {};
|
|
},
|
|
available_args() {
|
|
return this.config !== undefined &&
|
|
this.config.mem !== undefined &&
|
|
this.config.available !== undefined
|
|
? this.config.mem.available || false
|
|
: false;
|
|
},
|
|
stats() {
|
|
return this.data.stats["mem"];
|
|
},
|
|
view() {
|
|
return this.data.views["mem"];
|
|
},
|
|
percent() {
|
|
return this.stats["percent"].toFixed(1);
|
|
},
|
|
total() {
|
|
return this.stats["total"];
|
|
},
|
|
used() {
|
|
return this.stats["used"];
|
|
},
|
|
available() {
|
|
return this.stats["available"];
|
|
},
|
|
free() {
|
|
return this.stats["free"];
|
|
},
|
|
active() {
|
|
return this.stats["active"];
|
|
},
|
|
inactive() {
|
|
return this.stats["inactive"];
|
|
},
|
|
buffers() {
|
|
return this.stats["buffers"];
|
|
},
|
|
cached() {
|
|
return this.stats["cached"];
|
|
},
|
|
},
|
|
methods: {
|
|
getDecoration(value) {
|
|
if (this.view[value] === undefined) {
|
|
return;
|
|
}
|
|
return this.view[value].decoration.toLowerCase();
|
|
},
|
|
},
|
|
};
|
|
</script> |