From d676c5339f386d88a5a204765b0e9974ab83b600 Mon Sep 17 00:00:00 2001
From: phoenix <vova24848@gmail.com>
Date: Thu, 24 Oct 2024 10:40:33 +0300
Subject: [PATCH] bugfix health monitor

---
 client/src/stores/healthcheck.store.ts        |  9 ++---
 .../views/HealthCheck/HealthDay.service.ts    |  6 +--
 .../views/HealthCheck/HealthTargetView.vue    | 37 +++++++++++--------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/client/src/stores/healthcheck.store.ts b/client/src/stores/healthcheck.store.ts
index 5b30274..9f61c12 100644
--- a/client/src/stores/healthcheck.store.ts
+++ b/client/src/stores/healthcheck.store.ts
@@ -16,7 +16,7 @@ export interface HealthDay extends BaseEntity {
     health_target_id: number
 }
 
-export interface HealthUnit extends BaseEntity {
+export interface HealthUnit {
     request_datetime: number
     status: boolean
     response_time: number
@@ -65,9 +65,6 @@ export const useHealthCheckStore = defineStore({
                             this.loadDays(this.targets),
                         ]
                     )
-                    this.targets.forEach(
-                        t => this.loadUnits(t).then()
-                    )
                 }
                 this.loadings.targets = false
             },
@@ -91,7 +88,7 @@ export const useHealthCheckStore = defineStore({
                     el => {
                         hDays.push(
                             {
-                                request_datetime: el[2],
+                                request_datetime: el[2] * 1000,
                                 status: el[1],
                                 response_time: el[0],
                             }
@@ -99,7 +96,7 @@ export const useHealthCheckStore = defineStore({
                     }
                 )
                 this.units.set(healthTarget.id, hDays)
-
+                return hDays
             }
         }
     }
diff --git a/client/src/views/HealthCheck/HealthDay.service.ts b/client/src/views/HealthCheck/HealthDay.service.ts
index f34fb83..f163b44 100644
--- a/client/src/views/HealthCheck/HealthDay.service.ts
+++ b/client/src/views/HealthCheck/HealthDay.service.ts
@@ -2,7 +2,7 @@ import {HealthDay, HealthTarget, useHealthCheckStore} from "../../stores/healthc
 import {equalDate} from "../Utils.ts";
 
 export class HealthDayService {
-    private healthDay: HealthDay | undefined
+    private readonly healthDay: HealthDay | undefined
 
     constructor(healthDay: HealthDay | undefined) {
         this.healthDay = healthDay
@@ -50,8 +50,8 @@ export class HealthDayService {
         if (this.healthDay == undefined) return
         const fallTimes = this.getFallTimes()
         const lostTimes = this.getLostTimes()
-        if (!fallTimes) return undefined
-        return (fallTimes / this.healthDay.count_response_time) * 100 + (lostTimes / (60 * 24)) * 30
+        if (fallTimes == undefined) return undefined
+        return (fallTimes / (60 * 24)) * 100 + (lostTimes / (60 * 24)) * 30
     }
 
     getFallTimes() {
diff --git a/client/src/views/HealthCheck/HealthTargetView.vue b/client/src/views/HealthCheck/HealthTargetView.vue
index 3674838..47bdd46 100644
--- a/client/src/views/HealthCheck/HealthTargetView.vue
+++ b/client/src/views/HealthCheck/HealthTargetView.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue'
-import {HealthTarget, useHealthCheckStore} from "../../stores/healthcheck.store.ts";
+import {HealthTarget, HealthUnit, useHealthCheckStore} from "../../stores/healthcheck.store.ts";
 import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import StatusRect from "../Project/Status/StatusRect.vue";
 import {HealthDayService} from "./HealthDay.service.ts";
@@ -43,7 +43,7 @@ export default defineComponent({
           y: {
             ticks: {
               // Include a dollar sign in the ticks
-              callback: function(value, index, ticks) {
+              callback: function (value, index, ticks) {
                 return value + ' s';
               }
             },
@@ -60,6 +60,11 @@ export default defineComponent({
       }
     }
   },
+  data() {
+    return {
+      units: undefined as HealthUnit[] | undefined
+    }
+  },
   methods: {
     getTargetStatus() {
       const lastUnit = this.healthCheckStore.getLastUnit(this.healthTarget)
@@ -71,13 +76,12 @@ export default defineComponent({
       return lastUnit.status
     },
     getChartData() {
-      const units = this.healthCheckStore.getUnits(this.healthTarget)?.reverse()
-      if (units == undefined) return []
+      if (this.units == undefined) return []
       return {
-        labels: units?.map(el => moment(el.request_datetime)),
+        labels: this.units.map(el => moment(el.request_datetime)),
         datasets: [{
           label: 'Response Time',
-          data: units?.map(el => el.response_time),
+          data: this.units.map(el => el.response_time),
           borderWidth: 1,
           borderColor: 'rgb(0,83,255)',
         }]
@@ -96,6 +100,9 @@ export default defineComponent({
       }
       return result
     }
+  },
+  async mounted() {
+    this.units = await this.healthCheckStore.loadUnits(this.healthTarget)
   }
 })
 </script>
@@ -104,16 +111,14 @@ export default defineComponent({
   <VCard variant="outlined">
     <VCardTitle style="font-size: 1rem">
       <div>
-        <div>
-          <FontAwesomeIcon icon="circle-info" v-if="getTargetStatus() == undefined" color="gray"/>
-          <FontAwesomeIcon icon="circle-exclamation" v-else-if="getTargetStatus() == false" color="red"/>
-          <FontAwesomeIcon icon="circle-plus" v-else color="green"/>
+        <FontAwesomeIcon icon="circle-plus" v-if="getTargetStatus() == true" color="green"/>
+        <FontAwesomeIcon icon="circle-exclamation" v-else-if="getTargetStatus() == false" color="red"/>
+        <FontAwesomeIcon icon="circle-info" v-else color="gray"/>
 
-          {{ healthTarget.title }}
-          <a :href="healthTarget.url">
-            <FontAwesomeIcon icon="link"/>
-          </a>
-        </div>
+        {{ healthTarget.title }}
+        <a :href="healthTarget.url">
+          <FontAwesomeIcon icon="link"/>
+        </a>
       </div>
 
     </VCardTitle>
@@ -130,7 +135,7 @@ export default defineComponent({
       <p class="ma-1">
         Response Times:
       </p>
-      <div v-if="healthCheckStore.getUnits(healthTarget)" style="height: 10rem">
+      <div v-if="units != undefined" style="height: 10rem">
         <Line :data="getChartData()" :options="options"/>
       </div>
       <VSkeletonLoader type="article" v-else/>