From bf468fa644a17aefc2d01628c14b8e42bb0568b8 Mon Sep 17 00:00:00 2001 From: Carina Ursu Date: Wed, 15 Mar 2023 15:16:20 -0700 Subject: [PATCH] chore: tlro basic setup Signed-off-by: Carina Ursu --- Makefile | 3 +- packages/console/package.json | 15 +++++--- .../ExternalConfigurationProvider.tsx | 34 +++++++++++++++++++ .../ExternalConfigurationProvider/index.ts | 1 + packages/console/src/basics/index.ts | 4 +++ packages/console/src/common/index.ts | 1 + packages/console/src/components/App/App.tsx | 31 ++++++++--------- .../Executions/Tables/NodeExecutionsTable.tsx | 2 +- .../TaskExecutionsList/TaskExecutionLogs.tsx | 4 ++- .../TaskExecutionLogsCard.tsx | 33 ++++++++++++++---- .../components/Navigation/NavBarContent.tsx | 4 ++- packages/console/src/components/index.ts | 13 +++++++ packages/console/src/index.ts | 5 ++- packages/console/src/models/index.ts | 3 ++ .../console/src/routes/ApplicationRouter.tsx | 16 ++++++--- packages/console/src/routes/NavBarRouter.tsx | 30 ++++++++-------- packages/console/src/routes/index.ts | 3 ++ yarn.lock | 25 +++++--------- 18 files changed, 158 insertions(+), 69 deletions(-) create mode 100644 packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx create mode 100644 packages/console/src/basics/ExternalConfigurationProvider/index.ts create mode 100644 packages/console/src/basics/index.ts create mode 100644 packages/console/src/common/index.ts create mode 100644 packages/console/src/routes/index.ts diff --git a/Makefile b/Makefile index e82de749e..5c3a66552 100644 --- a/Makefile +++ b/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: diff --git a/packages/console/package.json b/packages/console/package.json index f348cf25c..2d62e7888 100644 --- a/packages/console/package.json +++ b/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", diff --git a/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx b/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx new file mode 100644 index 000000000..a8d87284d --- /dev/null +++ b/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; + taskObservability?: TaskObservabilityProps; + }; + env?: any; + config?: AppConfig; +} + +export const ExternalConfigurationContext = + React.createContext({}); + +export const ExternalConfigurationProvider = ({ + children, + config, + env, + registry, +}: PropsWithChildren) => { + return ( + + {children} + + ); +}; + +export const useExternalConfigurationContext = () => + useContext(ExternalConfigurationContext); diff --git a/packages/console/src/basics/ExternalConfigurationProvider/index.ts b/packages/console/src/basics/ExternalConfigurationProvider/index.ts new file mode 100644 index 000000000..e1c599476 --- /dev/null +++ b/packages/console/src/basics/ExternalConfigurationProvider/index.ts @@ -0,0 +1 @@ +export * from './ExternalConfigurationProvider'; diff --git a/packages/console/src/basics/index.ts b/packages/console/src/basics/index.ts new file mode 100644 index 000000000..9010fa09d --- /dev/null +++ b/packages/console/src/basics/index.ts @@ -0,0 +1,4 @@ +export { + type ExternalConfigurationProviderProps, + ExternalConfigurationProvider, +} from './ExternalConfigurationProvider'; diff --git a/packages/console/src/common/index.ts b/packages/console/src/common/index.ts new file mode 100644 index 000000000..46c481a30 --- /dev/null +++ b/packages/console/src/common/index.ts @@ -0,0 +1 @@ +export { navbarGridHeight } from './layout'; diff --git a/packages/console/src/components/App/App.tsx b/packages/console/src/components/App/App.tsx index 4aa0dd90c..acb40fd58 100644 --- a/packages/console/src/components/App/App.tsx +++ b/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; - }; - env?: any; - config?: AppConfig; -} +export type AppComponentProps = ExternalConfigurationProviderProps; +const queryClient = createQueryClient(); let overrided = false; export const AppComponent: React.FC = ( @@ -82,12 +79,14 @@ export const AppComponent: React.FC = ( highlightColor={skeletonHighlightColor} > - - - - - - + + + + + + + + diff --git a/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx b/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx index 8e5371d23..fe24341b0 100644 --- a/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx +++ b/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'; diff --git a/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogs.tsx b/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogs.tsx index 0d1b52cd4..5a81e2fd5 100644 --- a/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogs.tsx +++ b/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogs.tsx @@ -38,7 +38,9 @@ export const TaskLogList: React.FC<{ logs: Core.ITaskLog[] }> = ({ logs }) => { ) : ( // If there is no url, show item a a name string only, as it's not really clickable -
{name}
+
+ {name} +
), )} diff --git a/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogsCard.tsx b/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogsCard.tsx index e1dc541f6..1e8ae9a46 100644 --- a/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogsCard.tsx +++ b/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 = ({ }) => { 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 ( <>
- - {headerText} - + {LaunchAnchor ? ( + // Alternate path + + ) : ( + // default path + + {headerText} + + )}
diff --git a/packages/console/src/components/Navigation/NavBarContent.tsx b/packages/console/src/components/Navigation/NavBarContent.tsx index 237e3509f..a48f13042 100644 --- a/packages/console/src/components/Navigation/NavBarContent.tsx +++ b/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> = ({ + children, +}) => { const navBar = document.getElementById(navBarContentId); if (navBar == null) { log.warn(` diff --git a/packages/console/src/components/index.ts b/packages/console/src/components/index.ts index fb4007b3f..7c8a09a1b 100644 --- a/packages/console/src/components/index.ts +++ b/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'; diff --git a/packages/console/src/index.ts b/packages/console/src/index.ts index bfaee7070..585e1a880 100644 --- a/packages/console/src/index.ts +++ b/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'; diff --git a/packages/console/src/models/index.ts b/packages/console/src/models/index.ts index d9754150a..9dd5c3163 100644 --- a/packages/console/src/models/index.ts +++ b/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'; diff --git a/packages/console/src/routes/ApplicationRouter.tsx b/packages/console/src/routes/ApplicationRouter.tsx index 9d3f50b12..363d2ffa2 100644 --- a/packages/console/src/routes/ApplicationRouter.tsx +++ b/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

( +export function withContentContainer

( WrappedComponent: React.FC

, contentContainerProps?: ContentContainerProps, ) { @@ -19,9 +20,14 @@ function withContentContainer

( ); } -export const ApplicationRouter: React.FC = () => ( - <> +export const ApplicationRouter: React.FC = () => { + const { additionalRoutes } = + useExternalConfigurationContext()?.registry?.taskObservability || {}; + + return ( + {additionalRoutes} + ( /> - -); + ); +}; diff --git a/packages/console/src/routes/NavBarRouter.tsx b/packages/console/src/routes/NavBarRouter.tsx index 07e9fe248..af6d1eb58 100644 --- a/packages/console/src/routes/NavBarRouter.tsx +++ b/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 = () => ; -interface NavBarRouterProps { - registry?: { - nav?: React.FC; - }; -} +interface NavBarRouterProps {} /** Handles the routing for content displayed in the NavBar */ -export const NavBarRouter: React.FC = ( - props: NavBarRouterProps, -) => ( - <> - - - - - -); +export const NavBarRouter: React.FC = () => { + const { registry } = useExternalConfigurationContext(); + + const ExternalNav = registry?.nav; + return ( + <> + + + + + + ); +}; diff --git a/packages/console/src/routes/index.ts b/packages/console/src/routes/index.ts new file mode 100644 index 000000000..3ae21e10d --- /dev/null +++ b/packages/console/src/routes/index.ts @@ -0,0 +1,3 @@ +export * from './routes'; +export * from './ApplicationRouter'; +export * from './constants'; diff --git a/yarn.lock b/yarn.lock index 43c7cf0cd..9e97aa458 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2055,7 +2055,7 @@ __metadata: "@rjsf/validator-ajv8": ^5.1.0 "@types/d3-shape": ^1.2.6 "@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 @@ -2084,7 +2084,7 @@ __metadata: 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 @@ -5030,10 +5030,12 @@ __metadata: languageName: node linkType: hard -"@types/dom-helpers@npm:^3.4.1": - version: 3.4.1 - resolution: "@types/dom-helpers@npm:3.4.1" - checksum: 6386baf650eb80903312691882e53012d431ef1686c5b1a6d0593a2a130162bce1adccc21aa67ba6066536cbc95841719051b58648963d73653913f7be23eef8 +"@types/dom-helpers@npm:^5.0.1": + version: 5.0.1 + resolution: "@types/dom-helpers@npm:5.0.1" + dependencies: + dom-helpers: "*" + checksum: 9e79b97b31e0a1ad805bd192f19856cb7b38042083c92a2bc54f3ae8432b7e7a5f92f605b705979b82b4b234f711599c79892d291d7c74f3999d054effefc21c languageName: node linkType: hard @@ -10081,16 +10083,7 @@ __metadata: languageName: node linkType: hard -"dom-helpers@npm:^3.4.0": - version: 3.4.0 - resolution: "dom-helpers@npm:3.4.0" - dependencies: - "@babel/runtime": ^7.1.2 - checksum: 58d9f1c4a96daf77eddc63ae1236b826e1cddd6db66bbf39b18d7e21896d99365b376593352d52a60969d67fa4a8dbef26adc1439fa2c1b355efa37cacbaf637 - languageName: node - linkType: hard - -"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.1.3": +"dom-helpers@npm:*, dom-helpers@npm:5.2.1, dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.1.3": version: 5.2.1 resolution: "dom-helpers@npm:5.2.1" dependencies: