[1/n][Asset Health] Add descriptions to health summary card (#29256)

## Summary & Motivation

1. Add descriptions.
2. Fix the order of events in the health trend.

## How I Tested These Changes
<img width="1440" alt="Screenshot 2025-04-14 at 12 09 29 PM"
src="https://github.com/user-attachments/assets/fe9bccd6-aca5-4b2c-8bd4-aeeb126bfe54"
/>
<img width="365" alt="Screenshot 2025-04-14 at 12 09 09 PM"
src="https://github.com/user-attachments/assets/73a6cb5b-a036-46bd-b62c-be206112a3e0"
/>
<img width="361" alt="Screenshot 2025-04-14 at 12 09 02 PM"
src="https://github.com/user-attachments/assets/2dada884-07a7-4a20-a1c8-03f3d04869b8"
/>
<img width="375" alt="Screenshot 2025-04-14 at 12 08 57 PM"
src="https://github.com/user-attachments/assets/095a5fcf-a700-4353-9d77-6d0987465980"
/>
<img width="375" alt="Screenshot 2025-04-14 at 12 08 50 PM"
src="https://github.com/user-attachments/assets/c39d2c39-bd2c-4a00-877e-651482d2d402"
/>
<img width="466" alt="Screenshot 2025-04-14 at 12 22 24 PM"
src="https://github.com/user-attachments/assets/50adff64-0570-4bcd-bb9b-5bee779c1b0d"
/>
<img width="373" alt="Screenshot 2025-04-14 at 12 22 17 PM"
src="https://github.com/user-attachments/assets/b8839a4a-7a6d-4260-af7b-fec517c20b9c"
/>

Author: salazarm

Diff for: js_modules/dagster-ui/packages/ui-core/client.json

@@ -70,10 +70,50 @@ export const ASSETS_HEALTH_INFO_QUERY = gql`
     assetHealth {
       assetHealth
       materializationStatus
+      materializationStatusMetadata {
+        ...AssetHealthMaterializationDegradedPartitionedMetaFragment
+        ...AssetHealthMaterializationWarningPartitionedMetaFragment
+        ...AssetHealthMaterializationDegradedNotPartitionedMetaFragment
+      }
       assetChecksStatus
+      assetChecksStatusMetadata {
+        ...AssetHealthCheckDegradedMetaFragment
+        ...AssetHealthCheckWarningMetaFragment
+        ...AssetHealthCheckUnknownMetaFragment
+      }
       freshnessStatus
     }
   }
+
+  fragment AssetHealthMaterializationDegradedPartitionedMetaFragment on AssetHealthMaterializationDegradedPartitionedMeta {
+    numMissingPartitions
+    totalNumPartitions
+  }
+
+  fragment AssetHealthMaterializationWarningPartitionedMetaFragment on AssetHealthMaterializationWarningPartitionedMeta {
+    numMissingPartitions
+    totalNumPartitions
+  }
+
+  fragment AssetHealthMaterializationDegradedNotPartitionedMetaFragment on AssetHealthMaterializationDegradedNotPartitionedMeta {
+    failedRunId
+  }
+
+  fragment AssetHealthCheckDegradedMetaFragment on AssetHealthCheckDegradedMeta {
+    numFailedChecks
+    numWarningChecks
+    totalNumChecks
+  }
+
+  fragment AssetHealthCheckWarningMetaFragment on AssetHealthCheckWarningMeta {
+    numWarningChecks
+    totalNumChecks
+  }
+
+  fragment AssetHealthCheckUnknownMetaFragment on AssetHealthCheckUnknownMeta {
+    numNotExecutedChecks
+    totalNumChecks
+  }
 `;
 
 // For tests

Diff for: js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetHealthDataProvider.tsx

@@ -19,6 +19,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {Link} from 'react-router-dom';
+import {CreateCatalogViewButton} from 'shared/assets/CreateCatalogViewButton.oss';
 import styled from 'styled-components';
 
 import {AssetHealthStatusString, STATUS_INFO, statusToIconAndColor} from './AssetHealthSummary';
@@ -33,7 +34,6 @@ import {AssetTableFragment} from './types/AssetTableFragment.types';
 import {useAssetsHealthData} from '../asset-data/AssetHealthDataProvider';
 import {AssetHealthFragment} from '../asset-data/types/AssetHealthDataProvider.types';
 import {useAssetSelectionInput} from '../asset-selection/input/useAssetSelectionInput';
-import {useDebugChanged} from '../hooks/useDebugChanged';
 import {useBlockTraceUntilTrue} from '../performance/TraceContext';
 import {SyntaxError} from '../selection/CustomErrorListener';
 import {IndeterminateLoadingBar} from '../ui/IndeterminateLoadingBar';
@@ -65,8 +65,6 @@ export const AssetsCatalogTableV2Impl = React.memo(() => {
     useMemo(() => filtered.map((asset) => asAssetKeyInput(asset.key)), [filtered]),
   );
 
-  console.log(Object.keys(liveDataByNode).length);
-
   const healthDataLoading = useMemo(() => {
     return Object.values(liveDataByNode).length !== filtered.length;
   }, [liveDataByNode, filtered]);
@@ -98,27 +96,6 @@ export const AssetsCatalogTableV2Impl = React.memo(() => {
     }
   }, [selectedTab, filtered, groupedByStatus, loading]);
 
-  useDebugChanged([
-    liveDataByNode,
-    filtered,
-    assets,
-    errorState,
-    filterInput,
-    loading,
-    assetsLoading,
-    error,
-    selectedTab,
-    groupedByStatus,
-    content,
-    healthDataLoading,
-    assetsLoading,
-    loading,
-    error,
-    selectedTab,
-    groupedByStatus,
-    content,
-  ]);
-
   if (error) {
     return <PythonErrorInfo error={error} />;
   }
@@ -140,7 +117,13 @@ export const AssetsCatalogTableV2Impl = React.memo(() => {
         minHeight: 600,
       }}
     >
-      <Box padding={{vertical: 12, horizontal: 24}}>{filterInput}</Box>
+      <Box
+        flex={{direction: 'row', alignItems: 'center', gap: 8}}
+        padding={{vertical: 12, horizontal: 24}}
+      >
+        <Box flex={{grow: 1, shrink: 1}}>{filterInput}</Box>
+        <CreateCatalogViewButton />
+      </Box>
       <IndeterminateLoadingBar $loading={loading || healthDataLoading} />
       <Box border="bottom">
         <Tabs
@@ -368,7 +351,16 @@ const AssetRow = React.memo(({asset}: {asset: AssetHealthFragment}) => {
           </AssetIconWrapper>
           {asset.assetKey.path.join(' / ')}
         </Box>
-        <AssetRecentUpdatesTrend asset={asset} />
+        {/* Prevent clicks on the trend from propoagating to the row and triggering the link */}
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          className="test"
+        >
+          <AssetRecentUpdatesTrend asset={asset} />
+        </div>
       </Box>
     </RowWrapper>
   );