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

<a href="https://linear.app/highlight/issue/HIG-4664/dashboards-grafana-should-support

dashboards / grafana should support grouping by multiple keys about highlight HOT 2 OPEN

Vadman97 commented on July 3, 2024

dashboards / grafana should support grouping by multiple keys

from highlight.

Comments (2)

linear commented on July 3, 2024

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

from highlight.

greptile-apps commented on July 3, 2024

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

Update State Management in GraphingEditor.tsx:
- Modify the state to handle multiple keys for grouping.
```
const [groupByKeys, setGroupByKeys] = useState<string[]>([]);
```

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>

Update Graph Input in onSave Function:

Modify the onSave function to include the updated groupByKeys.

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

Update Graph Component in Dashboard.tsx:
- Ensure the Graph component can handle multiple grouping keys.
```
<Graph
  ...
  groupByKeys={g.groupByKeys ?? undefined}
  ...
/>
```
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"`
  ...
}
```