add check history graph for cpu, memory, and diskspace

2026-01-20 03:50:21 +00:00 · 2021-01-10 14:15:05 -05:00
parent 771515e6db
commit 9cb417e7f3
5 changed files with 276 additions and 5 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -4902,6 +4902,19 @@
        "picomatch": "^2.0.4"
      }
    },
+    "apexcharts": {
+      "version": "3.23.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.23.1.tgz",
+      "integrity": "sha512-7fRpquXp725BUew5OO1mJWk16/IJPCUl0l8SjhISnAhAtbTaM9PnXPSmN2BvKO4RcT457CzMM7MCG5UokiTwcA==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
    "aproba": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -16987,6 +17000,70 @@
        "has-flag": "^3.0.0"
      }
    },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
    "svgo": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -18111,6 +18188,11 @@
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
      "dev": true
    },
+    "vue-apexcharts": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.0.tgz",
+      "integrity": "sha512-sT6tuVTLBwfH3TA7azecDNS/W70bmz14ZJI7aE7QIqcG9I6OywyH7x3hcOeY1v1DxttI8Svc5RuYj4Dd+A5F4g=="
+    },
    "vue-hot-reload-api": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
--- a/package.json
+++ b/package.json
@@ -11,9 +11,11 @@
  "dependencies": {
    "@quasar/extras": "^1.9.12",
    "axios": "^0.21.1",
+    "apexcharts": "^3.23.1",
    "dotenv": "^8.2.0",
    "qrcode.vue": "^1.7.0",
-    "quasar": "^1.15.0"
+    "quasar": "^1.15.0",
+    "vue-apexcharts": "^1.6.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.1.14",
--- a/src/components/ChecksTab.vue
+++ b/src/components/ChecksTab.vue
@@ -196,9 +196,14 @@
                  >output</span
                >
              </q-td>
-              <q-td v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'">{{
-                props.row.history_info
-              }}</q-td>
+              <q-td v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'">
+                <span
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
+                  @click="showCheckGraphModal(props.row)"
+                  >Show Run History</span
+                >
+              </q-td>
              <q-td v-else>{{ props.row.more_info }}</q-td>
              <q-td>{{ props.row.last_run }}</q-td>
              <q-td v-if="props.row.assigned_task !== null && props.row.assigned_task.length > 1"
@@ -267,6 +272,7 @@ import EventLogCheck from "@/components/modals/checks/EventLogCheck";
 import ScriptCheck from "@/components/modals/checks/ScriptCheck";
 import ScriptOutput from "@/components/modals/checks/ScriptOutput";
 import EventLogCheckOutput from "@/components/modals/checks/EventLogCheckOutput";
+import CheckGraph from "@/components/graphs/CheckGraph";

 export default {
  name: "ChecksTab",
@@ -424,6 +430,13 @@ export default {
            .catch(e => this.notifyError(e.response.data));
        });
    },
+    showCheckGraphModal(check) {
+      this.$q.dialog({
+        component: CheckGraph,
+        parent: this,
+        check: check,
+      });
+    },
  },
  computed: {
    ...mapGetters(["selectedAgentPk", "checks", "tabsTableHeight"]),
--- a/src/components/graphs/CheckGraph.vue
+++ b/src/components/graphs/CheckGraph.vue
@@ -0,0 +1,169 @@
+<template>
+  <q-dialog ref="dialog" @hide="onHide">
+    <q-card class="q-dialog-plugin" style="min-width: 80vw; min-height: 65vh; overflow-x: hidden">
+      <q-bar>
+        <q-btn @click="getChartData" class="q-mr-sm" dense flat push icon="refresh" />
+        {{ title }}
+        <q-space />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <div class="row">
+        <span v-if="!showChart" class="q-pa-md">No Data</span>
+        <q-space />
+        <q-select
+          v-model="timeFilter"
+          emit-value
+          map-options
+          style="width: 200px"
+          :options="timeFilterOptions"
+          outlined
+          dense
+          class="q-pr-md q-pt-md"
+          @input="getChartData"
+        />
+      </div>
+      <apexchart
+        v-if="showChart"
+        class="q-pt-md"
+        type="line"
+        height="70%"
+        :options="chartOptions"
+        :series="[{ name: 'Percentage', data: history }]"
+      />
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+import VueApexCharts from "vue-apexcharts";
+
+export default {
+  name: "CheckGraph",
+  components: {
+    apexchart: VueApexCharts,
+  },
+  props: {
+    check: !Object,
+  },
+  data() {
+    return {
+      history: [],
+      timeFilter: 1,
+      timeFilterOptions: [
+        { value: 1, label: "Last 24 Hours" },
+        { value: 7, label: "Last 7 Days" },
+        { value: 30, label: "Last 30 Days" },
+      ],
+      chartOptions: {
+        tooltip: {
+          x: {
+            format: "dd MMM h:mm:sst",
+          },
+        },
+        chart: {
+          id: "chart2",
+          type: "line",
+          toolbar: {
+            show: true,
+          },
+          animations: {
+            enabled: false,
+          },
+        },
+        colors: ["#027BE3"],
+        stroke: {
+          width: 3,
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        fill: {
+          opacity: 1,
+        },
+        markers: {
+          size: 1,
+        },
+        xaxis: {
+          type: "datetime",
+          labels: {
+            datetimeUTC: false,
+          },
+        },
+        yaxis: {
+          min: 0,
+          max: 100,
+        },
+        noData: {
+          text: "No Data",
+        },
+        theme: {
+          mode: this.$q.dark.isActive ? "dark" : "light",
+        },
+      },
+    };
+  },
+  computed: {
+    title() {
+      return this.check.readable_desc + " history";
+    },
+    showChart() {
+      return !this.$q.loading.isActive && this.history.length > 0;
+    },
+  },
+  methods: {
+    getChartData() {
+      this.$q.loading.show();
+
+      this.$axios
+        .patch(`/checks/history/${this.check.id}/`, { timeFilter: this.timeFilter })
+        .then(r => {
+          this.history = r.data;
+          this.$q.loading.hide();
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+        });
+    },
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
+  },
+  created() {
+    this.getChartData();
+
+    // add annotation depending on check type
+    if (
+      this.check.check_type === "cpuload" ||
+      this.check.check_type === "memory" ||
+      this.check.check_type === "diskspace"
+    ) {
+      this.chartOptions["annotations"] = {
+        position: "front",
+        yaxis: [
+          {
+            y: this.check.threshold,
+            strokeDashArray: 0,
+            borderColor: "#C10015",
+            width: 3,
+            label: {
+              borderColor: "#C10015",
+              style: {
+                color: "#FFF",
+                background: "#C10015",
+              },
+              text: "Threshold",
+            },
+          },
+        ],
+      };
+    }
+  },
+};
+</script>
--- a/src/components/modals/coresettings/EditCoreSettings.vue
+++ b/src/components/modals/coresettings/EditCoreSettings.vue
@@ -67,6 +67,11 @@
                    class="col-6"
                  />
                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-4">Remove Check History older than:</div>
+                  <div class="col-2"></div>
+                  <q-input outlined dense v-model="settings.check_history_prune_days" class="col-6" />
+                </q-card-section>
                <q-card-section class="row">
                  <div class="col-4">Reset Patch Policy on Agents:</div>
                  <div class="col-2"></div>
@@ -309,7 +314,7 @@ export default {
      settings: {},
      email: null,
      tab: "general",
-      splitterModel: 15,
+      splitterModel: 20,
      isPwd: true,
      allTimezones: [],
      emailTest: false,