Na}{

File Content: `GroupBy.tsx`

import { uniq } from 'lodash';
import React from 'react';

import { SelectableValue } from '@grafana/data';
import { Icon, Label, MultiSelect } from '@grafana/ui';
import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';

interface Props {
  groups: AlertmanagerGroup[];
  groupBy: string[];
  onGroupingChange: (keys: string[]) => void;
}

export const GroupBy = ({ groups, groupBy, onGroupingChange }: Props) => {
  const labelKeyOptions = uniq(groups.flatMap((group) => group.alerts).flatMap(({ labels }) => Object.keys(labels)))
    .filter((label) => !(label.startsWith('__') && label.endsWith('__'))) // Filter out private labels
    .map<SelectableValue>((key) => ({
      label: key,
      value: key,
    }));

  return (
    <div data-testid={'group-by-container'}>
      <Label>Custom group by</Label>
      <MultiSelect
        aria-label={'group by label keys'}
        value={groupBy}
        placeholder="Group by"
        prefix={<Icon name={'tag-alt'} />}
        onChange={(items) => {
          onGroupingChange(items.map(({ value }) => value as string));
        }}
        options={labelKeyOptions}
        width={34}
      />
    </div>
  );
};

Name	Size	Permission
AlertDetails.tsx	3390 bytes	0644
AlertGroup.tsx	2765 bytes	0644
AlertGroupAlertsTable.tsx	2708 bytes	0644
AlertGroupFilter.tsx	2532 bytes	0644
AlertGroupHeader.tsx	1215 bytes	0644
AlertStateFilter.tsx	773 bytes	0644
GroupBy.tsx	1189 bytes	0644
MatcherFilter.test.tsx	1233 bytes	0644
MatcherFilter.tsx	2646 bytes	0644

File Content: GroupBy.tsx

File Content: `GroupBy.tsx`