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
|
<template>
<section class="plugin" id="raid">
<div class="table-row" v-if="hasDisks">
<div class="table-cell text-left title">RAID disks</div>
<div class="table-cell">Used</div>
<div class="table-cell">Total</div>
</div>
<div class="table-row" v-for="(disk, diskId) in disks" :key="diskId">
<div class="table-cell text-left">
{{ disk.type.toUpperCase() }} {{ disk.name }}
<div class="warning" v-show="disk.degraded">└─ Degraded mode</div>
<div v-show="disk.degraded"> └─ {{ disk.config }}</div>
<div class="critical" v-show="disk.inactive">└─ Status {{ disk.status }}</div>
<template v-if="disk.inactive">
<div v-for="(component, componentId) in disk.components" :key="componentId">
{{
componentId === disk.components.length - 1 ? '└─' : '├─'
}}
disk {{ component.number }}: {{ component.name }}
</div>
</template>
</div>
<div class="table-cell" v-show="disk.status == 'active'" :class="getAlert(disk)">
{{ disk.used }}
</div>
<div class="table-cell" v-show="disk.status == 'active'" :class="getAlert(disk)">
{{ disk.available }}
</div>
</div>
</section>
</template>
<script>
import { orderBy } from 'lodash';
export default {
props: {
data: {
type: Object
}
},
computed: {
stats() {
return this.data.stats['raid'];
},
disks() {
const disks = Object.entries(this.stats).map(([diskKey, diskData]) => {
const components = Object.entries(diskData.components).map(([name, number]) => {
return {
number: number,
name: name
};
});
return {
name: diskKey,
type: diskData.type == null ? 'UNKNOWN' : diskData.type,
used: diskData.used,
available: diskData.available,
status: diskData.status,
degraded: diskData.used < diskData.available,
config: diskData.config == null ? '' : diskData.config.replace('_', 'A'),
inactive: diskData.status == 'inactive',
components: orderBy(components, ['number'])
};
});
return orderBy(disks, ['name']);
},
hasDisks() {
return this.disks.length > 0;
}
},
methods: {
getAlert(disk) {
if (disk.inactive) {
return 'critical';
}
if (disk.degraded) {
return 'warning';
}
return 'ok';
}
}
};
</script>
|
