fix create service (#190)

* fix: destroy modal after create

Signed-off-by: warjiang <[email protected]>

* fix: update table field for ingress resource

Signed-off-by: warjiang <[email protected]>

* fix: delete service resources

Signed-off-by: warjiang <[email protected]>

---------

Signed-off-by: warjiang <[email protected]>

Author: warjiang

ui/apps/dashboard/locales/en-US.json

@@ -175,5 +175,10 @@
   "7afddf70e5c82fab8fa935458b53174a": "Add",
   "236513393327bd6b098056314f8676ac": "Edit Override Policy",
   "781a90424b3d02153bc979e0f90179aa": "{{name}} Detail",
-  "1af8d577b89a4caf0e4b30734bbf7143": "Do you want to delete {{name}} Override Policy?"
+  "1af8d577b89a4caf0e4b30734bbf7143": "Do you want to delete {{name}} Override Policy?",
+  "1ed71b1211f5d2ba41e4a23331985c7c": "Failed to delete service",
+  "04a691b377c91da599d5b4b62b0cb114": "create successfully",
+  "a889286a51f3adab3cfb6913f2b0ac2e": "create failed",
+  "55aa6366c0d09a392d8acf54c4c4b837": "update successfully",
+  "930442e2f423436f9db3d8e91f648e93": "update failed"
 }

ui/apps/dashboard/locales/zh-CN.json

@@ -174,5 +174,10 @@
   "7afddf70e5c82fab8fa935458b53174a": "新增覆盖策略",
   "236513393327bd6b098056314f8676ac": "编辑覆盖策略",
   "781a90424b3d02153bc979e0f90179aa": "{{name}} 策略详情",
-  "1af8d577b89a4caf0e4b30734bbf7143": "确认要删除 {{name}} 覆盖策略么"
+  "1af8d577b89a4caf0e4b30734bbf7143": "确认要删除 {{name}} 覆盖策略么",
+  "1ed71b1211f5d2ba41e4a23331985c7c": "删除服务失败",
+  "04a691b377c91da599d5b4b62b0cb114": "创建成功",
+  "a889286a51f3adab3cfb6913f2b0ac2e": "创建失败",
+  "55aa6366c0d09a392d8acf54c4c4b837": "更新成功",
+  "930442e2f423436f9db3d8e91f648e93": "更新失败"
 }

ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/ingress-table.tsx

@@ -127,7 +127,9 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
               title={i18nInstance.t('6163856192e115e6b914d6fb8c4fd82c', {
                 name: r.objectMeta.name,
               })}
-              onConfirm={async () => {}}
+              onConfirm={() => {
+                onDeleteIngressContent(r);
+              }}
               okText={i18nInstance.t(
                 'e83a256e4f5bb4ff8b3d804b5473217a',
                 '确认',
@@ -147,7 +149,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
     },
   ];
   const { data, isLoading } = useQuery({
-    queryKey: ['GetServices', selectedWorkSpace, searchText],
+    queryKey: ['GetIngress', selectedWorkSpace, searchText],
     queryFn: async () => {
       const services = await GetIngress({
         namespace: selectedWorkSpace,
@@ -163,7 +165,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
       }
       columns={columns}
       loading={isLoading}
-      dataSource={data?.services || []}
+      dataSource={data?.items || []}
     />
   );
 };

ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-editor-modal.tsx

@@ -18,10 +18,9 @@ import i18nInstance from '@/utils/i18n';
 import { FC, useEffect, useState } from 'react';
 import { Form, Modal, Select } from 'antd';
 import Editor from '@monaco-editor/react';
-import { parse, stringify } from 'yaml';
+import { parse } from 'yaml';
 import _ from 'lodash';
-import { PutResource } from '@/services/unstructured';
-import { CreateDeployment } from '@/services/workload';
+import { CreateResource, PutResource } from '@/services/unstructured';
 import { IResponse, ServiceKind } from '@/services/base.ts';
 export interface NewWorkloadEditorModalProps {
   mode: 'create' | 'edit' | 'detail';
@@ -59,18 +58,17 @@ const ServiceEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
         try {
           const yamlObject = parse(content) as Record<string, string>;
           const kind = _.get(yamlObject, 'kind');
-          const namespace = _.get(yamlObject, 'metadata.namespace');
+          const namespace = _.get(yamlObject, 'metadata.namespace', 'default');
           const name = _.get(yamlObject, 'metadata.name');
           if (mode === 'create') {
-            if (kind.toLowerCase() === 'deployment') {
-              const ret = await CreateDeployment({
-                namespace,
-                name,
-                content: stringify(yamlObject),
-              });
-              await onOk(ret);
-              setContent('');
-            }
+            const ret = await CreateResource({
+              kind,
+              name,
+              namespace: namespace,
+              content: yamlObject,
+            });
+            await onOk(ret);
+            setContent('');
           } else {
             const ret = await PutResource({
               kind,

ui/apps/dashboard/src/pages/multicloud-resource-manage/service/index.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import i18nInstance from '@/utils/i18n';
 import Panel from '@/components/panel';
-import { Button, Input, Segmented, Select } from 'antd';
+import { App, Button, Input, Segmented, Select } from 'antd';
 import { ServiceKind } from '@/services/base';
 import { Icons } from '@/components/icons';
 import { useCallback, useState } from 'react';
@@ -26,6 +26,8 @@ import ServiceEditorModal from './components/service-editor-modal';
 import { stringify } from 'yaml';
 import IngressTable from '@/pages/multicloud-resource-manage/service/components/ingress-table';
 import useNamespace from '@/hooks/use-namespace.ts';
+import { useQueryClient } from '@tanstack/react-query';
+import { DeleteResource } from '@/services/unstructured.ts';
 const ServicePage = () => {
   const [filter, setFilter] = useState<{
     selectedWorkSpace: string;
@@ -53,6 +55,8 @@ const ServicePage = () => {
       content: '',
     });
   }, []);
+  const { message: messageApi } = App.useApp();
+  const queryClient = useQueryClient();
   return (
     <Panel>
       <div className={'flex flex-row justify-between mb-4'}>
@@ -153,7 +157,29 @@ const ServicePage = () => {
             });
             toggleShowModal(true);
           }}
-          onDeleteServiceContent={() => {}}
+          onDeleteServiceContent={async (r) => {
+            try {
+              const ret = await DeleteResource({
+                kind: r.typeMeta.kind,
+                name: r.objectMeta.name,
+                namespace: r.objectMeta.namespace,
+              });
+              if (ret.code !== 200) {
+                await messageApi.error(
+                  i18nInstance.t(
+                    '1ed71b1211f5d2ba41e4a23331985c7c',
+                    '删除服务失败',
+                  ),
+                );
+              }
+              await queryClient.invalidateQueries({
+                queryKey: ['GetServices'],
+                exact: false,
+              });
+            } catch (e) {
+              console.log('error', e);
+            }
+          }}
         />
       )}
       {filter.kind === ServiceKind.Ingress && (
@@ -168,16 +194,68 @@ const ServicePage = () => {
             });
             toggleShowModal(true);
           }}
-          onDeleteIngressContent={() => {}}
+          onDeleteIngressContent={async (r) => {
+            try {
+              const ret = await DeleteResource({
+                kind: r.typeMeta.kind,
+                name: r.objectMeta.name,
+                namespace: r.objectMeta.namespace,
+              });
+              if (ret.code !== 200) {
+                await messageApi.error(
+                  i18nInstance.t(
+                    '1ed71b1211f5d2ba41e4a23331985c7c',
+                    '删除服务失败',
+                  ),
+                );
+              }
+              await queryClient.invalidateQueries({
+                queryKey: ['GetIngress'],
+                exact: false,
+              });
+            } catch (e) {
+              console.log('error', e);
+            }
+          }}
         />
       )}
 
       <ServiceEditorModal
         mode={editorState.mode}
         open={showModal}
         serviceContent={editorState.content}
-        onOk={(ret) => {
-          console.log(ret);
+        onOk={async (ret) => {
+          if (ret.code === 200) {
+            await messageApi.success(
+              editorState.mode === 'edit'
+                ? i18nInstance.t('55aa6366c0d09a392d8acf54c4c4b837', '更新成功')
+                : i18nInstance.t(
+                    '04a691b377c91da599d5b4b62b0cb114',
+                    '创建成功',
+                  ),
+            );
+            toggleShowModal(false);
+            resetEditorState();
+            // invalidate react query
+            await queryClient.invalidateQueries({
+              queryKey: [
+                filter.kind === ServiceKind.Service
+                  ? 'GetServices'
+                  : 'GetIngress',
+                filter.selectedWorkSpace,
+                filter.searchText,
+              ],
+            });
+          } else {
+            await messageApi.error(
+              editorState.mode === 'edit'
+                ? i18nInstance.t('930442e2f423436f9db3d8e91f648e93', '更新失败')
+                : i18nInstance.t(
+                    'a889286a51f3adab3cfb6913f2b0ac2e',
+                    '创建失败',
+                  ),
+            );
+          }
         }}
         onCancel={() => {
           resetEditorState();

ui/apps/dashboard/src/services/service.ts

@@ -103,7 +103,7 @@ export async function GetIngress(params: {
       listMeta: {
         totalItems: number;
       };
-      services: Ingress[];
+      items: Ingress[];
     }>
   >(url, {
     params: convertDataSelectQuery(requestData),