chore: rebase on top of master, add prettier change to allo 120 symbols

Signed-off-by: Nastya Rusina <nastya@union.ai>
flyteorg · Feb 10, 2022 · 26f8c7b · 26f8c7b
1 parent 01cf778
commit 26f8c7b
Show file tree

Hide file tree

Showing 4 changed files with 267 additions and 302 deletions.
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -1,7 +1,9 @@
 singleQuote: true
 tabWidth: 4
+max-line-length: 120
+printWidth: 120
 overrides:
-  - files: "*.json"
+  - files: ["*.js*", "*.ts*", "*.json"]
     options:
       tabWidth: 2
   - files: ["*.yml", "*.yaml"]

diff --git a/src/basics/FeatureFlags/defaultConfig.ts b/src/basics/FeatureFlags/defaultConfig.ts
@@ -3,21 +3,23 @@
  */
 
 export enum FeatureFlag {
-    // Test flag is created only for unit-tests
-    TestFlagUndefined = 'test-flag-undefined',
-    TestFlagTrue = 'test-flag-true',
+  // Test flag is created only for unit-tests
+  TestFlagUndefined = 'test-flag-undefined',
+  TestFlagTrue = 'test-flag-true',
 
-    // Production flags
-    LaunchPlan = 'launch-plan'
+  // Production flags
+  LaunchPlan = 'launch-plan',
+  TimelineView = 'timeline-view'
 }
 
 export type FeatureFlagConfig = { [k: string]: boolean };
 
 export const defaultFlagConfig: FeatureFlagConfig = {
-    // Test
-    'test-flag-true': true,
+  // Test
+  'test-flag-true': true,
 
-    // Production - new code should be turned off by default
-    // If you need to turn it on locally -> update runtimeConfig in ./index.tsx file
-    'launch-plan': false
+  // Production - new code should be turned off by default
+  // If you need to turn it on locally -> update runtimeConfig in ./index.tsx file
+  'launch-plan': false,
+  'timeline-view': false
 };
diff --git a/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx b/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { Tab, Tabs } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
+import { noop } from 'lodash';
 
+import { FeatureFlag, useFeatureFlag } from 'basics/FeatureFlags';
 import { WaitForQuery } from 'components/common/WaitForQuery';
 import { DataError } from 'components/Errors/DataError';
 import { useTabState } from 'components/hooks/useTabState';
@@ -17,114 +19,92 @@ import { useExecutionNodeViewsState } from './useExecutionNodeViewsState';
 import ExecutionTimeline from './Timeline/ExecutionTimeline';
 
 const useStyles = makeStyles((theme: Theme) => ({
-    filters: {
-        paddingLeft: theme.spacing(3)
-    },
-    nodesContainer: {
-        borderTop: `1px solid ${theme.palette.divider}`,
-        display: 'flex',
-        flex: '1 1 100%',
-        flexDirection: 'column',
-        minHeight: 0
-    },
-    tabs: {
-        background: secondaryBackgroundColor,
-        paddingLeft: theme.spacing(3.5)
-    }
+  filters: {
+    paddingLeft: theme.spacing(3)
+  },
+  nodesContainer: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    flex: '1 1 100%',
+    flexDirection: 'column',
+    minHeight: 0
+  },
+  tabs: {
+    background: secondaryBackgroundColor,
+    paddingLeft: theme.spacing(3.5)
+  }
 }));
 
 export interface ExecutionNodeViewsProps {
-    execution: Execution;
+  execution: Execution;
 }
 
 /** Contains the available ways to visualize the nodes of a WorkflowExecution */
-export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({
-    execution
-}) => {
-    const styles = useStyles();
-    const filterState = useNodeExecutionFiltersState();
-    const tabState = useTabState(tabs, tabs.nodes.id);
+export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ execution }) => {
+  const defaultTab = tabs.nodes.id;
+  const styles = useStyles();
+  const filterState = useNodeExecutionFiltersState();
+  const tabState = useTabState(tabs, defaultTab);
+  const isTimelineEnabled = useFeatureFlag(FeatureFlag.TimelineView);
 
-    const {
-        closure: { abortMetadata }
-    } = execution;
+  const {
+    closure: { abortMetadata }
+  } = execution;
 
-    /* We want to maintain the filter selection when switching away from the Nodes
+  if (!isTimelineEnabled && tabState.value === tabs.timeline.id) {
+    tabState.onChange(noop, defaultTab);
+  }
+
+  /* We want to maintain the filter selection when switching away from the Nodes
     tab and back, but do not want to filter the nodes when viewing the graph. So,
     we will only pass filters to the execution state when on the nodes tab. */
-    const appliedFilters =
-        tabState.value === tabs.nodes.id ? filterState.appliedFilters : [];
+  const appliedFilters = tabState.value === tabs.nodes.id ? filterState.appliedFilters : [];
 
-    const {
-        nodeExecutionsQuery,
-        nodeExecutionsRequestConfig
-    } = useExecutionNodeViewsState(execution, appliedFilters);
+  const { nodeExecutionsQuery, nodeExecutionsRequestConfig } = useExecutionNodeViewsState(execution, appliedFilters);
 
-    const renderNodeExecutionsTable = (nodeExecutions: NodeExecution[]) => (
-        <NodeExecutionsRequestConfigContext.Provider
-            value={nodeExecutionsRequestConfig}
-        >
-            <NodeExecutionsTable
-                abortMetadata={abortMetadata ?? undefined}
-                nodeExecutions={nodeExecutions}
-            />
-        </NodeExecutionsRequestConfigContext.Provider>
-    );
+  const renderNodeExecutionsTable = (nodeExecutions: NodeExecution[]) => (
+    <NodeExecutionsRequestConfigContext.Provider value={nodeExecutionsRequestConfig}>
+      <NodeExecutionsTable abortMetadata={abortMetadata ?? undefined} nodeExecutions={nodeExecutions} />
+    </NodeExecutionsRequestConfigContext.Provider>
+  );
 
-    const renderExecutionLoader = (nodeExecutions: NodeExecution[]) => {
-        return (
-            <ExecutionChildrenLoader
-                nodeExecutions={nodeExecutions}
-                workflowId={execution.closure.workflowId}
-            />
-        );
-    };
+  const renderExecutionLoader = (nodeExecutions: NodeExecution[]) => {
+    return <ExecutionChildrenLoader nodeExecutions={nodeExecutions} workflowId={execution.closure.workflowId} />;
+  };
 
-    const renderExecutionsTimeline = (nodeExecutions: NodeExecution[]) => (
-        <ExecutionTimeline
-            nodeExecutions={nodeExecutions}
-            workflowId={execution.closure.workflowId}
-        />
-    );
+  const renderExecutionsTimeline = (nodeExecutions: NodeExecution[]) => (
+    <ExecutionTimeline nodeExecutions={nodeExecutions} workflowId={execution.closure.workflowId} />
+  );
 
-    return (
-        <>
-            <Tabs className={styles.tabs} {...tabState}>
-                <Tab value={tabs.nodes.id} label={tabs.nodes.label} />
-                <Tab value={tabs.graph.id} label={tabs.graph.label} />
-                <Tab value={tabs.timeline.id} label={tabs.timeline.label} />
-            </Tabs>
-            <div className={styles.nodesContainer}>
-                {tabState.value === tabs.nodes.id && (
-                    <>
-                        <div className={styles.filters}>
-                            <ExecutionFilters {...filterState} />
-                        </div>
-                        <WaitForQuery
-                            errorComponent={DataError}
-                            query={nodeExecutionsQuery}
-                        >
-                            {renderNodeExecutionsTable}
-                        </WaitForQuery>
-                    </>
-                )}
-                {tabState.value === tabs.graph.id && (
-                    <WaitForQuery
-                        errorComponent={DataError}
-                        query={nodeExecutionsQuery}
-                    >
-                        {renderExecutionLoader}
-                    </WaitForQuery>
-                )}
-                {tabState.value === tabs.timeline.id && (
-                    <WaitForQuery
-                        errorComponent={DataError}
-                        query={nodeExecutionsQuery}
-                    >
-                        {renderExecutionsTimeline}
-                    </WaitForQuery>
-                )}
+  return (
+    <>
+      <Tabs className={styles.tabs} {...tabState}>
+        <Tab value={tabs.nodes.id} label={tabs.nodes.label} />
+        <Tab value={tabs.graph.id} label={tabs.graph.label} />
+        {isTimelineEnabled && <Tab value={tabs.timeline.id} label={tabs.timeline.label} />}
+      </Tabs>
+      <div className={styles.nodesContainer}>
+        {tabState.value === tabs.nodes.id && (
+          <>
+            <div className={styles.filters}>
+              <ExecutionFilters {...filterState} />
             </div>
-        </>
-    );
+            <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
+              {renderNodeExecutionsTable}
+            </WaitForQuery>
+          </>
+        )}
+        {tabState.value === tabs.graph.id && (
+          <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
+            {renderExecutionLoader}
+          </WaitForQuery>
+        )}
+        {isTimelineEnabled && tabState.value === tabs.timeline.id && (
+          <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
+            {renderExecutionsTimeline}
+          </WaitForQuery>
+        )}
+      </div>
+    </>
+  );
 };