chore: tlro basic setup

Signed-off-by: Carina Ursu <[email protected]>

Makefile

@@ -22,8 +22,7 @@ build_prod:
 
 .PHONY: pack
 pack:
-	yarn workspaces focus --production --all
-	yarn run build:pack
+ 	yarn run build:pack
 
 .PHONY: types
 types:

packages/console/package.json

@@ -20,7 +20,9 @@
     "README.md",
     "dist",
     "lib",
-    "node_modules"
+    "node_modules",
+    "src",
+    ".yalc"
   ],
   "keywords": [
     "flyteorg",
@@ -31,9 +33,11 @@
   "scripts": {
     "debug": "NM_DEBUG_LEVEL=2 yarn",
     "clean": "rm -rf dist && rm -rf lib && rm -rf **.tsbuildinfo || true",
-    "build:watch": "run -T tsc-watch --noClear -p ./tsconfig.build.es.json --onSuccess \"yarn build\"",
+    "build:watch": "run -T tsc-watch --noClear --signalEmittedFiles -p ./tsconfig.build.es.json --onSuccess \"yarn build:watch:success\"",
+    "build:watch:success": "yarn build:esm:alias && yalc push",
     "build": "yarn clean && yarn build:esm && yarn build:cjs",
-    "build:esm": "mkdir lib && cp -R src/assets ./lib && run -T tsc --module esnext --project ./tsconfig.build.es.json && run -T tsc-alias -p ./tsconfig.build.es.json",
+    "build:esm": "mkdir lib && cp -R src/assets ./lib && run -T tsc --module esnext --project ./tsconfig.build.es.json && yarn build:esm:alias",
+    "build:esm:alias": "run -T tsc-alias -p ./tsconfig.build.es.json",
     "build:cjs": "mkdir dist && cp -R src/assets ./dist && run -T wait-on ./dist/assets && run -T tsc --project ./tsconfig.build.json && run -T tsc-alias -p ./tsconfig.build.json",
     "build:types": "run -T tsc --module esnext --project ./tsconfig.build.es.json --emitDeclarationOnly && run -T tsc-alias -p ./tsconfig.build.es.json",
     "test": "NODE_ENV=test jest"
@@ -79,7 +83,7 @@
     "dagre": "0.8.5",
     "dagre-d3": "^0.6.4",
     "debug": "2.6.9",
-    "dom-helpers": "^3.4.0",
+    "dom-helpers": "5.2.1",
     "fuzzysort": "^1.1.1",
     "intersection-observer": "^0.7.0",
     "js-yaml": "^3.13.1",
@@ -109,7 +113,7 @@
   },
   "devDependencies": {
     "@types/debug": "^0.0.30",
-    "@types/dom-helpers": "^3.4.1",
+    "@types/dom-helpers": "^5.0.1",
     "@types/js-yaml": "^3.10.1",
     "@types/linkify-it": "^2.1.0",
     "@types/lodash": "^4.14.68",
@@ -129,6 +133,7 @@
   },
   "resolutions": {
     "react": "^16.13.1",
+    "dom-helpers": "5.2.1",
     "react-dom": "^16.13.1",
     "micromatch": "^4.0.0",
     "@types/react": "^16.9.34",

packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren, useContext } from 'react';
+import { AppConfig } from '@flyteorg/common';
+
+export interface TaskObservabilityProps {
+  LaunchAnchor: any;
+  additionalRoutes?: JSX.Element;
+}
+export interface ExternalConfigurationProviderProps {
+  registry?: {
+    nav?: React.FC<any>;
+    taskObservability?: TaskObservabilityProps;
+  };
+  env?: any;
+  config?: AppConfig;
+}
+
+export const ExternalConfigurationContext =
+  React.createContext<ExternalConfigurationProviderProps>({});
+
+export const ExternalConfigurationProvider = ({
+  children,
+  config,
+  env,
+  registry,
+}: PropsWithChildren<ExternalConfigurationProviderProps>) => {
+  return (
+    <ExternalConfigurationContext.Provider value={{ config, env, registry }}>
+      {children}
+    </ExternalConfigurationContext.Provider>
+  );
+};
+
+export const useExternalConfigurationContext = () =>
+  useContext(ExternalConfigurationContext);

packages/console/src/basics/ExternalConfigurationProvider/index.ts

@@ -0,0 +1 @@
+export * from './ExternalConfigurationProvider';

packages/console/src/basics/index.ts

@@ -0,0 +1,4 @@
+export {
+  type ExternalConfigurationProviderProps,
+  ExternalConfigurationProvider,
+} from './ExternalConfigurationProvider';

packages/console/src/common/index.ts

@@ -0,0 +1 @@
+export { navbarGridHeight } from './layout';

packages/console/src/components/App/App.tsx

@@ -10,7 +10,7 @@ import { ThemeProvider } from '@material-ui/styles';
 import { FlyteApiProvider } from '@flyteorg/flyte-api';
 import { SnackbarProvider } from 'notistack';
 import { FeatureFlagsProvider } from 'basics/FeatureFlags';
-import { env, updateEnv, AppConfig } from '@flyteorg/common';
+import { env, updateEnv } from '@flyteorg/common';
 import { debug, debugPrefix } from 'common/log';
 import { ErrorBoundary } from 'components/common/ErrorBoundary';
 import { APIContext, useAPIState } from 'components/data/apiContext';
@@ -31,17 +31,14 @@ 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';
 
-const queryClient = createQueryClient();
-
-interface AppComponentProps {
-  registry?: {
-    nav?: React.FC<any>;
-  };
-  env?: any;
-  config?: AppConfig;
-}
+export type AppComponentProps = ExternalConfigurationProviderProps;
 
+const queryClient = createQueryClient();
 let overrided = false;
 
 export const AppComponent: React.FC<AppComponentProps> = (
@@ -82,12 +79,14 @@ export const AppComponent: React.FC<AppComponentProps> = (
                       highlightColor={skeletonHighlightColor}
                     >
                       <CssBaseline />
-                      <Router history={history}>
-                        <ErrorBoundary fixed={true}>
-                          <NavBarRouter registry={props?.registry} />
-                          <ApplicationRouter />
-                        </ErrorBoundary>
-                      </Router>
+                      <ExternalConfigurationProvider {...props}>
+                        <Router history={history}>
+                          <ErrorBoundary fixed={true}>
+                            <NavBarRouter />
+                            <ApplicationRouter />
+                          </ErrorBoundary>
+                        </Router>
+                      </ExternalConfigurationProvider>
                       <SystemStatusBanner />
                     </SkeletonTheme>
                   </APIContext.Provider>

packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { getCacheKey } from 'components/Cache/utils';
 import { useCommonStyles } from 'components/common/styles';
-import scrollbarSize from 'dom-helpers/util/scrollbarSize';
+import scrollbarSize from 'dom-helpers/scrollbarSize';
 import { NodeExecution } from 'models/Execution/types';
 import { dNode } from 'models/Graph/types';
 import { NodeExecutionPhase } from 'models/Execution/enums';

packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogs.tsx

@@ -38,7 +38,9 @@ export const TaskLogList: React.FC<{ logs: Core.ITaskLog[] }> = ({ logs }) => {
           </NewTargetLink>
         ) : (
           // If there is no url, show item a a name string only, as it's not really clickable
-          <div className={styles.logName}>{name}</div>
+          <div key={name} className={styles.logName}>
+            {name}
+          </div>
         ),
       )}
     </>

packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogsCard.tsx

@@ -6,6 +6,7 @@ import { useCommonStyles } from 'components/common/styles';
 import { TaskExecutionPhase } from 'models/Execution/enums';
 import { TaskExecution } from 'models/Execution/types';
 import { Core } from '@flyteorg/flyteidl-types';
+import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
 import { TaskExecutionDetails } from './TaskExecutionDetails';
 import { TaskExecutionError } from './TaskExecutionError';
@@ -20,6 +21,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   title: {
     marginBottom: theme.spacing(1),
+
+    '& > svg': {
+      verticalAlign: 'middle',
+    },
   },
   showDetailsButton: {
     marginTop: theme.spacing(1),
@@ -44,22 +49,38 @@ export const TaskExecutionLogsCard: React.FC<TaskExecutionLogsCardProps> = ({
 }) => {
   const commonStyles = useCommonStyles();
   const styles = useStyles();
+  const { registry } = useExternalConfigurationContext();
 
   const {
     closure: { error, startedAt, updatedAt, duration },
+    id: taskExecutionId,
   } = taskExecution;
+
   const taskHasStarted = phase >= TaskExecutionPhase.QUEUED;
+  const { LaunchAnchor } = registry?.taskObservability || {};
 
   return (
     <>
       <section className={styles.section}>
         <header className={styles.header}>
-          <Typography
-            variant="h6"
-            className={classnames(styles.title, commonStyles.textWrapped)}
-          >
-            {headerText}
-          </Typography>
+          {LaunchAnchor ? (
+            // Alternate path
+            <LaunchAnchor
+              classNames={classnames(styles.title, commonStyles.textWrapped)}
+              headerText={headerText}
+              taskId={taskExecutionId.taskId}
+              nodeExecutionId={taskExecutionId.nodeExecutionId}
+              retryAttempt={taskExecutionId.retryAttempt}
+            />
+          ) : (
+            // default path
+            <Typography
+              variant="h6"
+              className={classnames(styles.title, commonStyles.textWrapped)}
+            >
+              {headerText}
+            </Typography>
+          )}
         </header>
         <ExecutionStatusBadge phase={phase} type="task" variant="text" />
       </section>

packages/console/src/components/Navigation/NavBarContent.tsx

@@ -4,7 +4,9 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 /** Complements NavBar, allowing pages to inject custom content. */
-export const NavBarContent: React.FC<{}> = ({ children }) => {
+export const NavBarContent: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
   const navBar = document.getElementById(navBarContentId);
   if (navBar == null) {
     log.warn(`

packages/console/src/components/index.ts

@@ -1,2 +1,15 @@
+export { type ExecutionDetailsRouteParams } from './Executions/ExecutionDetails/ExecutionDetails';
+export { ExecutionStatusBadge } from './Executions/ExecutionStatusBadge';
+export { formatRetryAttempt } from './Executions/TaskExecutionsList/utils';
+export { makeTaskExecutionListQuery } from './Executions/taskExecutionQueries';
+
+export { useCommonStyles } from './common/styles';
+export { NavBarContent } from './Navigation/NavBarContent';
+export { withRouteParams } from './common/withRouteParams';
+export { useNodeExecution } from 'components/hooks/useNodeExecution';
+export { WaitForData } from 'components/common/WaitForData';
+export { useConditionalQuery } from 'components/hooks/useConditionalQuery';
+export { WaitForQuery } from 'components/common/WaitForQuery';
+
 export * from './Navigation';
 export * from './App/App';

packages/console/src/index.ts

@@ -1,4 +1,7 @@
 import './common/setupProtobuf';
-import './models';
 
 export * from './components';
+export * from './routes';
+export * from './models';
+export * from './common';
+export * from './basics';

packages/console/src/models/index.ts

@@ -1 +1,4 @@
 export * from './AdminEntity';
+export * from './Execution/types';
+export { taskSortFields } from './Task/constants';
+export * from './Common/types';

packages/console/src/routes/ApplicationRouter.tsx

@@ -5,10 +5,11 @@ import {
 import { withSideNavigation } from 'components/Navigation/withSideNavigation';
 import * as React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider';
 import { components } from './components';
 import { Routes } from './routes';
 
-function withContentContainer<P extends {}>(
+export function withContentContainer<P extends {}>(
   WrappedComponent: React.FC<P>,
   contentContainerProps?: ContentContainerProps,
 ) {
@@ -19,9 +20,14 @@ function withContentContainer<P extends {}>(
   );
 }
 
-export const ApplicationRouter: React.FC = () => (
-  <>
+export const ApplicationRouter: React.FC = () => {
+  const { additionalRoutes } =
+    useExternalConfigurationContext()?.registry?.taskObservability || {};
+
+  return (
     <Switch>
+      {additionalRoutes}
+
       <Route
         path={Routes.ExecutionDetails.path}
         component={withContentContainer(components.executionDetails, {
@@ -60,5 +66,5 @@ export const ApplicationRouter: React.FC = () => (
       />
       <Route component={withContentContainer(components.notFound)} />
     </Switch>
-  </>
-);
+  );
+};

packages/console/src/routes/NavBarRouter.tsx

@@ -1,23 +1,23 @@
 import { NavBar } from 'components/Navigation/NavBar';
 import * as React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider';
 import { Routes } from './routes';
 
 const CustomNavBar = () => <NavBar useCustomContent={true} />;
 
-interface NavBarRouterProps {
-  registry?: {
-    nav?: React.FC<any>;
-  };
-}
+interface NavBarRouterProps {}
 /** Handles the routing for content displayed in the NavBar */
-export const NavBarRouter: React.FC<NavBarRouterProps> = (
-  props: NavBarRouterProps,
-) => (
-  <>
-    <Switch>
-      <Route path={Routes.ExecutionDetails.path} component={CustomNavBar} />
-      <Route component={props?.registry?.nav || NavBar} />
-    </Switch>
-  </>
-);
+export const NavBarRouter: React.FC<NavBarRouterProps> = () => {
+  const { registry } = useExternalConfigurationContext();
+
+  const ExternalNav = registry?.nav;
+  return (
+    <>
+      <Switch>
+        <Route path={Routes.ExecutionDetails.path} component={CustomNavBar} />
+        <Route component={ExternalNav || NavBar} />
+      </Switch>
+    </>
+  );
+};

packages/console/src/routes/index.ts

@@ -0,0 +1,3 @@
+export * from './routes';
+export * from './ApplicationRouter';
+export * from './constants';