UI add feature the deletion for projects/features/dataSource

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;
+ });
+};

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;
@@ -92,25 +93,45 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
  {
  title: "Action",
  fixed: "right",
- width: 130,
+ width: 200,
  resize: false,
  render: (record: DataSource) => {
+ const { guid } = record;
  return (
- <Button
- type="primary"
- ghost
- onClick={() => {
- navigate(getDetialUrl(record.guid));
- }}
- >
- View Details
- </Button>
+ <Space size="middle">
+ <Button
+ type="primary"
+ ghost
+ onClick={() => {
+ navigate(getDetialUrl(guid));
+ }}
+ >
+ View Details
+ </Button>
+ <Popconfirm
+ title="Are you sure to delete this data source?"
+ placement="topRight"
+ onConfirm={() => {
+ return new Promise((resolve) => {
+ onDelete(guid, resolve);
+ });
+ }}
+ >
+ <Button type="primary" danger ghost icon={<DeleteOutlined />}>
+ Detete
+ </Button>
+ </Popconfirm>
+ </Space>
  );
  },
  },
  ];
 
- const { isLoading, data: tableData } = useQuery<DataSource[]>(
+ const {
+ isLoading,
+ data: tableData,
+ refetch,
+ } = useQuery<DataSource[]>(
  ["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 (
  <ResizeTable
  rowKey="guid"

ui/src/pages/feature/components/FeatureTable/index.tsx

@@ -1,12 +1,13 @@
 import React, { forwardRef, useRef } from "react";
-import { Button } from "antd";
+import { Button, notification, message, Popconfirm, Space } from "antd";
 import { useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { Feature } from "@/models/model";
-import { fetchFeatures } from "@/api";
+import { fetchFeatures, deleteEntity } from "@/api";
 import ResizeTable, { ResizeColumnType } from "@/components/ResizeTable";
+import { DeleteOutlined } from "@ant-design/icons";
 
-export interface DataSourceTableProps {
+export interface FeatureTableProps {
  project?: string;
  keyword?: string;
 }
@@ -16,7 +17,7 @@ export interface SearchModel {
  roleName?: string;
 }
 
-const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
+const FeatureTable = (props: FeatureTableProps, ref: any) => {
  const navigate = useNavigate();
 
  const { project, keyword } = props;
@@ -97,25 +98,45 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
  {
  title: "Action",
  fixed: "right",
- width: 100,
+ width: 200,
  resize: false,
  render: (record: Feature) => {
+ const { guid } = record;
  return (
- <Button
- type="primary"
- ghost
- onClick={() => {
- navigate(getDetialUrl(record.guid));
- }}
- >
- View Details
- </Button>
+ <Space size="middle">
+ <Button
+ type="primary"
+ ghost
+ onClick={() => {
+ navigate(getDetialUrl(guid));
+ }}
+ >
+ View Details
+ </Button>
+ <Popconfirm
+ title="Are you sure to delete this feature?"
+ placement="topRight"
+ onConfirm={() => {
+ return new Promise((resolve) => {
+ onDelete(guid, resolve);
+ });
+ }}
+ >
+ <Button type="primary" danger ghost icon={<DeleteOutlined />}>
+ Detete
+ </Button>
+ </Popconfirm>
+ </Space>
  );
  },
  },
  ];
 
- const { isLoading, data: tableData } = useQuery<Feature[]>(
+ const {
+ isLoading,
+ data: tableData,
+ refetch,
+ } = useQuery<Feature[]>(
  ["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 (
  <ResizeTable
  rowKey="guid"
@@ -142,10 +182,10 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
  );
 };
 
-const DataSourceTableComponent = forwardRef<unknown, DataSourceTableProps>(
- DataSourceTable
+const FeatureTableComponent = forwardRef<unknown, FeatureTableProps>(
+ FeatureTable
 );
 
-DataSourceTableComponent.displayName = "DataSourceTableComponent";
+FeatureTableComponent.displayName = "FeatureTableComponent";
 
-export default DataSourceTableComponent;
+export default FeatureTableComponent;

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;
@@ -30,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;
@@ -54,13 +55,30 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => {
  >
  View Lineage
  </Button>
+ <Popconfirm
+ title="Are you sure to delete this project?"
+ placement="topRight"
+ onConfirm={() => {
+ return new Promise((resolve) => {
+ onDelete(name, resolve);
+ });
+ }}
+ >
+ <Button type="primary" danger ghost icon={<DeleteOutlined />}>
+ Detete
+ </Button>
+ </Popconfirm>
  </Space>
  );
  },
  },
  ];
 
- const { isLoading, data: tableData } = useQuery<Project[]>(
+ const {
+ isLoading,
+ data: tableData,
+ refetch,
+ } = useQuery<Project[]>(
  ["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 (
  <ResizeTable
  rowKey="name"