selecting partition

dagster-io · Jan 5, 2024 · 05ff795 · 05ff795
1 parent 50d53db
commit 05ff795
Show file tree

Hide file tree

Showing 34 changed files with 1,349 additions and 1,642 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx
@@ -92,7 +92,7 @@ export const AssetSidebarActivitySummary = ({
             padding={{horizontal: 24, vertical: 12}}
             flex={{direction: 'row', gap: 4, alignItems: 'center'}}
           >
-            <Link to={assetDetailsPathForKey(asset.assetKey, {view: 'auto-materialize-history'})}>
+            <Link to={assetDetailsPathForKey(asset.assetKey, {view: 'automation'})}>
               View auto-materialize history
             </Link>
             <Icon name="open_in_new" color={colorLinkDefault()} />

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTabs.tsx
@@ -36,7 +36,7 @@ export const DEFAULT_ASSET_TAB_ORDER = [
   'plots',
   'definition',
   'lineage',
-  'auto-materialize-history',
+  'automation',
 ];
 
 export type AssetTabConfigInput = {
@@ -91,10 +91,10 @@ export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, Ass
       to: buildAssetViewParams({...params, view: 'lineage'}),
       disabled: !definition,
     },
-    'auto-materialize-history': {
-      id: 'auto-materialize-history',
-      title: 'Auto-materialize history',
-      to: buildAssetViewParams({...params, view: 'auto-materialize-history'}),
+    automation: {
+      id: 'automation',
+      title: 'Automation',
+      to: buildAssetViewParams({...params, view: 'automation'}),
       disabled: !definition,
       hidden: !definition?.autoMaterializePolicy,
     },

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx
@@ -178,12 +178,7 @@ export const AssetView = ({assetKey}: Props) => {
     if (definitionQueryResult.loading && !definitionQueryResult.previousData) {
       return <AssetLoadingDefinitionState />;
     }
-    return (
-      <AssetAutomaterializePolicyPage
-        assetKey={assetKey}
-        assetHasDefinedPartitions={!!definition?.partitionDefinition}
-      />
-    );
+    return <AssetAutomaterializePolicyPage assetKey={assetKey} definition={definition} />;
   };
 
   const renderChecksTab = () => {
@@ -210,7 +205,7 @@ export const AssetView = ({assetKey}: Props) => {
         return renderEventsTab();
       case 'plots':
         return renderPlotsTab();
-      case 'auto-materialize-history':
+      case 'automation':
         return renderAutomaterializeHistoryTab();
       case 'checks':
         return renderChecksTab();

diff --git a/.../packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetAutomaterializePolicyPage.tsx b/.../packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetAutomaterializePolicyPage.tsx
@@ -1,43 +1,39 @@
-import {Box, Subheading, colorTextLight} from '@dagster-io/ui-components';
+import {Box, colorTextLight} from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
 import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
 import {AssetKey} from '../types';
+import {AssetViewDefinitionNodeFragment} from '../types/AssetView.types';
 
 import {AutoMaterializeExperimentalBanner} from './AutoMaterializeExperimentalBanner';
 import {AutomaterializeLeftPanel} from './AutomaterializeLeftPanel';
 import {AutomaterializeMiddlePanel} from './AutomaterializeMiddlePanel';
-import {AutomaterializeRightPanel} from './AutomaterializeRightPanel';
 import {useEvaluationsQueryResult} from './useEvaluationsQueryResult';
 
 export const AssetAutomaterializePolicyPage = ({
   assetKey,
-  assetHasDefinedPartitions,
+  definition,
 }: {
   assetKey: AssetKey;
-  assetHasDefinedPartitions: boolean;
+  definition?: AssetViewDefinitionNodeFragment | null;
 }) => {
   const {queryResult, paginationProps} = useEvaluationsQueryResult({assetKey});
 
   useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
 
-  const {evaluations} = React.useMemo(() => {
+  const evaluations = React.useMemo(() => {
     if (
-      queryResult.data?.autoMaterializeAssetEvaluationsOrError?.__typename ===
-        'AutoMaterializeAssetEvaluationRecords' &&
+      queryResult.data?.assetConditionEvaluationRecordsOrError?.__typename ===
+        'AssetConditionEvaluationRecords' &&
       queryResult.data?.assetNodeOrError?.__typename === 'AssetNode'
     ) {
-      return {
-        evaluations: queryResult.data?.autoMaterializeAssetEvaluationsOrError.records,
-        currentAutoMaterializeEvaluationId:
-          queryResult.data.assetNodeOrError.currentAutoMaterializeEvaluationId,
-      };
+      return queryResult.data?.assetConditionEvaluationRecordsOrError.records;
     }
-    return {evaluations: [], currentAutoMaterializeEvaluationId: null};
+    return [];
   }, [
-    queryResult.data?.autoMaterializeAssetEvaluationsOrError,
+    queryResult.data?.assetConditionEvaluationRecordsOrError,
     queryResult.data?.assetNodeOrError,
   ]);
 
@@ -73,40 +69,30 @@ export const AssetAutomaterializePolicyPage = ({
         <AutoMaterializeExperimentalBanner />
       </Box>
       <Box flex={{direction: 'row'}} style={{minHeight: 0, flex: 1}}>
-        <Box flex={{direction: 'column', grow: 1}}>
-          <Box
-            flex={{alignItems: 'center'}}
-            padding={{vertical: 16, horizontal: 24}}
-            border="bottom"
-          >
-            <Subheading>Evaluation history</Subheading>
+        <Box flex={{direction: 'row'}} style={{flex: 1, minHeight: 0}}>
+          <Box border="right" flex={{grow: 0, direction: 'column'}} style={{flex: '0 0 296px'}}>
+            <AutomaterializeLeftPanel
+              definition={definition}
+              evaluations={evaluations}
+              paginationProps={paginationProps}
+              onSelectEvaluation={(evaluation) => {
+                setSelectedEvaluationId(evaluation.evaluationId);
+              }}
+              selectedEvaluation={selectedEvaluation}
+            />
           </Box>
-          <Box flex={{direction: 'row'}} style={{flex: 1, minHeight: 0}}>
-            <Box border="right" flex={{grow: 0, direction: 'column'}} style={{flex: '0 0 296px'}}>
-              <AutomaterializeLeftPanel
-                assetHasDefinedPartitions={assetHasDefinedPartitions}
-                evaluations={evaluations}
-                paginationProps={paginationProps}
-                onSelectEvaluation={(evaluation) => {
-                  setSelectedEvaluationId(evaluation.evaluationId);
-                }}
-                selectedEvaluation={selectedEvaluation}
-              />
-            </Box>
-            <Box flex={{grow: 1}} style={{minHeight: 0, overflowY: 'auto'}}>
-              <AutomaterializeMiddlePanel
-                assetKey={assetKey}
-                assetHasDefinedPartitions={assetHasDefinedPartitions}
-                // Use the evaluation ID of the current evaluation object, if any. Otherwise
-                // fall back to the evaluation ID from the query parameter, if any.
-                selectedEvaluationId={selectedEvaluation?.evaluationId || selectedEvaluationId}
-              />
-            </Box>
+          <Box flex={{grow: 1}} style={{minHeight: 0, overflowY: 'auto'}}>
+            <AutomaterializeMiddlePanel
+              key={selectedEvaluation?.evaluationId || selectedEvaluationId}
+              assetKey={assetKey}
+              // Use the evaluation ID of the current evaluation object, if any. Otherwise
+              // fall back to the evaluation ID from the query parameter, if any.
+              selectedEvaluationId={selectedEvaluation?.evaluationId || selectedEvaluationId}
+              selectedEvaluation={selectedEvaluation}
+              definition={definition}
+            />
           </Box>
         </Box>
-        <Box border="left">
-          <AutomaterializeRightPanel assetKey={assetKey} />
-        </Box>
       </Box>
     </AutomaterializePage>
   );

diff --git a/...ter-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeLeftPanel.tsx b/...ter-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeLeftPanel.tsx
@@ -1,32 +1,41 @@
 import {
+  Body2,
   Box,
   Caption,
   CursorPaginationControls,
+  Icon,
+  Subtitle1,
+  colorAccentBlue,
+  colorAccentGreen,
   colorBackgroundBlue,
   colorBackgroundBlueHover,
   colorBackgroundDefault,
   colorBackgroundDefaultHover,
+  colorBackgroundDisabled,
   colorBackgroundLight,
   colorKeylineDefault,
   colorTextBlue,
   colorTextDefault,
+  colorTextGreen,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
+import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
 import {TimestampDisplay} from '../../schedules/TimestampDisplay';
+import {numberFormatter} from '../../ui/formatters';
+import {AssetViewDefinitionNodeFragment} from '../types/AssetView.types';
 
-import {EvaluationCounts} from './EvaluationCounts';
-import {AutoMaterializeEvaluationRecordItemFragment} from './types/GetEvaluationsQuery.types';
+import {AssetConditionEvaluationRecordFragment} from './types/GetEvaluationsQuery.types';
 import {useEvaluationsQueryResult} from './useEvaluationsQueryResult';
 
 interface Props extends ListProps {
-  evaluations: AutoMaterializeEvaluationRecordItemFragment[];
+  evaluations: AssetConditionEvaluationRecordFragment[];
   paginationProps: ReturnType<typeof useEvaluationsQueryResult>['paginationProps'];
 }
 
 export const AutomaterializeLeftPanel = ({
-  assetHasDefinedPartitions,
+  definition,
   evaluations,
   paginationProps,
   onSelectEvaluation,
@@ -35,7 +44,7 @@ export const AutomaterializeLeftPanel = ({
   return (
     <Box flex={{direction: 'column', grow: 1}} style={{overflowY: 'auto'}}>
       <AutomaterializeLeftList
-        assetHasDefinedPartitions={assetHasDefinedPartitions}
+        definition={definition}
         evaluations={evaluations}
         onSelectEvaluation={onSelectEvaluation}
         selectedEvaluation={selectedEvaluation}
@@ -50,48 +59,79 @@ export const AutomaterializeLeftPanel = ({
 };
 
 interface ListProps {
-  assetHasDefinedPartitions: boolean;
-  evaluations: AutoMaterializeEvaluationRecordItemFragment[];
-  onSelectEvaluation: (evaluation: AutoMaterializeEvaluationRecordItemFragment) => void;
-  selectedEvaluation?: AutoMaterializeEvaluationRecordItemFragment;
+  definition?: AssetViewDefinitionNodeFragment | null;
+  evaluations: AssetConditionEvaluationRecordFragment[];
+  onSelectEvaluation: (evaluation: AssetConditionEvaluationRecordFragment) => void;
+  selectedEvaluation?: AssetConditionEvaluationRecordFragment;
 }
 
 export const AutomaterializeLeftList = (props: ListProps) => {
-  const {assetHasDefinedPartitions, evaluations, onSelectEvaluation, selectedEvaluation} = props;
+  const {evaluations, onSelectEvaluation, selectedEvaluation, definition} = props;
 
   return (
-    <Box
-      padding={{vertical: 8, horizontal: 12}}
-      style={{flex: 1, minHeight: 0, overflowY: 'auto'}}
-      flex={{grow: 1, direction: 'column'}}
-    >
-      {evaluations.map((evaluation) => {
-        const isSelected = selectedEvaluation?.evaluationId === evaluation.evaluationId;
-        const {numRequested, numSkipped, numDiscarded} = evaluation;
-
-        return (
-          <EvaluationListItem
-            key={`skip-${evaluation.timestamp}`}
-            onClick={() => {
-              onSelectEvaluation(evaluation);
-            }}
-            $selected={isSelected}
-          >
-            <Box flex={{direction: 'column', gap: 4}}>
-              <TimestampDisplay timestamp={evaluation.timestamp} />
-              <EvaluationCounts
-                numRequested={numRequested}
-                numSkipped={numSkipped}
-                numDiscarded={numDiscarded}
-                isPartitionedAsset={assetHasDefinedPartitions}
-                selected={isSelected}
-              />
+    <Box flex={{grow: 1, direction: 'column'}}>
+      <Box padding={{vertical: 12, horizontal: 24}} border="bottom">
+        <Subtitle1>Evaluations</Subtitle1>
+      </Box>
+      <Box
+        padding={{bottom: 8, horizontal: 12}}
+        style={{flex: 1, minHeight: 0, overflowY: 'auto'}}
+        flex={{grow: 1, direction: 'column'}}
+      >
+        <Box border="bottom" padding={{top: 8, bottom: 12, left: 12, right: 8}}>
+          <Link to="/overview/automaterialze">
+            <Box flex={{alignItems: 'center', gap: 4}}>
+              <Icon name="sensors" color={colorAccentBlue()} />
+              <Body2>{definition?.automationPolicySensor?.name ?? 'Automation'}</Body2>
             </Box>
-          </EvaluationListItem>
-        );
-      })}
-      <Box border="top" padding={{vertical: 20, horizontal: 12}} margin={{top: 12}}>
-        <Caption>Evaluations are retained for 30 days</Caption>
+          </Link>
+        </Box>
+        <Box flex={{direction: 'column'}}>
+          {evaluations.map((evaluation) => {
+            const isSelected = selectedEvaluation?.id === evaluation.id;
+
+            const hasRequested = evaluation.numRequested > 0;
+
+            function status() {
+              if (hasRequested) {
+                if (definition?.partitionDefinition) {
+                  return (
+                    <Caption>{numberFormatter.format(evaluation.numRequested)} Requested</Caption>
+                  );
+                }
+                return <Caption>Requested</Caption>;
+              }
+              return <Caption>Not Requested</Caption>;
+            }
+
+            return (
+              <EvaluationListItem
+                key={`skip-${evaluation.id}`}
+                onClick={() => {
+                  onSelectEvaluation(evaluation);
+                }}
+                $selected={isSelected}
+              >
+                <Box flex={{direction: 'column', gap: 4}}>
+                  <Box flex={{direction: 'row', gap: 2, alignItems: 'center'}}>
+                    <StatusDot
+                      $color={
+                        evaluation.numRequested ? colorAccentGreen() : colorBackgroundDisabled()
+                      }
+                    />
+                    <span style={evaluation.numRequested ? {color: colorTextGreen()} : undefined}>
+                      <TimestampDisplay timestamp={evaluation.timestamp} />
+                    </span>
+                  </Box>
+                  <div style={{paddingLeft: 22}}>{status()}</div>
+                </Box>
+              </EvaluationListItem>
+            );
+          })}
+        </Box>
+        <Box border="top" padding={{vertical: 20, horizontal: 12}} margin={{top: 12}}>
+          <Caption>Evaluations are retained for 30 days</Caption>
+        </Box>
       </Box>
     </Box>
   );
@@ -141,3 +181,11 @@ const EvaluationListItem = styled.button<EvaluationListItemProps>`
 
   padding: 8px 12px;
 `;
+
+export const StatusDot = styled.div<{$color: string}>`
+  background-color: ${({$color}) => $color};
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  margin: 5px;
+`;