COO-1118: Show an actionable error message if the namespace filter is empty

web/locales/en/plugin__distributed-tracing-console-plugin.json

@@ -21,12 +21,12 @@
   "Trace": "Trace",
   "Tracing": "Tracing",
   "Limit traces": "Limit traces",
-  "No datapoints found.": "No datapoints found.",
   "Hide graph": "Hide graph",
   "Show graph": "Show graph",
   "Filter": "Filter",
   "Filter by namespace": "Filter by namespace",
   "This filter is based on the <1>k8s.namespace.name</1> resource attribute. To set this attribute, it is recommended to enable the <4>Kubernetes Attributes Processor</4> in your OpenTelemetry Collector pipeline.": "This filter is based on the <1>k8s.namespace.name</1> resource attribute. To set this attribute, it is recommended to enable the <4>Kubernetes Attributes Processor</4> in your OpenTelemetry Collector pipeline.",
+  "No results found. Please ensure that the <2>Kubernetes Attributes Processor</2><3></3>is enabled in your OpenTelemetry collector pipeline.": "No results found. Please ensure that the <2>Kubernetes Attributes Processor</2><3></3>is enabled in your OpenTelemetry collector pipeline.",
   "between {{min}} and {{max}}": "between {{min}} and {{max}}",
   "greater than {{min}}": "greater than {{min}}",
   "less than {{max}}": "less than {{max}}",

web/src/components/TypeaheadCheckboxSelect.tsx

@@ -16,6 +16,7 @@ import { TypeaheadSelectOption } from '@patternfly/react-templates';
 
 export interface TypeaheadCheckboxSelectProps {
   placeholder: string;
+  noResultsFoundText?: React.ReactNode;
   toggleWidth?: string;
   isCreatable?: boolean;
   style?: CSSProperties;
@@ -102,15 +103,15 @@ export function TypeaheadCheckboxSelect(props: TypeaheadCheckboxSelectProps) {
       newSelectOptions = [
         {
           isAriaDisabled: true,
-          children: `No results found`,
+          children: props.noResultsFoundText ?? `No results found`,
           value: NO_RESULTS,
           hasCheckbox: false,
         },
       ];
     }
 
     setSelectOptions(newSelectOptions);
-  }, [inputValue, initialSelectOptions, isOpen, props.isCreatable]);
+  }, [inputValue, initialSelectOptions, isOpen, props.isCreatable, props.noResultsFoundText]);
 
   const createItemId = (value: string) => `select-multi-typeahead-${value.replace(' ', '-')}`;
 

web/src/pages/TracesPage/Toolbar/AttributeFilters.tsx

@@ -148,6 +148,14 @@ export function AttributeFilters(props: AttributeFiltersProps) {
             <HelpIcon />
           </Popover>
         }
+        noResultsFoundText={
+          <Trans t={t}>
+            No results found. Please ensure that the{' '}
+            <Link to={k8sAttributesProcessorLink}>Kubernetes Attributes Processor</Link>
+            <br />
+            is enabled in your OpenTelemetry collector pipeline.
+          </Trans>
+        }
         show={activeFilter === namespaceFilter.value}
         options={namespaceOptions ?? []}
         value={filter.namespace}
@@ -186,14 +194,16 @@ interface TypeaheadStringAttributeFilterProps {
   filterName: string;
   label?: React.ReactNode;
   labelHelp?: React.ReactElement;
+  noResultsFoundText?: React.ReactNode;
   show?: boolean;
   options: TypeaheadSelectOption[];
   value: string[];
   setValue: (value: string[]) => void;
 }
 
 function TypeaheadStringAttributeFilter(props: TypeaheadStringAttributeFilterProps) {
-  const { filterName, label, labelHelp, show, options, value, setValue } = props;
+  const { filterName, label, labelHelp, noResultsFoundText, show, options, value, setValue } =
+    props;
 
   return (
     <ToolbarFilter
@@ -211,6 +221,7 @@ function TypeaheadStringAttributeFilter(props: TypeaheadStringAttributeFilterPro
             placeholder={`Filter by ${filterName}${
               value.length > 0 ? ' (' + value.length + ')' : ''
             }`}
+            noResultsFoundText={noResultsFoundText}
             options={options}
             value={value}
             setValue={setValue}