chore: upgrade check

src/components/footer/index.tsx

@@ -12,6 +12,7 @@ const Footer: React.FC = () => {
   const showVersion = () => {
     Modal.info({
       ...modalConfig,
+      width: 460,
       content: <VersionInfo intl={intl} />
     });
   };

src/components/icon-font/index.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_4jkdkc8jcf7.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_l9554igzbh.js'
 });
 
 export default IconFont;

src/components/version-info/index.less

@@ -1,6 +1,5 @@
 .version-box {
   display: flex;
-  margin-bottom: 40px;
   flex-direction: column;
   align-items: center;
 
@@ -25,18 +24,25 @@
   .ver {
     line-height: 32px;
     display: flex;
+    justify-content: center;
     font-size: var(--font-size-middle);
+    color: var(--ant-color-text-secondary);
+    gap: 10px;
 
     .label {
       display: flex;
       justify-content: flex-start;
-      width: 60px;
       font-size: var(--font-size-middle);
-      font-weight: var(--font-weight-medium);
-    }
-
-    .val {
-      color: var(--ant-color-text-secondary);
     }
   }
+
+  .upgrade {
+    display: flex;
+    margin-top: 20px;
+    justify-content: space-between;
+    padding-block: 20px 4px;
+    align-items: center;
+    width: 100%;
+    border-top: 1px solid var(--ant-color-split);
+  }
 }

src/components/version-info/index.tsx

@@ -1,34 +1,49 @@
 import Logo from '@/assets/images/gpustack-logo.png';
-import { GPUStackVersionAtom } from '@/atoms/user';
+import { GPUStackVersionAtom, UpdateCheckAtom, userAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
+import externalLinks from '@/constants/external-links';
+import { Button } from 'antd';
 import React from 'react';
 import './index.less';
 
 const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
-  // get the data attr from html
-  const version = document.documentElement.getAttribute('data-version');
+  const latestVersion = getAtomStorage(UpdateCheckAtom).latest_version;
+  const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version;
 
   return (
     <div className="version-box">
       <div className="img">
         <img src={Logo} alt="logo" />
       </div>
-      <div>
-        <div className="ver">
-          <span className="label">
-            {' '}
-            {intl.formatMessage({ id: 'common.footer.version.server' })}
-          </span>
-          <span className="val">
-            {getAtomStorage(GPUStackVersionAtom)?.version ||
-              getAtomStorage(GPUStackVersionAtom)?.git_commit}
-          </span>
-        </div>
-        <div className="ver">
-          <span className="label">UI </span>
-          <span className="val"> {version}</span>
-        </div>
+
+      <div className="ver">
+        <span className="label">
+          {' '}
+          {intl.formatMessage({ id: 'common.footer.version' })}
+        </span>
+        <span className="val">
+          {getAtomStorage(GPUStackVersionAtom)?.version ||
+            getAtomStorage(GPUStackVersionAtom)?.git_commit}
+        </span>
       </div>
+      {getAtomStorage(userAtom)?.is_admin && (
+        <div className="upgrade">
+          <span className="m-l-5">
+            {latestVersion && latestVersion !== currentVersion
+              ? intl.formatMessage(
+                  { id: 'users.version.update' },
+                  { version: latestVersion }
+                )
+              : intl.formatMessage(
+                  { id: 'users.version.islatest' },
+                  { version: currentVersion }
+                )}
+          </span>
+          <Button type="link" href={externalLinks.release} target="_blank">
+            {intl.formatMessage({ id: 'common.text.changelog' })}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };