feat: add task version info

packages/zapp/console/src/common/constants.ts

@@ -6,7 +6,7 @@ export const unknownValueString = '(unknown)';
 export const dashedValueString = '----';
 export const noneString = '(none)';
 export const noExecutionsFoundString = 'No executions found.';
-export const noWorkflowVersionsFoundString = 'No workflow versions found.';
+export const noVersionsFoundString = 'No versions found.';
 export const zeroSecondsString = '0s';
 
 export enum KeyCodes {

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

@@ -4,20 +4,80 @@ 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, Variable } from 'models/Common/types';
 import * as React from 'react';
 import reactLoadingSkeleton from 'react-loading-skeleton';
-import { entityStrings } from './constants';
-import t from './strings';
+import { ReactJsonViewWrapper } from 'components/common/ReactJsonView';
+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 } from './generators';
+import { Row } from './Row';
+import t, { patternKey } from './strings';
+import { entityStrings, entitySections } from './constants';
 
 const Skeleton = reactLoadingSkeleton;
 
 const useStyles = makeStyles((theme: Theme) => ({
+  header: {
+    marginBottom: theme.spacing(1),
+  },
   description: {
     marginTop: theme.spacing(1),
   },
+  divider: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    marginBottom: theme.spacing(1),
+  },
 }));
 
+const InputsAndOuputs: React.FC<{
+  id: ResourceIdentifier;
+}> = ({ id }) => {
+  const sort = {
+    key: executionSortFields.createdAt,
+    direction: SortDirection.DESCENDING,
+  };
+
+  const baseFilters = executionFilterGenerator[id.resourceType](id);
+
+  // to render the input and output,
+  // need to fetch the latest version and get the input and ouptut data
+  const versions = useEntityVersions(
+    { ...id, version: '' },
+    {
+      sort,
+      filter: baseFilters,
+      limit: 1,
+    },
+  );
+
+  let inputs: Record<string, Variable> | undefined;
+  let outputs: Record<string, Variable> | undefined;
+
+  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 title={t('inputsFieldName')}>
+          <ReactJsonViewWrapper src={inputs} shouldCollapse={(field) => !field?.name} />
+        </Row>
+      )}
+      {outputs && (
+        <Row title={t('outputsFieldName')}>
+          <ReactJsonViewWrapper src={outputs} shouldCollapse={(field) => !field?.name} />
+        </Row>
+      )}
+    </WaitForData>
+  );
+};
+
 /** Fetches and renders the description for a given Entity (LaunchPlan,Workflow,Task) ID */
 export const EntityDescription: React.FC<{
   id: ResourceIdentifier;
@@ -27,21 +87,29 @@ export const EntityDescription: React.FC<{
   const namedEntity = useNamedEntity(id);
   const { metadata = {} as NamedEntityMetadata } = namedEntity.value;
   const hasDescription = !!metadata.description;
+  const sections = entitySections[id.resourceType];
+
   return (
     <>
-      <Typography variant="h6">Description</Typography>
-      <Typography variant="body2" className={styles.description}>
+      <Typography className={styles.header} variant="h3">
+        {t('basicInformation')}
+      </Typography>
+      <div className={styles.divider} />
+      <Typography variant="body2" component="span" className={styles.description}>
         <WaitForData {...namedEntity} spinnerVariant="none" loadingComponent={Skeleton}>
-          <span
-            className={classnames({
-              [commonStyles.hintText]: !hasDescription,
-            })}
-          >
-            {hasDescription
-              ? metadata.description
-              : t('noDescription', entityStrings[id.resourceType])}
-          </span>
+          <Row title={t('description')}>
+            <span
+              className={classnames({
+                [commonStyles.hintText]: !hasDescription,
+              })}
+            >
+              {hasDescription
+                ? metadata.description
+                : t(patternKey('noDescription', entityStrings[id.resourceType]))}
+            </span>
+          </Row>
         </WaitForData>
+        {sections?.descriptionInputsAndOutputs && <InputsAndOuputs id={id} />}
       </Typography>
     </>
   );

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

@@ -8,11 +8,10 @@ import { Project } from 'models/Project/types';
 import { getProjectDomain } from 'models/Project/utils';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Routes } from 'routes/routes';
 import { LaunchForm } from 'components/Launch/LaunchForm/LaunchForm';
-import { backUrlGenerator } from './generators';
+import { backUrlGenerator, backToDetailUrlGenerator } from './generators';
 import { entityStrings } from './constants';
-import t from './strings';
+import t, { patternKey } from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
   headerContainer: {
@@ -77,7 +76,7 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
             className={commonStyles.linkUnstyled}
             to={
               backToWorkflow
-                ? Routes.WorkflowDetails.makeUrl(id.project, id.domain, id.name)
+                ? backToDetailUrlGenerator[id.resourceType](id)
                 : backUrlGenerator[id.resourceType](id)
             }
           >
@@ -93,7 +92,7 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
               onClick={() => setShowLaunchForm(true)}
               variant="contained"
             >
-              {t('launchStrings', entityStrings[id.resourceType])}
+              {t(patternKey('launchStrings', entityStrings[id.resourceType]))}
             </Button>
           ) : null}
         </div>

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

@@ -15,6 +15,8 @@ import { executionSortFields } from 'models/Execution/constants';
 import { compact } from 'lodash';
 import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
 import { executionFilterGenerator } from './generators';
+import { entityStrings } from './constants';
+import t, { patternKey } from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
   filtersContainer: {
@@ -76,8 +78,8 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
 
   return (
     <>
-      <Typography className={styles.header} variant="h6">
-        All Executions in the Workflow
+      <Typography className={styles.header} variant="h3">
+        {t(patternKey('allExecutionsChartTitle', entityStrings[id.resourceType]))}
       </Typography>
       <div className={styles.filtersContainer}>
         <ExecutionFilters

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

@@ -14,7 +14,8 @@ import {
   getWorkflowExecutionPhaseConstants,
   getWorkflowExecutionTimingMS,
 } from '../Executions/utils';
-import t from './strings';
+import t, { patternKey } from './strings';
+import { entityStrings } from './constants';
 
 export interface EntityExecutionsBarChartProps {
   id: ResourceIdentifier;
@@ -110,7 +111,7 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
   return (
     <WaitForData {...executions}>
       <BarChart
-        title={t('allExecutionsChartTitle')}
+        title={t(patternKey('allExecutionsChartTitle', entityStrings[id.resourceType]))}
         chartIds={chartIds}
         data={getExecutionTimeData(executions.value)}
         startDate={getStartExecutionTime(executions.value)}

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

@@ -9,12 +9,19 @@ import { identifierToString } from 'models/Common/utils';
 import { LaunchPlan } from 'models/Launch/types';
 import * as React from 'react';
 import { entityStrings } from './constants';
-import t from './strings';
+import t, { patternKey } from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  header: {
+    marginBottom: theme.spacing(1),
+  },
   schedulesContainer: {
     marginTop: theme.spacing(1),
   },
+  divider: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    marginBottom: theme.spacing(1),
+  },
 }));
 
 const RenderSchedules: React.FC<{
@@ -45,13 +52,17 @@ export const EntitySchedules: React.FC<{
   return (
     <>
       <WaitForData {...scheduledLaunchPlans} spinnerVariant="none">
-        <Typography variant="h6">{t('schedulesHeader')}</Typography>
+        <Typography className={styles.header} variant="h3">
+          {t('schedulesHeader')}
+        </Typography>
+        <div className={styles.divider} />
+
         <div className={styles.schedulesContainer}>
           {scheduledLaunchPlans.value.length > 0 ? (
             <RenderSchedules launchPlans={scheduledLaunchPlans.value} />
           ) : (
             <Typography variant="body2" className={commonStyles.hintText}>
-              {t('noSchedules', entityStrings[id.resourceType])}
+              {t(patternKey('noSchedules', entityStrings[id.resourceType]))}
             </Typography>
           )}
         </div>

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

@@ -1,22 +1,21 @@
 import * as React from 'react';
-import { Routes } from 'routes/routes';
 import { history } from 'routes/history';
 import Typography from '@material-ui/core/Typography';
 import { IconButton, makeStyles, Theme } from '@material-ui/core';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import { LocalCacheItem, useLocalCache } from 'basics/LocalCache';
 import { WaitForData } from 'components/common/WaitForData';
-import { WorkflowVersionsTable } from 'components/Executions/Tables/WorkflowVersionsTable';
+import { EntityVersionsTable } from 'components/Executions/Tables/EntityVersionsTable';
 import { isLoadingState } from 'components/hooks/fetchMachine';
-import { useWorkflowVersions } from 'components/hooks/useWorkflowVersions';
+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 { WorkflowVersionsTablePageSize } from './constants';
-import t from './strings';
+import { executionFilterGenerator, versionDetailsUrlGenerator } from './generators';
+import { WorkflowVersionsTablePageSize, entityStrings } from './constants';
+import t, { patternKey } from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
   headerContainer: {
@@ -64,8 +63,10 @@ export const EntityVersions: React.FC<EntityVersionsProps> = ({ id, showAll = fa
     [id, resourceType],
   );
 
-  const versions = useWorkflowVersions(
-    { domain, project },
+  // we are getting all the versions for this id
+  // so we don't want to specify which version
+  const versions = useEntityVersions(
+    { ...id, version: '' },
     {
       sort,
       filter: baseFilters,
@@ -76,12 +77,10 @@ export const EntityVersions: React.FC<EntityVersionsProps> = ({ id, showAll = fa
   const preventDefault = (e) => e.preventDefault();
   const handleViewAll = React.useCallback(() => {
     history.push(
-      Routes.WorkflowVersionDetails.makeUrl(
-        project,
-        domain,
-        name,
-        versions.value[0].id.version ?? '',
-      ),
+      versionDetailsUrlGenerator({
+        ...id,
+        version: versions.value[0].id.version ?? '',
+      } as Identifier),
     );
   }, [project, domain, name, versions]);
 
@@ -102,8 +101,8 @@ export const EntityVersions: React.FC<EntityVersionsProps> = ({ id, showAll = fa
           >
             {showTable ? <ExpandLess /> : <ExpandMore />}
           </IconButton>
-          <Typography className={styles.header} variant="h6">
-            {t('workflowVersionsTitle')}
+          <Typography className={styles.header} variant="h3">
+            {t(patternKey('versionsTitle', entityStrings[id.resourceType]))}
           </Typography>
           <Typography className={styles.viewAll} variant="body1" onClick={handleViewAll}>
             {t('viewAll')}
@@ -112,10 +111,11 @@ export const EntityVersions: React.FC<EntityVersionsProps> = ({ id, showAll = fa
       )}
       <WaitForData {...versions}>
         {showTable || showAll ? (
-          <WorkflowVersionsTable
+          <EntityVersionsTable
             {...versions}
             isFetching={isLoadingState(versions.state)}
             versionView={showAll}
+            resourceType={resourceType}
           />
         ) : (
           <div className={styles.divider} />

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { COLOR_SPECTRUM } from 'components/Theme/colorSpectrum';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  row: {
+    display: 'flex',
+    marginBottom: theme.spacing(1),
+  },
+  title: {
+    width: 100,
+    color: COLOR_SPECTRUM.gray25.color,
+  },
+}));
+
+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>
+  );
+};