From 3bcf7b0763670c0938f7839657b8b90c1d554d1b Mon Sep 17 00:00:00 2001
From: Gabriel Bernal <gbernal@redhat.com>
Date: Tue, 9 Jan 2024 18:42:16 +0100
Subject: [PATCH 1/2] allow dev console to add more namespaces to the default
 selection

---
 web/cypress/integration/logs-dev-page.cy.ts   | 53 +++++++++++++++++-
 .../en/plugin__logging-view-plugin.json       |  3 +-
 web/src/attribute-filters.tsx                 |  9 ++-
 web/src/components/logs-query-input.tsx       | 29 +++++++---
 web/src/components/logs-toolbar.tsx           | 26 +++++++--
 web/src/hooks/useLogs.ts                      | 19 +++++++
 web/src/pages/logs-dev-page.tsx               | 56 +++++++++++++------
 7 files changed, 165 insertions(+), 30 deletions(-)

diff --git a/web/cypress/integration/logs-dev-page.cy.ts b/web/cypress/integration/logs-dev-page.cy.ts
index 3473c529c..a1b3e08b5 100644
--- a/web/cypress/integration/logs-dev-page.cy.ts
+++ b/web/cypress/integration/logs-dev-page.cy.ts
@@ -290,7 +290,7 @@ describe('Logs Dev Page', () => {
 
     cy.wait('@resourceQuery').then(({ request }) => {
       const url = new URL(request.url);
-      expect(url.pathname).to.equal('/api/kubernetes/api/v1/namespaces/my-namespace/pods');
+      expect(url.pathname).to.equal('/api/kubernetes/api/v1/pods');
     });
   });
 
@@ -338,4 +338,55 @@ describe('Logs Dev Page', () => {
 
     cy.getByTestId(TestIds.LogsMetrics).should('exist');
   });
+
+  it('loads the current namespace as a filter in the query', () => {
+    cy.intercept(QUERY_RANGE_STREAMS_URL_MATCH, queryRangeMatrixValidResponse());
+
+    cy.visit(LOGS_DEV_PAGE_URL);
+
+    cy.getByTestId(TestIds.ShowQueryToggle).click();
+
+    cy.getByTestId(TestIds.LogsQueryInput).within(() => {
+      cy.get('textarea').contains('kubernetes_namespace_name="my-namespace"');
+    });
+  });
+
+  it('updates the query to include the current selected namespace as a filter', () => {
+    cy.intercept(QUERY_RANGE_STREAMS_URL_MATCH, queryRangeMatrixValidResponse());
+
+    cy.visit(LOGS_DEV_PAGE_URL);
+
+    cy.getByTestId(TestIds.ShowQueryToggle).click();
+
+    cy.getByTestId(TestIds.LogsQueryInput).within(() => {
+      cy.get('textarea').contains('kubernetes_namespace_name="my-namespace"');
+    });
+
+    cy.getByTestId('namespace-toggle' as TestIds).click();
+    cy.getByTestId('namespace-dropdown' as TestIds)
+      .contains('my-namespace-two')
+      .click();
+
+    cy.getByTestId(TestIds.LogsQueryInput).within(() => {
+      cy.get('textarea').contains('kubernetes_namespace_name="my-namespace-two"');
+    });
+  });
+
+  it('disables the run query button when there is no selected namespace', () => {
+    cy.intercept(QUERY_RANGE_STREAMS_URL_MATCH, queryRangeMatrixValidResponse());
+
+    cy.visit(LOGS_DEV_PAGE_URL);
+
+    cy.getByTestId(TestIds.ShowQueryToggle).click();
+
+    cy.getByTestId(TestIds.LogsQueryInput).within(() => {
+      cy.get('textarea').type('{selectAll}').type('{backspace}').type('{ job = "some_job" }', {
+        parseSpecialCharSequences: false,
+      });
+    });
+
+    cy.getByTestId(TestIds.ExecuteQueryButton).should('be.disabled');
+
+    cy.contains('Please select a namespace');
+  });
 });
diff --git a/web/locales/en/plugin__logging-view-plugin.json b/web/locales/en/plugin__logging-view-plugin.json
index ee0ede454..07728f91d 100644
--- a/web/locales/en/plugin__logging-view-plugin.json
+++ b/web/locales/en/plugin__logging-view-plugin.json
@@ -72,5 +72,6 @@
   "Start streaming": "Start streaming",
   "See related logs": "See related logs",
   "Aggregated Logs": "Aggregated Logs",
-  "Logs": "Logs"
+  "Logs": "Logs",
+  "Please select a namespace": "Please select a namespace"
 }
diff --git a/web/src/attribute-filters.tsx b/web/src/attribute-filters.tsx
index e7440c321..40189981f 100644
--- a/web/src/attribute-filters.tsx
+++ b/web/src/attribute-filters.tsx
@@ -113,11 +113,18 @@ export const availableDevConsoleAttributes = (namespace: string): AttributeList
     id: 'content',
     valueType: 'text',
   },
+  {
+    name: 'Namespaces',
+    label: 'kubernetes_namespace_name',
+    id: 'namespace',
+    options: resourceDataSource({ resource: 'namespaces' }),
+    valueType: 'checkbox-select',
+  },
   {
     name: 'Pods',
     label: 'kubernetes_pod_name',
     id: 'pod',
-    options: resourceDataSource({ resource: 'pods', namespace }),
+    options: resourceDataSource({ resource: 'pods' }),
     valueType: 'checkbox-select',
   },
   {
diff --git a/web/src/components/logs-query-input.tsx b/web/src/components/logs-query-input.tsx
index b37923e13..f3d454512 100644
--- a/web/src/components/logs-query-input.tsx
+++ b/web/src/components/logs-query-input.tsx
@@ -10,9 +10,17 @@ interface LogsQueryInputProps {
   value: string;
   onChange?: (expression: string) => void;
   onRun?: () => void;
+  isDisabled?: boolean;
+  invalidQueryErrorMessage?: string | null;
 }
 
-export const LogsQueryInput: React.FC<LogsQueryInputProps> = ({ value = '', onChange, onRun }) => {
+export const LogsQueryInput: React.FC<LogsQueryInputProps> = ({
+  value = '',
+  onChange,
+  onRun,
+  isDisabled,
+  invalidQueryErrorMessage,
+}) => {
   const { t } = useTranslation('plugin__logging-view-plugin');
 
   const [internalValue, setInternalValue] = React.useState(value);
@@ -39,16 +47,23 @@ export const LogsQueryInput: React.FC<LogsQueryInputProps> = ({ value = '', onCh
     onChange?.(text);
   };
 
+  const hasError =
+    !isValid || (invalidQueryErrorMessage !== undefined && invalidQueryErrorMessage !== null);
+
   return (
     <div className="co-logs-expression-input" data-test={TestIds.LogsQueryInput}>
       <Form className="co-logs-expression-input__form">
         <FormGroup
           type="string"
-          helperTextInvalid={`${t(
-            'Invalid log stream selector. Please select a namespace, pod or container as filter, or add a log stream selector like: ',
-          )} { log_type =~ ".+" } | json`}
+          helperTextInvalid={
+            !isValid
+              ? `${t(
+                  'Invalid log stream selector. Please select a namespace, pod or container as filter, or add a log stream selector like: ',
+                )} { log_type =~ ".+" } | json`
+              : invalidQueryErrorMessage
+          }
           fieldId="selection"
-          validated={!isValid ? 'error' : undefined}
+          validated={hasError ? 'error' : undefined}
         >
           <TextArea
             className="co-logs-expression-input__searchInput"
@@ -57,14 +72,14 @@ export const LogsQueryInput: React.FC<LogsQueryInputProps> = ({ value = '', onCh
             onChange={handleOnChange}
             onKeyDown={handleKeyDown}
             aria-label="LogQL Query"
-            validated={!isValid ? 'error' : undefined}
+            validated={hasError ? 'error' : undefined}
           />
         </FormGroup>
       </Form>
       {onRun && (
         <ExecuteQueryButton
           onClick={onRun}
-          isDisabled={value === undefined || value.length === 0}
+          isDisabled={value === undefined || value.length === 0 || isDisabled}
         />
       )}
     </div>
diff --git a/web/src/components/logs-toolbar.tsx b/web/src/components/logs-toolbar.tsx
index 860f13fce..f55f1f788 100644
--- a/web/src/components/logs-toolbar.tsx
+++ b/web/src/components/logs-toolbar.tsx
@@ -1,4 +1,5 @@
 import {
+  Alert,
   Select,
   SelectOption,
   SelectOptionObject,
@@ -29,6 +30,7 @@ interface LogsToolbarProps {
   query: string;
   onQueryChange?: (query: string) => void;
   onQueryRun?: () => void;
+  invalidQueryErrorMessage?: string | null;
   tenant?: string;
   onTenantSelect?: (tenant: string) => void;
   enableStreaming?: boolean;
@@ -59,6 +61,7 @@ export const LogsToolbar: React.FC<LogsToolbarProps> = ({
   query,
   onQueryChange,
   onQueryRun,
+  invalidQueryErrorMessage,
   tenant = 'application',
   onTenantSelect,
   onStreamingToggle,
@@ -177,9 +180,16 @@ export const LogsToolbar: React.FC<LogsToolbarProps> = ({
         </ToolbarGroup>
 
         {!isQueryShown && (
-          <ToolbarGroup>
-            <ExecuteQueryButton onClick={onQueryRun} isDisabled={isDisabled} />
-          </ToolbarGroup>
+          <>
+            <ToolbarGroup>
+              <ExecuteQueryButton onClick={onQueryRun} isDisabled={isDisabled} />
+            </ToolbarGroup>
+            {invalidQueryErrorMessage && (
+              <ToolbarGroup>
+                <Alert variant="danger" isInline isPlain title={invalidQueryErrorMessage} />
+              </ToolbarGroup>
+            )}
+          </>
         )}
 
         <Spacer />
@@ -201,7 +211,15 @@ export const LogsToolbar: React.FC<LogsToolbarProps> = ({
         )}
       </ToolbarContent>
 
-      {isQueryShown && <LogsQueryInput value={query} onRun={onQueryRun} onChange={onQueryChange} />}
+      {isQueryShown && (
+        <LogsQueryInput
+          value={query}
+          onRun={onQueryRun}
+          onChange={onQueryChange}
+          invalidQueryErrorMessage={invalidQueryErrorMessage}
+          isDisabled={isDisabled}
+        />
+      )}
     </Toolbar>
   );
 };
diff --git a/web/src/hooks/useLogs.ts b/web/src/hooks/useLogs.ts
index b5178700d..aed67d589 100644
--- a/web/src/hooks/useLogs.ts
+++ b/web/src/hooks/useLogs.ts
@@ -224,6 +224,10 @@ export const useLogs = (
   const currentTenant = React.useRef<string>(initialTenant);
   const currentTimeRange = React.useRef<TimeRange>(initialTimeRange);
   const currentTime = React.useRef<number>(Date.now());
+  const lastExecutionTime = React.useRef<{ logs?: number; histogram?: number }>({
+    logs: undefined,
+    histogram: undefined,
+  });
   const currentDirection = React.useRef<Direction>('backward');
   const logsAbort = React.useRef<() => void | undefined>();
   const histogramAbort = React.useRef<() => void | undefined>();
@@ -353,10 +357,16 @@ export const useLogs = (
       return;
     }
 
+    // Throttle requests
+    if (lastExecutionTime.current.logs && Date.now() - lastExecutionTime.current.logs < 50) {
+      return;
+    }
+
     try {
       currentQuery.current = query;
       currentTenant.current = tenant ?? currentTenant.current;
       currentTime.current = Date.now();
+      lastExecutionTime.current.logs = Date.now();
       currentTimeRange.current = timeRange ?? currentTimeRange.current;
       currentDirection.current = direction ?? currentDirection.current;
 
@@ -485,10 +495,19 @@ export const useLogs = (
       return;
     }
 
+    // Throttle histogram requests
+    if (
+      lastExecutionTime.current.histogram &&
+      Date.now() - lastExecutionTime.current.histogram < 50
+    ) {
+      return;
+    }
+
     try {
       currentQuery.current = query;
       currentTenant.current = tenant ?? currentTenant.current;
       currentTime.current = Date.now();
+      lastExecutionTime.current.histogram = Date.now();
       currentTimeRange.current = timeRange ?? currentTimeRange.current;
 
       // TODO split on multiple/parallel queries for long timespans and concat results
diff --git a/web/src/pages/logs-dev-page.tsx b/web/src/pages/logs-dev-page.tsx
index 127228b59..5af1e5cb5 100644
--- a/web/src/pages/logs-dev-page.tsx
+++ b/web/src/pages/logs-dev-page.tsx
@@ -1,6 +1,7 @@
 import { Button, Card, CardBody, Flex, Grid, PageSection, Tooltip } from '@patternfly/react-core';
 import { SyncAltIcon } from '@patternfly/react-icons';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import {
   availableAttributes,
@@ -8,8 +9,10 @@ import {
   filtersFromQuery,
   queryFromFilters,
 } from '../attribute-filters';
+import { CenteredContainer } from '../components/centered-container';
 import { Filters } from '../components/filters/filter.types';
 import { LogsHistogram } from '../components/logs-histogram';
+import { LogsMetrics } from '../components/logs-metrics';
 import { LogsTable } from '../components/logs-table';
 import { LogsToolbar } from '../components/logs-toolbar';
 import { RefreshIntervalDropdown } from '../components/refresh-interval-dropdown';
@@ -20,9 +23,6 @@ import { defaultQueryFromTenant, useURLState } from '../hooks/useURLState';
 import { Direction, isMatrixResult } from '../logs.types';
 import { TestIds } from '../test-ids';
 import { getInitialTenantFromNamespace } from '../value-utils';
-import { CenteredContainer } from '../components/centered-container';
-import { t } from 'i18next';
-import { LogsMetrics } from '../components/logs-metrics';
 
 /*
 This comment creates an entry in the translations catalogue for console extensions
@@ -36,6 +36,7 @@ interface LogsDevPageProps {
 }
 
 const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) => {
+  const { t } = useTranslation('plugin__logging-view-plugin');
   const { ns: namespaceFromParams } = useParams<{ ns: string }>();
   const namespace = namespaceFromParams || namespaceFromProps;
   const [isHistogramVisible, setIsHistogramVisible] = React.useState(false);
@@ -73,12 +74,12 @@ const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) =>
   } = useLogs();
 
   const handleToggleStreaming = () => {
-    toggleStreaming({ query, namespace });
+    toggleStreaming({ query });
   };
 
   const handleLoadMoreData = (lastTimestamp: number) => {
     if (!isLoadingMoreLogsData) {
-      getMoreLogs({ lastTimestamp, query, namespace });
+      getMoreLogs({ lastTimestamp, query });
     }
   };
 
@@ -89,14 +90,13 @@ const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) =>
   const runQuery = ({ queryToUse }: { queryToUse?: string } = {}) => {
     getLogs({
       query: queryToUse ?? query,
-      namespace,
       timeRange,
       direction,
       tenant,
     });
 
     if (isHistogramVisible) {
-      getHistogram({ query: queryToUse ?? query, namespace, timeRange, tenant });
+      getHistogram({ query: queryToUse ?? query, timeRange, tenant });
     }
   };
 
@@ -121,12 +121,19 @@ const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) =>
   };
 
   const updateQuery = (selectedFilters?: Filters, selectedTenant?: string): string => {
-    if (!selectedFilters || Object.keys(selectedFilters).length === 0) {
-      const defaultQuery = defaultQueryFromTenant(selectedTenant);
+    const hasNoSelectedfilters = !selectedFilters || Object.keys(selectedFilters).length === 0;
+
+    if (hasNoSelectedfilters) {
+      const updatedQuery = queryFromFilters({
+        existingQuery: defaultQueryFromTenant(selectedTenant),
+        filters: { namespace: new Set(namespace ? [namespace] : []) },
+        attributes: availableAttributes,
+        tenant: selectedTenant,
+      });
 
-      setQueryInURL(defaultQuery);
+      setQueryInURL(updatedQuery);
 
-      return defaultQuery;
+      return updatedQuery;
     } else {
       const updatedQuery = queryFromFilters({
         existingQuery: query,
@@ -152,9 +159,23 @@ const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) =>
     const queryToUse = updateQuery(filters, tenant);
 
     runQuery({ queryToUse });
-  }, [timeRange, isHistogramVisible, namespace, direction]);
+  }, [timeRange, isHistogramVisible, direction]);
+
+  React.useEffect(() => {
+    tenant = getInitialTenantFromNamespace(namespace);
+
+    const filtersWithNamespace = filters ?? {};
+
+    filtersWithNamespace['namespace'] = new Set(namespace ? [namespace] : []);
+    const queryToUse = updateQuery(filtersWithNamespace, tenant);
+
+    runQuery({ queryToUse });
+  }, [namespace]);
 
   const isQueryEmpty = query === '';
+  const isNamespaceFilterEmpty =
+    filters?.['namespace'] === undefined || filters['namespace'].size === 0;
+  const isRunQueryDisabled = isQueryEmpty || isNamespaceFilterEmpty;
 
   const resultIsMetric = isMatrixResult(logsData?.data);
 
@@ -171,16 +192,16 @@ const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) =>
             <TimeRangeDropdown
               value={timeRange}
               onChange={setTimeRangeInURL}
-              isDisabled={isQueryEmpty}
+              isDisabled={isRunQueryDisabled}
             />
-            <RefreshIntervalDropdown onRefresh={runQuery} isDisabled={isQueryEmpty} />
+            <RefreshIntervalDropdown onRefresh={runQuery} isDisabled={isRunQueryDisabled} />
             <Tooltip content={<div>Refresh</div>}>
               <Button
                 onClick={handleRefreshClick}
                 aria-label="Refresh"
                 variant="primary"
                 data-test={TestIds.SyncButton}
-                isDisabled={isQueryEmpty}
+                isDisabled={isRunQueryDisabled}
               >
                 <SyncAltIcon />
               </Button>
@@ -203,13 +224,16 @@ const LogsDevPage: React.FC<LogsDevPageProps> = ({ ns: namespaceFromProps }) =>
           query={query}
           onQueryChange={handleQueryChange}
           onQueryRun={runQuery}
+          invalidQueryErrorMessage={
+            isNamespaceFilterEmpty ? t('Please select a namespace') : undefined
+          }
           isStreaming={isStreaming}
           onStreamingToggle={handleToggleStreaming}
           enableStreaming={config.isStreamingEnabledInDefaultPage}
           showResources={areResourcesShown}
           onShowResourcesToggle={setShowResourcesInURL}
           enableTenantDropdown={false}
-          isDisabled={isQueryEmpty}
+          isDisabled={isRunQueryDisabled}
           attributeList={attributeList}
           filters={filters}
           onFiltersChange={handleFiltersChange}

From 82fbb8571f0e88ae171400c96aee303989f9a996 Mon Sep 17 00:00:00 2001
From: Gabriel Bernal <gbernal@redhat.com>
Date: Tue, 30 Jan 2024 11:45:19 +0100
Subject: [PATCH 2/2] use the openshift projects api for fetching dev console
 logs namespaces

---
 web/src/attribute-filters.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/src/attribute-filters.tsx b/web/src/attribute-filters.tsx
index 40189981f..b4916660e 100644
--- a/web/src/attribute-filters.tsx
+++ b/web/src/attribute-filters.tsx
@@ -26,6 +26,27 @@ type ResourceOptionMapper = (resource: K8sResource) => Option | Array<Option>;
 
 const resourceAbort: Record<string, null | (() => void)> = {};
 
+const projectsDataSource = () => async (): Promise<Array<{ option: string; value: string }>> => {
+  const { request, abort } = cancellableFetch<K8sResourceListResponse>(
+    `/api/kubernetes/apis/project.openshift.io/v1/projects`,
+  );
+
+  if (resourceAbort.projects) {
+    resourceAbort.projects();
+  }
+
+  resourceAbort.projects = abort;
+
+  const response = await request();
+
+  return response.items
+    .map((project) => ({
+      option: project?.metadata?.name ?? '',
+      value: project?.metadata?.name ?? '',
+    }))
+    .filter(({ value }) => notEmptyString(value));
+};
+
 const resourceDataSource =
   ({
     resource,
@@ -117,7 +138,7 @@ export const availableDevConsoleAttributes = (namespace: string): AttributeList
     name: 'Namespaces',
     label: 'kubernetes_namespace_name',
     id: 'namespace',
-    options: resourceDataSource({ resource: 'namespaces' }),
+    options: projectsDataSource(),
     valueType: 'checkbox-select',
   },
   {