update form

labring · Jan 10, 2025 · 7faa4a7 · 7faa4a7
1 parent 96005d0
commit 7faa4a7
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 6 deletions.
diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json
@@ -276,5 +276,6 @@
     "add_configmap": "Add Configmaps",
     "storage_path_placeholder": "For Example: /data"
   },
-  "guide_deploy_button": "Complete creation"
-}
+  "guide_deploy_button": "Complete creation",
+  "shared": "Shared"
+}
diff --git a/frontend/providers/applaunchpad/public/locales/zh/common.json b/frontend/providers/applaunchpad/public/locales/zh/common.json
@@ -277,5 +277,6 @@
     "add_configmap": "新增配置文件",
     "storage_path_placeholder": "如：/data"
   },
-  "guide_deploy_button": "完成创建"
-}
+  "guide_deploy_button": "完成创建",
+  "shared": "共享"
+}
diff --git a/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx b/frontend/providers/applaunchpad/src/pages/app/detail/components/AppBaseInfo.tsx
@@ -100,6 +100,30 @@ const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
     [app]
   );
 
+  const persistentVolumes = useMemo(() => {
+    return app.volumes
+      .filter((item) => 'persistentVolumeClaim' in item)
+      .reduce(
+        (
+          acc: {
+            path: string;
+            name: string;
+          }[],
+          volume
+        ) => {
+          const mount = app.volumeMounts.find((m) => m.name === volume.name);
+          if (mount) {
+            acc.push({
+              path: mount.mountPath,
+              name: volume.name
+            });
+          }
+          return acc;
+        },
+        []
+      );
+  }, [app.volumes, app.volumeMounts]);
+
   return (
     <Box px={6} py={7} position={'relative'}>
       {app?.source?.hasSource && (
@@ -415,6 +439,27 @@ const AppBaseInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
                       </Box>
                     </Flex>
                   ))}
+                  {persistentVolumes.map((item) => (
+                    <Flex
+                      key={item.path}
+                      alignItems={'center'}
+                      px={4}
+                      py={1}
+                      _notLast={{
+                        borderBottom: theme.borders.base
+                      }}
+                    >
+                      <MyIcon name={'store'} />
+                      <Box ml={4} flex={'1 0 0'} w={0}>
+                        <Box color={'grayModern.900'} fontWeight={'bold'}>
+                          {item.path}
+                        </Box>
+                      </Box>
+                      <Box fontSize={'12px'} color={'grayModern.600'}>
+                        {t('shared')}
+                      </Box>
+                    </Flex>
+                  ))}
                 </Box>
               </AccordionPanel>
             </AccordionItem>

diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx
@@ -84,6 +84,7 @@ const Form = ({
     control,
     setValue,
     getValues,
+    watch,
     formState: { errors }
   } = formHook;
 
@@ -310,6 +311,30 @@ const Form = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const SliderList = useMemo(() => countSliderList(), [already, refresh]);
 
+  const persistentVolumes = useMemo(() => {
+    return getValues('volumes')
+      .filter((item) => 'persistentVolumeClaim' in item)
+      .reduce(
+        (
+          acc: {
+            path: string;
+            name: string;
+          }[],
+          volume
+        ) => {
+          const mount = getValues('volumeMounts').find((m) => m.name === volume.name);
+          if (mount) {
+            acc.push({
+              path: mount.mountPath,
+              name: volume.name
+            });
+          }
+          return acc;
+        },
+        []
+      );
+  }, [getValues, refresh]);
+
   return (
     <>
       <Grid
@@ -1194,6 +1219,31 @@ const Form = ({
                           />
                         </Flex>
                       ))}
+                      {persistentVolumes.map((item) => (
+                        <Flex key={item.path} _notLast={{ mb: 5 }} alignItems={'center'}>
+                          <Flex
+                            alignItems={'center'}
+                            px={4}
+                            py={1}
+                            border={theme.borders.base}
+                            flex={'0 0 320px'}
+                            w={0}
+                            borderRadius={'md'}
+                            cursor={'not-allowed'}
+                            bg={'grayModern.25'}
+                          >
+                            <MyIcon name={'store'} />
+                            <Box ml={4} flex={'1 0 0'} w={0}>
+                              <Box color={'myGray.900'} fontWeight={'bold'}>
+                                {item.path}
+                              </Box>
+                            </Box>
+                            <Box fontSize={'12px'} color={'grayModern.600'}>
+                              {t('shared')}
+                            </Box>
+                          </Flex>
+                        </Flex>
+                      ))}
                     </Box>
                   </Box>
                 </AccordionPanel>

diff --git a/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts b/frontend/providers/applaunchpad/src/utils/deployYaml2Json.ts
@@ -14,8 +14,6 @@ import dayjs from 'dayjs';
 import yaml from 'js-yaml';
 
 export const json2DeployCr = (data: AppEditType, type: 'deployment' | 'statefulset') => {
-  console.log(data, 'data');
-
   const totalStorage = data.storeList.reduce((acc, item) => acc + item.value, 0);
 
   const metadata = {