feat: archive/unarchive workflow's execution

Signed-off-by: Nastya Rusina <nastya@union.ai>
flyteorg · Jan 26, 2022 · e87912f · e87912f
1 parent 9ad2101
commit e87912f
Show file tree

Hide file tree

Showing 36 changed files with 917 additions and 423 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@date-io/moment": "1.3.9",
-    "@flyteorg/flyteidl": "0.21.16",
+    "@flyteorg/flyteidl": "0.21.24",
     "@material-ui/core": "^4.0.0",
     "@material-ui/icons": "^4.0.0",
     "@material-ui/pickers": "^3.2.2",
@@ -171,6 +171,7 @@
     "moment": "^2.18.1",
     "moment-timezone": "^0.5.28",
     "msw": "^0.24.1",
+    "notistack": "^1.0.10",
     "object-hash": "^1.3.1",
     "prettier": "1.19.1",
     "protobufjs": "~6.8.0",

diff --git a/src/basics/Locale/index.ts b/src/basics/Locale/index.ts
@@ -0,0 +1,8 @@
+export const createLocalizedString = (strings = {}) => (key, ...rest) => {
+    const value = strings[key];
+    return typeof value === 'function' ? value(...rest) : value;
+};
+
+export const patternKey = (parent: string, pattern: string) => {
+    return `${parent}_${pattern}`;
+};
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1,5 +1,6 @@
-import { CssBaseline } from '@material-ui/core';
+import { CssBaseline, Collapse } from '@material-ui/core';
 import { ThemeProvider } from '@material-ui/styles';
+import { SnackbarProvider } from 'notistack';
 import { FeatureFlagsProvider } from 'basics/FeatureFlags';
 import { env } from 'common/env';
 import { debug, debugPrefix } from 'common/log';
@@ -35,32 +36,39 @@ export const AppComponent: React.FC = () => {
     return (
         <FeatureFlagsProvider>
             <ThemeProvider theme={muiTheme}>
-                <QueryClientProvider client={queryClient}>
-                    <APIContext.Provider value={apiState}>
-                        <QueryAuthorizationObserver />
-                        <SkeletonTheme
-                            color={skeletonColor}
-                            highlightColor={skeletonHighlightColor}
-                        >
-                            <CssBaseline />
-                            <Helmet>
-                                <title>Flyte Console</title>
-                                <meta
-                                    name="viewport"
-                                    content="width=device-width"
-                                />
-                            </Helmet>
-                            <Router history={history}>
-                                <ErrorBoundary fixed={true}>
-                                    <NavBarRouter />
-                                    <ApplicationRouter />
-                                </ErrorBoundary>
-                            </Router>
-                            <SystemStatusBanner />
-                        </SkeletonTheme>
-                    </APIContext.Provider>
-                    <ReactQueryDevtools initialIsOpen={false} />
-                </QueryClientProvider>
+                <SnackbarProvider
+                    // Notifications provider https://iamhosseindhv.com/notistack/demos
+                    maxSnack={2}
+                    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+                    TransitionComponent={Collapse}
+                >
+                    <QueryClientProvider client={queryClient}>
+                        <APIContext.Provider value={apiState}>
+                            <QueryAuthorizationObserver />
+                            <SkeletonTheme
+                                color={skeletonColor}
+                                highlightColor={skeletonHighlightColor}
+                            >
+                                <CssBaseline />
+                                <Helmet>
+                                    <title>Flyte Console</title>
+                                    <meta
+                                        name="viewport"
+                                        content="width=device-width"
+                                    />
+                                </Helmet>
+                                <Router history={history}>
+                                    <ErrorBoundary fixed={true}>
+                                        <NavBarRouter />
+                                        <ApplicationRouter />
+                                    </ErrorBoundary>
+                                </Router>
+                                <SystemStatusBanner />
+                            </SkeletonTheme>
+                        </APIContext.Provider>
+                        <ReactQueryDevtools initialIsOpen={false} />
+                    </QueryClientProvider>
+                </SnackbarProvider>
             </ThemeProvider>
         </FeatureFlagsProvider>
     );

diff --git a/src/components/Entities/EntityExecutions.tsx b/src/components/Entities/EntityExecutions.tsx
@@ -1,16 +1,17 @@
+import * as React from 'react';
 import { Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { contentMarginGridUnits } from 'common/layout';
 import { WaitForData } from 'components/common/WaitForData';
 import { ExecutionFilters } from 'components/Executions/ExecutionFilters';
+import { useExecutionShowArchivedState } from 'components/Executions/filters/useExecutionArchiveState';
 import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState';
 import { WorkflowExecutionsTable } from 'components/Executions/Tables/WorkflowExecutionsTable';
 import { isLoadingState } from 'components/hooks/fetchMachine';
 import { useWorkflowExecutions } from 'components/hooks/useWorkflowExecutions';
 import { SortDirection } from 'models/AdminEntity/types';
 import { ResourceIdentifier } from 'models/Common/types';
 import { executionSortFields } from 'models/Execution/constants';
-import * as React from 'react';
 import { executionFilterGenerator } from './generators';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -38,6 +39,12 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
     const { domain, project, resourceType } = id;
     const styles = useStyles();
     const filtersState = useWorkflowExecutionFiltersState();
+    const {
+        showArchived,
+        setShowArchived,
+        getFilter: getAcrhiveFilter
+    } = useExecutionShowArchivedState();
+
     const sort = {
         key: executionSortFields.createdAt,
         direction: SortDirection.DESCENDING
@@ -52,15 +59,21 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
         { domain, project },
         {
             sort,
-            filter: [...baseFilters, ...filtersState.appliedFilters],
+            filter: [
+                ...baseFilters,
+                ...filtersState.appliedFilters,
+                getAcrhiveFilter()
+            ],
             limit: 100
         }
     );
 
-    if (chartIds.length > 0)
+    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;
@@ -76,6 +89,8 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
                     {...filtersState}
                     chartIds={chartIds}
                     clearCharts={clearCharts}
+                    showArchived={showArchived}
+                    onArchiveFilterChange={setShowArchived}
                 />
             </div>
             <WaitForData {...executions}>

diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/src/components/Entities/EntityExecutionsBarChart.tsx
@@ -105,7 +105,7 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
 
     const baseFilters = React.useMemo(
         () => executionFilterGenerator[resourceType](id),
-        [id]
+        [id, resourceType]
     );
 
     const executions = useWorkflowExecutions(
@@ -117,13 +117,16 @@ 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));
-        }
-    }, []);
+    const handleClickItem = React.useCallback(
+        item => {
+            if (item.metadata) {
+                onToggle(item.metadata.name);
+                // const executionId = item.metadata as WorkflowExecutionIdentifier;
+                // history.push(Routes.ExecutionDetails.makeUrl(executionId));
+            }
+        },
+        [onToggle]
+    );
 
     /** Don't render component until finish fetching user profile */
     if (filtersState.filters[4].status !== 'LOADED') {

diff --git a/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx b/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx
@@ -1,12 +1,12 @@
+import * as React from 'react';
 import { Tab, Tabs } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
+
 import { WaitForQuery } from 'components/common/WaitForQuery';
 import { DataError } from 'components/Errors/DataError';
 import { useTabState } from 'components/hooks/useTabState';
 import { secondaryBackgroundColor } from 'components/Theme/constants';
 import { Execution, NodeExecution } from 'models/Execution/types';
-import * as React from 'react';
-import { useState, useEffect } from 'react';
 import { NodeExecutionsRequestConfigContext } from '../contexts';
 import { ExecutionFilters } from '../ExecutionFilters';
 import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
@@ -43,7 +43,7 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({
     const styles = useStyles();
     const filterState = useNodeExecutionFiltersState();
     const tabState = useTabState(tabs, tabs.nodes.id);
-    const [graphStateReady, setGraphStateReady] = useState(false);
+
     const {
         closure: { abortMetadata }
     } = execution;

diff --git a/src/components/Executions/ExecutionFilters.tsx b/src/components/Executions/ExecutionFilters.tsx
@@ -1,10 +1,10 @@
-import { FormControlLabel, Checkbox } from '@material-ui/core';
+import * as React from 'react';
+import { FormControlLabel, Checkbox, FormGroup } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { MultiSelectForm } from 'components/common/MultiSelectForm';
 import { SearchInputForm } from 'components/common/SearchInputForm';
 import { SingleSelectForm } from 'components/common/SingleSelectForm';
 import { FilterPopoverButton } from 'components/Tables/filters/FilterPopoverButton';
-import * as React from 'react';
 import {
     FilterState,
     MultiFilterState,
@@ -62,7 +62,15 @@ export const ExecutionFilters: React.FC<{
     filters: (FilterState | BooleanFilterState)[];
     chartIds?: string[];
     clearCharts?: () => void;
-}> = ({ filters, chartIds, clearCharts }) => {
+    showArchived?: boolean;
+    onArchiveFilterChange?: (showArchievedItems: boolean) => void;
+}> = ({
+    filters,
+    chartIds,
+    clearCharts,
+    showArchived,
+    onArchiveFilterChange
+}) => {
     const styles = useStyles();
 
     filters = filters.map(filter => {
@@ -124,6 +132,22 @@ export const ExecutionFilters: React.FC<{
                     key="charts"
                 />
             )}
+            {!!onArchiveFilterChange && (
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                value={showArchived}
+                                onChange={(_, checked) =>
+                                    onArchiveFilterChange(checked)
+                                }
+                            />
+                        }
+                        className={styles.checkbox}
+                        label="Show archived executions"
+                    />
+                </FormGroup>
+            )}
         </div>
     );
 };
diff --git a/src/components/Executions/ExecutionStatusBadge.tsx b/src/components/Executions/ExecutionStatusBadge.tsx
@@ -1,6 +1,10 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import * as classnames from 'classnames';
-import { bodyFontFamily, smallFontSize } from 'components/Theme/constants';
+import {
+    bodyFontFamily,
+    smallFontSize,
+    statusColors
+} from 'components/Theme/constants';
 import {
     NodeExecutionPhase,
     TaskExecutionPhase,
@@ -41,6 +45,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 interface BaseProps {
     variant?: 'default' | 'text';
+    disabled?: boolean;
 }
 
 interface WorkflowExecutionStatusBadgeProps extends BaseProps {
@@ -83,15 +88,16 @@ function getPhaseConstants(
 export const ExecutionStatusBadge: React.FC<ExecutionStatusBadgeProps> = ({
     phase,
     type,
-    variant = 'default'
+    variant = 'default',
+    disabled = false
 }) => {
     const styles = useStyles();
     const style: React.CSSProperties = {};
     const { badgeColor, text, textColor } = getPhaseConstants(type, phase);
     if (variant === 'text') {
         style.color = textColor;
     } else {
-        style.backgroundColor = badgeColor;
+        style.backgroundColor = disabled ? statusColors.UNKNOWN : badgeColor;
     }
 
     return (

diff --git a/src/components/Executions/Tables/WorkflowExecutionLink.tsx b/src/components/Executions/Tables/WorkflowExecutionLink.tsx
@@ -9,17 +9,22 @@ import { history } from 'routes/history';
 /** A simple component to render a link to a specific WorkflowExecution */
 export const WorkflowExecutionLink: React.FC<{
     className?: string;
+    color?: 'primary' | 'disabled';
     id: WorkflowExecutionIdentifier;
-}> = ({ className, id }) => {
+}> = ({ className, color = 'primary', id }) => {
     const commonStyles = useCommonStyles();
     const {
         location: { pathname }
     } = history;
     const fromExecutionNav = pathname.split('/').pop() === 'executions';
 
+    const linkColor =
+        color == 'disabled'
+            ? commonStyles.secondaryLink
+            : commonStyles.primaryLink;
     return (
         <RouterLink
-            className={classnames(commonStyles.primaryLink, className)}
+            className={classnames(linkColor, className)}
             to={`${Routes.ExecutionDetails.makeUrl(id)}${
                 fromExecutionNav ? '?fromExecutionNav=true' : ''
             }`}