From 2db16fec20a082f2db11eb55657a28d54715bbe4 Mon Sep 17 00:00:00 2001
From: Lee <octalgah@gmail.com>
Date: Tue, 12 Nov 2024 23:32:57 +0800
Subject: [PATCH] feat: add running tasks count card

---
 ui/src/gql/task.ts                            |  6 +++
 ui/src/views/overview/index.vue               |  3 +-
 .../widgets/chart/MiningOverviewChart.vue     |  3 ++
 .../widgets/statistics/RunningTasksCount.vue  | 48 +++++++++++++++++++
 4 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/views/widgets/statistics/RunningTasksCount.vue

diff --git a/ui/src/gql/task.ts b/ui/src/gql/task.ts
index 0763c31..b1fe3ec 100644
--- a/ui/src/gql/task.ts
+++ b/ui/src/gql/task.ts
@@ -129,3 +129,9 @@ export const GetRunningTasks = gql`
     }
     ${taskFragment}
 `
+
+export const GetTasksCount = gql`
+    query GetTasksCount {
+      tasksCount
+    }
+`
diff --git a/ui/src/views/overview/index.vue b/ui/src/views/overview/index.vue
index df84773..5d15a95 100644
--- a/ui/src/views/overview/index.vue
+++ b/ui/src/views/overview/index.vue
@@ -8,6 +8,7 @@ import ChainConnectivity from '@/views/widgets/data/ChainConnectivity.vue'
 import StorageOverview from '@/views/widgets/statistics/StorageOverview.vue'
 import CompletedTaskOverviewChart from '@/views/widgets/chart/CompletedTaskOverviewChart.vue'
 import BlocksMined from '@/views/widgets/statistics/BlocksMined.vue'
+import RunningTasksCount from '@/views/widgets/statistics/RunningTasksCount.vue'
 </script>
 
 <template>
@@ -38,7 +39,7 @@ import BlocksMined from '@/views/widgets/statistics/BlocksMined.vue'
       md="3"
       sm="6"
     >
-      <MinerPower />
+      <RunningTasksCount />
     </v-col>
   </v-row>
   <v-row class="mb-0">
diff --git a/ui/src/views/widgets/chart/MiningOverviewChart.vue b/ui/src/views/widgets/chart/MiningOverviewChart.vue
index 12565df..de42ccf 100644
--- a/ui/src/views/widgets/chart/MiningOverviewChart.vue
+++ b/ui/src/views/widgets/chart/MiningOverviewChart.vue
@@ -49,6 +49,9 @@ const chartOptions = computed(() => {
         dataLabels: {
           total: {
             enabled: true,
+            style: {
+              color: '#eff0f1',
+            },
           },
         },
       },
diff --git a/ui/src/views/widgets/statistics/RunningTasksCount.vue b/ui/src/views/widgets/statistics/RunningTasksCount.vue
new file mode 100644
index 0000000..f084765
--- /dev/null
+++ b/ui/src/views/widgets/statistics/RunningTasksCount.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+
+import { computed, ComputedRef, ref } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { IconBrandAsana } from '@tabler/icons-vue'
+import { GetTasksCount } from '@/gql/task'
+import moment from 'moment'
+
+const { result, onResult } = useQuery(GetTasksCount, null, () => ({
+  fetchPolicy: 'cache-first',
+  pollInterval: 3000,
+}))
+const updateTime = ref(new Date())
+const count: ComputedRef<number> = computed(() => result.value?.tasksCount || 0)
+onResult(() => {
+  updateTime.value = new Date()
+})
+</script>
+
+<template>
+  <v-card elevation="0">
+    <v-card variant="outlined">
+      <v-card-text>
+        <div class="d-flex align-items-center justify-space-between">
+          <div>
+            <h5 class="text-h5">{{ $t('fields.Running Tasks') }}</h5>
+            <h3 class="text-h3 my-2">{{ count }}</h3>
+            <h6 class="text-caption font-weight-medium mb-0">
+              updated {{ moment(updateTime).fromNow() }}
+            </h6>
+          </div>
+          <span class="d-flex align-center">
+            <v-btn
+              :icon="IconBrandAsana"
+              rounded="md"
+              size="small"
+              variant="flat"
+            />
+          </span>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-card>
+</template>
+
+<style scoped lang="scss">
+
+</style>