From 6b1a69b9e66f3fc0957aac2df46ab7e756b5813b Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Wed, 3 Apr 2024 09:43:27 -0500
Subject: [PATCH] =?UTF-8?q?[ui]=20Add=20another=20link=20from=20Events=20p?=
 =?UTF-8?q?age=20to=20Partition=20>=20=E2=80=9CView=20all=20events?=
 =?UTF-8?q?=E2=80=9D=20modal=20(#20978)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary & Motivation

Related: https://github.com/dagster-io/dagster/issues/20421

This adds another link to the Partition tab's "View Historical Events"
button to the individual event view. I think we need to re-think the
split between the partition-centric and event-centric pages and bring
partition filtering to the Events page, but until we're able to do that,
we need to make the existing modal easier to find.

Curious to get @braunjj's thoughts. We could also try to add a partition
filter to the events page, but I think right now we'd be limited to
choosing a single partition key.


![image](https://github.com/dagster-io/dagster/assets/1037212/c38b9b3d-b5e5-4b39-a675-21820aec5e57)

Co-authored-by: bengotow <bgotow@elementl.com>
---
 .../src/assets/AllIndividualEventsButton.tsx  | 10 ++++++-
 .../ui-core/src/assets/AssetEventDetail.tsx   | 27 +++++++++++++------
 .../packages/ui-core/src/assets/types.tsx     |  1 +
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx
index 846ebcea62d57..9d41362b8ba8d 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx
@@ -23,6 +23,7 @@ import {
 } from './types/useRecentAssetEvents.types';
 import {Timestamp} from '../app/time/Timestamp';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {MetadataEntry} from '../metadata/MetadataEntry';
 import {PipelineReference} from '../pipelines/PipelineReference';
 import {RunStatusWithStats} from '../runs/RunStatusDots';
@@ -303,7 +304,11 @@ export const AllIndividualEventsButton = ({
   children: React.ReactNode;
   disabled?: boolean;
 }) => {
-  const [open, setOpen] = React.useState(false);
+  const [_open, setOpen] = useQueryPersistedState({
+    queryKey: 'showAllEvents',
+    decode: (qs) => (qs.showAllEvents === 'true' ? true : false),
+    encode: (b) => ({showAllEvents: b || undefined}),
+  });
   const [focused, setFocused] = React.useState<AssetEventGroup | undefined>();
   const groups = React.useMemo(
     () =>
@@ -315,6 +320,7 @@ export const AllIndividualEventsButton = ({
       })),
     [events],
   );
+
   const title = () => {
     if (hasPartitions && events[0]) {
       const partition = events[0].partition;
@@ -325,6 +331,8 @@ export const AllIndividualEventsButton = ({
     return `Materialization and observation events`;
   };
 
+  const open = _open && !disabled;
+
   return (
     <>
       <Button disabled={disabled} onClick={() => setOpen(true)}>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx
index de5d532abfdbd..e91281502b3af 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx
@@ -72,14 +72,25 @@ export const AssetEventDetail = ({
             {hidePartitionLinks ? (
               event.partition
             ) : (
-              <Link
-                to={assetDetailsPathForKey(assetKey, {
-                  view: 'partitions',
-                  partition: event.partition,
-                })}
-              >
-                {event.partition}
-              </Link>
+              <>
+                <Link
+                  to={assetDetailsPathForKey(assetKey, {
+                    view: 'partitions',
+                    partition: event.partition,
+                  })}
+                >
+                  {event.partition}
+                </Link>
+                <Link
+                  to={assetDetailsPathForKey(assetKey, {
+                    view: 'partitions',
+                    partition: event.partition,
+                    showAllEvents: true,
+                  })}
+                >
+                  View all partition events
+                </Link>
+              </>
             )}
           </Box>
         )}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/types.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/types.tsx
index b87c0bfaabdf1..5566c5082e612 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/types.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/types.tsx
@@ -22,4 +22,5 @@ export interface AssetViewParams {
   checkDetail?: string;
   default_range?: string;
   column?: string;
+  showAllEvents?: boolean;
 }