1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<template>
<section>
<div class="table-row">
<div class="table-cell text-left title">NETWORK</div>
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">Rx/s</div>
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">Tx/s</div>
<div class="table-cell" v-show="!args.network_cumul && args.network_sum"></div>
<div class="table-cell" v-show="!args.network_cumul && args.network_sum">Rx+Tx/s</div>
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">Rx</div>
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">Tx</div>
<div class="table-cell" v-show="args.network_cumul && args.network_sum"></div>
<div class="table-cell" v-show="args.network_cumul && args.network_sum">Rx+Tx</div>
</div>
<div class="table-row" v-for="(network, networkId) in networks" :key="networkId">
<div class="table-cell text-left">
<span class="visible-lg-inline">{{ network.ifname }}</span>
<span class="hidden-lg">{{ $filters.minSize(network.ifname) }}</span>
</div>
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.rx / network.time_since_update) : $filters.bits(network.rx / network.time_since_update) }}
</div>
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.tx / network.time_since_update) : $filters.bits(network.tx / network.time_since_update) }}
</div>
<div class="table-cell" v-show="!args.network_cumul && args.network_sum"></div>
<div class="table-cell" v-show="!args.network_cumul && args.network_sum">
{{ args.byte ? $filters.bytes(network.cx / network.time_since_update) : $filters.bits(network.cx / network.time_since_update) }}
</div>
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.cumulativeRx) : $filters.bits(network.cumulativeRx) }}
</div>
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.cumulativeTx) : $filters.bits(network.cumulativeTx) }}
</div>
<div class="table-cell" v-show="args.network_cumul && args.network_sum"></div>
<div class="table-cell" v-show="args.network_cumul && args.network_sum">
{{ args.byte ? $filters.bytes(network.cumulativeCx) : $filters.bits(network.cumulativeCx) }}
</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['network'];
},
networks() {
const networks = this.stats.map((networkData) => {
const alias = networkData['alias'] !== undefined ? networkData['alias'] : null;
const network = {
interfaceName: networkData['interface_name'],
ifname: alias ? alias : networkData['interface_name'],
rx: networkData['rx'],
tx: networkData['tx'],
cx: networkData['cx'],
time_since_update: networkData['time_since_update'],
cumulativeRx: networkData['cumulative_rx'],
cumulativeTx: networkData['cumulative_tx'],
cumulativeCx: networkData['cumulative_cx']
};
return network;
});
return orderBy(networks, ['interfaceName']);
}
}
};
</script>
|
