feat: update workflow search UX (#245)

* feat: update workflow search UX Signed-off-by: csirius <[email protected]> * feat: update search UX and add outputs Signed-off-by: csirius <[email protected]> * fix: change the limit to unlimited Signed-off-by: csirius <[email protected]> * fix: unit test failure Signed-off-by: csirius <[email protected]>
flyteorg · Dec 7, 2021 · d1ab6bf · d1ab6bf
1 parent d624ffe
commit d1ab6bf
Show file tree

Hide file tree

Showing 14 changed files with 539 additions and 59 deletions.
diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/src/components/Entities/EntityExecutionsBarChart.tsx
@@ -116,8 +116,6 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
         }
     );
 
-    console.log(executions);
-
     const handleClickItem = React.useCallback(item => {
         if (item.metadata) {
             onToggle(item.metadata.name);

diff --git a/src/components/Launch/LaunchForm/getInputs.ts b/src/components/Launch/LaunchForm/getInputs.ts
@@ -61,6 +61,22 @@ export function getInputsForWorkflow(
     });
 }
 
+export function getOutputsForWorkflow(launchPlan: LaunchPlan): string[] {
+    if (!launchPlan.closure) {
+        return [];
+    }
+
+    const launchPlanInputs = launchPlan.closure.expectedOutputs.variables;
+    return sortedObjectEntries(launchPlanInputs).map(value => {
+        const [name, parameter] = value;
+
+        const typeDefinition = getInputDefintionForLiteralType(parameter.type);
+        const typeLabel = formatLabelWithType(name, typeDefinition);
+
+        return typeLabel;
+    });
+}
+
 export function getInputsForTask(
     task: Task,
     initialValues: LiteralValueMap = new Map()

diff --git a/src/components/Project/ProjectStatusBar.tsx b/src/components/Project/ProjectStatusBar.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import { WorkflowExecutionPhase } from 'models/Execution/enums';
+import { barChartColors } from 'components/common/constants';
+import { useCommonStyles } from 'components/common/styles';
+
+const useStyles = makeStyles(() => ({
+    barContainer: {
+        display: 'block'
+    },
+    barItem: {
+        display: 'inline-block',
+        marginRight: 2,
+        borderRadius: 2,
+        width: 10,
+        height: 12,
+        backgroundColor: barChartColors.default
+    },
+    successBarItem: {
+        backgroundColor: barChartColors.success
+    },
+    failedBarItem: {
+        backgroundColor: barChartColors.failure
+    }
+}));
+
+interface ProjectStatusBarProps {
+    items: WorkflowExecutionPhase[];
+    paths: string[];
+}
+
+/**
+ * Renders status of executions
+ * @param items
+ * @constructor
+ */
+const ProjectStatusBar: React.FC<ProjectStatusBarProps> = ({
+    items,
+    paths
+}) => {
+    const styles = useStyles();
+    const commonStyles = useCommonStyles();
+
+    return (
+        <div className={styles.barContainer}>
+            {items.map((item, idx) => {
+                return (
+                    <Link
+                        className={commonStyles.linkUnstyled}
+                        to={paths[idx] ?? '#'}
+                        key={`bar-item-${idx}`}
+                    >
+                        <div
+                            className={classNames(styles.barItem, {
+                                [styles.successBarItem]:
+                                    item === WorkflowExecutionPhase.SUCCEEDED,
+                                [styles.failedBarItem]:
+                                    item >= WorkflowExecutionPhase.FAILED
+                            })}
+                        />
+                    </Link>
+                );
+            })}
+        </div>
+    );
+};
+
+export default ProjectStatusBar;
diff --git a/src/components/Project/ProjectWorkflows.tsx b/src/components/Project/ProjectWorkflows.tsx
@@ -1,11 +1,11 @@
 import { WaitForData } from 'components/common/WaitForData';
-import { useWorkflowNameList } from 'components/hooks/useNamedEntity';
 import { SearchableWorkflowNameList } from 'components/Workflow/SearchableWorkflowNameList';
 import { Admin } from 'flyteidl';
 import { limits } from 'models/AdminEntity/constants';
 import { FilterOperationName, SortDirection } from 'models/AdminEntity/types';
 import { workflowSortFields } from 'models/Workflow/constants';
 import * as React from 'react';
+import { useWorkflowInfoList } from '../Workflow/useWorkflowInfoList';
 
 export interface ProjectWorkflowsProps {
     projectId: string;
@@ -17,7 +17,7 @@ export const ProjectWorkflows: React.FC<ProjectWorkflowsProps> = ({
     domainId: domain,
     projectId: project
 }) => {
-    const workflowNames = useWorkflowNameList(
+    const workflows = useWorkflowInfoList(
         { domain, project },
         {
             limit: limits.NONE,
@@ -37,8 +37,8 @@ export const ProjectWorkflows: React.FC<ProjectWorkflowsProps> = ({
     );
 
     return (
-        <WaitForData {...workflowNames}>
-            <SearchableWorkflowNameList names={workflowNames.value} />
+        <WaitForData {...workflows}>
+            <SearchableWorkflowNameList workflows={workflows.value} />
         </WaitForData>
     );
 };
diff --git a/src/components/Theme/colorSpectrum.ts b/src/components/Theme/colorSpectrum.ts
@@ -198,6 +198,7 @@ export type ColorSpectrumType =
     | 'gray10'
     | 'gray15'
     | 'gray20'
+    | 'gray25'
     | 'gray30'
     | 'gray40'
     | 'gray50'
@@ -1006,6 +1007,10 @@ export const COLOR_SPECTRUM: {
         color: '#CACAD9',
         value: 20
     },
+    gray25: {
+        color: '#B3B3B3',
+        value: 25
+    },
     gray30: {
         color: '#ACACC0',
         value: 30

diff --git a/src/components/Theme/constants.ts b/src/components/Theme/constants.ts
@@ -44,6 +44,8 @@ export const mutedButtonHoverColor = COLOR_SPECTRUM.gray60.color;
 
 export const errorBackgroundColor = '#FBFBFC';
 
+export const workflowLabelColor = COLOR_SPECTRUM.gray25.color;
+
 export const statusColors = {
     FAILURE: COLOR_SPECTRUM.red20.color,
     RUNNING: COLOR_SPECTRUM.blue20.color,