remove duplicate code about delete resoruce

easegress-io · Oct 17, 2023 · ffca1f6 · ffca1f6
1 parent e4c7c20
commit ffca1f6
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 95 deletions.
diff --git a/src/app/(resources)/context.tsx b/src/app/(resources)/context.tsx
@@ -1,3 +1,4 @@
+import { EGObject } from "@/apis/object"
 import React from "react"
 
 type ResourceContext = {
@@ -8,6 +9,11 @@ type ResourceContext = {
         yaml: string
     }
     setViewYaml: ({ open, yaml }: { open: boolean, yaml: string }) => void
+    deleteResource: {
+        open: boolean
+        resource: EGObject
+    }
+    setDeleteResource: ({ open, resource }: { open: boolean, resource: EGObject }) => void
 }
 
 export const ResourceContext = React.createContext<ResourceContext>({
@@ -18,16 +24,25 @@ export const ResourceContext = React.createContext<ResourceContext>({
         yaml: "",
     },
     setViewYaml: () => { },
+    deleteResource: {
+        open: false,
+        resource: {} as EGObject,
+    },
+    setDeleteResource: () => { },
 })
 
 export const useResourcesContext = () => {
-    const { search, setSearch, setViewYaml } = React.useContext(ResourceContext)
+    const { search, setSearch, setViewYaml, setDeleteResource } = React.useContext(ResourceContext)
     const openViewYaml = (yaml: string) => {
         setViewYaml({ open: true, yaml })
     }
+    const openDeleteResource = (resource: EGObject) => {
+        setDeleteResource({ open: true, resource })
+    }
     return {
         search,
         setSearch,
         openViewYaml,
+        openDeleteResource,
     }
 }
diff --git a/src/app/(resources)/controller/page.tsx b/src/app/(resources)/controller/page.tsx
@@ -3,7 +3,7 @@
 import { useObjects } from "@/apis/hooks"
 import { useClusters } from "@/app/context"
 import React from "react"
-import { EGObject, deleteObject, getObjectStatus, updateObject } from "@/apis/object"
+import { EGObject, getObjectStatus, updateObject } from "@/apis/object"
 import { Box, Chip, CircularProgress, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
 import { useIntl } from "react-intl"
 import YamlEditorDialog from "@/components/YamlEditorDialog"
@@ -14,32 +14,19 @@ import ErrorAlert from "@/components/ErrorAlert"
 import _ from 'lodash'
 import TextButton from "@/components/TextButton"
 import yaml from "js-yaml"
-import SimpleDialog from "@/components/SimpleDialog"
 import { useResourcesContext } from "../context"
-import { useDeleteResource, useEditResource } from "../hooks"
+import { useEditResource } from "../hooks"
 
 export default function Controller() {
   const { currentCluster } = useClusters()
-  const { search, openViewYaml } = useResourcesContext()
+  const { search, openViewYaml, openDeleteResource } = useResourcesContext()
   const { objects, error, isLoading, mutate } = useObjects(currentCluster)
   const intl = useIntl()
   const { enqueueSnackbar } = useSnackbar()
   const controllers = objects?.others.filter(o => {
     return o.name.includes(search)
   }) || []
 
-  const deleteController = useDeleteResource()
-  const confirmDeleteController = () => {
-    const s = deleteController.resource
-    deleteController.onClose()
-    deleteObject(currentCluster, s.name).then(() => {
-      mutate()
-      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteSuccess" }, { kind: s.kind, name: s.name }), { variant: 'success' })
-    }).catch(err => {
-      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteFailed" }, { kind: s.kind, name: s.name, error: catchErrorMessage(err) }), { variant: 'error' })
-    })
-  }
-
   const editController = useEditResource()
   const handleEditController = () => {
     const resource = editController.resource
@@ -109,7 +96,7 @@ export default function Controller() {
       // delete
       label: intl.formatMessage({ id: "app.general.actions.delete" }),
       onClick: (controller: EGObject) => {
-        deleteController.onOpen(controller)
+        openDeleteResource(controller)
       },
       color: "error",
     },
@@ -135,19 +122,6 @@ export default function Controller() {
           </TableBody>
         </Table>
       </TableContainer>
-      {/* delete */}
-      <SimpleDialog
-        open={deleteController.open}
-        onClose={deleteController.onClose}
-        title={intl.formatMessage({ id: "app.general.deleteConfirm" })}
-        actions={[{
-          label: intl.formatMessage({ id: "app.general.actions.delete" }),
-          onClick: confirmDeleteController,
-          style: {
-            color: "error",
-          }
-        }]}
-      />
       {/* edit */}
       <YamlEditorDialog
         open={editController.open}

diff --git a/src/app/(resources)/hooks.tsx b/src/app/(resources)/hooks.tsx
@@ -39,6 +39,7 @@ export function useDeleteResource() {
     setState({ open: false, resource: {} as EGObject })
   }
   return {
+    state, setState,
     open: state.open,
     resource: state.resource,
     onOpen,

diff --git a/src/app/(resources)/layout.tsx b/src/app/(resources)/layout.tsx
@@ -3,7 +3,7 @@
 import { mutate } from 'swr';
 import { useClusters } from "../context"
 import SearchBar from '@/components/SearchBar';
-import { createObject } from '@/apis/object';
+import { createObject, deleteObject } from '@/apis/object';
 import { useIntl } from 'react-intl';
 import React from 'react';
 import { useSnackbar } from 'notistack';
@@ -14,16 +14,30 @@ import { getObjectsSWRKey } from '@/apis/hooks';
 import YamlEditorDialog from '@/components/YamlEditorDialog';
 import { ResourceContext } from './context';
 import YamlViewer from '@/components/YamlViewer';
+import { useDeleteResource } from './hooks';
+import SimpleDialog from '@/components/SimpleDialog';
 
 export default function Layout({ children, }: { children: React.ReactNode }) {
-  const { currentCluster } = useClusters()
   const intl = useIntl()
+  const { enqueueSnackbar } = useSnackbar()
+  const { currentCluster } = useClusters()
   const [search, setSearch] = React.useState("")
   const [createOpen, setCreateOpen] = React.useState(false)
   const [viewYaml, setViewYaml] = React.useState({
     open: false,
     yaml: "",
   })
+  const deleteResource = useDeleteResource()
+  const confirmDeleteResource = () => {
+    const r = deleteResource.resource
+    deleteResource.onClose()
+    deleteObject(currentCluster, r.name).then(() => {
+      mutate(getObjectsSWRKey(currentCluster))
+      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteSuccess" }, { kind: r.kind, name: r.name }), { variant: 'success' })
+    }).catch(err => {
+      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteFailed" }, { kind: r.kind, name: r.name, error: catchErrorMessage(err) }), { variant: 'error' })
+    })
+  }
 
   const searchBarButtons = [
     {
@@ -43,7 +57,7 @@ export default function Layout({ children, }: { children: React.ReactNode }) {
         mutate={() => { mutate(getObjectsSWRKey(currentCluster)) }}
       />
       <ResourceContext.Provider value={{
-        search, setSearch, viewYaml, setViewYaml
+        search, setSearch, viewYaml, setViewYaml, deleteResource: deleteResource.state, setDeleteResource: deleteResource.setState,
       }}>
         {children}
       </ResourceContext.Provider>
@@ -53,6 +67,18 @@ export default function Layout({ children, }: { children: React.ReactNode }) {
         onClose={() => { setViewYaml({ open: false, yaml: "" }) }}
         yaml={viewYaml.yaml}
       />
+      <SimpleDialog
+        open={deleteResource.open}
+        onClose={deleteResource.onClose}
+        title={intl.formatMessage({ id: "app.general.deleteConfirm" })}
+        actions={[{
+          label: intl.formatMessage({ id: "app.general.actions.delete" }),
+          onClick: confirmDeleteResource,
+          style: {
+            color: "error",
+          }
+        }]}
+      />
     </div>
   )
 }

diff --git a/src/app/(resources)/pipeline/page.tsx b/src/app/(resources)/pipeline/page.tsx
@@ -3,7 +3,7 @@
 import { useObjects } from "@/apis/hooks"
 import { useClusters } from "@/app/context"
 import React from "react"
-import { EGObject, deleteObject, getObjectStatus, pipeline, updateObject } from "@/apis/object"
+import { EGObject, getObjectStatus, pipeline, updateObject } from "@/apis/object"
 import { Avatar, Box, Button, ButtonBase, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
 import { useIntl } from "react-intl"
 import { useSnackbar } from "notistack"
@@ -15,9 +15,8 @@ import TextButton from "@/components/TextButton"
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import yaml from "js-yaml"
-import SimpleDialog from "@/components/SimpleDialog"
 import { useResourcesContext } from "../context"
-import { useDeleteResource, useEditResource } from "../hooks"
+import { useEditResource } from "../hooks"
 import FlowChart from "./FlowChart"
 import { editor } from 'monaco-editor';
 import Close from "@mui/icons-material/Close"
@@ -26,7 +25,7 @@ import { Editor } from "@monaco-editor/react"
 export default function Pipeline() {
   const intl = useIntl()
   const { currentCluster } = useClusters()
-  const { search, openViewYaml } = useResourcesContext()
+  const { search, openViewYaml, openDeleteResource } = useResourcesContext()
   const { objects, error, isLoading, mutate } = useObjects(currentCluster)
   const { enqueueSnackbar } = useSnackbar()
 
@@ -68,18 +67,6 @@ export default function Pipeline() {
     setExpandValues({ ...expandValues, [server.name]: value })
   }
 
-  const deletePipeline = useDeleteResource()
-  const confirmDeletePipeline = () => {
-    const resource = deletePipeline.resource
-    deletePipeline.onClose()
-    deleteObject(currentCluster, resource.name).then(() => {
-      mutate()
-      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteSuccess" }, { kind: resource.kind, name: resource.name }), { variant: 'success' })
-    }).catch(err => {
-      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteFailed" }, { kind: resource.kind, name: resource.name, error: catchErrorMessage(err) }), { variant: 'error' })
-    })
-  }
-
   const editPipeline = useEditResource()
   const handleEditServer = () => {
     const resource = editPipeline.resource
@@ -148,8 +135,9 @@ export default function Pipeline() {
     {
       // delete
       label: intl.formatMessage({ id: "app.general.actions.delete" }),
-      onClick: (server: EGObject) => {
-        deletePipeline.onOpen(server)
+      onClick: (pipeline: EGObject) => {
+        // deletePipeline.onOpen(server)
+        openDeleteResource(pipeline)
       },
       color: "error",
     },
@@ -178,19 +166,6 @@ export default function Pipeline() {
           </TableBody>
         </Table>
       </TableContainer>
-      {/* delete */}
-      <SimpleDialog
-        open={deletePipeline.open}
-        onClose={deletePipeline.onClose}
-        title={intl.formatMessage({ id: "app.general.deleteConfirm" })}
-        actions={[{
-          label: intl.formatMessage({ id: "app.general.actions.delete" }),
-          onClick: confirmDeletePipeline,
-          style: {
-            color: "error",
-          }
-        }]}
-      />
       {/* edit */}
       <EditPipelineDialog
         open={editPipeline.open}

diff --git a/src/app/(resources)/traffic/page.tsx b/src/app/(resources)/traffic/page.tsx
@@ -3,7 +3,7 @@
 import { useObjects } from "@/apis/hooks"
 import { useClusters } from "@/app/context"
 import React from "react"
-import { EGObject, deleteObject, getObjectStatus, grpcserver, httpserver, pipeline, updateObject } from "@/apis/object"
+import { EGObject, getObjectStatus, grpcserver, httpserver, pipeline, updateObject } from "@/apis/object"
 import { Box, ButtonBase, Chip, CircularProgress, Collapse, IconButton, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
 import { useIntl } from "react-intl"
 import YamlEditorDialog from "@/components/YamlEditorDialog"
@@ -16,17 +16,16 @@ import TextButton from "@/components/TextButton"
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import yaml from "js-yaml"
-import SimpleDialog from "@/components/SimpleDialog"
 import { useResourcesContext } from "../context"
 import { TableData } from "./types"
 import { HTTPServerRuleTable, getHTTPTableData } from "./http"
 import { GRPCServerRuleTable, getGRPCTableData } from "./grpc"
-import { useDeleteResource, useEditResource } from "../hooks"
+import { useEditResource } from "../hooks"
 
 export default function Traffic() {
   const intl = useIntl()
   const { currentCluster } = useClusters()
-  const { search, openViewYaml } = useResourcesContext()
+  const { search, openViewYaml, openDeleteResource } = useResourcesContext()
   const { objects, error, isLoading, mutate } = useObjects(currentCluster)
   const { enqueueSnackbar } = useSnackbar()
 
@@ -59,18 +58,6 @@ export default function Traffic() {
     setExpandValues({ ...expandValues, [server.name]: value })
   }
 
-  const deleteServer = useDeleteResource()
-  const confirmDeleteServer = () => {
-    const resource = deleteServer.resource
-    deleteServer.onClose()
-    deleteObject(currentCluster, resource.name).then(() => {
-      mutate()
-      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteSuccess" }, { kind: resource.kind, name: resource.name }), { variant: 'success' })
-    }).catch(err => {
-      enqueueSnackbar(intl.formatMessage({ id: "app.general.deleteFailed" }, { kind: resource.kind, name: resource.name, error: catchErrorMessage(err) }), { variant: 'error' })
-    })
-  }
-
   const editServer = useEditResource()
   const handleEditServer = () => {
     const resource = editServer.resource
@@ -140,7 +127,8 @@ export default function Traffic() {
       // delete
       label: intl.formatMessage({ id: "app.general.actions.delete" }),
       onClick: (server: EGObject) => {
-        deleteServer.onOpen(server)
+        // deleteServer.onOpen(server)
+        openDeleteResource(server)
       },
       color: "error",
     },
@@ -174,19 +162,6 @@ export default function Traffic() {
           </TableBody>
         </Table>
       </TableContainer>
-      {/* delete */}
-      <SimpleDialog
-        open={deleteServer.open}
-        onClose={deleteServer.onClose}
-        title={intl.formatMessage({ id: "app.general.deleteConfirm" })}
-        actions={[{
-          label: intl.formatMessage({ id: "app.general.actions.delete" }),
-          onClick: confirmDeleteServer,
-          style: {
-            color: "error",
-          }
-        }]}
-      />
       {/* edit */}
       <YamlEditorDialog
         open={editServer.open}