fix(desktop): blinking delete dialog (#2486)

labring · Feb 3, 2023 · f0009ae · f0009ae
1 parent a95f47b
commit f0009ae
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 91 deletions.
diff --git a/desktop/frontend/public/iconfont/iconfont.js b/desktop/frontend/public/iconfont/iconfont.js
diff --git a/desktop/frontend/src/applications/infra/infra_share.ts b/desktop/frontend/src/applications/infra/infra_share.ts
@@ -44,7 +44,7 @@ spec:
   - roles: [master] 
     count: ${infraForm.masterCount}
     flavor: ${infraForm.masterType}
-    image: "ami-09123565dfe16d662"
+    image: "ami-048280a00d5085dd1"
     disks:
     - capacity: ${infraForm.masterDisk}
       volumeType: ${infraForm.masterDiskType}
@@ -54,7 +54,7 @@ spec:
   - roles: [ node ] 
     count: ${infraForm.nodeCount} 
     flavor: ${infraForm.nodeType}
-    image: "ami-09123565dfe16d662"
+    image: "ami-048280a00d5085dd1"
     disks:
     - capacity: ${infraForm.nodeDisk}
       volumeType: ${infraForm.nodeDiskType}

diff --git a/desktop/frontend/src/applications/pgsql/add_page.module.scss b/desktop/frontend/src/applications/pgsql/add_page.module.scss
@@ -104,9 +104,8 @@
 }
 
 .loading {
-  width: 280px !important;
-  height: 64px;
-  padding: 0 !important;
+  width: 260px !important;
+  padding: 8px 12px !important;
   border-radius: 16px !important;
 }
 

diff --git a/desktop/frontend/src/applications/pgsql/add_page.tsx b/desktop/frontend/src/applications/pgsql/add_page.tsx
@@ -41,8 +41,8 @@ function AddPage() {
         cpu: '300',
         memory: '300'
       },
-      dataBases: [{ name: '', user: '' }],
-      users: [{ name: '', authority: '' }]
+      dataBases: [{ name: 'rootdb', user: 'root' }],
+      users: [{ name: 'root', authority: 'superuser' }]
     },
     reValidateMode: 'onSubmit',
     mode: 'all'
@@ -183,6 +183,7 @@ function AddPage() {
                       control={control}
                       name={`users.${index}.authority`}
                       rules={{ required: true }}
+                      defaultValue="superuser"
                       options={[
                         { key: 'superuser', content: 'superuser' },
                         { key: 'createdb', content: 'createdb' },
@@ -238,6 +239,7 @@ function AddPage() {
                     <ControlledDropdown
                       control={control}
                       name={`dataBases.${index}.user`}
+                      defaultValue="root"
                       rules={{ required: true }}
                       options={getValues('users').map((i) => {
                         return { key: i.name, content: i.name };
@@ -314,11 +316,7 @@ function AddPage() {
       <div>
         <Dialog open={createPgsqlMutation.isLoading}>
           <DialogSurface className={styles.loading}>
-            <DialogBody>
-              <DialogContent>
-                <Spinner size="small" label="创建中" />
-              </DialogContent>
-            </DialogBody>
+            <Spinner size="small" label="创建中" />
           </DialogSurface>
         </Dialog>
       </div>

diff --git a/desktop/frontend/src/applications/pgsql/clusterInfo.tsx b/desktop/frontend/src/applications/pgsql/clusterInfo.tsx
@@ -129,7 +129,7 @@ export default function ClusterInfo(props: TClusterInfo) {
   };
 
   return (
-    <div className={styles.pageWrapperScroll}>
+    <>
       <div className={clsx(styles.header, 'flex items-center')}>
         <PgsqlStatus pgsqlDetail={detailPgsql} openEventDialog={openEventDialog} />
         <div className="ml-4">
@@ -215,6 +215,6 @@ export default function ClusterInfo(props: TClusterInfo) {
           }
         ]}
       />
-    </div>
+    </>
   );
 }
diff --git a/desktop/frontend/src/applications/pgsql/components/delete_dialog.module.scss b/desktop/frontend/src/applications/pgsql/components/delete_dialog.module.scss
@@ -54,9 +54,8 @@
 }
 
 .loading {
-  width: 280px !important;
-  height: 64px;
-  padding: 0 !important;
+  width: 260px !important;
+  padding: 8px 12px !important;
   border-radius: 16px !important;
 }
 

diff --git a/desktop/frontend/src/applications/pgsql/components/delete_dialog.tsx b/desktop/frontend/src/applications/pgsql/components/delete_dialog.tsx
@@ -99,11 +99,7 @@ export default function DeletePgsqlDialog(props: DialogComponentProps) {
       <div>
         <Dialog open={dialogStatus === DialogStatus.loading}>
           <DialogSurface className={styles.loading}>
-            <DialogBody>
-              <DialogContent>
-                <Spinner size="small" label="删除中" />
-              </DialogContent>
-            </DialogBody>
+            <Spinner size="small" label="删除中" />
           </DialogSurface>
         </Dialog>
       </div>

diff --git a/desktop/frontend/src/applications/pgsql/components/drawer.module.scss b/desktop/frontend/src/applications/pgsql/components/drawer.module.scss
@@ -31,7 +31,7 @@
   background-color: #fff;
   background-image: url('/images/pgsql/pgsql_bg.png');
   background-size: cover;
-  border-radius: 16px 0px 0px 16px;
+  border-radius: 8px 0px 0px 0px;
 }
 
 @keyframes drawer-open {

diff --git a/desktop/frontend/src/applications/pgsql/components/events_dialog.tsx b/desktop/frontend/src/applications/pgsql/components/events_dialog.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
+import Iconfont from 'components/iconfont';
 import request from 'services/request';
 import useSessionStore from 'stores/session';
 import Button from './button';
@@ -35,11 +36,9 @@ export default function PgsqlEventsDialog(props: PgsqlEventsDialog) {
       <div className="flex items-center">
         <div>{status}</div>
         <div className="ml-auto cursor-pointer ">
-          <Button
-            shape="squareRound"
-            handleClick={() => onCancel()}
-            icon={'/images/pgsql/shrink.svg'}
-          ></Button>
+          <Button shape="squareRound" handleClick={() => onCancel()}>
+            <Iconfont width={16} height={16} iconName="icon-shrink" color="#239BF2" />
+          </Button>
         </div>
       </div>
       {items?.length === 0 && <div>暂无数据</div>}

diff --git a/desktop/frontend/src/applications/pgsql/front_page.module.scss b/desktop/frontend/src/applications/pgsql/front_page.module.scss
@@ -10,7 +10,10 @@
 }
 
 .empty {
-  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/desktop/frontend/src/applications/pgsql/front_page.tsx b/desktop/frontend/src/applications/pgsql/front_page.tsx
@@ -27,7 +27,11 @@ function FrontPage() {
   const [pgsqlStatus, setPgsqlStatus] = useState('');
   const { currentApp } = useAppStore();
 
-  const { data: pgsqlLists } = useQuery(
+  const {
+    data: pgsqlLists,
+    isSuccess,
+    isError
+  } = useQuery(
     ['getAllPgsql'],
     async () => {
       const res = await request.post('/api/pgsql/getAll', { kubeconfig });
@@ -88,66 +92,68 @@ function FrontPage() {
           </Button>
         </div>
       </div>
-      {pgsqlLists?.data.items?.length === 0 && (
+      {(isError || pgsqlLists?.data?.items?.length === 0) && (
         <div className={clsx(styles.empty)}>
           <Image src="/images/pgsql/empty_state.svg" alt="pgsql" width={240} height={240} />
           <div className={styles.title}>当前集群列表为空</div>
           <div className={styles.desc}>点击右上角新建集群按钮,创建一个PostgreSQL集群吧~</div>
         </div>
       )}
-      <div
-        className={clsx(
-          'grow',
-          styles.scrollWrap,
-          currentApp?.size === 'maxmin' ? 'mx-8' : 'mx-40 '
-        )}
-      >
-        <div className={clsx('w-full  py-8 absolute')}>
-          <div className="table w-full">
-            <div className={styles.tableHeader}>
-              <div className={styles.headerItem}>名字</div>
-              <div className={clsx(styles.headerItem)}>状态</div>
-              <div className={styles.headerItem}>创建时间</div>
-              <div className={styles.headerItem}>CPU</div>
-              <div className={styles.headerItem}>Memory</div>
-              <div className={styles.headerItem}>Size</div>
-              <div className={styles.headerItem}>操作</div>
-            </div>
-            <div className={styles.tableContent}>
-              {pgsqlLists?.data.items?.map((item: TPgsqlDetail) => {
-                return (
-                  <div
-                    className={styles.tableRow}
-                    key={item.metadata.uid}
-                    onClick={() => getPgsql(item.metadata.name)}
-                  >
-                    <div className={styles.tableData}>
-                      <div>{item.metadata.name}</div>
-                    </div>
-                    <div className={clsx(styles.tableData)}>
-                      <PgsqlStatus pgsqlDetail={item} openEventDialog={openEventDialog} />
-                    </div>
-                    <div className={clsx(styles.tableData)}>
-                      {formatTime(item?.metadata?.creationTimestamp, 'YYYY/MM/DD HH:mm:ss')}
-                    </div>
-                    <div className={styles.tableData}>{item.spec.resources.requests.cpu}</div>
-                    <div className={styles.tableData}>{item.spec.resources.requests.memory}</div>
-                    <div className={styles.tableData}>{item.spec.volume.size}</div>
-                    <div className={styles.tableData}>
-                      <Button
-                        type="danger"
-                        shape="round"
-                        handleClick={(e) => openDeleteDialog(e, item)}
-                        icon={'/images/pgsql/delete.svg'}
-                      ></Button>
+      {isSuccess && pgsqlLists?.data?.items?.length !== 0 && (
+        <div
+          className={clsx(
+            'grow',
+            styles.scrollWrap,
+            currentApp?.size === 'maxmin' ? 'mx-8' : 'mx-40 '
+          )}
+        >
+          <div className={clsx('w-full  py-8 absolute')}>
+            <div className="table w-full">
+              <div className={styles.tableHeader}>
+                <div className={styles.headerItem}>名字</div>
+                <div className={clsx(styles.headerItem)}>状态</div>
+                <div className={styles.headerItem}>创建时间</div>
+                <div className={styles.headerItem}>CPU</div>
+                <div className={styles.headerItem}>Memory</div>
+                <div className={styles.headerItem}>Size</div>
+                <div className={styles.headerItem}>操作</div>
+              </div>
+              <div className={styles.tableContent}>
+                {pgsqlLists?.data.items?.map((item: TPgsqlDetail) => {
+                  return (
+                    <div
+                      className={styles.tableRow}
+                      key={item.metadata.uid}
+                      onClick={() => getPgsql(item.metadata.name)}
+                    >
+                      <div className={styles.tableData}>
+                        <div>{item.metadata.name}</div>
+                      </div>
+                      <div className={clsx(styles.tableData)}>
+                        <PgsqlStatus pgsqlDetail={item} openEventDialog={openEventDialog} />
+                      </div>
+                      <div className={clsx(styles.tableData)}>
+                        {formatTime(item?.metadata?.creationTimestamp, 'YYYY/MM/DD HH:mm:ss')}
+                      </div>
+                      <div className={styles.tableData}>{item.spec.resources.requests.cpu}</div>
+                      <div className={styles.tableData}>{item.spec.resources.requests.memory}</div>
+                      <div className={styles.tableData}>{item.spec.volume.size}</div>
+                      <div className={styles.tableData}>
+                        <Button
+                          type="danger"
+                          shape="round"
+                          handleClick={(e) => openDeleteDialog(e, item)}
+                          icon={'/images/pgsql/delete.svg'}
+                        ></Button>
+                      </div>
                     </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
 
       <Drawer
         open={eventsDialogVisible}

diff --git a/desktop/frontend/src/applications/pgsql/pgsql_common.scss b/desktop/frontend/src/applications/pgsql/pgsql_common.scss
@@ -38,11 +38,13 @@ $theme-color-title: #0d1a2d;
 .pgsqlStatus {
   background: rgba(92, 97, 228, 0.15);
   border-radius: 12px;
-  height: 40px;
+  height: 38px;
   width: 100px;
+  padding: 0px 8px;
+  font-size: 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
 
   .circle {
     width: 8px;

diff --git a/desktop/frontend/src/applications/pgsql/pgsql_common.ts b/desktop/frontend/src/applications/pgsql/pgsql_common.ts
@@ -49,7 +49,7 @@ export type TPgSqlForm = {
 export enum EPgsqlStatus {
   Running = 'Running',
   Creating = 'Creating',
-  Failed = 'Failed',
+  Failed = 'CreateFailed',
   EmptyStatus = 'EmptyStatus'
 }
 

diff --git a/desktop/frontend/src/applications/pgsql/pgsql_status.tsx b/desktop/frontend/src/applications/pgsql/pgsql_status.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import styles from './pgsql_status.module.scss';
 import { TPgsqlDetail, EPgsqlStatus } from './pgsql_common';
-import Image from 'next/image';
+import Iconfont from 'components/iconfont';
 
 type PgsqlStatus = {
   pgsqlDetail: TPgsqlDetail;
@@ -24,8 +24,12 @@ function PgsqlStatus(props: PgsqlStatus) {
       onClick={(e) => openEventDialog(e, pgsqlDetail)}
     >
       <div className={styles.circle}></div>
-      <div className={clsx('px-1')}>{pgsqlDetail?.status?.PostgresClusterStatus}</div>
-      <Image src="/images/pgsql/shrink.svg" alt="pgsql" width={20} height={20} />
+      <div className={clsx('px-1 w-16')}>
+        {pgsqlDetail?.status?.PostgresClusterStatus === EPgsqlStatus.Failed
+          ? 'Failed'
+          : pgsqlDetail?.status?.PostgresClusterStatus}
+      </div>
+      <Iconfont width={16} height={16} iconName="icon-shrink" />
     </div>
   );
 }

diff --git a/desktop/frontend/src/mock/infra.ts b/desktop/frontend/src/mock/infra.ts
@@ -18,15 +18,15 @@ spec:
   - roles: [ master ]
     count: {{ .masterCount }} 
     flavor: {{ .masterType }}
-    image: "ami-09123565dfe16d662"
+    image: "ami-048280a00d5085dd1"
     disks:
     - capacity: {{.masterDisk}}
       volumeType: {{.masterDiskType}}
       type: "root"
   - roles: [ node ]
     count: {{ .nodeCount }}
     flavor: {{ .nodeType }}
-    image: "ami-09123565dfe16d662"
+    image: "ami-048280a00d5085dd1"
     disks:
     - capacity: {{.nodeDisk}}
       volumeType: {{.nodeDiskType}}

diff --git a/desktop/frontend/src/pages/_app.tsx b/desktop/frontend/src/pages/_app.tsx
@@ -4,7 +4,8 @@ import {
   GriffelRenderer,
   RendererProvider,
   SSRProvider,
-  webLightTheme
+  webLightTheme,
+  Theme
 } from '@fluentui/react-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AppProps } from 'next/app';
@@ -22,13 +23,18 @@ const queryClient = new QueryClient({
 
 type EnhancedAppProps = AppProps & { renderer?: GriffelRenderer };
 
+const customLightTheme: Theme = {
+  ...webLightTheme,
+  colorPaletteRedBorder2: '#ee4161'
+};
+
 function APP({ Component, pageProps, renderer }: EnhancedAppProps) {
   return (
     // 👇 Accepts a renderer from <Document /> or creates a default one.RendererProvider can provide global styles
     //    Also triggers rehydration a client
     <RendererProvider renderer={renderer || createDOMRenderer()}>
       <SSRProvider>
-        <FluentProvider theme={webLightTheme}>
+        <FluentProvider theme={customLightTheme}>
           <QueryClientProvider client={queryClient}>
             <Component {...pageProps} />
           </QueryClientProvider>