feat: the functionality is working

Signed-off-by: eugenejahn <[email protected]>

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

@@ -4,11 +4,18 @@ import classnames from 'classnames';
 import { useCommonStyles } from 'components/common/styles';
 import { WaitForData } from 'components/common/WaitForData';
 import { useNamedEntity } from 'components/hooks/useNamedEntity';
-import { NamedEntityMetadata, ResourceIdentifier } from 'models/Common/types';
+import { NamedEntityMetadata, ResourceIdentifier, ResourceType } from 'models/Common/types';
 import * as React from 'react';
 import reactLoadingSkeleton from 'react-loading-skeleton';
-import { entityStrings } from './constants';
+import { DumpJSON } from 'components/common/DumpJSON';
+import { useEntityVersions } from 'components/hooks/Entity/useEntityVersions';
+import { executionSortFields } from 'models/Execution/constants';
+import { SortDirection } from 'models/AdminEntity/types';
+import { TaskClosure } from 'models/Task/types';
+import { executionFilterGenerator, versionDetailsUrlGenerator } from './generators';
+import { Row } from './Row';
 import t from './strings';
+import { entityStrings } from './constants';
 
 const Skeleton = reactLoadingSkeleton;
 
@@ -18,6 +25,49 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+const InputsAndOuputs: React.FC<{
+  id: ResourceIdentifier;
+}> = ({ id }) => {
+  const sort = {
+    key: executionSortFields.createdAt,
+    direction: SortDirection.DESCENDING,
+  };
+
+  const baseFilters = React.useMemo(
+    () => executionFilterGenerator[id.resourceType](id),
+    [id, id.resourceType],
+  );
+
+  const versions = useEntityVersions(
+    { ...id, version: '' },
+    {
+      sort,
+      filter: baseFilters,
+      limit: 1,
+    },
+  );
+
+  let inputs, outputs;
+  if ((versions?.value?.[0]?.closure as TaskClosure)?.compiledTask?.template) {
+    const template = (versions?.value?.[0]?.closure as TaskClosure)?.compiledTask?.template;
+    inputs = template?.interface?.inputs?.variables;
+    outputs = template?.interface?.outputs?.variables;
+  }
+  return (
+    <WaitForData {...versions}>
+      {inputs && (
+        <Row key="input" title="Inputs">
+          <DumpJSON value={inputs}></DumpJSON>
+        </Row>
+      )}
+      {outputs && (
+        <Row key="output" title="Outputs">
+          <DumpJSON value={outputs}></DumpJSON>
+        </Row>
+      )}
+    </WaitForData>
+  );
+};
 /** Fetches and renders the description for a given Entity (LaunchPlan,Workflow,Task) ID */
 export const EntityDescription: React.FC<{
   id: ResourceIdentifier;
@@ -27,6 +77,7 @@ export const EntityDescription: React.FC<{
   const namedEntity = useNamedEntity(id);
   const { metadata = {} as NamedEntityMetadata } = namedEntity.value;
   const hasDescription = !!metadata.description;
+
   return (
     <>
       <Typography variant="h6">Description</Typography>
@@ -42,6 +93,7 @@ export const EntityDescription: React.FC<{
               : t('noDescription', entityStrings[id.resourceType])}
           </span>
         </WaitForData>
+        {id.resourceType == ResourceType.TASK && <InputsAndOuputs id={id} />}
       </Typography>
     </>
   );

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

@@ -12,9 +12,9 @@ import { isLoadingState } from 'components/hooks/fetchMachine';
 import { useEntityVersions } from 'components/hooks/Entity/useEntityVersions';
 import { interactiveTextColor } from 'components/Theme/constants';
 import { SortDirection } from 'models/AdminEntity/types';
-import { ResourceIdentifier } from 'models/Common/types';
+import { Identifier, ResourceIdentifier } from 'models/Common/types';
 import { executionSortFields } from 'models/Execution/constants';
-import { executionFilterGenerator } from './generators';
+import { executionFilterGenerator, versionDetailsUrlGenerator } from './generators';
 import { WorkflowVersionsTablePageSize, entityStrings } from './constants';
 import t from './strings';
 
@@ -78,15 +78,14 @@ export const EntityVersions: React.FC<EntityVersionsProps> = ({ id, showAll = fa
   const preventDefault = (e) => e.preventDefault();
   const handleViewAll = React.useCallback(() => {
     history.push(
-      Routes.EntityVersionDetails.makeUrl(
-        project,
-        domain,
-        name,
-        entityStrings[id.resourceType],
-        versions.value[0].id.version ?? '',
-      ),
+      versionDetailsUrlGenerator({
+        ...id,
+        version: versions.value[0].id.version ?? '',
+      } as Identifier),
     );
   }, [project, domain, name, versions]);
+
+  console.log('versions', versions);
   return (
     <>
       {!showAll && (

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import {
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { contentMarginGridUnits } from 'common/layout';
+import { Core } from 'flyteidl';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  container: {
+    marginBottom: theme.spacing(1),
+  },
+  headerText: {
+    fontWeight: 700,
+    color: '#B3B3B3',
+  },
+  table: {
+    marginLeft: theme.spacing(contentMarginGridUnits),
+  },
+}));
+
+interface MyProps {
+  rows: Core.IKeyValuePair[];
+}
+
+export default function BasicTable({ rows }: MyProps) {
+  const styles = useStyles();
+
+  if (!rows || rows.length == 0) {
+    return <Typography>Empty</Typography>;
+  }
+  return (
+    <TableContainer className={styles.container} component={Paper}>
+      <Table size="small" aria-label="a dense table">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              {' '}
+              <Typography className={styles.headerText}>Key </Typography>
+            </TableCell>
+            <TableCell>
+              <Typography className={styles.headerText}>Value </Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.key}>
+              <TableCell component="th" scope="row">
+                {row.key}
+              </TableCell>
+              <TableCell component="th" scope="row">
+                {row.value}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  row: {
+    display: 'flex',
+    marginBottom: theme.spacing(1),
+  },
+  title: {
+    width: 100,
+    color: '#B3B3B3',
+  },
+}));
+
+interface MyProps {
+  children?: React.ReactNode;
+  title: String;
+}
+export const Row: React.FC<MyProps> = (props) => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.title}>
+        <Typography>{props.title}</Typography>
+      </div>
+      <div>{props.children}</div>
+    </div>
+  );
+};

packages/zapp/console/src/components/Entities/VersionDetails/EntityVersionDetails.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { contentMarginGridUnits } from 'common/layout';
+import { WaitForData } from 'components/common/WaitForData';
+import { useTaskTemplate } from 'components/hooks/useTask';
+import { ResourceIdentifier, Identifier } from 'models/Common/types';
+import { compact } from 'lodash';
+import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
+import { DumpJSON } from 'components/common/DumpJSON';
+import { Row } from '../Row';
+import BasicTable from '../EnvVars';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  container: {
+    maxHeight: 500,
+    overflow: 'scroll',
+  },
+  header: {
+    marginBottom: theme.spacing(1),
+    marginLeft: theme.spacing(contentMarginGridUnits),
+  },
+  table: {
+    marginLeft: theme.spacing(contentMarginGridUnits),
+  },
+}));
+
+export interface EntityExecutionsProps {
+  id: ResourceIdentifier;
+}
+
+/** The tab/page content for viewing a workflow's executions */
+export const EntityVersionDetails: React.FC<EntityExecutionsProps> = ({ id }) => {
+  const styles = useStyles();
+
+  // TODO: need to be generic for supporting other type like workflow, etc.
+  const templateState = useTaskTemplate(id as Identifier);
+
+  const template = templateState?.value?.closure?.compiledTask?.template;
+  const envVars = template?.container?.env;
+  const image = template?.container?.image;
+
+  return (
+    <div className={styles.container}>
+      <Typography className={styles.header} variant="h6">
+        Task Details
+      </Typography>
+      <WaitForData {...templateState}>
+        <div className={styles.table}>
+          {image && (
+            <Row key="Image" title="Image">
+              {' '}
+              <Typography>{image}</Typography>{' '}
+            </Row>
+          )}
+          {envVars && (
+            <Row key="envVars" title="Env vars">
+              {' '}
+              <BasicTable rows={envVars} />{' '}
+            </Row>
+          )}
+
+          {template && (
+            <Row key="commands" title="Comands">
+              {' '}
+              <DumpJSON value={template} />{' '}
+            </Row>
+          )}
+        </div>
+      </WaitForData>
+    </div>
+  );
+};

packages/zapp/console/src/components/Entities/VersionsDetails/EntityVersionsDetails.tsx → packages/zapp/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx

@@ -11,6 +11,7 @@ import { EntityDetailsHeader } from 'components/Entities/EntityDetailsHeader';
 import { EntityVersions } from 'components/Entities/EntityVersions';
 import { typeNameToEntityResource } from '../constants';
 import { versionsDetailsSections } from './constants';
+import { EntityVersionDetails } from './EntityVersionDetails';
 
 const useStyles = makeStyles((theme: Theme) => ({
   verionDetailsContatiner: {
@@ -49,7 +50,7 @@ interface WorkflowVersionDetailsRouteParams {
  * @param domainId
  * @param workflowName
  */
-const EntityVersionsDetailsContainer: React.FC<WorkflowVersionDetailsRouteParams> = ({
+const EntityVersionsDetailsContainerImpl: React.FC<WorkflowVersionDetailsRouteParams> = ({
   projectId,
   domainId,
   entityType,
@@ -68,7 +69,8 @@ const EntityVersionsDetailsContainer: React.FC<WorkflowVersionDetailsRouteParams
   );
 
   const id = workflowId as ResourceIdentifier;
-  const sections = entitySections[ResourceType.WORKFLOW];
+  const sections = entitySections[id.resourceType];
+  const versionsSections = versionsDetailsSections[id.resourceType];
   const project = useProject(workflowId.project);
   const styles = useStyles();
 
@@ -81,9 +83,12 @@ const EntityVersionsDetailsContainer: React.FC<WorkflowVersionDetailsRouteParams
         backToWorkflow
       />
       <div className={styles.verionDetailsContatiner}>
-        <div className={styles.staticGraphContainer}>
-          <StaticGraphContainer workflowId={workflowId} />
-        </div>
+        {versionsSections.description && <EntityVersionDetails id={id} />}
+        {versionsSections.graph && (
+          <div className={styles.staticGraphContainer}>
+            <StaticGraphContainer workflowId={workflowId} />
+          </div>
+        )}
         <div className={styles.versionsContainer}>
           <EntityVersions id={id} showAll />
         </div>
@@ -92,6 +97,6 @@ const EntityVersionsDetailsContainer: React.FC<WorkflowVersionDetailsRouteParams
   );
 };
 
-export const EntityVersionsDetails = withRouteParams<WorkflowVersionDetailsRouteParams>(
-  EntityVersionsDetailsContainer,
+export const EntityVersionsDetailsContainer = withRouteParams<WorkflowVersionDetailsRouteParams>(
+  EntityVersionsDetailsContainerImpl,
 );