fix custom traces filter bug, add default metric selection

Signed-off-by: Adam Tackett <[email protected]>

public/components/trace_analytics/components/common/plots/service_map.tsx

@@ -123,17 +123,6 @@ export function ServiceMap({
     );
   }, [filters, focusedService]);
 
-  const onChangeSelectable = (value: React.SetStateAction<Array<EuiSuperSelectOption<any>>>) => {
-    // if the change is changing for the first time then callback servicemap with metrics
-    if (selectableValue.length === 0 && value.length !== 0) {
-      if (includeMetricsCallback) {
-        includeMetricsCallback();
-      }
-    }
-    setIdSelected(value);
-    setSelectableValue(value);
-  };
-
   const metricOptions: Array<EuiSuperSelectOption<any>> = [
     {
       value: 'latency',
@@ -149,6 +138,19 @@ export function ServiceMap({
     },
   ];
 
+  // For the traces custom page
+  useEffect(() => {
+    if (!selectableValue || selectableValue.length === 0) {
+      // Set to the first option ("latency") and trigger the onChange function
+      const defaultValue = metricOptions[0].value;
+      setSelectableValue(defaultValue); // Update the state
+      setIdSelected(defaultValue); // Propagate the default to parent
+      if (includeMetricsCallback) {
+        includeMetricsCallback();
+      }
+    }
+  }, [selectableValue, setIdSelected]);
+
   const removeFilter = (field: string, value: string) => {
     if (!setFilters) return;
     const updatedFilters = filters.filter(
@@ -504,7 +506,10 @@ export function ServiceMap({
                   compressed
                   options={metricOptions}
                   valueOfSelected={selectableValue}
-                  onChange={(value) => onChangeSelectable(value)}
+                  onChange={(value) => {
+                    setSelectableValue(value);
+                    setIdSelected(value);
+                  }}
                 />
               </EuiFlexItem>
             )}

public/components/trace_analytics/components/traces/services_list.tsx

@@ -21,18 +21,40 @@ interface ServicesListProps {
   addFilter?: (filter: FilterType) => void;
   filteredService: string;
   setFilteredService: React.Dispatch<React.SetStateAction<string>>;
+  filters: FilterType[];
+  setFilters: (filters: FilterType[]) => void;
 }
 
 export const ServicesList = ({
   serviceMap,
   addFilter,
   filteredService,
   setFilteredService,
+  filters = [],
+  setFilters,
 }: ServicesListProps) => {
-  const [options, setOptions] = useState<Array<{ label: string }>>([]);
+  const [options, setOptions] = useState<Array<{ label: string; checked?: 'on' | undefined }>>([]);
+
+  const removeFilter = (field: string, value: string) => {
+    if (!setFilters) return;
+    const updatedFilters = filters.filter(
+      (filter) => !(filter.field === field && filter.value === value)
+    );
+    setFilters(updatedFilters);
+  };
 
   const nameColumnAction = (serviceName: string) => {
     if (!addFilter) return;
+
+    // Check if the service is already selected
+    if (filteredService === serviceName) {
+      // Remove the filter if the service is deselected
+      removeFilter('serviceName', filteredService);
+      setFilteredService(''); // Reset the selected service
+      return;
+    }
+
+    // Add the filter if a new service is selected
     addFilter({
       field: 'serviceName',
       operator: 'is',
@@ -58,14 +80,14 @@ export const ServicesList = ({
   );
 
   useEffect(() => {
+    // Update selectable options based on the current filtered service
     setOptions(
-      Object.keys(serviceMap).map((key) => {
-        return filteredService === key
-          ? { label: key, checked: 'on', bordered: false }
-          : { label: key, bordered: false };
-      })
+      Object.keys(serviceMap).map((key) => ({
+        label: key,
+        checked: filteredService === key ? 'on' : undefined,
+      }))
     );
-  }, [serviceMap]);
+  }, [serviceMap, filteredService]);
 
   return (
     <EuiPanel>
@@ -74,14 +96,26 @@ export const ServicesList = ({
       <EuiHorizontalRule margin="none" />
       <div style={{ height: '90%' }}>
         <EuiSelectable
-          aria-label="Basic example"
+          aria-label="Services List"
           height="full"
           searchable
           options={options}
           listProps={{ bordered: true }}
           onChange={(newOptions) => {
-            setOptions(newOptions);
-            nameColumnAction(newOptions.filter((option) => option.checked === 'on')[0].label);
+            const selectedOption = newOptions.find((option) => option.checked === 'on');
+
+            // Handle deselection
+            if (!selectedOption) {
+              nameColumnAction(filteredService);
+              setOptions(newOptions);
+              return;
+            }
+
+            // Handle selection
+            if (selectedOption) {
+              nameColumnAction(selectedOption.label);
+              setOptions(newOptions);
+            }
           }}
           singleSelection={true}
         >

public/components/trace_analytics/components/traces/traces_content.tsx

@@ -301,6 +301,8 @@ export function TracesContent(props: TracesProps) {
                 <EuiFlexItem grow={2}>
                   <ServicesList
                     addFilter={addFilter}
+                    filters={filters}
+                    setFilters={setFilters}
                     serviceMap={serviceMap}
                     filteredService={filteredService}
                     setFilteredService={setFilteredService}
@@ -310,6 +312,8 @@ export function TracesContent(props: TracesProps) {
                 <EuiFlexItem grow={8}>
                   <ServiceMap
                     addFilter={addFilter}
+                    filters={filters}
+                    setFilters={setFilters}
                     serviceMap={serviceMap}
                     idSelected={serviceMapIdSelected}
                     setIdSelected={setServiceMapIdSelected}