feat: merge devmain into master

README.md

@@ -46,7 +46,7 @@ For help with installing dependencies look into
     ```
 2. Now, export the following env variables:
 
-    ` export ADMIN_API_URL=http://localhost:30080 export DISABLE_AUTH=1 `
+    `export ADMIN_API_URL=http://localhost:30080 export DISABLE_AUTH=1`
 
     > You can persist these environment variables either in the current shell or in a `.env` file at the root
     > of the repository. A `.env` file will persist the settings across multiple terminal

packages/zapp/console/package.json

@@ -57,7 +57,7 @@
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.3.4",
         "@date-io/moment": "1.3.9",
-        "@flyteorg/flyteidl": "1.1.4",
+        "@flyteorg/flyteidl": "1.2.2",
         "@material-ui/core": "^4.0.0",
         "@material-ui/icons": "^4.0.0",
         "@material-ui/pickers": "^3.2.2",

packages/zapp/console/src/components/Entities/EntityInputs.tsx

@@ -16,6 +16,7 @@ import { FilterOperationName } from 'models/AdminEntity/types';
 import { ResourceIdentifier } from 'models/Common/types';
 import { LaunchPlanClosure, LaunchPlanSpec } from 'models/Launch/types';
 import * as React from 'react';
+import { useMemo } from 'react';
 import t from './strings';
 import { transformLiterals } from '../Literals/helpers';
 
@@ -104,8 +105,8 @@ export const EntityInputs: React.FC<{
     ? launchPlanState.value[0].spec
     : ({} as LaunchPlanSpec);
 
-  const expectedInputs = React.useMemo<Input[]>(() => {
-    const results = [] as Input[];
+  const expectedInputs = useMemo<Input[]>(() => {
+    const results: Input[] = [];
     Object.keys(closure?.expectedInputs?.parameters ?? {}).forEach((name) => {
       const parameter = closure?.expectedInputs.parameters[name];
       if (parameter?.var?.type) {
@@ -121,25 +122,11 @@ export const EntityInputs: React.FC<{
     return results;
   }, [closure]);
 
-  const fixedInputs = React.useMemo<Input[]>(() => {
+  const fixedInputs = useMemo<Input[]>(() => {
     const inputsMap = transformLiterals(spec?.fixedInputs?.literals ?? {});
     return Object.keys(inputsMap).map((name) => ({ name, defaultValue: inputsMap[name] }));
   }, [spec]);
 
-  const configs = React.useMemo(
-    () => [
-      { name: t('configType'), value: 'single (csv)' },
-      {
-        name: t('configUrl'),
-        value:
-          'https://raw.githubusercontent.com/jbrownlee/Datasets/master/pima-indians-diabetes.data.csv',
-      },
-      { name: t('configSeed'), value: '7' },
-      { name: t('configTestSplitRatio'), value: '0.33' },
-    ],
-    [],
-  );
-
   return (
     <>
       <Typography className={styles.header} variant="h3">
@@ -232,22 +219,6 @@ export const EntityInputs: React.FC<{
           )}
         </div>
       </div>
-      {/* <div className={styles.rowContainer}>
-        <div className={styles.firstColumnContainer}>
-          <Typography className={styles.header} variant="h4">
-            {t('configuration')}
-          </Typography>
-          <ul className={styles.configs}>
-            {configs.map(({ name, value }) => (
-              <li className={styles.config} key={name}>
-                <span className={styles.configName}><Typography variant="body">{name}:</Typography></span>
-                <span className={styles.configValue}><Typography variant="body">{value}</Typography></span>
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div className={styles.secondColumnContainer}></div>
-      </div> */}
     </>
   );
 };

packages/zapp/console/src/components/Executions/CacheStatus.tsx

@@ -0,0 +1,116 @@
+import { SvgIconProps, Tooltip, Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import CachedOutlined from '@material-ui/icons/CachedOutlined';
+import ErrorOutlined from '@material-ui/icons/ErrorOutlined';
+import InfoOutlined from '@material-ui/icons/InfoOutlined';
+import classnames from 'classnames';
+import { assertNever } from 'common/utils';
+import { PublishedWithChangesOutlined } from 'components/common/PublishedWithChanges';
+import { useCommonStyles } from 'components/common/styles';
+import { CatalogCacheStatus } from 'models/Execution/enums';
+import { TaskExecutionIdentifier } from 'models/Execution/types';
+import { MapCacheIcon } from '@flyteconsole/ui-atoms';
+import * as React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Routes } from 'routes/routes';
+import {
+  cacheStatusMessages,
+  unknownCacheStatusString,
+  viewSourceExecutionString,
+} from './constants';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  cacheStatus: {
+    alignItems: 'center',
+    display: 'flex',
+    marginTop: theme.spacing(1),
+  },
+  sourceExecutionLink: {
+    fontWeight: 'normal',
+  },
+}));
+
+/** Renders the appropriate icon for a given CatalogCacheStatus */
+const NodeExecutionCacheStatusIcon: React.FC<
+  SvgIconProps & {
+    status: CatalogCacheStatus;
+  }
+> = React.forwardRef(({ status, ...props }, ref) => {
+  switch (status) {
+    case CatalogCacheStatus.CACHE_DISABLED:
+    case CatalogCacheStatus.CACHE_MISS: {
+      return <InfoOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.CACHE_HIT: {
+      return <CachedOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.CACHE_POPULATED: {
+      return <PublishedWithChangesOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.CACHE_LOOKUP_FAILURE:
+    case CatalogCacheStatus.CACHE_PUT_FAILURE: {
+      return <ErrorOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.MAP_CACHE: {
+      return <MapCacheIcon {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    default: {
+      assertNever(status);
+      return null;
+    }
+  }
+});
+
+export interface CacheStatusProps {
+  cacheStatus: CatalogCacheStatus | null | undefined;
+  /** `normal` will render an icon with description message beside it
+   *  `iconOnly` will render just the icon with the description as a tooltip
+   */
+  variant?: 'normal' | 'iconOnly';
+  sourceTaskExecutionId?: TaskExecutionIdentifier;
+  iconStyles?: React.CSSProperties;
+}
+
+export const CacheStatus: React.FC<CacheStatusProps> = ({
+  cacheStatus,
+  sourceTaskExecutionId,
+  variant = 'normal',
+  iconStyles,
+}) => {
+  const commonStyles = useCommonStyles();
+  const styles = useStyles();
+
+  if (cacheStatus == null) {
+    return null;
+  }
+
+  const message = cacheStatusMessages[cacheStatus] || unknownCacheStatusString;
+
+  return variant === 'iconOnly' ? (
+    <Tooltip title={message}>
+      <NodeExecutionCacheStatusIcon
+        className={classnames(commonStyles.iconRight, commonStyles.iconSecondary)}
+        style={iconStyles}
+        status={cacheStatus}
+      />
+    </Tooltip>
+  ) : (
+    <>
+      <Typography className={styles.cacheStatus} variant="subtitle1" color="textSecondary">
+        <NodeExecutionCacheStatusIcon
+          status={cacheStatus}
+          className={classnames(commonStyles.iconSecondary, commonStyles.iconLeft)}
+        />
+        {message}
+      </Typography>
+      {sourceTaskExecutionId && (
+        <RouterLink
+          className={classnames(commonStyles.primaryLink, styles.sourceExecutionLink)}
+          to={Routes.ExecutionDetails.makeUrl(sourceTaskExecutionId.nodeExecutionId.executionId)}
+        >
+          {viewSourceExecutionString}
+        </RouterLink>
+      )}
+    </>
+  );
+};

packages/zapp/console/src/components/Executions/ExecutionDetails/DetailsPanelContext.ts

@@ -0,0 +1,11 @@
+import { NodeExecutionIdentifier } from 'models/Execution/types';
+import { createContext } from 'react';
+
+export interface DetailsPanelContextData {
+  selectedExecution?: NodeExecutionIdentifier | null;
+  setSelectedExecution: (selectedExecutionId: NodeExecutionIdentifier | null) => void;
+}
+
+export const DetailsPanelContext = createContext<DetailsPanelContextData>(
+  {} as DetailsPanelContextData,
+);

packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx

@@ -10,9 +10,11 @@ import { literalsToLiteralValueMap } from 'components/Launch/LaunchForm/utils';
 import { TaskInitialLaunchParameters } from 'components/Launch/LaunchForm/types';
 import { NodeExecutionPhase } from 'models/Execution/enums';
 import Close from '@material-ui/icons/Close';
+import { useEffect, useState } from 'react';
 import { NodeExecutionDetails } from '../types';
 import t from './strings';
 import { ExecutionNodeDeck } from './ExecutionNodeDeck';
+import { useNodeExecutionContext } from '../contextProvider/NodeExecutionDetails';
 
 const useStyles = makeStyles((theme: Theme) => {
   return {
@@ -57,26 +59,34 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 interface ExecutionDetailsActionsProps {
-  details: NodeExecutionDetails;
+  details?: NodeExecutionDetails;
   nodeExecutionId: NodeExecutionIdentifier;
-  phase?: NodeExecutionPhase;
+  phase: NodeExecutionPhase;
 }
 
-export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JSX.Element => {
-  const { details, nodeExecutionId, phase } = props;
+export const ExecutionDetailsActions = ({
+  details,
+  nodeExecutionId,
+  phase,
+}: ExecutionDetailsActionsProps): JSX.Element => {
   const styles = useStyles();
 
-  const [showLaunchForm, setShowLaunchForm] = React.useState<boolean>(false);
+  const [showLaunchForm, setShowLaunchForm] = useState<boolean>(false);
+  const [showResumeForm, setShowResumeForm] = useState<boolean>(false);
 
-  const [initialParameters, setInitialParameters] = React.useState<
+  const [initialParameters, setInitialParameters] = useState<
     TaskInitialLaunchParameters | undefined
   >(undefined);
 
   const executionData = useNodeExecutionData(nodeExecutionId);
   const execution = useNodeExecution(nodeExecutionId);
-  const id = details.taskTemplate?.id;
+  const { compiledWorkflowClosure } = useNodeExecutionContext();
+  const id = details?.taskTemplate?.id;
+  const compiledNode = (compiledWorkflowClosure?.primary.template.nodes ?? []).find(
+    (node) => node.id === nodeExecutionId.nodeId,
+  );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!id) {
       return;
     }
@@ -99,15 +109,16 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
   const [showDeck, setShowDeck] = React.useState(false);
   const onCloseDeck = () => setShowDeck(false);
 
-  if (!id || !initialParameters) {
-    return <></>;
-  }
-
   const rerunOnClick = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
     setShowLaunchForm(true);
   };
 
+  const onResumeClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    setShowResumeForm(true);
+  };
+
   return (
     <>
       <div className={styles.actionsContainer}>
@@ -121,17 +132,35 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
             {t('flyteDeck')}
           </Button>
         )}
-        <Button variant="outlined" color="primary" onClick={rerunOnClick}>
-          {t('rerun')}
-        </Button>
+        {id && initialParameters && details && (
+          <Button variant="outlined" color="primary" onClick={rerunOnClick}>
+            {t('rerun')}
+          </Button>
+        )}
+        {phase === NodeExecutionPhase.PAUSED && (
+          <Button variant="outlined" color="primary" onClick={onResumeClick}>
+            {t('resume')}
+          </Button>
+        )}
       </div>
-      <LaunchFormDialog
-        id={id as ResourceIdentifier}
-        initialParameters={initialParameters}
-        showLaunchForm={showLaunchForm}
-        setShowLaunchForm={setShowLaunchForm}
-      />
-      {execution?.value?.closure?.deckUri ? (
+      {id && initialParameters && (
+        <LaunchFormDialog
+          id={id as ResourceIdentifier}
+          initialParameters={initialParameters}
+          showLaunchForm={showLaunchForm}
+          setShowLaunchForm={setShowLaunchForm}
+        />
+      )}
+      {compiledNode && (
+        <LaunchFormDialog
+          compiledNode={compiledNode}
+          initialParameters={initialParameters}
+          nodeId={nodeExecutionId.nodeId}
+          showLaunchForm={showResumeForm}
+          setShowLaunchForm={setShowResumeForm}
+        />
+      )}
+      {execution?.value?.closure?.deckUri && (
         <Dialog PaperProps={{ className: styles.dialog }} maxWidth={false} open={showDeck}>
           <div className={styles.dialogTitle}>
             <h2 className={styles.deckTitle}>{t('flyteDeck')}</h2>
@@ -141,7 +170,7 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
           </div>
           <ExecutionNodeDeck deckUri={execution.value.closure.deckUri} />
         </Dialog>
-      ) : null}
+      )}
     </>
   );
 };