Merge branch 'louislam:master' into master

src/pages/Details.vue

@@ -42,7 +42,11 @@
             <div class="col">
                 <h4>{{ pingTitle }}</h4>
                 <p>(Current)</p>
-                <span class="num"><CountUp :value="ping" /></span>
+                <span class="num">
+                    <a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
+                        <CountUp :value="ping" />
+                    </a>
+                </span>
             </div>
             <div class="col">
                 <h4>Avg. {{ pingTitle }}</h4>
@@ -70,6 +74,14 @@
         </div>
     </div>
 
+    <div v-if="showPingChartBox" class="shadow-box big-padding text-center">
+        <div class="row">
+            <div class="col">
+                <PingChart :monitor-id="monitor.id" />
+            </div>
+        </div>
+    </div>
+
     <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
         <div class="row">
             <div class="col">
@@ -155,6 +167,7 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
 import { useToast } from "vue-toastification"
 const toast = useToast()
 import Confirm from "../components/Confirm.vue";
@@ -164,6 +177,7 @@ import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
 import Pagination from "v-pagination-3";
+const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
 
 export default {
     components: {
@@ -174,6 +188,7 @@ export default {
         Confirm,
         Status,
         Pagination,
+        PingChart,
     },
     data() {
         return {
@@ -181,6 +196,7 @@ export default {
             perPage: 25,
             heartBeatList: [],
             toggleCertInfoBox: false,
+            showPingChartBox: true,
         }
     },
     computed: {