add counter line view

src/backend/k8s/Counter/counter.controller.ts

@@ -0,0 +1,31 @@
+import { CounterService } from '@backend/k8s/Counter/counter.service'
+import { Controller, Get, Param } from '@nestjs/common'
+
+@Controller('k8s/Counter')
+export class CounterController {
+ constructor(
+ private readonly counterService: CounterService,
+ ) { }
+
+ @Get('/counter/')
+ async ListAllCounter() {
+ const counter = this.counterService.getAllCounter()
+ return Object.fromEntries(counter)
+ }
+
+ @Get('/counterLine/')
+ async ListAllCounterLine() {
+ const counter = this.counterService.getAllCounterLine()
+ return Object.fromEntries(counter)
+ }
+
+ @Get('/counter/:key')
+ async ListCounterByKey(@Param('key') key: string) {
+ return this.counterService.getCounterByKey(key)
+ }
+
+ @Get('/counterLine/:key')
+ async ListCounterLineByKey(@Param('key') key: string) {
+ return this.counterService.getCounterLineByKey(key)
+ }
+}

src/backend/k8s/Counter/Counter.service.ts → src/backend/k8s/Counter/counter.service.ts

@@ -33,7 +33,6 @@ export class CounterService {
  }
  }
 
- @Cron(CronExpression.EVERY_SECOND)
  printCounter() {
  this.counterLine.forEach((v, k) => {
  this.logger.debug(`${k}=${v}`)
@@ -51,4 +50,20 @@ export class CounterService {
  this.counterLine.set(k, array)
  })
  }
+
+ getCounterByKey(key: string) {
+ return this.counter.get(key)
+ }
+
+ getCounterLineByKey(key: string) {
+ return this.counterLine.get(key)
+ }
+
+ getAllCounter() {
+ return this.counter
+ }
+
+ getAllCounterLine() {
+ return this.counterLine
+ }
 }

src/backend/k8s/k8s.module.ts

@@ -5,7 +5,8 @@ import { ClusterRoleBindingController } from '@backend/k8s/ClusterRoleBinding/Cl
 import { ClusterRoleBindingService } from '@backend/k8s/ClusterRoleBinding/ClusterRoleBinding.service'
 import { ConfigmapController } from '@backend/k8s/configmap/configmap.controller'
 import { ConfigMapService } from '@backend/k8s/configmap/configmap.service'
-import { CounterService } from '@backend/k8s/Counter/Counter.service'
+import { CounterController } from '@backend/k8s/Counter/counter.controller'
+import { CounterService } from '@backend/k8s/Counter/counter.service'
 import { CronJobController } from '@backend/k8s/cronjob/cronjob.controller'
 import { CronJobService } from '@backend/k8s/cronjob/cronjob.service'
 import { DaemonSetController } from '@backend/k8s/daemonset/daemonset.controller'
@@ -89,7 +90,7 @@ import { ReplicaSetController } from '@backend/k8s/replicaset/replicaset.control
  PersistentVolumeController, PersistentVolumeClaimController, ClusterRoleController,
  ClusterRoleBindingController, RoleController, RoleBindingController,
  ServiceAccountController, MutatingWebhookController, ValidatingWebhookController,
- ClientController,
+ ClientController, CounterController,
  ],
  providers: [
  K8sService, PodService, NsService,

src/backend/k8s/k8s.service.ts

@@ -1,7 +1,7 @@
 import { ClusterRoleService } from '@backend/k8s/ClusterRole/ClusterRole.service'
 import { ClusterRoleBindingService } from '@backend/k8s/ClusterRoleBinding/ClusterRoleBinding.service'
 import { ConfigMapService } from '@backend/k8s/configmap/configmap.service'
-import { CounterService } from '@backend/k8s/Counter/Counter.service'
+import { CounterService } from '@backend/k8s/Counter/counter.service'
 import { CronJobService } from '@backend/k8s/cronjob/cronjob.service'
 import { DaemonSetService } from '@backend/k8s/daemonset/daemonset.service'
 import { DeploymentService } from '@backend/k8s/deployment/deployment.service'

src/frontend/components/pod/PodChartLineView.vue

@@ -5,7 +5,6 @@ import { computed, ref } from 'vue'
 import Line from '@opentiny/vue-chart-line'
 
 const props = defineProps({
- count: Number,
  items: Array<number>,
 })
 // 设置横轴为连续的时间轴
@@ -45,7 +44,7 @@ const chartSettings = computed(() => {
  show: false,
  },
  axisLabel: {
- show: false,
+ show: true,
  },
  axisTick: {
  show: false,
@@ -72,7 +71,12 @@ const chartSettings = computed(() => {
  width: 1,
  },
  tooltip: {
+ position: [10, 10],
+ formatter: '{b0}: {c0}<br />{b1}: {c1}',
  show: false,
+ textStyle: {
+ fontSize: 2,
+ },
  },
  areaStyle: {
  color: '#43505F',

src/frontend/components/pod/PodCountLineView.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ResType } from '@backend/k8s/watch/watch.model'
+import { TimerUtils } from '@backend/utils/TimerUtils'
+import PodChartLineView from '@frontend/components/pod/PodChartLineView.vue'
+import { K8sService } from '@frontend/service/k8s/K8sService'
+import { NCol, NRow } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+
+const items = ref<Array<number>>()
+
+onMounted(async () => {
+ TimerUtils.everyTwoSeconds(async () => {
+ const pods = await K8sService.playService.counterControllerListCounterLineByKey({
+ key: ResType.Pod,
+ })
+ console.log(pods)
+ items.value = pods
+ })
+})
+function getCount() {
+ return items.value ? items.value.at(0) : 0
+}
+</script>
+
+<template>
+ <NRow gutter="12">
+ <NCol :span="6">
+ <div class="light-green">
+ {{ getCount() }}
+ <PodChartLineView :items="items" />
+ </div>
+ </NCol>
+ <NCol :span="6">
+ <div class="green">
+ <PodChartLineView :items="items" />
+ </div>
+ </NCol>
+ <NCol :span="6">
+ <div class="light-green" />
+ </NCol>
+ <NCol :span="6">
+ <div class="green" />
+ </NCol>
+ </NRow>
+</template>
+
+<style scoped>
+.light-green {
+ height: 100px;
+ background-color: rgba(0, 128, 0, 0.12);
+}
+.green {
+ height: 100px;
+ background-color: rgba(0, 128, 0, 0.24);
+}
+</style>

src/frontend/components/pod/PodG6View.vue

@@ -1,24 +1,9 @@
 <script lang="ts" setup>
-import { TimerUtils } from '@backend/utils/TimerUtils'
-import PodChartLineView from '@frontend/components/pod/PodChartLineView.vue'
-import { K8sService } from '@frontend/service/k8s/K8sService'
-import { onMounted, ref } from 'vue'
-
-const podCount = ref(0)
-const items = ref<Array<number>>()
-items.value = [820, 932, 901, 934, 1290, 1330, 1320]
-
-onMounted(async () => {
- TimerUtils.delayTwoSeconds(async () => {
- const pods = await K8sService.playService.podControllerList()
- podCount.value = pods.length
- items.value = [880, 858, 990, 1000, 1100, 1120, 1350]
- })
-})
+import PodCountLineView from '@frontend/components/pod/PodCountLineView.vue'
 </script>
 
 <template>
- <PodChartLineView :count="podCount" :items="items" />
+ <PodCountLineView />
 </template>
 
 <style scoped>