<template> <section class="plugin" id="fs"> <div class="table-row"> <div class="table-cell text-left title">FILE SYS</div> <div class="table-cell"> <span v-show="!args.fs_free_space">Used</span> <span v-show="args.fs_free_space">Free</span> </div> <div class="table-cell">Total</div> </div> <div class="table-row" v-for="(fs, fsId) in fileSystems" :key="fsId"> <div class="table-cell text-left"> {{ fs.shortMountPoint }} <span v-if="fs.shortMountPoint.length <= 12" class="visible-lg-inline"> ({{ fs.name }}) </span> </div> <div class="table-cell" :class="getDecoration(fs.mountPoint, 'used')"> <span v-show="!args.fs_free_space"> {{ $filters.bytes(fs.used) }} </span> <span v-show="args.fs_free_space"> {{ $filters.bytes(fs.free) }} </span> </div> <div class="table-cell">{{ $filters.bytes(fs.size) }}</div> </div> </section> </template> <script> import { orderBy } from 'lodash'; import { store } from '../store.js'; export default { props: { data: { type: Object } }, data() { return { store }; }, computed: { args() { return this.store.args || {}; }, stats() { return this.data.stats['fs']; }, view() { return this.data.views['fs']; }, fileSystems() { const fileSystems = this.stats.map((fsData) => { let shortMountPoint = fsData['mnt_point']; if (shortMountPoint.length > 22) { shortMountPoint = '_' + fsData['mnt_point'].slice(-21); } return { name: fsData['device_name'], mountPoint: fsData['mnt_point'], shortMountPoint: shortMountPoint, percent: fsData['percent'], size: fsData['size'], used: fsData['used'], free: fsData['free'] }; }); return orderBy(fileSystems, ['mnt_point']); } }, methods: { getDecoration(mountPoint, field) { if (this.view[mountPoint][field] == undefined) { return; } return this.view[mountPoint][field].decoration.toLowerCase(); } } }; </script>