perf(desktop): reduce network traffic overhead (#4948)

* perf(desktop): reduce network traffic overhead * update * update db color * fix getBilling api * update template * update * menu * update ts * update open objectstorage
labring · Aug 9, 2024 · 3515cdb · 3515cdb
1 parent f54fc3a
commit 3515cdb
Show file tree

Hide file tree

Showing 33 changed files with 485 additions and 215 deletions.
diff --git a/frontend/desktop/deploy/manifests/rbac.yaml b/frontend/desktop/deploy/manifests/rbac.yaml
@@ -3,15 +3,15 @@ kind: ClusterRole
 metadata:
   name: auth-system-manager-role
 rules:
-  - apiGroups: ['user.sealos.io']
-    resources: ['users']
-    verbs: ['list', 'get', 'create', 'update', 'patch', 'watch']
-  - apiGroups: ['user.sealos.io']
-    resources: ['users/status']
-    verbs: ['list', 'get', 'create', 'update', 'patch', 'watch']
-  - apiGroups: ['user.sealos.io']
-    resources: ['operationrequests', 'deleterequests']
-    verbs: ['create', 'get']
+  - apiGroups: ["user.sealos.io"]
+    resources: ["users"]
+    verbs: ["list", "get", "create", "update", "patch", "watch"]
+  - apiGroups: ["user.sealos.io"]
+    resources: ["users/status"]
+    verbs: ["list", "get", "create", "update", "patch", "watch"]
+  - apiGroups: ["user.sealos.io"]
+    resources: ["operationrequests", "deleterequests"]
+    verbs: ["create", "get"]
 
 ---
 apiVersion: rbac.authorization.k8s.io/v1
@@ -59,10 +59,10 @@ metadata:
   name: recharge-gift-cm-reader
   namespace: sealos
 rules:
-  - apiGroups: [''] # "" indicates the core API group
-    resources: ['configmaps']
-    resourceNames: ['recharge-gift']
-    verbs: ['get', 'watch', 'list']
+  - apiGroups: [""] # "" indicates the core API group
+    resources: ["configmaps"]
+    resourceNames: ["recharge-gift"]
+    verbs: ["get", "watch", "list"]
 ---
 apiVersion: rbac.authorization.k8s.io/v1
 kind: RoleBinding
@@ -83,12 +83,12 @@ kind: ClusterRole
 metadata:
   name: account-editor-role
 rules:
-  - apiGroups: ['account.sealos.io']
-    resources: ['accounts']
-    verbs: ['list', 'get', 'create', 'update', 'patch', 'watch']
-  - apiGroups: ['notification.sealos.io']
-    resources: ['notifications']
-    verbs: ['list', 'get', 'create', 'update', 'patch', 'watch']
+  - apiGroups: ["account.sealos.io"]
+    resources: ["accounts"]
+    verbs: ["list", "get", "create", "update", "patch", "watch"]
+  - apiGroups: ["notification.sealos.io"]
+    resources: ["notifications"]
+    verbs: ["list", "get", "create", "update", "patch", "watch"]
 ---
 apiVersion: rbac.authorization.k8s.io/v1
 kind: ClusterRoleBinding

diff --git a/frontend/desktop/src/api/platform.ts b/frontend/desktop/src/api/platform.ts
@@ -1,13 +1,13 @@
 import request from '@/services/request';
 import {
   ApiResp,
-  NotificationItem,
   LayoutConfigType,
   CloudConfigType,
   AuthClientConfigType,
   AppClientConfigType,
   CommonConfigType,
-  CommonClientConfigType
+  CommonClientConfigType,
+  TNotification
 } from '@/types';
 import { AccountCRD } from '@/types/user';
 
@@ -76,9 +76,12 @@ export const getWechatResult = (payload: { code: string }) =>
   });
 
 export const getGlobalNotification = () => {
-  return request.get<any, ApiResp<NotificationItem>>('/api/notification/global');
+  return request.get<any, ApiResp<TNotification>>('/api/notification/global');
 };
 
+export const listNotification = () =>
+  request.get<any, ApiResp<TNotification[]>>('/api/notification/listNotification');
+
 export const getResource = () => {
   return request.get<
     any,

diff --git a/frontend/desktop/src/components/account/cost.tsx b/frontend/desktop/src/components/account/cost.tsx
@@ -42,11 +42,14 @@ export default function Cost() {
       request<any, ApiResp<{ balance: number; deductionBalance: number }>>(
         '/api/account/getAmount'
       ),
-    enabled: !!user
+    enabled: !!user,
+    staleTime: 60 * 1000
   });
 
   const { data: billing, isSuccess } = useQuery(['getUserBilling'], () => getUserBilling(), {
-    cacheTime: 5 * 60 * 1000
+    cacheTime: 5 * 60 * 1000,
+    staleTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false
   });
 
   const balance = useMemo(() => {

diff --git a/frontend/desktop/src/components/app_window/index.tsx b/frontend/desktop/src/components/app_window/index.tsx
@@ -117,23 +117,25 @@ export default function AppWindow(props: {
               width={'20px'}
               height={'20px'}
             />
-            <Box ml="8px" color={wnapp?.menuData?.nameColor} fontSize={'12px'} fontWeight={400}>
+            <Box ml="8px" fontSize={'12px'} fontWeight={400}>
               {wnapp?.i18n?.[i18n?.language]?.name
                 ? wnapp.i18n?.[i18n?.language]?.name
                 : wnapp?.name}
             </Box>
-            {wnapp.menuData?.helpDocs && (
-              <Text
-                color={'#24282C'}
-                ml="16px"
-                onClick={() => {
-                  typeof wnapp.menuData?.helpDocs === 'string' &&
-                    window.open(wnapp.menuData?.helpDocs);
-                }}
-              >
-                {t('common:doc')}
-              </Text>
-            )}
+            {wnapp?.menuData &&
+              wnapp?.menuData?.length > 0 &&
+              wnapp?.menuData?.map((item) => (
+                <Text
+                  key={item.name}
+                  color={'#24282C'}
+                  ml="16px"
+                  onClick={() => {
+                    typeof item?.link === 'string' && window.open(item?.link);
+                  }}
+                >
+                  {item.name}
+                </Text>
+              ))}
           </Flex>
           <Flex ml={'auto'}>
             <Box

diff --git a/frontend/desktop/src/components/desktop_content/index.tsx b/frontend/desktop/src/components/desktop_content/index.tsx
@@ -134,15 +134,12 @@ export default function Desktop(props: any) {
 
   useEffect(() => {
     const globalNotification = async () => {
-      const data = await getGlobalNotification();
-      const newID = data.data?.metadata?.uid;
+      const { data: notification } = await getGlobalNotification();
+      if (!notification) return;
+      const newID = notification?.uid;
+      const title = notification?.i18n[i18n.language].title;
 
-      const title =
-        i18n.language === 'zh' && data.data?.spec?.i18ns?.zh?.message
-          ? data.data?.spec?.i18ns?.zh?.message
-          : data.data?.spec?.message;
-
-      if (data.data?.metadata?.labels?.[LicenseFrontendKey]) {
+      if (notification.licenseFrontend) {
         message({
           title: title,
           status: 'info',

diff --git a/frontend/desktop/src/components/desktop_content/monitor.tsx b/frontend/desktop/src/components/desktop_content/monitor.tsx
@@ -8,8 +8,8 @@ import { blurBackgroundStyles } from './index';
 
 export default function Monitor({ needStyles = true }: { needStyles?: boolean }) {
   const { t } = useTranslation();
-  const { data } = useQuery(['appListQuery'], getResource, {
-    cacheTime: 5 * 60 * 1000
+  const { data } = useQuery(['getResource'], getResource, {
+    staleTime: 60 * 1000
   });
 
   const info = [