allow filtering logs on builder page and fix issue when restarting run

apps/web-remix/app/components/form/inputs/select/select.input.css

@@ -14,6 +14,10 @@
   @apply !bg-white !shadow-none !ring-0 !text-foreground !text-sm !h-[36px] !outline-none;
 }
 
+.select-sm .rc-select-selector .rc-select-selection-search-input {
+  @apply !h-[30px]
+}
+
 .rc-select .rc-select-selection-placeholder {
   @apply !text-muted-foreground  !opacity-100;
 }

apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx

@@ -1,11 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useFetcher } from '@remix-run/react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { useLocalStorage } from 'usehooks-ts';
 
 import { EmptyMessage } from '~/components/list/ItemList';
 import { PinButton } from '~/components/pages/pipelines/build/BuilderSidebar/BuilderSidebar';
-import { RunLogs } from '~/components/pages/pipelines/components/RunLogs';
+import {
+  RunLogs,
+  RunLogsFilter,
+} from '~/components/pages/pipelines/components/RunLogs';
 import { IExtendedPipeline } from '~/components/pages/pipelines/pipeline.types';
 import { loader as logsLoader } from '~/components/pages/pipelines/runLogs/loader.server';
 import { useRunPipeline } from '~/components/pages/pipelines/RunPipelineProvider';
@@ -38,10 +41,11 @@ export const BuilderBottomSidebar = (props: BuilderBottomSidebarProps) => {
 const BuilderBottomSidebarClient = ({
   pipeline,
 }: BuilderBottomSidebarProps) => {
+  const [blockName, setBlockName] = useState<string | null>(null);
   const organizationId = useOrganizationId();
   const { isDesktop } = useBreakpoints();
   const { ref, onMousedown } = useResizeElement<HTMLDivElement>();
-
+  const { runId } = useRunPipeline();
   const [state, setState] = useLocalStorage<BuilderSidebarState>(
     buildLSKey(organizationId),
     'closed',
@@ -68,6 +72,21 @@ const BuilderBottomSidebarClient = ({
     }
   };
 
+  const onBlockSelect = (blockName: string) => {
+    setBlockName(blockName);
+  };
+
+  const onClear = () => {
+    setBlockName(null);
+  };
+
+  const options = useMemo(() => {
+    return pipeline.config.blocks.map((block) => ({
+      value: block.name,
+      label: block.name,
+    }));
+  }, [pipeline.config.blocks]);
+
   const onClose = () => {
     setState('closed');
   };
@@ -105,11 +124,26 @@ const BuilderBottomSidebarClient = ({
           </div>
 
           <header className="flex gap-2 justify-between items-center border-b border-input px-2 py-1">
-            <h4 className="text-xs">Logs</h4>
+            <div className="flex gap-4 items-center">
+              <h4 className="text-xs">Logs</h4>
+              <RunLogsFilter
+                value={blockName}
+                onSelect={onBlockSelect}
+                onClear={onClear}
+                options={options}
+                className="select-sm"
+              />
+            </div>
             <PinButton />
           </header>
 
-          {isOpen && <SidebarLogs pipeline={pipeline} />}
+          {isOpen && (
+            <SidebarLogs
+              key={runId}
+              pipeline={pipeline}
+              blockName={blockName ?? undefined}
+            />
+          )}
         </div>
       </div>
     </BuilderSidebarContext.Provider>
@@ -134,27 +168,31 @@ function HoverableBottomLine() {
   );
 }
 
-function SidebarLogs({ pipeline }: BuilderBottomSidebarProps) {
+function SidebarLogs({
+  pipeline,
+  blockName,
+}: BuilderBottomSidebarProps & { blockName?: string }) {
   const { status, runId } = useRunPipeline();
-
   const isStarting = status === 'starting';
   const isIdle = status === 'idle';
   const fetcher = useFetcher<typeof logsLoader>();
   const [key, setKey] = useState(Date.now());
 
   useEffect(() => {
-    if (runId && !fetcher.data) {
+    if (runId) {
       fetcher.load(
-        routes.pipelineRunLogs(pipeline.organization_id, pipeline.id, runId),
+        routes.pipelineRunLogs(pipeline.organization_id, pipeline.id, runId, {
+          block_name: blockName,
+        }),
       );
     }
-  }, [status]);
+  }, [status, blockName]);
 
   useEffect(() => {
     if (fetcher.data && fetcher.state === 'idle') {
       setKey(Date.now());
     }
-  }, [fetcher.state]);
+  }, [fetcher.state, blockName]);
 
   if (isStarting) {
     return (
@@ -179,6 +217,7 @@ function SidebarLogs({ pipeline }: BuilderBottomSidebarProps) {
       defaultAfter={fetcher.data?.pagination.after}
       runId={Number(runId)}
       pipelineId={pipeline.id}
+      blockName={blockName}
       organizationId={pipeline.organization_id}
       className="w-full max-h-[calc(100%_-_45px)] px-2"
       variant="light"

apps/web-remix/app/components/pages/pipelines/components/RunLogs.tsx

@@ -4,6 +4,7 @@ import { useFetcher } from '@remix-run/react';
 
 import type { IPipelineRunLog } from '~/api/pipeline/pipeline.contracts';
 import { SelectInput } from '~/components/form/inputs/select/select.input';
+import { SelectInputProps } from '~/components/form/inputs/select/select.input-impl.client';
 import { BasicLink } from '~/components/link/BasicLink';
 import { EmptyMessage } from '~/components/list/ItemList';
 import type { loader } from '~/components/pages/pipelines/runLogs/loader.server';
@@ -145,15 +146,17 @@ export function RunLogsFilter({
   onClear,
   onSelect,
   options,
-}: LogsFilterProps) {
+  ...rest
+}: LogsFilterProps & Partial<SelectInputProps>) {
   return (
     <SelectInput
       allowClear
       onClear={onClear}
-      placeholder="Select block..."
+      placeholder="Filter by block..."
       value={value}
       onSelect={onSelect}
       options={options}
+      {...rest}
     />
   );
 }