Fix cascader, typo

grafana · Oct 26, 2023 · e7005a5 · e7005a5
1 parent 1fd6692
commit e7005a5
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 160 deletions.
diff --git a/src/components/QueryEditor/AccountIdDropdown.tsx b/src/components/QueryEditor/AccountIdDropdown.tsx
@@ -9,7 +9,7 @@ import { EditorField } from '@grafana/experimental';
 type Props = {
   datasource: XrayDataSource;
   query: XrayQuery;
-  newFornStylingEnabled?: boolean;
+  newFormStylingEnabled?: boolean;
   range?: TimeRange;
   onChange: (items: string[]) => void;
 };
@@ -23,7 +23,7 @@ export const AccountIdDropdown = (props: Props) => {
     return null;
   }
 
-  return props.newFornStylingEnabled ? (
+  return props.newFormStylingEnabled ? (
     <EditorField label="AccountId" className="query-keyword" htmlFor="accountId">
       <MultiSelect
         id="accountId"

diff --git a/src/components/QueryEditor/QueryEditor.test.tsx b/src/components/QueryEditor/QueryEditor.test.tsx
@@ -130,7 +130,7 @@ describe('QueryEditor', () => {
           query: 'test query',
           queryType: type as XrayQueryType,
         });
-        expect(screen.getByDisplayValue(expected)).not.toBeNull();
+        expect(screen.getByText(expected)).not.toBeNull();
       });
 
       it('inits the query with query type', async () => {

diff --git a/src/components/QueryEditor/QueryEditorForm.tsx b/src/components/QueryEditor/QueryEditorForm.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { QueryEditorProps, ScopedVars } from '@grafana/data';
-import { MultiSelect, Select, Cascader } from '@grafana/ui';
+import { MultiSelect, Select, ButtonCascader } from '@grafana/ui';
 import { Group, Region, XrayJsonData, XrayQuery, XrayQueryType } from '../../types';
 import { useInitQuery } from './useInitQuery';
 import {
@@ -21,78 +21,56 @@ import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/experimental'
 import { QuerySection } from './QuerySection';
 import { XrayLinks } from './XrayLinks';
 
-function findOptionForQueryType(queryType: XrayQueryType, options: any = queryTypeOptions): QueryTypeOption | null {
+function findOptionForQueryType(queryType: XrayQueryType, options: any = queryTypeOptions): QueryTypeOption[] {
   for (const option of options) {
+    const selected: QueryTypeOption[] = [];
     if (option.queryType === queryType) {
-      return option;
+      selected.push(option);
+      return selected;
     }
-    if (option.items) {
-      const found = findOptionForQueryType(queryType, option.items);
-      if (found) {
-        return found;
+    if (option.children) {
+      const found = findOptionForQueryType(queryType, option.children);
+      if (found.length) {
+        selected.push(option, ...found);
+        return selected;
       }
     }
   }
-  return null;
+  return [];
 }
 
 /**
  * We do some mapping of the actual queryTypes to options user can select. Mainly don't want user to choose
  * between trace list and single trace and we detect that based on query. So trace list option returns single trace
  * if query contains single traceID.
  */
-export function queryTypeToQueryTypeOptions(queryType?: XrayQueryType): QueryTypeOption | null {
+function queryTypeToQueryTypeOptions(queryType?: XrayQueryType): QueryTypeOption[] {
   if (!queryType || queryType === XrayQueryType.getTimeSeriesServiceStatistics) {
-    return traceStatisticsOption;
+    return [traceStatisticsOption];
   }
 
   if (queryType === XrayQueryType.getTrace || queryType === XrayQueryType.getTraceSummaries) {
-    return traceListOption;
+    return [traceListOption];
   }
 
   if (queryType === XrayQueryType.getInsights) {
-    return insightsOption;
+    return [insightsOption];
   }
 
   return findOptionForQueryType(queryType);
 }
-// recursively search for the selected option in cascade option's item or item.items
-export function findQueryTypeOption(options: QueryTypeOption[], selected: string): QueryTypeOption | undefined {
-  for (const option of options) {
-    // Check if the current option's value matches the selected value
-    if (option.value === selected) {
-      return option;
-    }
-
-    // If no match was found at the current level, check items if they exist
-    if (option.items) {
-      const result = findQueryTypeOption(option.items, selected);
-      if (result) {
-        return result;
-      }
-    }
-  }
 
-  // If no match was found in the current array or its items, return undefined
-  return undefined;
-}
-
-export function queryTypeOptionToQueryType(
-  selected: string,
-  query: string,
-  scopedVars?: ScopedVars
-): XrayQueryType | undefined {
-  if (selected === traceListOption.value) {
+export function queryTypeOptionToQueryType(selected: string[], query: string, scopedVars?: ScopedVars): XrayQueryType {
+  if (selected[0] === traceListOption.value) {
     const resolvedQuery = getTemplateSrv().replace(query, scopedVars);
     const isTraceIdQuery = /^\d-\w{8}-\w{24}$/.test(resolvedQuery.trim());
     return isTraceIdQuery ? XrayQueryType.getTrace : XrayQueryType.getTraceSummaries;
   } else {
-    const foundItem = findQueryTypeOption(queryTypeOptions, selected);
-    if (!foundItem) {
-      console.log('item could not be found in the options');
+    let found: any = undefined;
+    for (const path of selected) {
+      found = (found?.children ?? queryTypeOptions).find((option: QueryTypeOption) => option.value === path);
     }
-    console.log(JSON.stringify(foundItem, null, 2));
-    return foundItem?.queryType ?? undefined;
+    return found.queryType;
   }
 }
 
@@ -128,28 +106,31 @@ export function QueryEditorForm({
   const allRegions = [{ label: 'default', value: 'default', text: 'default' }, ...regions];
   useInitQuery(query, onChange, groups, allRegions, datasource);
 
-  const selectedOption = queryTypeToQueryTypeOptions(query.queryType);
-  const allGroups = selectedOption === insightsOption ? [dummyAllGroup, ...groups] : groups;
+  const selectedOptions = queryTypeToQueryTypeOptions(query.queryType);
+
+  const allGroups = selectedOptions[0] === insightsOption ? [dummyAllGroup, ...groups] : groups;
   const styles = getStyles();
 
   return (
     <>
       <EditorRow>
         <EditorFieldGroup>
           <EditorField label="Query Type" className={`query-keyword ${styles.formFieldStyles}`}>
-            <Cascader
-              initialValue={selectedOption?.value}
+            <ButtonCascader
+              variant="secondary"
+              value={selectedOptions.map((option) => option.value)}
               options={queryTypeOptions}
-              changeOnSelect={false}
-              onSelect={(value: string) => {
+              onChange={(value) => {
                 const newQueryType = queryTypeOptionToQueryType(value, query.query || '', data?.request?.scopedVars);
                 onChange({
                   ...query,
                   queryType: newQueryType,
                   columns: newQueryType === XrayQueryType.getTimeSeriesServiceStatistics ? ['all'] : undefined,
                 } as any);
               }}
-            />
+            >
+              {selectedOptions[selectedOptions.length - 1].label}
+            </ButtonCascader>
           </EditorField>
           <EditorField label="Region" className={`query-keyword ${styles.formFieldStyles}`} htmlFor="region">
             <Select
@@ -185,10 +166,10 @@ export function QueryEditorForm({
               }}
             />
           </EditorField>
-          {serviceMapOption === selectedOption && (
+          {[serviceMapOption].includes(selectedOptions[0]) && (
             <AccountIdDropdown
               datasource={datasource}
-              newFornStylingEnabled={true}
+              newFormStylingEnabled={true}
               query={query}
               range={range}
               onChange={(accountIds) =>
@@ -199,7 +180,7 @@ export function QueryEditorForm({
               }
             />
           )}
-          {selectedOption === insightsOption && (
+          {selectedOptions[0] === insightsOption && (
             <EditorField label="State" className={`query-keyword ${styles.formFieldStyles}`} htmlFor="queryState">
               <Select
                 id="queryState"
@@ -214,7 +195,7 @@ export function QueryEditorForm({
               />
             </EditorField>
           )}
-          {selectedOption === traceStatisticsOption && (
+          {selectedOptions[0] === traceStatisticsOption && (
             <EditorField
               label="Resolution"
               className={`query-keyword ${styles.formFieldStyles}`}
@@ -237,19 +218,19 @@ export function QueryEditorForm({
           <XrayLinks datasource={datasource} query={query} range={range} />
         </EditorFieldGroup>
       </EditorRow>
-      {selectedOption && ![insightsOption, serviceMapOption].includes(selectedOption) && (
+      {![insightsOption, serviceMapOption].includes(selectedOptions[0]) && (
         <EditorRow>
           <QuerySection
             query={query}
             datasource={datasource}
             onChange={onChange}
             onRunQuery={onRunQuery}
-            selectedOption={selectedOption}
+            selectedOptions={selectedOptions}
           />
         </EditorRow>
       )}
 
-      {selectedOption === traceStatisticsOption && (
+      {selectedOptions[0] === traceStatisticsOption && (
         <EditorRow>
           <EditorFieldGroup>
             <EditorField

diff --git a/src/components/QueryEditor/QueryEditorFormOld.tsx b/src/components/QueryEditor/QueryEditorFormOld.tsx
@@ -9,7 +9,7 @@ import {
   dummyAllGroup,
   insightsOption,
   QueryTypeOption,
-  queryTypeOptionsOld,
+  queryTypeOptions,
   serviceMapOption,
   traceListOption,
   traceStatisticsOption,
@@ -20,7 +20,7 @@ import { AccountIdDropdown } from './AccountIdDropdown';
 import { QuerySectionOld } from './QuerySectionOld';
 import { XrayLinksOld } from './XrayLinksOld';
 
-function findOptionForQueryType(queryType: XrayQueryType, options: any = queryTypeOptionsOld): QueryTypeOption[] {
+function findOptionForQueryType(queryType: XrayQueryType, options: any = queryTypeOptions): QueryTypeOption[] {
   for (const option of options) {
     const selected: QueryTypeOption[] = [];
     if (option.queryType === queryType) {
@@ -67,7 +67,7 @@ export function queryTypeOptionToQueryType(selected: string[], query: string, sc
   } else {
     let found: any = undefined;
     for (const path of selected) {
-      found = (found?.children ?? queryTypeOptionsOld).find((option: QueryTypeOption) => option.value === path);
+      found = (found?.children ?? queryTypeOptions).find((option: QueryTypeOption) => option.value === path);
     }
     return found.queryType;
   }
@@ -146,7 +146,7 @@ export function QueryEditorFormOld({
           </InlineFormLabel>
           <ButtonCascader
             value={selectedOptions.map((option) => option.value)}
-            options={queryTypeOptionsOld}
+            options={queryTypeOptions}
             onChange={(value) => {
               const newQueryType = queryTypeOptionToQueryType(value, query.query || '', data?.request?.scopedVars);
               onChange({

diff --git a/src/components/QueryEditor/QuerySection.tsx b/src/components/QueryEditor/QuerySection.tsx
@@ -22,10 +22,10 @@ type Props = {
   datasource: XrayDataSource;
   onChange: (value: XrayQuery) => void;
   onRunQuery: () => void;
-  selectedOption: QueryTypeOption;
+  selectedOptions: QueryTypeOption[];
 };
 export function QuerySection(props: Props) {
-  const { datasource, query, onRunQuery, onChange, selectedOption } = props;
+  const { datasource, query, onRunQuery, onChange, selectedOptions } = props;
 
   const onRunQueryLocal = () => {
     onChange(query);
@@ -63,7 +63,10 @@ export function QuerySection(props: Props) {
         onChange={(e) => {
           onChange({
             ...query,
-            queryType: queryTypeOptionToQueryType(selectedOption.value, e.query),
+            queryType: queryTypeOptionToQueryType(
+              selectedOptions.map((option) => option.value),
+              e.query
+            ),
             query: e.query,
           });
         }}

diff --git a/src/components/QueryEditor/constants.ts b/src/components/QueryEditor/constants.ts
@@ -25,7 +25,7 @@ export const traceStatisticsOption: QueryTypeOption = {
   queryType: XrayQueryType.getTimeSeriesServiceStatistics,
 };
 
-export const queryTypeOptionsOld: QueryTypeOption[] = [
+export const queryTypeOptions: QueryTypeOption[] = [
   traceListOption,
   traceStatisticsOption,
   insightsOption,
@@ -117,98 +117,6 @@ export const queryTypeOptionsOld: QueryTypeOption[] = [
   serviceMapOption,
 ];
 
-export const queryTypeOptions: QueryTypeOption[] = [
-  traceListOption,
-  traceStatisticsOption,
-  insightsOption,
-  {
-    label: 'Trace Analytics',
-    value: 'traceAnalytics',
-    items: [
-      {
-        value: 'rootCause',
-        label: 'Root Cause',
-        items: [
-          {
-            value: 'responseTime',
-            label: 'Response Time',
-            items: [
-              {
-                value: 'rootCauseService',
-                label: 'Root Cause',
-                queryType: XrayQueryType.getAnalyticsRootCauseResponseTimeService,
-              } as QueryTypeOption,
-              {
-                value: 'path',
-                label: 'Path',
-                queryType: XrayQueryType.getAnalyticsRootCauseResponseTimePath,
-              },
-            ],
-          },
-          {
-            value: 'error',
-            label: 'Error',
-            items: [
-              {
-                value: 'rootCauseService',
-                label: 'Root Cause',
-                queryType: XrayQueryType.getAnalyticsRootCauseErrorService,
-              },
-              {
-                value: 'path',
-                label: 'Path',
-                queryType: XrayQueryType.getAnalyticsRootCauseErrorPath,
-              },
-              {
-                value: 'message',
-                label: 'Error Message',
-                queryType: XrayQueryType.getAnalyticsRootCauseErrorMessage,
-              },
-            ],
-          },
-          {
-            value: 'fault',
-            label: 'Fault',
-            items: [
-              {
-                value: 'rootCauseService',
-                label: 'Root Cause',
-                queryType: XrayQueryType.getAnalyticsRootCauseFaultService,
-              },
-              {
-                value: 'path',
-                label: 'Path',
-                queryType: XrayQueryType.getAnalyticsRootCauseFaultPath,
-              },
-              {
-                value: 'message',
-                label: 'Error Message',
-                queryType: XrayQueryType.getAnalyticsRootCauseFaultMessage,
-              },
-            ],
-          },
-        ],
-      },
-      {
-        value: 'user',
-        label: 'End user impact',
-        queryType: XrayQueryType.getAnalyticsUser,
-      } as QueryTypeOption,
-      {
-        value: 'url',
-        label: 'URL',
-        queryType: XrayQueryType.getAnalyticsUrl,
-      },
-      {
-        value: 'statusCode',
-        label: 'HTTP status code',
-        queryType: XrayQueryType.getAnalyticsStatusCode,
-      },
-    ],
-  },
-  serviceMapOption,
-];
-
 export const columnNames: { [key: string]: string } = {
   'ErrorStatistics.ThrottleCount': 'Throttle Count',
   'ErrorStatistics.TotalCount': 'Error Count',