From 08bf1d2f3c0f455b4f4b90fd18d7c61a33d0e09b Mon Sep 17 00:00:00 2001
From: Kiloson <4closetool3@gmail.com>
Date: Mon, 8 Jan 2024 19:41:41 +0800
Subject: [PATCH] fix: support badge

Signed-off-by: Kiloson <4closetool3@gmail.com>
---
 src/pages/instances/Pods/components/Badge.tsx | 81 +++++++++++++++++++
 src/pages/instances/Pods/v1/index.tsx         |  2 +
 src/pages/instances/Pods/v2/index.tsx         |  2 +
 src/services/badge/badge.ts                   | 13 +++
 src/services/typings.d.ts                     |  9 +++
 5 files changed, 107 insertions(+)
 create mode 100644 src/pages/instances/Pods/components/Badge.tsx
 create mode 100644 src/services/badge/badge.ts

diff --git a/src/pages/instances/Pods/components/Badge.tsx b/src/pages/instances/Pods/components/Badge.tsx
new file mode 100644
index 00000000..42acd60a
--- /dev/null
+++ b/src/pages/instances/Pods/components/Badge.tsx
@@ -0,0 +1,81 @@
+import { Space } from 'antd';
+import { useRequest } from 'umi';
+import { useEffect, useMemo, useState } from 'react';
+import { listBadges } from '@/services/badge/badge';
+
+interface BadgeProps {
+  name: string;
+  svgLink: string;
+  redirectLink?: string;
+}
+
+export const Badge = (props: BadgeProps) => {
+  const { name, svgLink: badgeLink, redirectLink } = props;
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      const height = 24;
+      const rate = height / img.height;
+      const width = img.width * rate;
+      setDimensions({ width, height });
+    };
+    img.src = badgeLink;
+  }, [badgeLink]);
+
+  const img = useMemo(
+    () => (
+      <img
+        src={badgeLink}
+        alt={name}
+        width={dimensions.width}
+        height={dimensions.height}
+      />
+    ),
+    [badgeLink, name, dimensions],
+  );
+
+  if (redirectLink) {
+    return (
+      <a href={redirectLink}>
+        {img}
+      </a>
+    );
+  }
+  return img;
+};
+
+interface BadgeBarProps {
+  badges: BadgeProps[];
+}
+
+export const BadgeBar = (props: BadgeBarProps) => {
+  const { badges } = props;
+  return (
+    <Space>
+      {badges.map((badge) => <Badge {...badge} />)}
+    </Space>
+  );
+};
+
+interface ClusterBadgeBarProps {
+  clusterID: number;
+}
+
+export const ClusterBadgeBar = (props: ClusterBadgeBarProps) => {
+  const { clusterID } = props;
+  const [badges, setBadges] = useState<BadgeProps[]>([]);
+  useRequest(() => listBadges('clusters', clusterID), {
+    refreshDeps: [clusterID],
+    onSuccess: (data) => {
+      setBadges(data);
+    },
+  });
+
+  return (
+    <div style={{ marginTop: '8px', marginBottom: '8px' }}>
+      <BadgeBar badges={badges} />
+    </div>
+  );
+};
diff --git a/src/pages/instances/Pods/v1/index.tsx b/src/pages/instances/Pods/v1/index.tsx
index 189986b4..d806609f 100644
--- a/src/pages/instances/Pods/v1/index.tsx
+++ b/src/pages/instances/Pods/v1/index.tsx
@@ -22,6 +22,7 @@ import BuildCard from '../components/BuildCard';
 import NoData from '@/components/NoData';
 import InfoMenu from '../components/InfoMenu';
 import useRefCallback from '../components/useRefCallback';
+import { ClusterBadgeBar } from '../components/Badge';
 
 const { TabPane } = Tabs;
 
@@ -153,6 +154,7 @@ function PodsPage(props: PodsPageProps) {
             region2DisplayName={region2DisplayName}
             podsInfo={podsInfo}
           />
+          <ClusterBadgeBar clusterID={id} />
           {
             showBuildView && (
               <BuildCard
diff --git a/src/pages/instances/Pods/v2/index.tsx b/src/pages/instances/Pods/v2/index.tsx
index 367babfb..00e2d802 100644
--- a/src/pages/instances/Pods/v2/index.tsx
+++ b/src/pages/instances/Pods/v2/index.tsx
@@ -23,6 +23,7 @@ import InfoMenu from '../components/InfoMenu';
 import useRefCallback from '../components/useRefCallback';
 import { queryTemplate } from '@/services/templates/templates';
 import { CatalogType } from '@/services/core';
+import { ClusterBadgeBar } from '../components/Badge';
 
 const { TabPane } = Tabs;
 
@@ -167,6 +168,7 @@ function PodsPage(props: PodsPageProps) {
             region2DisplayName={region2DisplayName}
             podsInfo={podsInfo}
           />
+          <ClusterBadgeBar clusterID={id} />
           {
             showBuildView && (
               <BuildCard
diff --git a/src/services/badge/badge.ts b/src/services/badge/badge.ts
new file mode 100644
index 00000000..365d8729
--- /dev/null
+++ b/src/services/badge/badge.ts
@@ -0,0 +1,13 @@
+import { request } from 'umi';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function listBadges(resourceType: 'clusters' | 'groups' | 'applications', resourceID: number) {
+  return request<{
+    data: API.Badge[];
+  }>(`/apis/core/v2/${resourceType}/${resourceID}/badges`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
diff --git a/src/services/typings.d.ts b/src/services/typings.d.ts
index 7bd4c7db..6bb69edf 100644
--- a/src/services/typings.d.ts
+++ b/src/services/typings.d.ts
@@ -400,4 +400,13 @@ declare namespace API {
     commit: string
   };
 
+  export type Badge = {
+    id: number
+    name: string
+    svgLink: string
+    redirectLink: string
+    createdAt: string
+    updatedAt: string
+  };
+
 }