Impl [Artifact/Models/Datasets] Add option to delete artifacts , mode…

…ls, dataset in the UI
mlrun · Oct 19, 2023 · 5ea7d0d · 5ea7d0d
1 parent 61a4d6a
commit 5ea7d0d
Show file tree

Hide file tree

Showing 9 changed files with 426 additions and 206 deletions.
diff --git a/src/api/artifacts-api.js b/src/api/artifacts-api.js
@@ -49,10 +49,19 @@ const fetchArtifacts = (project, filters, config = {}) => {
 
 const artifactsApi = {
   addTag: (project, tag, data) => mainHttpClient.put(`/projects/${project}/tags/${tag}`, data),
-  replaceTag: (project, tag, data) => mainHttpClient.post(`/projects/${project}/tags/${tag}`, data),
+  buildFunction: data => mainHttpClient.post('/build/function', data),
+  deleteArtifact: (project, key, tag) => {
+    const config = {
+      params: {
+        key,
+        tag
+      }
+    }
+
+    return mainHttpClient.delete(`/projects/${project}/artifacts`, config)
+  },
   deleteTag: (project, tag, data) =>
     mainHttpClient.delete(`/projects/${project}/tags/${tag}`, { data }),
-  buildFunction: data => mainHttpClient.post('/build/function', data),
   getArtifactPreview: (project, path, user, fileFormat, cancelToken) => {
     const config = {
       params: { path }
@@ -153,6 +162,7 @@ const artifactsApi = {
       }`,
       data
     ),
+  replaceTag: (project, tag, data) => mainHttpClient.post(`/projects/${project}/tags/${tag}`, data),
   updateArtifact: (project, data) =>
     mainHttpClient.post(
       `/projects/${project}/artifacts/${data.uid || data.metadata?.tree}/${

diff --git a/src/components/Datasets/Datasets.js b/src/components/Datasets/Datasets.js
@@ -37,18 +37,17 @@ import {
   fetchDataSet,
   fetchDataSets,
   removeDataSet,
-  removeDataSets,
-  showArtifactsPreview
+  removeDataSets
 } from '../../reducers/artifactsReducer'
 import {
   checkForSelectedDataset,
   fetchDataSetRowData,
   filters,
+  generateActionsMenu,
   generatePageData,
   handleApplyDetailsChanges
 } from './datasets.util'
 import { cancelRequest } from '../../utils/cancelRequest'
-import { createDatasetsRowData, getIsTargetPathValid } from '../../utils/createArtifactsContent'
 import { getArtifactIdentifier } from '../../utils/getUniqueIdentifier'
 import { isDetailsTabExists } from '../../utils/isDetailsTabExists'
 import { openPopUp } from 'igz-controls/utils/common.util'
@@ -59,13 +58,7 @@ import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
 import { useGroupContent } from '../../hooks/groupContent.hook'
 import { useYaml } from '../../hooks/yaml.hook'
 import { getViewMode } from '../../utils/helper'
-import { copyToClipboard } from '../../utils/copyToClipboard'
-import { generateUri } from '../../utils/resources'
-
-import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
-import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
-import { ReactComponent as ArtifactView } from 'igz-controls/images/eye-icon.svg'
-import { ReactComponent as Copy } from 'igz-controls/images/copy-to-clipboard-icon.svg'
+import { createDatasetsRowData } from '../../utils/createArtifactsContent'
 
 const Datasets = () => {
   const [datasets, setDatasets] = useState([])
@@ -149,45 +142,26 @@ const Datasets = () => {
   )
 
   const actionsMenu = useMemo(
-    () => dataset => {
-      const isTargetPathValid = getIsTargetPathValid(dataset ?? {}, frontendSpec)
-
-      return [
-        [
-          {
-            disabled: !isTargetPathValid,
-            label: 'Preview',
-            icon: <ArtifactView />,
-            onClick: dataset => {
-              dispatch(
-                showArtifactsPreview({
-                  isPreview: true,
-                  selectedItem: dataset
-                })
-              )
-            }
-          }
-        ],
-        [
-          {
-            label: 'Copy URI',
-            icon: <Copy />,
-            onClick: dataset => copyToClipboard(generateUri(dataset, DATASETS_PAGE), dispatch)
-          },
-          {
-            label: 'View YAML',
-            icon: <YamlIcon />,
-            onClick: toggleConvertedYaml
-          },
-          {
-            label: 'Add a tag',
-            icon: <TagIcon />,
-            onClick: handleAddTag
-          }
-        ]
-      ]
-    },
-    [dispatch, frontendSpec, handleAddTag, toggleConvertedYaml]
+    () => dataset =>
+      generateActionsMenu(
+        dataset,
+        frontendSpec,
+        dispatch,
+        toggleConvertedYaml,
+        handleAddTag,
+        params.projectName,
+        handleRefresh,
+        datasetsFilters
+      ),
+    [
+      datasetsFilters,
+      dispatch,
+      frontendSpec,
+      handleAddTag,
+      handleRefresh,
+      params.projectName,
+      toggleConvertedYaml
+    ]
   )
 
   const applyDetailsChanges = useCallback(

diff --git a/src/components/Datasets/datasets.util.js b/src/components/Datasets/datasets.util.js
@@ -17,11 +17,13 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
+import React from 'react'
 
 import { applyTagChanges } from '../../utils/artifacts.util'
 import { getArtifactIdentifier } from '../../utils/getUniqueIdentifier'
 import { generateProducerDetailsInfo } from '../../utils/generateProducerDetailsInfo'
 import {
+  DATASET_TYPE,
   DATASETS,
   DATASETS_PAGE,
   FULL_VIEW_MODE,
@@ -30,10 +32,19 @@ import {
   NAME_FILTER,
   TAG_FILTER
 } from '../../constants'
-import { createDatasetsRowData } from '../../utils/createArtifactsContent'
+import { createDatasetsRowData, getIsTargetPathValid } from '../../utils/createArtifactsContent'
 import { searchArtifactItem } from '../../utils/searchArtifactItem'
 import { sortListByDate } from '../../utils'
-import { fetchDataSet } from '../../reducers/artifactsReducer'
+import { fetchDataSet, showArtifactsPreview } from '../../reducers/artifactsReducer'
+import { copyToClipboard } from '../../utils/copyToClipboard'
+import { generateUri } from '../../utils/resources'
+import { handleDeleteArtifact } from '../../utils/handleDeleteArtifact'
+
+import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
+import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
+import { ReactComponent as ArtifactView } from 'igz-controls/images/eye-icon.svg'
+import { ReactComponent as Copy } from 'igz-controls/images/copy-to-clipboard-icon.svg'
+import { ReactComponent as Delete } from 'igz-controls/images/delete.svg'
 
 export const infoHeaders = [
   {
@@ -194,3 +205,66 @@ export const checkForSelectedDataset = (
     }
   })
 }
+
+export const generateActionsMenu = (
+  dataset,
+  frontendSpec,
+  dispatch,
+  toggleConvertedYaml,
+  handleAddTag,
+  projectName,
+  handleRefresh,
+  datasetsFilters
+) => {
+  const isTargetPathValid = getIsTargetPathValid(dataset ?? {}, frontendSpec)
+
+  return [
+    [
+      {
+        disabled: !isTargetPathValid,
+        label: 'Preview',
+        icon: <ArtifactView />,
+        onClick: dataset => {
+          dispatch(
+            showArtifactsPreview({
+              isPreview: true,
+              selectedItem: dataset
+            })
+          )
+        }
+      }
+    ],
+    [
+      {
+        label: 'Copy URI',
+        icon: <Copy />,
+        onClick: dataset => copyToClipboard(generateUri(dataset, DATASETS_PAGE), dispatch)
+      },
+      {
+        label: 'View YAML',
+        icon: <YamlIcon />,
+        onClick: toggleConvertedYaml
+      },
+      {
+        label: 'Add a tag',
+        icon: <TagIcon />,
+        onClick: handleAddTag
+      },
+      {
+        label: 'Delete',
+        icon: <Delete />,
+        className: 'danger',
+        onClick: () =>
+          handleDeleteArtifact(
+            dispatch,
+            projectName,
+            dataset.db_key,
+            dataset.tag,
+            handleRefresh,
+            datasetsFilters,
+            DATASET_TYPE
+          )
+      }
+    ]
+  ]
+}
diff --git a/src/components/Files/Files.js b/src/components/Files/Files.js
@@ -37,18 +37,13 @@ import {
   checkForSelectedFile,
   fetchFilesRowData,
   filters,
+  generateActionsMenu,
   generatePageData,
   handleApplyDetailsChanges
 } from './files.util'
 import { cancelRequest } from '../../utils/cancelRequest'
-import { createFilesRowData, getIsTargetPathValid } from '../../utils/createArtifactsContent'
-import {
-  fetchFile,
-  fetchFiles,
-  removeFile,
-  removeFiles,
-  showArtifactsPreview
-} from '../../reducers/artifactsReducer'
+import { createFilesRowData } from '../../utils/createArtifactsContent'
+import { fetchFile, fetchFiles, removeFile, removeFiles } from '../../reducers/artifactsReducer'
 import { getArtifactIdentifier } from '../../utils/getUniqueIdentifier'
 import { isDetailsTabExists } from '../../utils/isDetailsTabExists'
 import { openPopUp } from 'igz-controls/utils/common.util'
@@ -59,13 +54,6 @@ import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
 import { useGroupContent } from '../../hooks/groupContent.hook'
 import { useYaml } from '../../hooks/yaml.hook'
 import { getViewMode } from '../../utils/helper'
-import { copyToClipboard } from '../../utils/copyToClipboard'
-import { generateUri } from '../../utils/resources'
-
-import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
-import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
-import { ReactComponent as ArtifactView } from 'igz-controls/images/eye-icon.svg'
-import { ReactComponent as Copy } from 'igz-controls/images/copy-to-clipboard-icon.svg'
 
 const Files = () => {
   const [files, setFiles] = useState([])
@@ -139,45 +127,26 @@ const Files = () => {
   )
 
   const actionsMenu = useMemo(
-    () => file => {
-      const isTargetPathValid = getIsTargetPathValid(file ?? {}, frontendSpec)
-
-      return [
-        [
-          {
-            disabled: !isTargetPathValid,
-            label: 'Preview',
-            icon: <ArtifactView />,
-            onClick: file => {
-              dispatch(
-                showArtifactsPreview({
-                  isPreview: true,
-                  selectedItem: file
-                })
-              )
-            }
-          }
-        ],
-        [
-          {
-            label: 'Copy URI',
-            icon: <Copy />,
-            onClick: file => copyToClipboard(generateUri(file, FILES_PAGE), dispatch)
-          },
-          {
-            label: 'View YAML',
-            icon: <YamlIcon />,
-            onClick: toggleConvertedYaml
-          },
-          {
-            label: 'Add a tag',
-            icon: <TagIcon />,
-            onClick: handleAddTag
-          }
-        ]
-      ]
-    },
-    [dispatch, frontendSpec, handleAddTag, toggleConvertedYaml]
+    () => file =>
+      generateActionsMenu(
+        file,
+        frontendSpec,
+        dispatch,
+        toggleConvertedYaml,
+        handleAddTag,
+        params.projectName,
+        handleRefresh,
+        filesFilters
+      ),
+    [
+      dispatch,
+      filesFilters,
+      frontendSpec,
+      handleAddTag,
+      handleRefresh,
+      params.projectName,
+      toggleConvertedYaml
+    ]
   )
 
   const handleRemoveRowData = useCallback(