From 1df6b4a1ef43d73cce050ec5161463b1661ffbf1 Mon Sep 17 00:00:00 2001 From: Boli Guan Date: Thu, 8 Dec 2022 22:05:45 +0800 Subject: [PATCH 1/2] UI add feature the deletion for projects/features/dataSource Signed-off-by: Boli Guan --- ui/src/api/api.tsx | 17 +++++ .../components/DataSourceTable/index.tsx | 63 ++++++++++++--- .../feature/components/FeatureTable/index.tsx | 76 ++++++++++++++----- .../project/components/ProjectTable/index.tsx | 43 ++++++++++- 4 files changed, 166 insertions(+), 33 deletions(-) diff --git a/ui/src/api/api.tsx b/ui/src/api/api.tsx index 6c8b6f665..3fb08bad8 100644 --- a/ui/src/api/api.tsx +++ b/ui/src/api/api.tsx @@ -245,3 +245,20 @@ export const authAxios = async (msalInstance: PublicClientApplication) => { ); return axios; }; + +export const deleteEntity = async (enity: string) => { + const axios = await authAxios(msalInstance); + return axios.delete(`${getApiBaseUrl()}/entity/${enity}`); +}; + +export const getDependent = async (entity: string) => { + const axios = await authAxios(msalInstance); + return await axios + .get(`${getApiBaseUrl()}/dependent/${entity}`) + .then((response) => { + return response; + }) + .catch((error) => { + return error.response; + }); +}; diff --git a/ui/src/pages/dataSource/components/DataSourceTable/index.tsx b/ui/src/pages/dataSource/components/DataSourceTable/index.tsx index 951bd39fd..666045e43 100644 --- a/ui/src/pages/dataSource/components/DataSourceTable/index.tsx +++ b/ui/src/pages/dataSource/components/DataSourceTable/index.tsx @@ -1,10 +1,11 @@ import React, { forwardRef, useRef } from "react"; -import { Button } from "antd"; +import { Button, message, notification, Popconfirm, Space } from "antd"; import { useQuery } from "react-query"; import { useNavigate } from "react-router-dom"; import { DataSource } from "@/models/model"; -import { fetchDataSources } from "@/api"; +import { fetchDataSources, deleteEntity } from "@/api"; import ResizeTable, { ResizeColumnType } from "@/components/ResizeTable"; +import { DeleteOutlined } from "@ant-design/icons"; export interface DataSourceTableProps { project?: string; @@ -95,22 +96,42 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => { width: 130, resize: false, render: (record: DataSource) => { + const { guid } = record; return ( - + + + { + return new Promise((resolve) => { + onDelete(guid, resolve); + }); + }} + > + + + ); }, }, ]; - const { isLoading, data: tableData } = useQuery( + const { + isLoading, + data: tableData, + refetch, + } = useQuery( ["dataSources", project], async () => { if (project) { @@ -126,6 +147,24 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => { } ); + const onDelete = async ( + entity: string, + resolve: (value?: unknown) => void + ) => { + try { + await deleteEntity(entity); + message.success("The date source is deleted successfully."); + refetch(); + } catch (e: any) { + notification.error({ + message: "", + description: e.detail, + placement: "top", + }); + } finally { + resolve(); + } + }; return ( { +const FeatureTable = (props: FeatureTableProps, ref: any) => { const navigate = useNavigate(); const { project, keyword } = props; @@ -100,22 +101,42 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => { width: 100, resize: false, render: (record: Feature) => { + const { guid } = record; return ( - + + + { + return new Promise((resolve) => { + onDelete(guid, resolve); + }); + }} + > + + + ); }, }, ]; - const { isLoading, data: tableData } = useQuery( + const { + isLoading, + data: tableData, + refetch, + } = useQuery( ["dataSources", project, keyword], async () => { if (project) { @@ -131,6 +152,25 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => { } ); + const onDelete = async ( + entity: string, + resolve: (value?: unknown) => void + ) => { + try { + await deleteEntity(entity); + message.success("The feature is deleted successfully."); + refetch(); + } catch (e: any) { + notification.error({ + message: "", + description: e.detail, + placement: "top", + }); + } finally { + resolve(); + } + }; + return ( { ); }; -const DataSourceTableComponent = forwardRef( - DataSourceTable +const FeatureTableComponent = forwardRef( + FeatureTable ); -DataSourceTableComponent.displayName = "DataSourceTableComponent"; +FeatureTableComponent.displayName = "FeatureTableComponent"; -export default DataSourceTableComponent; +export default FeatureTableComponent; diff --git a/ui/src/pages/project/components/ProjectTable/index.tsx b/ui/src/pages/project/components/ProjectTable/index.tsx index 566d1443c..6e4e9f225 100644 --- a/ui/src/pages/project/components/ProjectTable/index.tsx +++ b/ui/src/pages/project/components/ProjectTable/index.tsx @@ -1,10 +1,11 @@ import React, { forwardRef } from "react"; -import { Button, Space } from "antd"; +import { Button, Space, notification, Popconfirm, message } from "antd"; import { useQuery } from "react-query"; import { useNavigate } from "react-router-dom"; import { Project } from "@/models/model"; -import { fetchProjects } from "@/api"; +import { fetchProjects, deleteEntity } from "@/api"; import ResizeTable, { ResizeColumnType } from "@/components/ResizeTable"; +import { DeleteOutlined } from "@ant-design/icons"; export interface ProjectTableProps { project?: string; @@ -54,13 +55,30 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => { > View Lineage + { + return new Promise((resolve) => { + onDelete(name, resolve); + }); + }} + > + + ); }, }, ]; - const { isLoading, data: tableData } = useQuery( + const { + isLoading, + data: tableData, + refetch, + } = useQuery( ["Projects", project], async () => { const reuslt = await fetchProjects(); @@ -79,6 +97,25 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => { } ); + const onDelete = async ( + entity: string, + resolve: (value?: unknown) => void + ) => { + try { + await deleteEntity(entity); + message.success("The project is deleted successfully."); + refetch(); + } catch (e: any) { + notification.error({ + message: "", + description: e.detail, + placement: "top", + }); + } finally { + resolve(); + } + }; + return ( Date: Thu, 8 Dec 2022 22:16:58 +0800 Subject: [PATCH 2/2] Update width Signed-off-by: Boli Guan --- ui/src/pages/dataSource/components/DataSourceTable/index.tsx | 2 +- ui/src/pages/feature/components/FeatureTable/index.tsx | 2 +- ui/src/pages/project/components/ProjectTable/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/pages/dataSource/components/DataSourceTable/index.tsx b/ui/src/pages/dataSource/components/DataSourceTable/index.tsx index 666045e43..19f42de6d 100644 --- a/ui/src/pages/dataSource/components/DataSourceTable/index.tsx +++ b/ui/src/pages/dataSource/components/DataSourceTable/index.tsx @@ -93,7 +93,7 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => { { title: "Action", fixed: "right", - width: 130, + width: 200, resize: false, render: (record: DataSource) => { const { guid } = record; diff --git a/ui/src/pages/feature/components/FeatureTable/index.tsx b/ui/src/pages/feature/components/FeatureTable/index.tsx index 848370c2a..28f729f51 100644 --- a/ui/src/pages/feature/components/FeatureTable/index.tsx +++ b/ui/src/pages/feature/components/FeatureTable/index.tsx @@ -98,7 +98,7 @@ const FeatureTable = (props: FeatureTableProps, ref: any) => { { title: "Action", fixed: "right", - width: 100, + width: 200, resize: false, render: (record: Feature) => { const { guid } = record; diff --git a/ui/src/pages/project/components/ProjectTable/index.tsx b/ui/src/pages/project/components/ProjectTable/index.tsx index 6e4e9f225..0a29ccd37 100644 --- a/ui/src/pages/project/components/ProjectTable/index.tsx +++ b/ui/src/pages/project/components/ProjectTable/index.tsx @@ -31,7 +31,7 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => { { key: "action", title: "Action", - width: 130, + width: 240, resize: false, render: (record: Project) => { const { name } = record;