feat: add comparison tool to execution list V1 (flyteorg#234)

* feat: add comparison tool to execution list V1 Signed-off-by: Pianist038801 <[email protected]> * fix: fix failing tests Signed-off-by: Pianist038801 <[email protected]> * feat: use opacity instead of dot Signed-off-by: Pianist038801 <[email protected]> Co-authored-by: Pianist038801 <[email protected]>
eapolinario · Oct 26, 2021 · df4f7e7 · df4f7e7
1 parent 2a95fb0
commit df4f7e7
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 14 deletions.
diff --git a/src/components/Entities/EntityDetails.tsx b/src/components/Entities/EntityDetails.tsx
@@ -4,6 +4,7 @@ import { contentMarginGridUnits } from 'common/layout';
 import { WaitForData } from 'components/common/WaitForData';
 import { EntityDescription } from 'components/Entities/EntityDescription';
 import { useProject } from 'components/hooks/useProjects';
+import { useChartState } from 'components/hooks/useChartState';
 import { LaunchForm } from 'components/Launch/LaunchForm/LaunchForm';
 import { ResourceIdentifier, ResourceType } from 'models/Common/types';
 import * as React from 'react';
@@ -82,6 +83,7 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
     const [showLaunchForm, setShowLaunchForm] = React.useState(false);
     const onLaunch = () => setShowLaunchForm(true);
     const onCancelLaunch = () => setShowLaunchForm(false);
+    const { chartIds, onToggle, clearCharts } = useChartState();
 
     return (
         <WaitForData {...project}>
@@ -120,10 +122,20 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
                     </div>
                 </>
             ) : null}
-            {!versionView && <EntityExecutionsBarChart id={id} />}
+            {!versionView && (
+                <EntityExecutionsBarChart
+                    onToggle={onToggle}
+                    chartIds={chartIds}
+                    id={id}
+                />
+            )}
             {sections.executions && !versionView ? (
                 <div className={styles.executionsContainer}>
-                    <EntityExecutions id={id} />
+                    <EntityExecutions
+                        chartIds={chartIds}
+                        id={id}
+                        clearCharts={clearCharts}
+                    />
                 </div>
             ) : null}
             {sections.launch ? (

diff --git a/src/components/Entities/EntityExecutions.tsx b/src/components/Entities/EntityExecutions.tsx
@@ -25,10 +25,16 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export interface EntityExecutionsProps {
     id: ResourceIdentifier;
+    chartIds: string[];
+    clearCharts: () => void;
 }
 
 /** The tab/page content for viewing a workflow's executions */
-export const EntityExecutions: React.FC<EntityExecutionsProps> = ({ id }) => {
+export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
+    id,
+    chartIds,
+    clearCharts
+}) => {
     const { domain, project, resourceType } = id;
     const styles = useStyles();
     const filtersState = useWorkflowExecutionFiltersState();
@@ -50,6 +56,10 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({ id }) => {
         }
     );
 
+    if (chartIds.length > 0)
+        executions.value = executions.value.filter(item =>
+            chartIds.includes(item.id.name)
+        );
     /** Don't render component until finish fetching user profile */
     if (filtersState.filters[4].status !== 'LOADED') {
         return null;
@@ -61,7 +71,11 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({ id }) => {
                 All Executions in the Workflow
             </Typography>
             <div className={styles.filtersContainer}>
-                <ExecutionFilters {...filtersState} />
+                <ExecutionFilters
+                    {...filtersState}
+                    chartIds={chartIds}
+                    clearCharts={clearCharts}
+                />
             </div>
             <WaitForData {...executions}>
                 <WorkflowExecutionsTable

diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/src/components/Entities/EntityExecutionsBarChart.tsx
@@ -32,6 +32,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export interface EntityExecutionsBarChartProps {
     id: ResourceIdentifier;
+    onToggle: (id: string) => void;
+    chartIds: string[];
 }
 
 const getExecutionTimeData = (executions: Execution[], fillSize = 100) => {
@@ -88,7 +90,9 @@ const getStartExecutionTime = (executions: Execution[]) => {
  * @constructor
  */
 export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> = ({
-    id
+    id,
+    onToggle,
+    chartIds
 }) => {
     const styles = useStyles();
     const { domain, project, resourceType } = id;
@@ -116,6 +120,7 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
 
     const handleClickItem = React.useCallback(item => {
         if (item.metadata) {
+            onToggle(item.metadata.name);
             // const executionId = item.metadata as WorkflowExecutionIdentifier;
             // history.push(Routes.ExecutionDetails.makeUrl(executionId));
         }
@@ -133,6 +138,7 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
             </Typography>
             <div className={styles.body}>
                 <BarChart
+                    chartIds={chartIds}
                     data={getExecutionTimeData(executions.value)}
                     startDate={getStartExecutionTime(executions.value)}
                     onClickItem={handleClickItem}

diff --git a/src/components/Executions/ExecutionFilters.tsx b/src/components/Executions/ExecutionFilters.tsx
@@ -60,9 +60,20 @@ const RenderFilter: React.FC<{ filter: FilterState }> = ({ filter }) => {
  */
 export const ExecutionFilters: React.FC<{
     filters: (FilterState | BooleanFilterState)[];
-}> = ({ filters }) => {
+    chartIds?: string[];
+    clearCharts?: () => void;
+}> = ({ filters, chartIds, clearCharts }) => {
     const styles = useStyles();
 
+    filters = filters.map(filter => {
+        const onChangeFunc = filter.onChange;
+        filter.onChange = value => {
+            if (clearCharts) clearCharts();
+            if (onChangeFunc) onChangeFunc(value);
+        };
+        return filter;
+    });
+
     return (
         <div className={styles.container}>
             {filters.map((filter: any) => {
@@ -102,6 +113,17 @@ export const ExecutionFilters: React.FC<{
                     />
                 );
             })}
+            {chartIds && chartIds.length > 0 && (
+                <FilterPopoverButton
+                    open={false}
+                    active={true}
+                    renderContent={() => <></>}
+                    className={styles.filterButton}
+                    buttonText="Clear Manually Selected Executions"
+                    onReset={clearCharts}
+                    key="charts"
+                />
+            )}
         </div>
     );
 };
diff --git a/src/components/Executions/filters/types.ts b/src/components/Executions/filters/types.ts
@@ -31,6 +31,7 @@ export interface FilterState {
     status?: string;
     getFilter: () => FilterOperation[];
     onReset: () => void;
+    onChange?: (value) => void;
 }
 
 export interface SingleFilterState<FilterKey extends string>

diff --git a/src/components/Executions/filters/useSingleFilterState.ts b/src/components/Executions/filters/useSingleFilterState.ts
@@ -61,7 +61,7 @@ export function useSingleFilterState<FilterKey extends string>({
 
     useEffect(() => {
         const { value } = selectedOption;
-        const queryValue = value === defaultValue.value ? undefined : value;
+        const queryValue = value;
         setQueryStateValue(queryStateKey, queryValue);
     }, [selectedOption, queryStateKey]);
 

diff --git a/src/components/common/BarChart.tsx b/src/components/common/BarChart.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     item: {
         flex: 1,
         display: 'flex',
-        alignItems: 'flex-end',
+        flexDirection: 'column',
+        alignItems: 'center',
         '&:last-child': {
             marginRight: 0
         }
@@ -37,7 +38,9 @@ const useStyles = makeStyles((theme: Theme) => ({
         flex: 1,
         marginRight: theme.spacing(0.25),
         minHeight: theme.spacing(0.75),
-        cursor: 'pointer'
+        cursor: 'pointer',
+        width: '80%',
+        marginLeft: '10%'
     }
 }));
 
@@ -50,12 +53,14 @@ interface BarChartData {
 
 interface BarChartItemProps extends BarChartData {
     onClick?: () => void;
+    isSelected: boolean;
 }
 
 interface BarChartProps {
     data: BarChartData[];
     startDate?: string;
     onClickItem?: (item: any) => void;
+    chartIds: string[];
 }
 
 /**
@@ -67,18 +72,25 @@ interface BarChartProps {
 const BarChartItem: React.FC<BarChartItemProps> = ({
     value,
     color,
+    isSelected,
     tooltip,
     onClick
 }) => {
     const styles = useStyles();
     const [position, setPosition] = React.useState({ x: 0, y: 0 });
 
     const content = (
-        <div
-            className={styles.itemBar}
-            style={{ backgroundColor: color, height: `${value}%` }}
-            onClick={onClick}
-        />
+        <>
+            <div
+                className={styles.itemBar}
+                style={{
+                    backgroundColor: color,
+                    height: `${value}%`,
+                    opacity: isSelected ? '100%' : '50%'
+                }}
+                onClick={onClick}
+            />
+        </>
     );
 
     return (
@@ -121,6 +133,7 @@ const BarChartItem: React.FC<BarChartItemProps> = ({
  * @constructor
  */
 export const BarChart: React.FC<BarChartProps> = ({
+    chartIds,
     data,
     startDate,
     onClickItem
@@ -154,6 +167,12 @@ export const BarChart: React.FC<BarChartProps> = ({
                         tooltip={item.tooltip}
                         onClick={handleClickItem(item)}
                         key={`bar-chart-item-${index}`}
+                        isSelected={
+                            chartIds.length === 0
+                                ? true
+                                : item.metadata &&
+                                  chartIds.includes(item.metadata.name)
+                        }
                     />
                 ))}
             </div>

diff --git a/src/components/hooks/useChartState.ts b/src/components/hooks/useChartState.ts
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+export function useChartState() {
+    const [chartIds, setChartIds] = useState<string[]>([]);
+    const onToggle = (id: string) => {
+        setChartIds(curIds => {
+            const newChartIds = [...curIds];
+            if (newChartIds.includes(id)) {
+                const index = newChartIds.indexOf(id);
+                newChartIds.splice(index, 1);
+            } else {
+                newChartIds.push(id);
+            }
+            return newChartIds;
+        });
+    };
+
+    const clearCharts = () => {
+        setChartIds([]);
+    };
+
+    return {
+        onToggle,
+        clearCharts,
+        chartIds
+    };
+}