Asset checks polish (#20263)

## Summary & Motivation <img width="1727" alt="Screenshot 2024-03-05 at 1 42 03 PM" src="https://github.com/dagster-io/dagster/assets/2286579/e1f51883-2b00-4d49-be73-f16c6c2f821b"> 1. Lowercase "result" in "Evaluation result". 2. Move the collapse arrows to the right side 3. Don't show the latest execution in the table since we already show it above ## How I Tested These Changes
dagster-io · Mar 6, 2024 · 5487ee2 · 5487ee2 · github-actions · Mar 6, 2024
1 parent e526683
commit 5487ee2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 15 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
@@ -8,28 +8,48 @@ export const CollapsibleSection = ({
   headerWrapperProps,
   children,
   isInitiallyCollapsed = false,
+  arrowSide = 'left',
 }: {
   header: React.ReactNode;
   headerWrapperProps?: React.ComponentProps<typeof Box>;
   children: React.ReactNode;
   isInitiallyCollapsed?: boolean;
+  arrowSide?: 'left' | 'right';
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(isInitiallyCollapsed);
   return (
     <Box flex={{direction: 'column'}}>
       <Box
         {...headerWrapperProps}
-        flex={{direction: 'row', alignItems: 'center', gap: 6, ...(headerWrapperProps?.flex || {})}}
+        flex={{
+          direction: 'row',
+          alignItems: 'center',
+          gap: 6,
+          grow: 1,
+          ...(headerWrapperProps?.flex || {}),
+        }}
         onClick={() => {
           setIsCollapsed(!isCollapsed);
           headerWrapperProps?.onClick?.();
         }}
       >
-        <Icon
-          name="arrow_drop_down"
-          style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
-        />
-        <div>{header}</div>
+        {arrowSide === 'left' ? (
+          <>
+            <Icon
+              name="arrow_drop_down"
+              style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
+            />
+            <div>{header}</div>
+          </>
+        ) : (
+          <Box flex={{justifyContent: 'space-between', alignItems: 'center'}}>
+            <div>{header}</div>
+            <Icon
+              name="arrow_drop_down"
+              style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
+            />
+          </Box>
+        )}
       </Box>
       {isCollapsed ? null : children}
     </Box>

diff --git a/...r-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeMiddlePanel.tsx b/...r-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeMiddlePanel.tsx
@@ -333,7 +333,7 @@ export const AutomaterializeMiddlePanelWithData = ({
           <Box border="bottom" padding={{vertical: 12}} margin={{bottom: 12}}>
             <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24}}>
               <Box flex={{direction: 'column', gap: 5}}>
-                <Subtitle2>Evaluation Result</Subtitle2>
+                <Subtitle2>Evaluation result</Subtitle2>
                 <div>{statusTag}</div>
               </Box>
               {selectedEvaluation?.timestamp ? (

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
@@ -41,6 +41,7 @@ import {Timestamp} from '../../app/time/Timestamp';
 import {AssetKeyInput} from '../../graphql/types';
 import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
 import {useStateWithStorage} from '../../hooks/useStateWithStorage';
+import {MetadataEntries} from '../../metadata/MetadataEntry';
 import {linkToRunEvent} from '../../runs/RunUtils';
 import {useCursorPaginatedQuery} from '../../runs/useCursorPaginatedQuery';
 import {TimestampDisplay} from '../../schedules/TimestampDisplay';
@@ -142,6 +143,8 @@ export const AssetChecks = ({
   const lastExecution = selectedCheck.executionForLatestMaterialization;
   const targetMaterialization = lastExecution?.evaluation?.targetMaterialization;
 
+  console.log({lastExecution});
+
   return (
     <Box flex={{grow: 1, direction: 'column'}}>
       {didDismissAssetChecksBanner ? null : (
@@ -241,6 +244,7 @@ export const AssetChecks = ({
             <CollapsibleSection
               header={<Subtitle2>About</Subtitle2>}
               headerWrapperProps={headerWrapperProps}
+              arrowSide="right"
             >
               <Box padding={{top: 12}} flex={{gap: 12, direction: 'column'}}>
                 <Body2>
@@ -267,11 +271,12 @@ export const AssetChecks = ({
             <CollapsibleSection
               header={<Subtitle2>Latest execution</Subtitle2>}
               headerWrapperProps={headerWrapperProps}
+              arrowSide="right"
             >
-              <Box padding={{top: 12}}>
-                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24}}>
+              <Box padding={{top: 12}} flex={{direction: 'column', gap: 12}}>
+                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 24}}>
                   <Box flex={{direction: 'column', gap: 6}}>
-                    <Subtitle2>Evaluation Result</Subtitle2>
+                    <Subtitle2>Evaluation result</Subtitle2>
                     <div>
                       <AssetCheckStatusTag
                         execution={selectedCheck.executionForLatestMaterialization}
@@ -300,11 +305,18 @@ export const AssetChecks = ({
                     </Box>
                   ) : null}
                 </div>
+                {lastExecution?.evaluation?.metadataEntries.length ? (
+                  <Box flex={{direction: 'column', gap: 6}}>
+                    <Subtitle2>Metadata</Subtitle2>
+                    <MetadataEntries entries={lastExecution.evaluation.metadataEntries} />
+                  </Box>
+                ) : null}
               </Box>
             </CollapsibleSection>
             <CollapsibleSection
               header={<Subtitle2>Execution history</Subtitle2>}
               headerWrapperProps={headerWrapperProps}
+              arrowSide="right"
             >
               <Box padding={{top: 12}}>
                 {lastExecution ? (
@@ -352,7 +364,11 @@ const CheckExecutions = ({assetKey, checkName}: {assetKey: AssetKeyInput; checkN
   // TODO - in a follow up PR we should have some kind of queryRefresh context that can merge all of the uses of queryRefresh.
   useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
 
-  const executions = queryResult.data?.assetCheckExecutions;
+  const executions = React.useMemo(
+    // Remove first element since the latest execution info is already shown above
+    () => queryResult.data?.assetCheckExecutions.slice(1),
+    [queryResult],
+  );
 
   const runHistory = () => {
     if (!executions) {
@@ -363,7 +379,7 @@ const CheckExecutions = ({assetKey, checkName}: {assetKey: AssetKeyInput; checkN
         <Table>
           <thead>
             <tr>
-              <th style={{width: '160px'}}>Evaluation Result</th>
+              <th style={{width: '160px'}}>Evaluation result</th>
               <th style={{width: '200px'}}>Timestamp</th>
               <th style={{width: '200px'}}>Target materialization</th>
               <th>Metadata</th>
@@ -471,8 +487,8 @@ export const ASSET_CHECKS_QUERY = gql`
           }
           ... on AssetChecks {
             checks {
-              ...AssetCheckTableFragment
               ...ExecuteChecksButtonCheckFragment
+              ...AssetCheckTableFragment
             }
           }
         }

diff --git a/...dagster-ui/packages/ui-core/src/assets/asset-checks/__fixtures__/AssetChecks.fixtures.tsx b/...dagster-ui/packages/ui-core/src/assets/asset-checks/__fixtures__/AssetChecks.fixtures.tsx
@@ -24,7 +24,7 @@ export const TestAssetCheck = buildAssetCheck({
         timestamp: testLatestMaterializationTimeStamp,
         runId: testLatestMaterializationRunId,
       }),
-      metadataEntries: [buildIntMetadataEntry({})],
+      metadataEntries: [],
       severity: AssetCheckSeverity.ERROR,
     }),
     runId: testLatestMaterializationRunId,

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/types/AssetChecks.types.ts b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/types/AssetChecks.types.ts