dashboards / grafana should support grouping by multiple keys

[Vadman97]

backend supports this already, so we just need to make the UI allow supporting multiple keys

[linear]

HIG-4664 dashboards / grafana should support grouping by multiple keys

[greptile-apps]

To support grouping by multiple keys in the UI, follow these steps:

1. Update State Management in GraphingEditor.tsx:

   • Modify the state to handle multiple keys for grouping.

   const [groupByKeys, setGroupByKeys] = useState<string[]>([]);

2. Update LabeledRow Component for Group By:

   • Update the LabeledRow component to allow multiple selections for grouping keys.

   <LabeledRow
     label="Group by"
     name="groupBy"
     enabled={groupByEnabled}
     setEnabled={setGroupByEnabled}
     tooltip="Categorical fields for grouping results into separate series."
   >
     <Combobox
       options={allKeys}
       selection={groupByKeys}
       setSelection={setGroupByKeys}
       setQuery={setKeysQuery}
       label="groupBy"
       multiple
     />
   </LabeledRow>

3. Update Graph Input in onSave Function:

   • Modify the onSave function to include the updated groupByKeys.

   const graphInput: GraphInput = {
     ...,
     groupByKeys: groupByEnabled ? groupByKeys : null,
     ...
   };

4. Update Graph Component in Dashboard.tsx:

   • Ensure the Graph component can handle multiple grouping keys.

   <Graph
     ...
     groupByKeys={g.groupByKeys ?? undefined}
     ...
   />

5. Update Graph Schema in model.go (if necessary):

   • Ensure the Graph struct in the backend model supports multiple grouping keys.

   type Graph struct {
     ...
     GroupByKeys []string `json:"groupByKeys"`
     ...
   }

References

/frontend/src/pages/Graphing/GraphingEditor.tsx
/frontend/src/pages/Graphing/Dashboard.tsx
/frontend/src/pages/Graphing
/backend/model/model.go

Ask Greptile