fix: uptime frontend

Author: BaiMeow

frontend/src/api/uptime.ts

@@ -13,30 +13,40 @@ interface UptimeLinksResp {
   links: number
 }
 
-export async function getUptimeRecent(asn: number) {
-  const res = await axios.get(`${ApiHost}/api/bgp/uptime/${asn}/recent`)
+export async function getUptimeRecent(grName: string, asn: number) {
+  const res = await axios.get(
+    `${ApiHost}/api/bgp/${grName}/uptime/${asn}/recent`,
+  )
   const data = res.data as Resp<UptimeRecent>
   if (data.code !== 0) {
     throw new Error(data.msg)
   }
   return data.data
 }
 
-export async function getUptimeLinks(asn: number,time: string,window: string) {
-  const res = await axios.get(`${ApiHost}/api/bgp/uptime/${asn}/links`,{
-    params: {
-      time,
-      window
-    }
-  })
+export async function getUptimeLinks(
+  grName: string,
+  asn: number,
+  time: string,
+  window: string,
+) {
+  const res = await axios.get(
+    `${ApiHost}/api/bgp/${grName}/uptime/${asn}/links`,
+    {
+      params: {
+        time,
+        window,
+      },
+    },
+  )
   const data = res.data as Resp<Array<UptimeLinksResp>>
   if (data.code !== 0) {
     throw new Error(data.msg)
   }
   return data.data.map((item) => {
     return {
       time: new Date(item.time),
-      links: item.links
+      links: item.links,
     }
   })
-}
+}

frontend/src/components/BGP.vue

@@ -457,7 +457,12 @@ onBeforeRouteLeave(() => {
 
 <template>
   <Transition name="fade" appear>
-    <BGPUptime class="uptime" v-if="uptime_asn !== 0" :asn="uptime_asn" />
+    <BGPUptime
+      class="uptime"
+      v-if="uptime_asn !== 0"
+      :asn="uptime_asn"
+      :grName="name"
+    />
   </Transition>
 </template>
 

frontend/src/components/uptime/BGPLatestStatus.vue

@@ -2,7 +2,8 @@
 import { ref, onUnmounted } from 'vue'
 import { getUptimeRecent } from '@/api/uptime'
 
-const { asn } = defineProps<{
+const { grName, asn } = defineProps<{
+  grName: string
   asn: number
 }>()
 
@@ -20,7 +21,7 @@ const uptime10 = ref([
 ])
 
 const update = async () => {
-  const uptimes = await getUptimeRecent(asn)
+  const uptimes = await getUptimeRecent(grName, asn)
   uptime10.value = uptimes.slice(0, 10)
 }
 update()

frontend/src/components/uptime/BGPUptime.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { useASMeta } from '@/state/meta';
+import { useASMeta } from '@/state/meta'
 import { ref } from 'vue'
 
-const { asn } = defineProps<{
+const { grName, asn } = defineProps<{
+  grName: string
   asn: number
 }>()
 
-const ASMeta = useASMeta();
+const ASMeta = useASMeta()
 
 const graph_mode = ref('24h')
 </script>
@@ -21,15 +22,20 @@ const graph_mode = ref('24h')
             : `AS ${asn}`
         }}
       </div>
-      <BGPLatestStatus class="status-bar" :asn="asn" />
+      <BGPLatestStatus :grName="grName" class="status-bar" :asn="asn" />
     </div>
     <div class="uptime-body">
       <div class="wrap-graph">
         <el-select class="graph-selecter" v-model="graph_mode" placeholder="">
           <el-option value="24h" label="1 day" />
           <el-option value="168h" label="7 days" />
         </el-select>
-        <LinksHistory class="links-graph" :asn="asn" :time="graph_mode" />
+        <LinksHistory
+          class="links-graph"
+          :grName="grName"
+          :asn="asn"
+          :time="graph_mode"
+        />
       </div>
     </div>
   </div>

frontend/src/components/uptime/LatestStatus.vue

@@ -10,7 +10,8 @@ const props = defineProps<{
 <template>
   <div class="squares">
     <div
-      v-for="d in props.data"
+      v-for="(d, index) in props.data"
+      :key="index"
       class="square"
       :style="{
         backgroundColor: d ? upColor : downColor,

frontend/src/components/uptime/LinksHistory.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
 import { getUptimeLinks, UptimeLinks } from '@/api/uptime'
 import { ref, reactive, onUnmounted, computed, watch } from 'vue'
@@ -13,7 +14,8 @@ import { use } from 'echarts/core'
 import { parseDuration } from '@/utils/time'
 import { useDark } from '@vueuse/core'
 import { fontColor } from '@/state/font'
-const { asn, time } = defineProps<{
+const { grName, asn, time } = defineProps<{
+  grName: string
   asn: number
   time: string
 }>()
@@ -103,7 +105,7 @@ const option: any = reactive({
 })
 
 const refreshData = async () => {
-  data.value = await getUptimeLinks(asn, time, window.value)
+  data.value = await getUptimeLinks(grName, asn, time, window.value)
   option.series[0].data = data.value.map((d) => d.links)
   option.xAxis.data = data.value.map(
     (d) =>