From ea4974ce36251aaf5bcd0a726412f2da36541f5c Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 6 Sep 2023 16:14:26 -0700
Subject: [PATCH] chore: allow resetting the time filter (#26920)

---
 packages/trace-viewer/src/ui/actionList.css |  7 +++++
 packages/trace-viewer/src/ui/actionList.tsx | 30 ++++++++++++---------
 packages/trace-viewer/src/ui/timeline.css   |  8 +++---
 packages/trace-viewer/src/ui/workbench.tsx  |  1 +
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/trace-viewer/src/ui/actionList.css b/packages/trace-viewer/src/ui/actionList.css
index ce94057bca..ad5cee5780 100644
--- a/packages/trace-viewer/src/ui/actionList.css
+++ b/packages/trace-viewer/src/ui/actionList.css
@@ -71,3 +71,10 @@
   padding-left: 5px;
   color: var(--vscode-charts-blue);
 }
+
+.action-list-show-all {
+  display: flex;
+  cursor: pointer;
+  height: 28px;
+  align-items: center;
+}
diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index a79affb234..669afd3001 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -30,6 +30,7 @@ export interface ActionListProps {
   actions: ActionTraceEventInContext[],
   selectedAction: ActionTraceEventInContext | undefined,
   selectedTime: Boundaries | undefined,
+  setSelectedTime: (time: Boundaries | undefined) => void,
   sdkLanguage: Language | undefined;
   onSelected: (action: ActionTraceEventInContext) => void,
   onHighlighted: (action: ActionTraceEventInContext | undefined) => void,
@@ -43,6 +44,7 @@ export const ActionList: React.FC<ActionListProps> = ({
   actions,
   selectedAction,
   selectedTime,
+  setSelectedTime,
   sdkLanguage,
   onSelected,
   onHighlighted,
@@ -57,18 +59,22 @@ export const ActionList: React.FC<ActionListProps> = ({
     return { selectedItem };
   }, [itemMap, selectedAction]);
 
-  return <ActionTreeView
-    dataTestId='action-list'
-    rootItem={rootItem}
-    treeState={treeState}
-    setTreeState={setTreeState}
-    selectedItem={selectedItem}
-    onSelected={item => onSelected(item.action!)}
-    onHighlighted={item => onHighlighted(item?.action)}
-    isError={item => !!item.action?.error?.message}
-    isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
-    render={item => renderAction(item.action!, sdkLanguage, revealConsole, isLive || false)}
-  />;
+  return <div className='vbox'>
+    {selectedTime && <div className='action-list-show-all' onClick={() => setSelectedTime(undefined)}><span className='codicon codicon-triangle-left'></span>Show all</div>}
+    <ActionTreeView
+      dataTestId='action-list'
+      rootItem={rootItem}
+      treeState={treeState}
+      setTreeState={setTreeState}
+      selectedItem={selectedItem}
+      onSelected={item => onSelected(item.action!)}
+      onHighlighted={item => onHighlighted(item?.action)}
+      onAccepted={item => setSelectedTime({ minimum: item.action!.startTime, maximum: item.action!.endTime })}
+      isError={item => !!item.action?.error?.message}
+      isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
+      render={item => renderAction(item.action!, sdkLanguage, revealConsole, isLive || false)}
+    />
+  </div>;
 };
 
 export const renderAction = (
diff --git a/packages/trace-viewer/src/ui/timeline.css b/packages/trace-viewer/src/ui/timeline.css
index 22865f0e48..216ba94b63 100644
--- a/packages/trace-viewer/src/ui/timeline.css
+++ b/packages/trace-viewer/src/ui/timeline.css
@@ -83,22 +83,22 @@
 
 .timeline-bar.action {
   --action-color: var(--vscode-charts-orange);
-  --action-background-color: #d1861633;
+  --action-background-color: #d1861666;
 }
 
 .timeline-bar.action.error {
   --action-color: var(--vscode-charts-red);
-  --action-background-color: #e5140033;
+  --action-background-color: #e5140066;
 }
 
 .timeline-bar.network {
   --action-color: var(--vscode-charts-blue);
-  --action-background-color: #1a85ff33;
+  --action-background-color: #1a85ff66;
 }
 
 body.dark-mode .timeline-bar.action.error {
   --action-color: var(--vscode-errorForeground);
-  --action-background-color: #f4877133;
+  --action-background-color: #f4877166;
 }
 
 .timeline-label {
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 85ea275ecd..31598e0f61 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -235,6 +235,7 @@ export const Workbench: React.FunctionComponent<{
               actions={model?.actions || []}
               selectedAction={model ? selectedAction : undefined}
               selectedTime={selectedTime}
+              setSelectedTime={setSelectedTime}
               onSelected={onActionSelected}
               onHighlighted={setHighlightedAction}
               revealConsole={() => selectPropertiesTab('console')}