[ui] Add Automation History to asset checks (#26766)

## Summary & Motivation

For asset checks that use automation conditions, show an "Automation history" tab with the list of relevant evaluations, much like the Automations tab on assets.

With automation condition:

<img width="1238" alt="Screenshot 2024-12-31 at 09 47 49" src="https://github.com/user-attachments/assets/8a6a320e-8281-46ca-8eca-201815e4df08" />

Without automation condition, hovering on tab:

<img width="1238" alt="Screenshot 2024-12-31 at 09 47 58" src="https://github.com/user-attachments/assets/9c37ce97-e46d-4b6a-9ddd-50ca4be89069" />

## How I Tested These Changes

Load app with sample repo provided by @OwenKephart, enable automation sensor. Navigate to asset checks, verify that they render correctly, and that the evaluation dialog renders properly.

## Changelog

[ui] Add Automation history to asset checks.

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckAutomationList.tsx

@@ -0,0 +1,121 @@
+import {Box, CursorHistoryControls} from '@dagster-io/ui-components';
+import {useMemo} from 'react';
+
+import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
+import {EvaluationList} from '../AutoMaterializePolicyPage/EvaluationList';
+import {AssetKey} from '../types';
+import {
+  AssetCheckAutomationListQuery,
+  AssetCheckAutomationListQueryVariables,
+} from './types/AssetCheckAutomationList.types';
+import {gql} from '../../apollo-client';
+import {useCursorPaginatedQuery} from '../../runs/useCursorPaginatedQuery';
+import {ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT} from '../AutoMaterializePolicyPage/GetEvaluationsQuery';
+import {AssetCheckKeyFragment} from './types/AssetChecksQuery.types';
+
+interface Props {
+  assetCheck: AssetCheckKeyFragment;
+  checkName: string;
+}
+
+export const AssetCheckAutomationList = ({assetCheck, checkName}: Props) => {
+  const {queryResult, evaluations, paginationProps} = useAssetCheckEvaluationsQueryResult({
+    assetKey: assetCheck.assetKey,
+    checkName,
+  });
+
+  useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
+
+  return (
+    <>
+      <Box
+        padding={{vertical: 12, horizontal: 20}}
+        flex={{direction: 'row', justifyContent: 'flex-end'}}
+      >
+        <CursorHistoryControls {...paginationProps} style={{marginTop: 0}} />
+      </Box>
+      <EvaluationList
+        assetKey={assetCheck.assetKey}
+        isPartitioned={false}
+        assetCheckName={checkName}
+        evaluations={evaluations}
+      />
+    </>
+  );
+};
+
+export const PAGE_SIZE = 30;
+
+export function useAssetCheckEvaluationsQueryResult({
+  assetKey,
+  checkName,
+}: {
+  assetKey: AssetKey;
+  checkName: string;
+}) {
+  const {queryResult, paginationProps} = useCursorPaginatedQuery<
+    AssetCheckAutomationListQuery,
+    AssetCheckAutomationListQueryVariables
+  >({
+    nextCursorForResult: (data) => {
+      if (
+        data.assetConditionEvaluationRecordsOrError?.__typename ===
+        'AssetConditionEvaluationRecords'
+      ) {
+        return data.assetConditionEvaluationRecordsOrError.records[PAGE_SIZE - 1]?.evaluationId;
+      }
+      return undefined;
+    },
+    getResultArray: (data) => {
+      if (
+        data?.assetConditionEvaluationRecordsOrError?.__typename ===
+        'AssetConditionEvaluationRecords'
+      ) {
+        return data.assetConditionEvaluationRecordsOrError.records;
+      }
+      return [];
+    },
+    variables: {
+      assetCheckKey: {
+        assetKey: {path: assetKey.path},
+        name: checkName,
+      },
+    },
+    query: ASSET_CHECK_AUTOMATION_LIST_QUERY,
+    pageSize: PAGE_SIZE,
+  });
+
+  const {data} = queryResult;
+  const evaluations = useMemo(() => {
+    if (
+      data?.assetConditionEvaluationRecordsOrError?.__typename === 'AssetConditionEvaluationRecords'
+    ) {
+      return data.assetConditionEvaluationRecordsOrError.records;
+    }
+    return [];
+  }, [data]);
+
+  return {queryResult, evaluations, paginationProps};
+}
+
+const ASSET_CHECK_AUTOMATION_LIST_QUERY = gql`
+  query AssetCheckAutomationListQuery(
+    $assetCheckKey: AssetCheckHandleInput!
+    $limit: Int!
+    $cursor: String
+  ) {
+    assetConditionEvaluationRecordsOrError(
+      assetKey: null
+      assetCheckKey: $assetCheckKey
+      limit: $limit
+      cursor: $cursor
+    ) {
+      ... on AssetConditionEvaluationRecords {
+        records {
+          ...AssetConditionEvaluationRecordFragment
+        }
+      }
+    }
+  }
+  ${ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT}
+`;

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx

@@ -15,6 +15,7 @@ import {useVirtualizer} from '@tanstack/react-virtual';
 import React, {useMemo, useState} from 'react';
 import styled from 'styled-components';
 
+import {AssetCheckAutomationList} from './AssetCheckAutomationList';
 import {
   ASSET_CHECK_DETAILS_QUERY,
   AgentUpgradeRequired,
@@ -52,6 +53,7 @@ export const AssetChecks = ({
   const queryResult = useQuery<AssetChecksQuery, AssetChecksQueryVariables>(ASSET_CHECKS_QUERY, {
     variables: {assetKey},
   });
+
   const {data} = queryResult;
   useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
 
@@ -101,6 +103,8 @@ export const AssetChecks = ({
     return checks.find((check) => check.name === selectedCheckName) ?? checks[0];
   }, [selectedCheckName, checks]);
 
+  const isSelectedCheckAutomated = !!selectedCheck?.automationCondition;
+
   const {paginationProps, executions, executionsLoading} = useHistoricalCheckExecutions(
     selectedCheck ? {assetKey, checkName: selectedCheck.name} : null,
   );
@@ -189,6 +193,7 @@ export const AssetChecks = ({
                         $selected={selectedCheck === check}
                         onClick={() => {
                           setSelectedCheckName(check.name);
+                          setActiveTab('overview');
                         }}
                       >
                         <Box flex={{direction: 'column', gap: 2}}>
@@ -237,6 +242,7 @@ export const AssetChecks = ({
           <Box padding={{horizontal: 24}} border="bottom">
             <AssetChecksTabs
               activeTab={activeTab}
+              enableAutomationHistory={isSelectedCheckAutomated}
               onChange={(tab) => {
                 setActiveTab(tab);
               }}
@@ -257,6 +263,9 @@ export const AssetChecks = ({
               paginationProps={paginationProps}
             />
           ) : null}
+          {activeTab === 'automation-history' ? (
+            <AssetCheckAutomationList assetCheck={selectedCheck} checkName={selectedCheck.name} />
+          ) : null}
         </Box>
       </Box>
     </Box>

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksQuery.tsx

@@ -5,6 +5,15 @@ import {
 import {ASSET_CHECK_TABLE_FRAGMENT} from './VirtualizedAssetCheckTable';
 import {gql} from '../../apollo-client';
 
+const ASSET_CHECK_KEY_FRAGMENT = gql`
+  fragment AssetCheckKeyFragment on AssetCheck {
+    name
+    assetKey {
+      path
+    }
+  }
+`;
+
 export const ASSET_CHECKS_QUERY = gql`
   query AssetChecksQuery($assetKey: AssetKeyInput!) {
     assetNodeOrError(assetKey: $assetKey) {
@@ -18,6 +27,7 @@ export const ASSET_CHECKS_QUERY = gql`
           }
           ... on AssetChecks {
             checks {
+              ...AssetCheckKeyFragment
               ...ExecuteChecksButtonCheckFragment
               ...AssetCheckTableFragment
             }
@@ -26,7 +36,9 @@ export const ASSET_CHECKS_QUERY = gql`
       }
     }
   }
+
   ${EXECUTE_CHECKS_BUTTON_ASSET_NODE_FRAGMENT}
   ${EXECUTE_CHECKS_BUTTON_CHECK_FRAGMENT}
   ${ASSET_CHECK_TABLE_FRAGMENT}
+  ${ASSET_CHECK_KEY_FRAGMENT}
 `;

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx

@@ -1,17 +1,31 @@
-import {Tab, Tabs} from '@dagster-io/ui-components';
+import {Tab, Tabs, Tooltip} from '@dagster-io/ui-components';
 
-export type AssetChecksTabType = 'overview' | 'execution-history';
+export type AssetChecksTabType = 'overview' | 'execution-history' | 'automation-history';
 
 interface Props {
   activeTab: AssetChecksTabType;
+  enableAutomationHistory: boolean;
   onChange: (tabId: AssetChecksTabType) => void;
 }
 
-export const AssetChecksTabs = ({activeTab, onChange}: Props) => {
+export const AssetChecksTabs = ({activeTab, enableAutomationHistory, onChange}: Props) => {
   return (
     <Tabs selectedTabId={activeTab} onChange={onChange}>
       <Tab id="overview" title="Overview" />
       <Tab id="execution-history" title="Execution history" />
+      <Tab
+        id="automation-history"
+        title={
+          <Tooltip
+            content="This asset check does not have an automation condition configured."
+            canShow={!enableAutomationHistory}
+            placement="top"
+          >
+            Automation history
+          </Tooltip>
+        }
+        disabled={!enableAutomationHistory}
+      />
     </Tabs>
   );
 };

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/VirtualizedAssetCheckTable.tsx

@@ -151,6 +151,10 @@ export const ASSET_CHECK_TABLE_FRAGMENT = gql`
     name
     description
     canExecuteIndividually
+    automationCondition {
+      label
+      expandedLabel
+    }
     ...ExecuteChecksButtonCheckFragment
     executionForLatestMaterialization {
       ...AssetCheckExecutionFragment