Merge branch 'master' into doc-hub

flyteorg · May 5, 2023 · 7df9357 · 7df9357
2 parents 7eacbb0 + 5b36889
commit 7df9357
Show file tree

Hide file tree

Showing 149 changed files with 4,068 additions and 2,214 deletions.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -34,7 +34,7 @@ jobs:
           node-version: 18
           cache: yarn
       - name: Install deps
-        run: yarn install --frozen-lockfile
+        run: yarn install  --immutable
       - name: Run tests and generate coverage
         run: make test_unit_codecov
       - uses: codecov/codecov-action@v1

diff --git a/package.json b/package.json
@@ -16,14 +16,15 @@
   },
   "scripts": {
     "postinstall": "husky install",
+    "install:console": "yarn workspaces focus --production --all",
     "build:pack": "yarn workspaces foreach -vit --include '{@flyteorg/flyteidl-types,@flyteorg/flyte-api,@flyteorg/ui-atoms,@flyteorg/common,@flyteorg/locale,@flyteorg/flyte-api,@flyteorg/components,@flyteorg/console}' run build",
     "build:types": "yarn workspaces foreach -vit --include '{@flyteorg/flyteidl-types,@flyteorg/flyte-api,@flyteorg/ui-atoms,@flyteorg/common,@flyteorg/locale,@flyteorg/flyte-api,@flyteorg/components,@flyteorg/console}' run build:types",
     "clean": "git clean -fxd --exclude script",
     "gen:ssl": "make generate_ssl",
     "start": "yarn workspace @flyteconsole/client-app start",
     "build": "yarn workspace @flyteconsole/client-app build",
     "build:prod": "yarn workspace @flyteconsole/client-app build:prod",
-    "start:prod": "yarn build:prod && yarn workspace @flyteconsole/client-app start:prod",
+    "start:prod": "yarn workspace @flyteconsole/client-app start:prod",
     "build:storybook": "build-storybook",
     "generate:package": "yarn workspace @flyteconsole/generator start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -75,11 +76,12 @@
     "@typescript-eslint/parser": "^5.48.2",
     "babel-loader": "^8.2.5",
     "chalk": "^4",
+    "cheerio": "^1.0.0-rc.12",
     "compression-webpack-plugin": "^9.2.0",
     "cookie-parser": "^1.4.3",
     "copy-webpack-plugin": "^11.0.0",
     "dotenv": "^5.0.1",
-    "eslint": "^8.31.0",
+    "eslint": "^8.33.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.4",

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/common",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Flyteconsole common utilities",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

diff --git a/packages/common/src/config/index.ts b/packages/common/src/config/index.ts
@@ -1,3 +1,5 @@
+import { ThemeOptions } from '@material-ui/core/styles';
+
 type StatusColor = {
   FAILURE: string;
   RUNNING: string;
@@ -44,5 +46,5 @@ export type AppConfig = {
   inputFocusBorderColor?: string;
   statusColors?: StatusColor;
   graphStatusColors?: GraphStatusColor;
-  flyteNavigation?: FlyteNavigation;
+  themeOptions?: ThemeOptions;
 };
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.17",
+  "version": "0.0.26",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",
@@ -56,10 +56,10 @@
   "dependencies": {
     "@date-io/moment": "1.3.9",
     "@emotion/core": "10.1.1",
-    "@flyteorg/common": "^0.0.3",
+    "@flyteorg/common": "^0.0.4",
     "@flyteorg/components": "^0.0.3",
     "@flyteorg/flyte-api": "^0.0.2",
-    "@flyteorg/flyteidl-types": "^0.0.3",
+    "@flyteorg/flyteidl-types": "^0.0.4",
     "@flyteorg/locale": "^0.0.2",
     "@flyteorg/ui-atoms": "^0.0.3",
     "@material-ui/core": "^4.12.4",

diff --git a/packages/console/src/common/constants.ts b/packages/console/src/common/constants.ts
@@ -1,6 +1,7 @@
 export const contentContainerId = 'content-container';
 export const detailsPanelId = 'details-panel';
 export const navBarContentId = 'nav-bar-content';
+export const subnavBarContentId = 'subnav-bar-content';
 
 export const unknownValueString = '(unknown)';
 export const dashedValueString = '----';

diff --git a/packages/console/src/components/App/App.tsx b/packages/console/src/components/App/App.tsx
@@ -29,12 +29,12 @@ import { ReactQueryDevtools } from 'react-query-devtools';
 import { Router } from 'react-router-dom';
 import { ApplicationRouter } from 'routes/ApplicationRouter';
 import { history } from 'routes/history';
-import { NavBarRouter } from 'routes/NavBarRouter';
 import { LocalCacheProvider } from 'basics/LocalCache/ContextProvider';
 import {
   ExternalConfigurationProvider,
   ExternalConfigurationProviderProps,
 } from 'basics/ExternalConfigurationProvider';
+import NavBar from 'components/Navigation/NavBar';
 
 export type AppComponentProps = ExternalConfigurationProviderProps;
 
@@ -58,12 +58,12 @@ export const AppComponent: React.FC<AppComponentProps> = (
   return (
     <FeatureFlagsProvider>
       <LocalCacheProvider>
-        <ThemeProvider theme={getMuiTheme(props.config)}>
-          <StylesProvider
-            generateClassName={createGenerateClassName({
-              seed: 'c-',
-            })}
-          >
+        <StylesProvider
+          generateClassName={createGenerateClassName({
+            seed: 'c-',
+          })}
+        >
+          <ThemeProvider theme={getMuiTheme(props.config)}>
             <SnackbarProvider
               // Notifications provider https://iamhosseindhv.com/notistack/demos
               maxSnack={2}
@@ -82,7 +82,7 @@ export const AppComponent: React.FC<AppComponentProps> = (
                       <ExternalConfigurationProvider {...props}>
                         <Router history={history}>
                           <ErrorBoundary fixed={true}>
-                            <NavBarRouter />
+                            <NavBar />
                             <ApplicationRouter />
                           </ErrorBoundary>
                         </Router>
@@ -94,8 +94,8 @@ export const AppComponent: React.FC<AppComponentProps> = (
                 <ReactQueryDevtools initialIsOpen={false} />
               </QueryClientProvider>
             </SnackbarProvider>
-          </StylesProvider>
-        </ThemeProvider>
+          </ThemeProvider>
+        </StylesProvider>
       </LocalCacheProvider>
     </FeatureFlagsProvider>
   );

diff --git a/packages/console/src/components/Entities/EntityDetails.tsx b/packages/console/src/components/Entities/EntityDetails.tsx
@@ -38,7 +38,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   schedulesContainer: {
     flex: '1 2 auto',
-    marginRight: theme.spacing(30),
   },
   inputsContainer: {
     display: 'flex',

diff --git a/packages/console/src/components/Entities/EntitySchedules.tsx b/packages/console/src/components/Entities/EntitySchedules.tsx
@@ -1,4 +1,13 @@
-import { Typography } from '@material-ui/core';
+import {
+  Paper,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import {
   getScheduleFrequencyString,
@@ -11,6 +20,7 @@ import { ResourceIdentifier } from 'models/Common/types';
 import { identifierToString } from 'models/Common/utils';
 import { LaunchPlan } from 'models/Launch/types';
 import * as React from 'react';
+import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink';
 import { entityStrings } from './constants';
 import t, { patternKey } from './strings';
 
@@ -25,26 +35,61 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
     marginBottom: theme.spacing(1),
   },
+  headCell: {
+    color: theme.palette.grey[400],
+  },
 }));
 
 const RenderSchedules: React.FC<{
   launchPlans: LaunchPlan[];
 }> = ({ launchPlans }) => {
-  const commonStyles = useCommonStyles();
+  const styles = useStyles();
   return (
-    <ul className={commonStyles.listUnstyled}>
-      {launchPlans.map(launchPlan => {
-        const { schedule } = launchPlan.spec.entityMetadata;
-        const frequencyString = getScheduleFrequencyString(schedule);
-        const offsetString = getScheduleOffsetString(schedule);
-        const scheduleString = offsetString
-          ? `${frequencyString} (offset by ${offsetString})`
-          : frequencyString;
-        return (
-          <li key={identifierToString(launchPlan.id)}>{scheduleString}</li>
-        );
-      })}
-    </ul>
+    <TableContainer component={Paper}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'frequency'))}
+              </Typography>
+            </TableCell>
+            <TableCell className={styles.headCell}>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'name'))}
+              </Typography>
+            </TableCell>
+            <TableCell className={styles.headCell}>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'version'))}
+              </Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {launchPlans.map(launchPlan => {
+            const { schedule } = launchPlan.spec.entityMetadata;
+            const frequencyString = getScheduleFrequencyString(schedule);
+            const offsetString = getScheduleOffsetString(schedule);
+            const scheduleString = offsetString
+              ? `${frequencyString} (offset by ${offsetString})`
+              : frequencyString;
+
+            return (
+              <TableRow key={launchPlan.id.name}>
+                <TableCell>{scheduleString}</TableCell>
+                <TableCell>
+                  <LaunchPlanLink id={launchPlan.id} color="disabled">
+                    {launchPlan.id.name}
+                  </LaunchPlanLink>
+                </TableCell>
+                <TableCell>{launchPlan.id.version}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };
 

diff --git a/packages/console/src/components/Entities/strings.ts b/packages/console/src/components/Entities/strings.ts
@@ -46,6 +46,9 @@ const str = {
   configTestSplitRatio: 'test_split_ratio',
   noExpectedInputs: 'This launch plan has no expected inputs.',
   noFixedInputs: 'This launch plan has no fixed inputs.',
+  launchPlan_frequency: 'Frequency',
+  launchPlan_name: 'Launch Plan',
+  launchPlan_version: 'Version',
 };
 
 export { patternKey } from '@flyteorg/locale';

diff --git a/packages/console/src/components/Entities/test/EntitySchedules.test.tsx b/packages/console/src/components/Entities/test/EntitySchedules.test.tsx
@@ -8,6 +8,7 @@ import { ResourceIdentifier, ResourceType } from 'models/Common/types';
 import { listLaunchPlans } from 'models/Launch/api';
 import { LaunchPlan, LaunchPlanState } from 'models/Launch/types';
 import * as React from 'react';
+import { MemoryRouter } from 'react-router';
 import { EntitySchedules } from '../EntitySchedules';
 import t from '../strings';
 
@@ -26,7 +27,11 @@ describe('EntitySchedules', () => {
   let launchPlans: LaunchPlan[];
 
   const renderSchedules = async () => {
-    const result = render(<EntitySchedules id={id} />);
+    const result = render(
+      <MemoryRouter>
+        <EntitySchedules id={id} />
+      </MemoryRouter>,
+    );
     await waitFor(() => result.getByText(t('schedulesHeader')));
     return result;
   };

diff --git a/packages/console/src/components/Errors/index.ts b/packages/console/src/components/Errors/index.ts
@@ -0,0 +1 @@
+export * from './DataError';
diff --git a/packages/console/src/components/Executions/CacheStatus.tsx b/packages/console/src/components/Executions/CacheStatus.tsx
@@ -82,13 +82,15 @@ export interface CacheStatusProps {
   variant?: 'normal' | 'iconOnly';
   sourceTaskExecutionId?: TaskExecutionIdentifier;
   iconStyles?: React.CSSProperties;
+  className?: string;
 }
 
 export const CacheStatus: React.FC<CacheStatusProps> = ({
   cacheStatus,
   sourceTaskExecutionId,
   variant = 'normal',
   iconStyles,
+  className,
 }) => {
   const commonStyles = useCommonStyles();
   const styles = useStyles();
@@ -100,11 +102,12 @@ export const CacheStatus: React.FC<CacheStatusProps> = ({
   const message = cacheStatusMessages[cacheStatus] || unknownCacheStatusString;
 
   return variant === 'iconOnly' ? (
-    <Tooltip title={message}>
+    <Tooltip title={message} className={className}>
       <NodeExecutionCacheStatusIcon
         className={classnames(
           commonStyles.iconRight,
           commonStyles.iconSecondary,
+          className,
         )}
         style={iconStyles}
         status={cacheStatus}
@@ -113,7 +116,7 @@ export const CacheStatus: React.FC<CacheStatusProps> = ({
   ) : (
     <>
       <Typography
-        className={styles.cacheStatus}
+        className={classnames(styles.cacheStatus, className)}
         variant="subtitle1"
         color="textSecondary"
       >
@@ -122,6 +125,7 @@ export const CacheStatus: React.FC<CacheStatusProps> = ({
           className={classnames(
             commonStyles.iconSecondary,
             commonStyles.iconLeft,
+            className,
           )}
         />
         {message}
@@ -131,6 +135,7 @@ export const CacheStatus: React.FC<CacheStatusProps> = ({
           className={classnames(
             commonStyles.primaryLink,
             styles.sourceExecutionLink,
+            className,
           )}
           to={Routes.ExecutionDetails.makeUrl(
             sourceTaskExecutionId.nodeExecutionId.executionId,

diff --git a/packages/console/src/components/Executions/ExecutionDetails/DetailsPanelContext.ts b/packages/console/src/components/Executions/ExecutionDetails/DetailsPanelContext.ts