diff --git a/.vscode/settings.json b/.vscode/settings.json index de2d2d07b..463fd54f2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "explorer.autoReveal": "focusNoScroll", + "explorer.autoReveal": true, "explorer.enableUndo": true, "explorer.excludeGitIgnore": false, 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 5315d2f0e..2bfd56bfe 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -1,6 +1,6 @@ { "name": "@flyteorg/console", - "version": "0.0.15", + "version": "0.0.16", "description": "Flyteconsole main app module", "main": "./dist/index.js", "module": "./lib/index.js", @@ -20,7 +20,8 @@ "README.md", "dist", "lib", - "node_modules" + "node_modules", + "src" ], "keywords": [ "flyteorg", @@ -31,9 +32,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 +82,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 +112,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 +132,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/ExternalConfigHoc.tsx b/packages/console/src/basics/ExternalConfigHoc.tsx new file mode 100644 index 000000000..1dc35424f --- /dev/null +++ b/packages/console/src/basics/ExternalConfigHoc.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; + +export const ExternalConfigHoc = ({ ChildComponent, data }): any => { + return ; +}; diff --git a/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx b/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx new file mode 100644 index 000000000..26219089f --- /dev/null +++ b/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx @@ -0,0 +1,31 @@ +import React, { PropsWithChildren, useContext } from 'react'; +import { AppConfig } from '@flyteorg/common'; + +export interface ExternalConfigurationProviderProps { + registry?: { + nav?: React.FC; + taskExecutionAttemps?: React.FC; + additionalRoutes?: any; + }; + 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..e3e1c5534 --- /dev/null +++ b/packages/console/src/common/index.ts @@ -0,0 +1,4 @@ +export { navbarGridHeight } from './layout'; +export { unknownValueString } from './constants'; +export { dateWithFromNow, protobufDurationToHMS } from './formatters'; +export { timestampToDate } from './utils'; 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/ExecutionDetails/ExecutionDetailsActions.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx index 112eabcb6..8cbab6bb2 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx +++ b/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx @@ -14,6 +14,7 @@ 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 classnames from 'classnames'; import { NodeExecutionDetails } from '../types'; import t from './strings'; import { ExecutionNodeDeck } from './ExecutionNodeDeck'; @@ -62,15 +63,23 @@ const useStyles = makeStyles((theme: Theme) => { }); interface ExecutionDetailsActionsProps { + className?: string; details?: NodeExecutionDetails; nodeExecutionId: NodeExecutionIdentifier; phase: NodeExecutionPhase; + text?: { + flyteDeckText?: string; + rerunText?: string; + resumeText?: string; + }; } export const ExecutionDetailsActions = ({ + className, details, nodeExecutionId, phase, + text, }: ExecutionDetailsActionsProps): JSX.Element => { const styles = useStyles(); @@ -128,7 +137,7 @@ export const ExecutionDetailsActions = ({ return ( <> -
+
{execution?.value?.closure?.deckUri && ( )} {id && initialParameters && details && ( )} {phase === NodeExecutionPhase.PAUSED && ( )}
diff --git a/packages/console/src/components/Executions/ExecutionStatusBadge.tsx b/packages/console/src/components/Executions/ExecutionStatusBadge.tsx index 345b15c33..df10152b1 100644 --- a/packages/console/src/components/Executions/ExecutionStatusBadge.tsx +++ b/packages/console/src/components/Executions/ExecutionStatusBadge.tsx @@ -85,11 +85,19 @@ export function getPhaseConstants( * a badge with the proper text and styling to indicate the status (succeeded/ * failed etc.) */ -export const ExecutionStatusBadge: React.FC = ({ +export const ExecutionStatusBadge: React.FC< + ExecutionStatusBadgeProps & + React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLDivElement + > +> = ({ phase, type, variant = 'default', disabled = false, + className, + ...htmlProps }) => { const styles = useStyles(); const style: React.CSSProperties = {}; @@ -102,7 +110,11 @@ export const ExecutionStatusBadge: React.FC = ({ } return ( -
+
{text}
); 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..c3baa8c9a 100644 --- a/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogsCard.tsx +++ b/packages/console/src/components/Executions/TaskExecutionsList/TaskExecutionLogsCard.tsx @@ -6,6 +6,8 @@ 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 { ExternalConfigHoc } from 'basics/ExternalConfigHoc'; +import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider'; import { ExecutionStatusBadge } from '../ExecutionStatusBadge'; import { TaskExecutionDetails } from './TaskExecutionDetails'; import { TaskExecutionError } from './TaskExecutionError'; @@ -20,6 +22,10 @@ const useStyles = makeStyles((theme: Theme) => ({ }, title: { marginBottom: theme.spacing(1), + + '& > svg': { + verticalAlign: 'middle', + }, }, showDetailsButton: { marginTop: theme.spacing(1), @@ -36,30 +42,40 @@ interface TaskExecutionLogsCardProps { logs: Core.ITaskLog[]; } -export const TaskExecutionLogsCard: React.FC = ({ - taskExecution, - headerText, - phase, - logs, -}) => { +export const TaskExecutionLogsCard: React.FC< + TaskExecutionLogsCardProps +> = props => { + const { taskExecution, headerText, phase, logs } = props; const commonStyles = useCommonStyles(); const styles = useStyles(); + const { registry } = useExternalConfigurationContext(); const { closure: { error, startedAt, updatedAt, duration }, } = taskExecution; - const taskHasStarted = phase >= TaskExecutionPhase.QUEUED; + const taskHasStarted = phase >= TaskExecutionPhase.QUEUED; + const externalProps = { ...props, styles, commonStyles }; return ( <>
- - {headerText} - + {registry?.taskExecutionAttemps ? ( + // 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/common/index.ts b/packages/console/src/components/common/index.ts new file mode 100644 index 000000000..1d7d32d99 --- /dev/null +++ b/packages/console/src/components/common/index.ts @@ -0,0 +1,5 @@ +export { useCommonStyles } from './styles'; +export { withRouteParams } from './withRouteParams'; +export { WaitForData } from './WaitForData'; +export { WaitForQuery } from './WaitForQuery'; +export { DetailsGroup } from './DetailsGroup'; diff --git a/packages/console/src/components/index.ts b/packages/console/src/components/index.ts index fb4007b3f..e62525c3c 100644 --- a/packages/console/src/components/index.ts +++ b/packages/console/src/components/index.ts @@ -1,2 +1,22 @@ +export * from './common'; + export * from './Navigation'; export * from './App/App'; + +export { NavBarContent } from './Navigation/NavBarContent'; +export { useNodeExecution } from './hooks/useNodeExecution'; +export { useConditionalQuery } from './hooks/useConditionalQuery'; + +export * from './Executions/types'; +export { type ExecutionDetailsRouteParams } from './Executions/ExecutionDetails/ExecutionDetails'; +export { ExecutionStatusBadge } from './Executions/ExecutionStatusBadge'; +export { formatRetryAttempt } from './Executions/TaskExecutionsList/utils'; +export { TaskExecutionDetails } from './Executions/TaskExecutionsList/TaskExecutionDetails'; +export { makeTaskExecutionListQuery } from './Executions/taskExecutionQueries'; +export { useWorkflowExecutionQuery } from './Executions/useWorkflowExecution'; +export { NodeExecutionDetailsContextProvider } from './Executions/contextProvider/NodeExecutionDetails'; +export { getNodeFrontendPhase } from './Executions/utils'; +export { useWorkflowExecutionData } from './Executions/useWorkflowExecution'; +export { useNodeExecutionContext } from './Executions/contextProvider/NodeExecutionDetails'; +export { ExecutionDetailsActions } from './Executions/ExecutionDetails/ExecutionDetailsActions'; +export { makeNodeExecutionQuery } from './Executions/nodeExecutionQueries'; 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..a410e4922 100644 --- a/packages/console/src/models/index.ts +++ b/packages/console/src/models/index.ts @@ -1 +1,5 @@ export * from './AdminEntity'; +export * from './Execution/enums'; +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..2c31cefae 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,12 @@ function withContentContainer

( ); } -export const ApplicationRouter: React.FC = () => ( - <> +export const ApplicationRouter: React.FC = () => { + const additionalRoutes = + useExternalConfigurationContext()?.registry?.additionalRoutes || null; + 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/website/package.json b/website/package.json index ee73c71ff..2242f70b5 100644 --- a/website/package.json +++ b/website/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@flyteorg/common": "^0.0.3", - "@flyteorg/console": "^0.0.15", + "@flyteorg/console": "^0.0.16", "long": "^4.0.0", "protobufjs": "~6.11.3", "react-ga4": "^1.4.1", diff --git a/yarn.lock b/yarn.lock index f6f3db62c..a5618970a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1995,7 +1995,7 @@ __metadata: resolution: "@flyteconsole/client-app@workspace:website" dependencies: "@flyteorg/common": ^0.0.3 - "@flyteorg/console": ^0.0.15 + "@flyteorg/console": ^0.0.16 "@types/long": ^3.0.32 long: ^4.0.0 protobufjs: ~6.11.3 @@ -2034,7 +2034,7 @@ __metadata: languageName: unknown linkType: soft -"@flyteorg/console@^0.0.15, @flyteorg/console@workspace:packages/console": +"@flyteorg/console@^0.0.16, @flyteorg/console@workspace:packages/console": version: 0.0.0-use.local resolution: "@flyteorg/console@workspace:packages/console" dependencies: @@ -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: