refactor: make workflow details generic so it can be used for tasks

src/components/Workflow/WorkflowDetails/WorkflowDescription.tsx → src/components/Entities/EntityDescription.tsx

@@ -3,10 +3,11 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import * as classnames from 'classnames';
 import { WaitForData } from 'components';
 import { useCommonStyles } from 'components/common/styles';
-import { useWorkflowNamedEntity } from 'components/hooks/useNamedEntity';
-import { NamedEntityIdentifier, NamedEntityMetadata } from 'models';
+import { useNamedEntity } from 'components/hooks/useNamedEntity';
+import { NamedEntityMetadata, ResourceIdentifier } from 'models';
 import * as React from 'react';
 import reactLoadingSkeleton from 'react-loading-skeleton';
+import { noDescriptionStrings } from './constants';
 
 const Skeleton = reactLoadingSkeleton;
 
@@ -16,21 +17,18 @@ const useStyles = makeStyles((theme: Theme) => ({
     }
 }));
 
-const noDescriptionString = 'This workflow has no description.';
-
-/** Fetches and renders the description for a given workflow ID */
-export const WorkflowDescription: React.FC<{
-    workflowId: NamedEntityIdentifier;
-}> = ({ workflowId }) => {
+/** Fetches and renders the description for a given Entity (LaunchPlan,Workflow,Task) ID */
+export const EntityDescription: React.FC<{
+    id: ResourceIdentifier;
+}> = ({ id }) => {
     const commonStyles = useCommonStyles();
     const styles = useStyles();
-    const namedEntity = useWorkflowNamedEntity(workflowId);
+    const namedEntity = useNamedEntity(id);
     const { metadata = {} as NamedEntityMetadata } = namedEntity.value;
     const hasDescription = !!metadata.description;
     return (
         <>
             <Typography variant="h6">Description</Typography>
-
             <Typography variant="body2" className={styles.description}>
                 <WaitForData
                     {...namedEntity}
@@ -44,7 +42,7 @@ export const WorkflowDescription: React.FC<{
                     >
                         {hasDescription
                             ? metadata.description
-                            : noDescriptionString}
+                            : noDescriptionStrings[id.resourceType]}
                     </span>
                 </WaitForData>
             </Typography>

src/components/Entities/EntityDetails.tsx

@@ -0,0 +1,97 @@
+import { Dialog } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { contentMarginGridUnits } from 'common/layout';
+import { WaitForData } from 'components/common';
+import { EntityDescription } from 'components/Entities/EntityDescription';
+import { useProject } from 'components/hooks';
+import { LaunchWorkflowForm } from 'components/Launch/LaunchWorkflowForm/LaunchWorkflowForm';
+import { ResourceIdentifier } from 'models';
+import * as React from 'react';
+import { entitySections } from './constants';
+import { EntityDetailsHeader } from './EntityDetailsHeader';
+import { EntityExecutions } from './EntityExecutions';
+import { EntitySchedules } from './EntitySchedules';
+
+const useStyles = makeStyles((theme: Theme) => ({
+    metadataContainer: {
+        display: 'flex',
+        marginBottom: theme.spacing(5),
+        marginTop: theme.spacing(2),
+        width: '100%'
+    },
+    descriptionContainer: {
+        flex: '2 1 auto',
+        marginRight: theme.spacing(2)
+    },
+    executionsContainer: {
+        display: 'flex',
+        flex: '1 1 auto',
+        flexDirection: 'column',
+        margin: `0 -${theme.spacing(contentMarginGridUnits)}px`
+    },
+    schedulesContainer: {
+        flex: '1 2 auto',
+        marginRight: theme.spacing(30)
+    }
+}));
+
+export interface EntityDetailsProps {
+    id: ResourceIdentifier;
+}
+
+/** A view which optionally renders description, schedules, executions, and a
+ * launch button/form for a given entity. Note: not all components are suitable
+ * for use with all entities (not all entities have schedules, for example).
+ */
+export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
+    const sections = entitySections[id.resourceType];
+    const project = useProject(id.project);
+    const styles = useStyles();
+    const [showLaunchForm, setShowLaunchForm] = React.useState(false);
+    const onLaunch = () => setShowLaunchForm(true);
+    const onCancelLaunch = () => setShowLaunchForm(false);
+
+    return (
+        <>
+            <WaitForData {...project}>
+                <EntityDetailsHeader
+                    project={project.value}
+                    id={id}
+                    launchable={!!sections.launch}
+                    onClickLaunch={onLaunch}
+                />
+                <div className={styles.metadataContainer}>
+                    {!!sections.description ? (
+                        <div className={styles.descriptionContainer}>
+                            <EntityDescription id={id} />
+                        </div>
+                    ) : null}
+                    {!!sections.schedules ? (
+                        <div className={styles.schedulesContainer}>
+                            <EntitySchedules id={id} />
+                        </div>
+                    ) : null}
+                </div>
+                {!!sections.executions ? (
+                    <div className={styles.executionsContainer}>
+                        <EntityExecutions id={id} />
+                    </div>
+                ) : null}
+                {/* TODO: LaunchWorkflowForm needs to be made generic */}
+                {!!sections.launch ? (
+                    <Dialog
+                        scroll="paper"
+                        maxWidth="sm"
+                        fullWidth={true}
+                        open={showLaunchForm}
+                    >
+                        <LaunchWorkflowForm
+                            onClose={onCancelLaunch}
+                            workflowId={id}
+                        />
+                    </Dialog>
+                ) : null}
+            </WaitForData>
+        </>
+    );
+};

src/components/Workflow/WorkflowDetails/WorkflowDetailsHeader.tsx → src/components/Entities/EntityDetailsHeader.tsx

@@ -3,11 +3,12 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import * as classnames from 'classnames';
 import { useCommonStyles } from 'components/common/styles';
-import { Project } from 'models';
+import { Project, ResourceIdentifier } from 'models';
 import { getProjectDomain } from 'models/Project/utils';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Routes } from 'routes';
+import { launchStrings } from './constants';
 
 const useStyles = makeStyles((theme: Theme) => ({
     actionsContainer: {},
@@ -28,31 +29,24 @@ const useStyles = makeStyles((theme: Theme) => ({
     }
 }));
 
-export interface WorkflowDetailsRouteParams {
-    projectId: string;
-    domainId: string;
-    workflowName: string;
-}
-export type WorkflowDetailsProps = WorkflowDetailsRouteParams;
-
-interface WorkflowDetailsHeaderProps {
-    domainId: string;
+interface EntityDetailsHeaderProps {
     project: Project;
-    workflowName: string;
-    onClickLaunch(): void;
+    id: ResourceIdentifier;
+    launchable?: boolean;
+    onClickLaunch?(): void;
 }
 
 /** Renders the workflow name and actions shown on the workflow details page */
-export const WorkflowDetailsHeader: React.FC<WorkflowDetailsHeaderProps> = ({
-    domainId,
+export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
+    id,
     onClickLaunch,
-    project,
-    workflowName
+    launchable = false,
+    project
 }) => {
     const styles = useStyles();
     const commonStyles = useCommonStyles();
-    const domain = getProjectDomain(project, domainId);
-    const headerText = `${domain.name} / ${workflowName}`;
+    const domain = getProjectDomain(project, id.domain);
+    const headerText = `${domain.name} / ${id.name}`;
     return (
         <div className={styles.headerContainer}>
             <div
@@ -65,22 +59,24 @@ export const WorkflowDetailsHeader: React.FC<WorkflowDetailsHeaderProps> = ({
                     className={commonStyles.linkUnstyled}
                     to={Routes.ProjectDetails.sections.workflows.makeUrl(
                         project.id,
-                        domainId
+                        id.domain
                     )}
                 >
                     <ArrowBack color="inherit" />
                 </Link>
                 <span className={styles.headerText}>{headerText}</span>
             </div>
             <div className={styles.actionsContainer}>
-                <Button
-                    color="primary"
-                    id="launch-workflow"
-                    onClick={onClickLaunch}
-                    variant="contained"
-                >
-                    Launch Workflow
-                </Button>
+                {launchable ? (
+                    <Button
+                        color="primary"
+                        id="launch-workflow"
+                        onClick={onClickLaunch}
+                        variant="contained"
+                    >
+                        {launchStrings[id.resourceType]}
+                    </Button>
+                ) : null}
             </div>
         </div>
     );

src/components/Workflow/WorkflowDetails/WorkflowExecutions.tsx → src/components/Entities/EntityExecutions.tsx

@@ -3,13 +3,14 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import { contentMarginGridUnits } from 'common/layout';
 import { WaitForData } from 'components/common';
 import { ExecutionFilters } from 'components/Executions/ExecutionFilters';
-import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState';
-import { WorkflowExecutionsTable } from 'components/Executions/Tables/WorkflowExecutionsTable';
-import { useWorkflowExecutions } from 'components/hooks';
-import { NamedEntityIdentifier } from 'models';
-import { FilterOperationName, SortDirection } from 'models/AdminEntity';
+import { useWorkflowExecutionFiltersState as useExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState';
+import { WorkflowExecutionsTable as ExecutionsTable } from 'components/Executions/Tables/WorkflowExecutionsTable';
+import { useWorkflowExecutions as useExecutions } from 'components/hooks';
+import { ResourceIdentifier } from 'models';
+import { SortDirection } from 'models/AdminEntity';
 import { executionSortFields } from 'models/Execution';
 import * as React from 'react';
+import { executionFilterGenerator } from './executionFilterGenerator';
 
 const useStyles = makeStyles((theme: Theme) => ({
     filtersContainer: {
@@ -21,33 +22,30 @@ const useStyles = makeStyles((theme: Theme) => ({
     }
 }));
 
-export interface WorkflowExecutionsProps {
-    workflowId: NamedEntityIdentifier;
+export interface EntityExecutionsProps {
+    id: ResourceIdentifier;
 }
 
 /** The tab/page content for viewing a workflow's executions */
-export const WorkflowExecutions: React.FC<WorkflowExecutionsProps> = ({
-    workflowId: { project, domain, name }
-}) => {
+export const EntityExecutions: React.FC<EntityExecutionsProps> = ({ id }) => {
+    const { domain, project, resourceType } = id;
     const styles = useStyles();
-    const filtersState = useWorkflowExecutionFiltersState();
+    const filtersState = useExecutionFiltersState();
     const sort = {
         key: executionSortFields.createdAt,
         direction: SortDirection.DESCENDING
     };
 
-    const executions = useWorkflowExecutions(
+    const baseFilters = React.useMemo(
+        () => executionFilterGenerator[resourceType](id),
+        [id]
+    );
+
+    const executions = useExecutions(
         { domain, project },
         {
             sort,
-            filter: [
-                {
-                    key: 'workflow.name',
-                    operation: FilterOperationName.EQ,
-                    value: name
-                },
-                ...filtersState.appliedFilters
-            ]
+            filter: [...baseFilters, ...filtersState.appliedFilters]
         }
     );
 
@@ -60,7 +58,7 @@ export const WorkflowExecutions: React.FC<WorkflowExecutionsProps> = ({
                 <ExecutionFilters {...filtersState} />
             </div>
             <WaitForData {...executions}>
-                <WorkflowExecutionsTable {...executions} />
+                <ExecutionsTable {...executions} />
             </WaitForData>
         </>
     );

src/components/Workflow/WorkflowDetails/WorkflowSchedules.tsx → src/components/Entities/EntitySchedules.tsx

@@ -4,29 +4,20 @@ import { getScheduleFrequencyString } from 'common/formatters';
 import { WaitForData } from 'components/common';
 import { useCommonStyles } from 'components/common/styles';
 import { useWorkflowSchedules } from 'components/hooks';
-import { LaunchPlan, NamedEntityIdentifier } from 'models';
+import { LaunchPlan, ResourceIdentifier } from 'models';
 import * as React from 'react';
+import { noSchedulesStrings, schedulesHeader } from './constants';
 
 const useStyles = makeStyles((theme: Theme) => ({
     schedulesContainer: {
         marginTop: theme.spacing(1)
     }
 }));
 
-const noSchedulesString = 'This workflow has no schedules.';
-
-const RenderSchedules: React.FC<{ launchPlans: LaunchPlan[] }> = ({
-    launchPlans
-}) => {
+const RenderSchedules: React.FC<{
+    launchPlans: LaunchPlan[];
+}> = ({ launchPlans }) => {
     const commonStyles = useCommonStyles();
-    if (launchPlans.length === 0) {
-        return (
-            <Typography variant="body2" className={commonStyles.hintText}>
-                {noSchedulesString}
-            </Typography>
-        );
-    }
-
     return (
         <ul className={commonStyles.listUnstyled}>
             {launchPlans.map((launchPlan, idx) => {
@@ -38,17 +29,29 @@ const RenderSchedules: React.FC<{ launchPlans: LaunchPlan[] }> = ({
     );
 };
 
-export const WorkflowSchedules: React.FC<{
-    workflowId: NamedEntityIdentifier;
-}> = ({ workflowId }) => {
+export const EntitySchedules: React.FC<{
+    id: ResourceIdentifier;
+}> = ({ id }) => {
     const styles = useStyles();
-    const scheduledLaunchPlans = useWorkflowSchedules(workflowId);
+    const commonStyles = useCommonStyles();
+    const scheduledLaunchPlans = useWorkflowSchedules(id);
     return (
         <>
             <WaitForData {...scheduledLaunchPlans} spinnerVariant="none">
-                <Typography variant="h6">Schedules</Typography>
+                <Typography variant="h6">{schedulesHeader}</Typography>
                 <div className={styles.schedulesContainer}>
-                    <RenderSchedules launchPlans={scheduledLaunchPlans.value} />
+                    {scheduledLaunchPlans.value.length > 0 ? (
+                        <RenderSchedules
+                            launchPlans={scheduledLaunchPlans.value}
+                        />
+                    ) : (
+                        <Typography
+                            variant="body2"
+                            className={commonStyles.hintText}
+                        >
+                            {noSchedulesStrings[id.resourceType]}
+                        </Typography>
+                    )}
                 </div>
             </WaitForData>
         </>