Impl [Workflows] Add columns to list view of workflow (#829)

mlrun · Oct 2, 2021 · 8f73de9 · 8f73de9
1 parent f85ca74
commit 8f73de9
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 169 deletions.
diff --git a/src/components/JobsPage/Jobs.js b/src/components/JobsPage/Jobs.js
@@ -231,9 +231,8 @@ const Jobs = ({
 
   const pageData = useCallback(
     generatePageData(
-      match.params.pageTab,
+      match.params,
       location.search,
-      subPage,
       onRemoveScheduledJob,
       handleRunJob,
       setEditableItem,
@@ -247,9 +246,8 @@ const Jobs = ({
       !isEveryObjectValueEmpty(selectedJob)
     ),
     [
-      match.params.pageTab,
+      match.params,
       location.search,
-      subPage,
       appStore.frontendSpec.jobs_dashboard_url,
       selectedJob
     ]
@@ -393,10 +391,21 @@ const Jobs = ({
       }
       setFilters({ groupBy: INIT_GROUP_FILTER })
     } else if (match.params.pageTab === MONITOR_WORKFLOWS_TAB) {
-      getWorkflows()
-      setFilters({ groupBy: 'workflow' })
+      if (match.params.workflowId) {
+        setFilters({ groupBy: 'none' })
+      } else {
+        getWorkflows()
+        setFilters({ groupBy: 'workflow' })
+      }
     }
-  }, [getWorkflows, match.params.pageTab, location.search, subPage, setFilters])
+  }, [
+    getWorkflows,
+    match.params.pageTab,
+    match.params.workflowId,
+    location.search,
+    subPage,
+    setFilters
+  ])
 
   const handleSelectJob = item => {
     if (document.getElementsByClassName('view')[0]) {
@@ -447,11 +456,15 @@ const Jobs = ({
           <Workflow
             fetchWorkflow={fetchWorkflow}
             handleCancel={handleCancel}
+            content={jobs}
+            handleSelectItem={handleSelectJob}
+            refresh={refreshJobs}
             history={history}
             match={match}
             pageData={pageData}
             refreshJobs={refreshJobs}
             selectedJob={selectedJob}
+            setLoading={setLoading}
           />
         ) : null}
       </Content>

diff --git a/src/components/JobsPage/jobsData.js b/src/components/JobsPage/jobsData.js
@@ -10,8 +10,7 @@ import {
   PERIOD_FILTER,
   SCHEDULE_TAB,
   STATUS_FILTER,
-  TERTIARY_BUTTON,
-  WORKFLOW_SUB_PAGE
+  TERTIARY_BUTTON
 } from '../../constants'
 import { isDemoMode } from '../../utils/helper'
 
@@ -37,8 +36,8 @@ export const infoHeaders = [
 
 const JOB_STEADY_STATES = ['completed', 'error', 'aborted']
 
-export const generateTableHeaders = (pageTab, isSelectedItem) => {
-  if (pageTab === SCHEDULE_TAB) {
+export const generateTableHeaders = (params, isSelectedItem) => {
+  if (params.pageTab === SCHEDULE_TAB) {
     return [
       {
         header: 'Name',
@@ -82,6 +81,35 @@ export const generateTableHeaders = (pageTab, isSelectedItem) => {
     ]
   }
 
+  if (params.pageTab === MONITOR_WORKFLOWS_TAB && !params.workflowId) {
+    return [
+      {
+        header: 'Name',
+        class: 'jobs_big'
+      },
+      {
+        header: 'Created at',
+        class: 'jobs_small',
+        hidden: isSelectedItem
+      },
+      {
+        header: 'Finished at',
+        class: 'jobs_small',
+        hidden: isSelectedItem
+      },
+      {
+        header: 'Duration',
+        class: 'jobs_small',
+        hidden: isSelectedItem
+      },
+      {
+        header: '',
+        class: 'action_cell',
+        hidden: isSelectedItem
+      }
+    ]
+  }
+
   return [
     {
       header: 'Name',
@@ -186,9 +214,8 @@ const generateTabs = search => {
 }
 
 export const generatePageData = (
-  pageTab,
+  params,
   search,
-  subPage,
   removeScheduledJob,
   handleSubmitJob,
   setEditableItem,
@@ -209,13 +236,13 @@ export const generatePageData = (
     onClick: event => handleMonitoring()
   }
 
-  if (pageTab === SCHEDULE_TAB) {
+  if (params.pageTab === SCHEDULE_TAB) {
     filterMenuActionButton = null
   }
 
   return {
     actionsMenu: generateActionsMenu(
-      pageTab,
+      params.pageTab,
       removeScheduledJob,
       handleSubmitJob,
       setEditableItem,
@@ -226,16 +253,18 @@ export const generatePageData = (
       abortableFunctionKinds
     ),
     detailsMenu,
-    hideFilterMenu: subPage === WORKFLOW_SUB_PAGE,
+    hideFilterMenu: params.pageTab === MONITOR_WORKFLOWS_TAB,
     filterMenuActionButton,
-    filters: filtersByTab[pageTab],
+    filters: filtersByTab[params.pageTab],
     page,
-    tableHeaders: generateTableHeaders(pageTab, isSelectedItem),
+    tableHeaders: generateTableHeaders(params, isSelectedItem),
     tabs: generateTabs(search),
     infoHeaders,
     refreshLogs: fetchJobLogs,
     removeLogs: removeJobLogs,
-    withLogsRefreshBtn: true
+    withLogsRefreshBtn: true,
+    withoutExpandButton:
+      params.pageTab === MONITOR_WORKFLOWS_TAB && !params.workflowId
   }
 }
 

diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { connect, useSelector } from 'react-redux'
@@ -22,6 +22,7 @@ const Table = ({
   cancelRequest,
   content,
   filtersStore,
+  getCloseDetailsLink,
   groupedContent,
   handleCancel,
   handleExpandRow,
@@ -80,15 +81,14 @@ const Table = ({
     }
   }, [tableStore.isTablePanelOpen])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const generatedTableContent = generateTableContent(
       content,
       groupedContent,
       filtersStore.groupBy,
       pageData.page,
       tableStore.isTablePanelOpen,
-      match.params.pageTab,
-      match.params.projectName,
+      match.params,
       location.search,
       !isEveryObjectValueEmpty(selectedItem)
     )
@@ -115,7 +115,7 @@ const Table = ({
         groupWorkflowItems: createJobsContent(
           groupWorkflowItem,
           !isEveryObjectValueEmpty(selectedItem),
-          match.params.projectName,
+          match.params,
           location.search,
           true
         )
@@ -136,8 +136,7 @@ const Table = ({
     pageData.mainRowItemsCount,
     tableStore.isTablePanelOpen,
     filtersStore.groupBy,
-    match.params.pageTab,
-    match.params.projectName,
+    match.params,
     location.search,
     selectedItem
   ])
@@ -149,6 +148,7 @@ const Table = ({
         applyDetailsChanges={applyDetailsChanges}
         cancelRequest={cancelRequest}
         content={content}
+        getCloseDetailsLink={getCloseDetailsLink}
         groupFilter={filtersStore.groupBy}
         groupLatestItem={
           isEmpty(tableContent.groupLatestItem)
@@ -179,6 +179,7 @@ const Table = ({
 
 Table.defaultProps = {
   applyDetailsChanges: () => {},
+  getCloseDetailsLink: null,
   groupedContent: {},
   groupLatestJob: [],
   handleExpandRow: () => {},
@@ -193,11 +194,13 @@ Table.propTypes = {
   ]).isRequired,
   applyDetailsChanges: PropTypes.func,
   content: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  getCloseDetailsLink: PropTypes.func,
   groupedContent: PropTypes.shape({}),
   handleCancel: PropTypes.func.isRequired,
   handleExpandRow: PropTypes.func,
   handleSelectItem: PropTypes.func.isRequired,
   match: PropTypes.shape({}).isRequired,
+  retryRequest: PropTypes.func.isRequired,
   pageData: PropTypes.shape({}).isRequired,
   selectedItem: PropTypes.shape({}),
   setLoading: PropTypes.func

diff --git a/src/components/Table/TableView.js b/src/components/Table/TableView.js
@@ -26,6 +26,7 @@ const TableView = ({
   applyDetailsChanges,
   cancelRequest,
   content,
+  getCloseDetailsLink,
   groupFilter,
   groupLatestItem,
   groupedContent,
@@ -234,6 +235,7 @@ const TableView = ({
           actionsMenu={actionsMenu}
           applyDetailsChanges={applyDetailsChanges}
           cancelRequest={cancelRequest}
+          getCloseDetailsLink={getCloseDetailsLink}
           detailsMenu={pageData.detailsMenu}
           handleCancel={handleCancel}
           match={match}
@@ -248,6 +250,7 @@ const TableView = ({
 
 TableView.defaultProps = {
   applyDetailsChanges: () => {},
+  getCloseDetailsLink: null,
   groupLatestJob: {}
 }
 
@@ -258,6 +261,7 @@ TableView.propTypes = {
   ]).isRequired,
   applyDetailsChanges: PropTypes.func,
   content: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  getCloseDetailsLink: PropTypes.func,
   handleCancel: PropTypes.func.isRequired,
   handleSelectItem: PropTypes.func.isRequired,
   isTablePanelOpen: PropTypes.bool.isRequired,

diff --git a/src/components/Table/table.scss b/src/components/Table/table.scss
@@ -150,6 +150,7 @@
 
   &-body {
     color: $mulledWine;
+    background-color: $white;
 
     &__cell {
       @include tableDet;