Update TOC page (#3580)

* PBENCH-1216
TOC page update

dashboard/src/actions/tocActions.js

@@ -0,0 +1,133 @@
+import * as TYPES from "./types";
+
+import API from "utils/axiosInstance";
+import { DANGER } from "assets/constants/toastConstants";
+import { showToast } from "./toastActions";
+import { uriTemplate } from "utils/helper";
+
+/**
+ * Function to fetch contents data
+ * @function
+ * @param {String} datasetId - Dataset ID
+ * @param {String} path - Path to the file/directory
+ * @param {String} item - Active item
+ * @param {Boolean} isSubDir - To identify sub-directory expansion
+ * @return {Function} - dispatch the action and update the state
+ */
+export const fetchTOC =
+ (datasetId, path, item, isSubDir) => async (dispatch, getState) => {
+ try {
+ dispatch({ type: TYPES.LOADING });
+ const endpoints = getState().apiEndpoint.endpoints;
+
+ const uri = uriTemplate(endpoints, "datasets_contents", {
+ dataset: datasetId,
+ target: path,
+ });
+ const response = await API.get(uri);
+ if (response.status === 200 && response.data) {
+ if (!isSubDir) {
+ const inventoryLink = uriTemplate(endpoints, "datasets_inventory", {
+ dataset: datasetId,
+ target: path,
+ });
+ dispatch({
+ type: TYPES.SET_INVENTORY_LINK,
+ payload: inventoryLink,
+ });
+ }
+ dispatch(parseToTreeView(response.data, item, isSubDir, path));
+ }
+ } catch (error) {
+ const msg = error.response?.data?.message;
+ dispatch(showToast(DANGER, msg ?? `Error response: ${error}`));
+ }
+ dispatch({ type: TYPES.COMPLETED });
+ };
+
+const makeOptions = (data, isParent, keyPath, isDirectory) => {
+ const options = data.map((item) => {
+ const option = {
+ name: item.name,
+ id: isParent ? `${keyPath}*${item.name}` : item.name,
+ isDirectory,
+ uri: item.uri,
+ };
+ if (isDirectory) {
+ option.children = [];
+ } else {
+ option.size = item.size;
+ }
+ return option;
+ });
+ return options;
+};
+/**
+ * Function to parse contents data totree view
+ * @function
+ * @param {Object} contentData - Contentdata to parse
+ * @param {Object} activeItem - Active item
+ * @param {Boolean} isSubDir - To identify sub-directory expansion
+ * @param {String} parent - Parent Name to set the id
+ * @return {Function} - dispatch the action and update the state
+ */
+export const parseToTreeView =
+ (contentData, activeItem, isSubDir, parent) => (dispatch, getState) => {
+ const keyPath = parent.replaceAll("/", "*");
+ const drillMenuData = [...getState().toc.drillMenuData];
+ const directories = makeOptions(
+ contentData.directories,
+ parent,
+ keyPath,
+ true
+ );
+ const files = makeOptions(contentData.files, parent, keyPath, false);
+ const treeOptions = [...directories, ...files];
+ if (isSubDir) {
+ if (activeItem.includes("*")) {
+ updateActiveItemChildren(drillMenuData, keyPath, treeOptions);
+ } else {
+ const itemName = activeItem.split("*").pop();
+ const itemOptions = drillMenuData.find((i) => i.name === itemName);
+ if (itemOptions) {
+ itemOptions["children"] = treeOptions;
+ }
+ }
+ }
+ dispatch({
+ type: TYPES.SET_DRILL_MENU_DATA,
+ payload: isSubDir ? drillMenuData : treeOptions,
+ });
+ };
+
+/**
+ * Function to find the actual key from key path and update it's children
+ * @function
+ * @param {Object} arr - Drill down menu
+ * @param {String} key - key path
+ * @param {Array} childrenToUpdate - Active item children obtained through API request
+ * @return {Array} - updated children
+ */
+const updateActiveItemChildren = (arr, key, childrenToUpdate) => {
+ // if children are undefined
+ if (!arr) return;
+
+ // loop over each entry and its children to find
+ // entry with passed key
+ arr.forEach((entry) => {
+ if (entry.id === key) {
+ entry.children = childrenToUpdate;
+ }
+ // recursive call to traverse children
+ else {
+ updateActiveItemChildren(entry.children, key, childrenToUpdate);
+ }
+ });
+
+ return arr;
+};
+
+export const setActiveFileContent = (item) => ({
+ type: TYPES.SET_ACTIVE_FILE,
+ payload: item,
+});

dashboard/src/actions/types.js

@@ -49,13 +49,9 @@ export const SET_TREE_DATA = "SET_TREE_DATA";
 export const SET_METADATA_CHECKED_KEYS = "SET_METADATA_CHECKED_KEYS";
 
 /* TABLE OF CONTENT */
-export const GET_TOC_DATA = "GET_TOC_DATA";
-export const GET_SUB_DIR_DATA = "GET_SUB_DIR_DATA";
-export const UPDATE_TABLE_DATA = "UPDATE_TABLE_DATA";
-export const UPDATE_SEARCH_SPACE = "UPDATE_SEARCH_SPACE";
-export const UPDATE_STACK = "UPDATE_STACK";
-export const UPDATE_CURR_DATA = "UPDATE_CURR_DATA";
-export const UPDATE_CONTENT_DATA = "UPDATE_CONTENT_DATA";
+export const SET_INVENTORY_LINK = "SET_INVENTORY_LINK";
+export const SET_DRILL_MENU_DATA = "SET_DRILL_MENU_DATA";
+export const SET_ACTIVE_FILE = "SET_ACTIVE_FILE";
 
 /* SIDEBAR */
 export const SET_ACTIVE_MENU_ITEM = "SET_ACTIVE_MENU_ITEM";

dashboard/src/modules/components/TableComponent/index.jsx

@@ -29,6 +29,7 @@ import DatePickerWidget from "../DatePickerComponent";
 import { RenderPagination } from "../OverviewComponent/common-component";
 import TablePagination from "../PaginationComponent";
 import { ViewOptions } from "../ComparisonComponent/common-components";
+import { uid } from "utils/helper";
 import { useKeycloak } from "@react-keycloak/web";
 import { useNavigate } from "react-router";
 
@@ -204,31 +205,37 @@ const TableWithFavorite = () => {
  </Thead>
  <Tbody>
  {selectedArray.length > 0 ? (
- selectedArray.map((repo, rowIndex) => (
- <Tr key={repo?.resource_id}>
- <Td
- className="dataset_name"
- dataLabel={columnNames.name}
- onClick={() =>
- navigate(`/${HOME}${TOC}/${repo?.resource_id}`)
- }
- >
- {repo?.name}
- </Td>
- <Td dataLabel={columnNames.uploadedDate}>
- {repo?.metadata.dataset.uploaded}
- </Td>
- <Td
- favorites={{
- isFavorited: isRepoFavorited(repo),
- onFavorite: (_event, isFavoriting) => {
- markRepoFavorited(repo, isFavoriting);
- },
- rowIndex,
- }}
- />
- </Tr>
- ))
+ selectedArray.map((repo, rowIndex) =>
+ repo ? (
+ <Tr key={repo.resource_id}>
+ <Td
+ className="dataset_name"
+ dataLabel={columnNames.name}
+ onClick={() =>
+ navigate(
+ `/${HOME}${TOC}/${repo.resource_id}/${repo.name}`
+ )
+ }
+ >
+ {repo.name}
+ </Td>
+ <Td dataLabel={columnNames.uploadedDate}>
+ {repo.metadata.dataset.uploaded}
+ </Td>
+ <Td
+ favorites={{
+ isFavorited: isRepoFavorited(repo),
+ onFavorite: (_event, isFavoriting) => {
+ markRepoFavorited(repo, isFavoriting);
+ },
+ rowIndex,
+ }}
+ />
+ </Tr>
+ ) : (
+ <Tr key={uid()}></Tr>
+ )
+ )
  ) : (
  <Tr key={"empty-row"}>
  <Td colSpan={8}>

dashboard/src/modules/components/TableOfContent/DrillDownMenu.jsx

@@ -0,0 +1,30 @@
+import { FolderIcon, FolderOpenIcon } from "@patternfly/react-icons";
+import React, { useState } from "react";
+
+import { TreeView } from "@patternfly/react-core";
+import { useSelector } from "react-redux";
+
+const DrilldownMenu = (props) => {
+ const { drillMenuData } = useSelector((state) => state.toc);
+ const [activeItems, setActiveItems] = useState([]);
+ const onSelect = (_evt, item) => {
+ setActiveItems([item]);
+ props.drillMenuItem(item);
+ };
+
+ return (
+ <div className="drilldownMenu-container">
+ {drillMenuData?.length > 0 && (
+ <TreeView
+ data={drillMenuData}
+ activeItems={activeItems}
+ onSelect={onSelect}
+ icon={<FolderIcon />}
+ expandedIcon={<FolderOpenIcon />}
+ />
+ )}
+ </div>
+ );
+};
+
+export default DrilldownMenu;