virt-dashboard/frontend/src/components/widgets/VmwareDecomissionWidget.vue

<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>