Initial Commit
This commit is contained in:
209
frontend/src/components/widgets/VmwareDecomissionWidget.vue
Normal file
209
frontend/src/components/widgets/VmwareDecomissionWidget.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<va-inner-loading :loading="isLoading" class="container">
|
||||
<div class="chart">
|
||||
<apexchart
|
||||
type="line"
|
||||
height="240"
|
||||
width="640"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
></apexchart>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<p>Hosts total: <span class="va-text-bold mr-2"><b>{{ hosts_total }}</b></span></p>
|
||||
<p>Decomissioned: <span class="va-text-bold mr-2"><b>{{ hosts_decomissed }}</b></span></p>
|
||||
<p>Staged to decomission: <span class="va-text-bold mr-2"><b>{{ hosts_staged_dcm }}</b></span></p>
|
||||
</div>
|
||||
<div class="dateRange">
|
||||
<va-date-input
|
||||
mode="range"
|
||||
v-model="dateRange"
|
||||
/>
|
||||
</div>
|
||||
<div class="button">
|
||||
<va-button
|
||||
@click=changeRange
|
||||
outline
|
||||
>
|
||||
Update
|
||||
</va-button>
|
||||
</div>
|
||||
</va-inner-loading>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import ReportsService from '@/api/report-service';
|
||||
import VueApexCharts from "vue3-apexcharts";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
apexchart: VueApexCharts,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
hosts_total: 0,
|
||||
hosts_staged_dcm: 0,
|
||||
hosts_decomissed: 0,
|
||||
dateRange: {
|
||||
start: new Date((new Date()).valueOf() - 7 * 24 * 60 * 60 * 1000),
|
||||
end: new Date()
|
||||
},
|
||||
chartOptions: {
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: 240,
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabledOnSeries: [2],
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
}],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
categories: [],
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: "Hosts total",
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
title: {
|
||||
text: "Hosts to decomission"
|
||||
}
|
||||
}]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Hosts total",
|
||||
type: "column",
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "Hosts to decomission",
|
||||
type: "column",
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "Hosts decomissioned",
|
||||
type: "line",
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.updateChart()
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateChart() {
|
||||
this.series.forEach(item => {item.data.length = 0})
|
||||
this.chartOptions.xaxis.categories.length = 0
|
||||
this.retreiveData()
|
||||
},
|
||||
changeRange() {
|
||||
//this.dateRange.end = new Date(this.dateRange.end.valueOf() + 1 * 24 * 60 * 60 * 1000)
|
||||
this.updateChart()
|
||||
},
|
||||
retreiveData() {
|
||||
this.isLoading = true
|
||||
|
||||
ReportsService.getFrames(this.dateRange).then(response => {
|
||||
ReportsService.getMultipleVmWareCapacityReport(response.map(item => item.id)).then(response => {
|
||||
response.forEach(item => {
|
||||
item.data.timestamp = new Date(item.data.included.filter(x => x.type === "frame")[0].attributes.timestamp)
|
||||
})
|
||||
response.sort((a, b) => a.data.timestamp.getTime() - b.data.timestamp.getTime())
|
||||
let previous_hosts = 0
|
||||
|
||||
response.forEach(item => {
|
||||
let clusters = item.data.included.filter(x => x.type === "cluster");
|
||||
let vcenters = item.data.included.filter(x => x.type === "vcenter");
|
||||
let contours = item.data.included.filter(x => x.type === "contour");
|
||||
|
||||
let hosts_total = 0
|
||||
let hosts_staged_dcm = 0
|
||||
let hosts_decomissed = 0
|
||||
|
||||
item.data.data.forEach(report => {
|
||||
report["cluster"] = clusters.find(x => x.id == report.attributes.cluster_id)
|
||||
report["vcenter"] = vcenters.find(x => x.id == report.cluster?.attributes.vcenter_id)
|
||||
report["contour"] = contours.find(x => x.id == report.vcenter?.attributes.contour_id)
|
||||
|
||||
report.attributes["contour_name"] = report.contour?.attributes.name
|
||||
|
||||
if (report.contour?.attributes.name === 'VDI') { return }
|
||||
|
||||
hosts_total += report.attributes.hosts_total
|
||||
hosts_staged_dcm += report.attributes.hosts_staged_dcm
|
||||
})
|
||||
|
||||
if (previous_hosts > 0) {
|
||||
hosts_decomissed = (previous_hosts - hosts_total) ?? 0
|
||||
}
|
||||
|
||||
previous_hosts = hosts_total
|
||||
|
||||
this.chartOptions.xaxis.categories.push(item.data.timestamp.toString())
|
||||
|
||||
this.series[0].data.push(hosts_total)
|
||||
this.series[1].data.push(hosts_staged_dcm)
|
||||
this.series[2].data.push(hosts_decomissed > 0 ? hosts_decomissed : 0)
|
||||
})
|
||||
|
||||
|
||||
this.hosts_total = this.series[0].data[this.series[0].data.length-1] ?? 0
|
||||
this.hosts_staged_dcm = this.series[1].data[this.series[1].data.length - 1] ?? 0
|
||||
let sum = 0;
|
||||
this.series[2].data.forEach(a => sum += a)
|
||||
this.hosts_decomissed = sum
|
||||
//this.hosts_decomissed = this.series[0].data[0] - this.series[0].data[this.series[0].data.length-1]
|
||||
this.isLoading = false
|
||||
})
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: grid;
|
||||
margin: 10px;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 6px 6px;
|
||||
grid-template-areas:
|
||||
"chart dateRange"
|
||||
"chart stats"
|
||||
"chart button";
|
||||
}
|
||||
.chart {
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
grid-area: chart;
|
||||
}
|
||||
.stats {
|
||||
height: 100%;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-area: stats;
|
||||
}
|
||||
.dateRange { grid-area: dateRange; justify-self: center;}
|
||||
.button { grid-area: button; justify-self: center; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user