From dfaa926e252bc85d79de8485da8002a2f1a6a71e Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Mon, 7 Nov 2022 15:49:43 +0800
Subject: [PATCH] refactor(admin): Display version updates

---
 ui/src/common/interface.ts                    |  5 +++-
 .../components/HealthStatus/index.tsx         | 23 +++++++++++++++----
 ui/src/pages/Admin/Dashboard/index.tsx        |  1 +
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ui/src/common/interface.ts b/ui/src/common/interface.ts
index 1e61d874..9ea391c7 100644
--- a/ui/src/common/interface.ts
+++ b/ui/src/common/interface.ts
@@ -342,7 +342,10 @@ export interface AdminDashboard {
     time_zone: string;
     occupying_storage_space: string;
     app_start_time: number;
-    app_version: string;
     https: boolean;
+    version_info: {
+      remote_version: string;
+      version: string;
+    };
   };
 }
diff --git a/ui/src/pages/Admin/Dashboard/components/HealthStatus/index.tsx b/ui/src/pages/Admin/Dashboard/components/HealthStatus/index.tsx
index 1b1c7ced..f36e02a5 100644
--- a/ui/src/pages/Admin/Dashboard/components/HealthStatus/index.tsx
+++ b/ui/src/pages/Admin/Dashboard/components/HealthStatus/index.tsx
@@ -11,7 +11,8 @@ interface IProps {
 
 const HealthStatus: FC<IProps> = ({ data }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'admin.dashboard' });
-
+  const { version, remote_version } = data.version_info || {};
+  const isLatest = version === remote_version;
   return (
     <Card className="mb-4">
       <Card.Body>
@@ -19,10 +20,22 @@ const HealthStatus: FC<IProps> = ({ data }) => {
         <Row>
           <Col xs={6} className="mb-1 d-flex align-items-center">
             <span className="text-secondary me-1">{t('version')}</span>
-            <strong>90</strong>
-            <Badge pill bg="warning" text="dark" className="ms-1">
-              {t('update_to')} {data.app_version}
-            </Badge>
+            <strong>{version}</strong>
+            {isLatest && (
+              <Badge pill bg="success" className="ms-1">
+                {t('latest')}
+              </Badge>
+            )}
+            {!isLatest && remote_version && (
+              <Badge pill bg="warning" text="dark" className="ms-1">
+                {t('update_to')} {remote_version}
+              </Badge>
+            )}
+            {!isLatest && !remote_version && (
+              <Badge pill bg="danger" className="ms-1">
+                {t('check_failed')}
+              </Badge>
+            )}
           </Col>
           <Col xs={6} className="mb-1">
             <span className="text-secondary me-1">{t('https')}</span>
diff --git a/ui/src/pages/Admin/Dashboard/index.tsx b/ui/src/pages/Admin/Dashboard/index.tsx
index 2037016e..c20f250c 100644
--- a/ui/src/pages/Admin/Dashboard/index.tsx
+++ b/ui/src/pages/Admin/Dashboard/index.tsx
@@ -18,6 +18,7 @@ const Dashboard: FC = () => {
   if (!data) {
     return null;
   }
+
   return (
     <>
       <h3 className="text-capitalize">{t('title')}</h3>