The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
grafana/public/app/features/alerting/unified/components/AlertLabels.tsx

92 lines
2.5 KiB

import { css } from '@emotion/css';
import { chain } from 'lodash';
import pluralize from 'pluralize';
import { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, getTagColorsFromName, useStyles2 } from '@grafana/ui';
import { Trans, t } from 'app/core/internationalization';
import { isPrivateLabel } from '../utils/labels';
import { Label, LabelSize } from './Label';
interface Props {
labels: Record<string, string>;
commonLabels?: Record<string, string>;
size?: LabelSize;
Alerting: Central alert history part4 (#90088) * Implement EventDetails for expanded rows and pagination on the events list * Add test for getPanelDataForRule function * prettier * refactor EventState component * create interfaces for props * Add missing translations * Update some comments * Add plus button in alertrulename , to add it into the filter * Add plus button to add filters from the list labels and alert name * Add clear labels filter button * run prettier * fix RBAC checks * Update AlertLabels onLabelClick functionality * add limit=0 in useCombinedRule call * Add filter by state * remove plus button in labels * Fix state filter * Add filter by previous state * fix some errors after solving conflicts * Add comments and remove some type assertions * Update the number of transitions calculation to be for each instance * Add tests for state filters * remove type assertion * Address review comments * Update returnTo prop in alert list view url * Update translations * address review comments * prettier * update cursor to pointer * Address Deyan review comments * address review pr comments from Deyan * fix label styles * Visualize expanded row as a state graph and address some pr review comments * Add warning when limit of events is reached and rename onClickLabel * Update texts * Fix translations * Update some Labels in the expanded states visualization * move getPanelDataForRule to a separate file * Add header to the list of events * Move HistoryErrorMessage to a separate file * remove getPanelDataForRule function and test * add comment * fitler by instance label results shown inthe state chart * remove defaults.ini changes * fix having single event on time state chart --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
11 months ago
onClick?: (label: string, value: string) => void;
}
Alerting: Central alert history part4 (#90088) * Implement EventDetails for expanded rows and pagination on the events list * Add test for getPanelDataForRule function * prettier * refactor EventState component * create interfaces for props * Add missing translations * Update some comments * Add plus button in alertrulename , to add it into the filter * Add plus button to add filters from the list labels and alert name * Add clear labels filter button * run prettier * fix RBAC checks * Update AlertLabels onLabelClick functionality * add limit=0 in useCombinedRule call * Add filter by state * remove plus button in labels * Fix state filter * Add filter by previous state * fix some errors after solving conflicts * Add comments and remove some type assertions * Update the number of transitions calculation to be for each instance * Add tests for state filters * remove type assertion * Address review comments * Update returnTo prop in alert list view url * Update translations * address review comments * prettier * update cursor to pointer * Address Deyan review comments * address review pr comments from Deyan * fix label styles * Visualize expanded row as a state graph and address some pr review comments * Add warning when limit of events is reached and rename onClickLabel * Update texts * Fix translations * Update some Labels in the expanded states visualization * move getPanelDataForRule to a separate file * Add header to the list of events * Move HistoryErrorMessage to a separate file * remove getPanelDataForRule function and test * add comment * fitler by instance label results shown inthe state chart * remove defaults.ini changes * fix having single event on time state chart --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
11 months ago
export const AlertLabels = ({ labels, commonLabels = {}, size, onClick }: Props) => {
const styles = useStyles2(getStyles, size);
const [showCommonLabels, setShowCommonLabels] = useState(false);
const labelsToShow = chain(labels)
.toPairs()
.reject(isPrivateLabel)
.reject(([key]) => (showCommonLabels ? false : key in commonLabels))
.value();
const commonLabelsCount = Object.keys(commonLabels).length;
const hasCommonLabels = commonLabelsCount > 0;
const tooltip = t('alert-labels.button.show.tooltip', 'Show common labels');
return (
<div className={styles.wrapper} role="list" aria-label="Labels">
Alerting: Central alert history part4 (#90088) * Implement EventDetails for expanded rows and pagination on the events list * Add test for getPanelDataForRule function * prettier * refactor EventState component * create interfaces for props * Add missing translations * Update some comments * Add plus button in alertrulename , to add it into the filter * Add plus button to add filters from the list labels and alert name * Add clear labels filter button * run prettier * fix RBAC checks * Update AlertLabels onLabelClick functionality * add limit=0 in useCombinedRule call * Add filter by state * remove plus button in labels * Fix state filter * Add filter by previous state * fix some errors after solving conflicts * Add comments and remove some type assertions * Update the number of transitions calculation to be for each instance * Add tests for state filters * remove type assertion * Address review comments * Update returnTo prop in alert list view url * Update translations * address review comments * prettier * update cursor to pointer * Address Deyan review comments * address review pr comments from Deyan * fix label styles * Visualize expanded row as a state graph and address some pr review comments * Add warning when limit of events is reached and rename onClickLabel * Update texts * Fix translations * Update some Labels in the expanded states visualization * move getPanelDataForRule to a separate file * Add header to the list of events * Move HistoryErrorMessage to a separate file * remove getPanelDataForRule function and test * add comment * fitler by instance label results shown inthe state chart * remove defaults.ini changes * fix having single event on time state chart --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
11 months ago
{labelsToShow.map(([label, value]) => {
return (
<Label
key={label + value}
size={size}
label={label}
value={value}
color={getLabelColor(label)}
onClick={onClick}
/>
);
})}
{!showCommonLabels && hasCommonLabels && (
<Button
variant="secondary"
fill="text"
onClick={() => setShowCommonLabels(true)}
tooltip={tooltip}
tooltipPlacement="top"
size="sm"
>
+{commonLabelsCount} common {pluralize('label', commonLabelsCount)}
</Button>
)}
{showCommonLabels && hasCommonLabels && (
<Button
variant="secondary"
fill="text"
onClick={() => setShowCommonLabels(false)}
tooltipPlacement="top"
size="sm"
>
<Trans i18nKey="alert-labels.button.hide">Hide common labels</Trans>
</Button>
)}
</div>
);
};
function getLabelColor(input: string): string {
return getTagColorsFromName(input).color;
}
Alerting: Central alert history part4 (#90088) * Implement EventDetails for expanded rows and pagination on the events list * Add test for getPanelDataForRule function * prettier * refactor EventState component * create interfaces for props * Add missing translations * Update some comments * Add plus button in alertrulename , to add it into the filter * Add plus button to add filters from the list labels and alert name * Add clear labels filter button * run prettier * fix RBAC checks * Update AlertLabels onLabelClick functionality * add limit=0 in useCombinedRule call * Add filter by state * remove plus button in labels * Fix state filter * Add filter by previous state * fix some errors after solving conflicts * Add comments and remove some type assertions * Update the number of transitions calculation to be for each instance * Add tests for state filters * remove type assertion * Address review comments * Update returnTo prop in alert list view url * Update translations * address review comments * prettier * update cursor to pointer * Address Deyan review comments * address review pr comments from Deyan * fix label styles * Visualize expanded row as a state graph and address some pr review comments * Add warning when limit of events is reached and rename onClickLabel * Update texts * Fix translations * Update some Labels in the expanded states visualization * move getPanelDataForRule to a separate file * Add header to the list of events * Move HistoryErrorMessage to a separate file * remove getPanelDataForRule function and test * add comment * fitler by instance label results shown inthe state chart * remove defaults.ini changes * fix having single event on time state chart --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
11 months ago
const getStyles = (theme: GrafanaTheme2, size?: LabelSize) => {
return {
wrapper: css({
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
Alerting: Central alert history part4 (#90088) * Implement EventDetails for expanded rows and pagination on the events list * Add test for getPanelDataForRule function * prettier * refactor EventState component * create interfaces for props * Add missing translations * Update some comments * Add plus button in alertrulename , to add it into the filter * Add plus button to add filters from the list labels and alert name * Add clear labels filter button * run prettier * fix RBAC checks * Update AlertLabels onLabelClick functionality * add limit=0 in useCombinedRule call * Add filter by state * remove plus button in labels * Fix state filter * Add filter by previous state * fix some errors after solving conflicts * Add comments and remove some type assertions * Update the number of transitions calculation to be for each instance * Add tests for state filters * remove type assertion * Address review comments * Update returnTo prop in alert list view url * Update translations * address review comments * prettier * update cursor to pointer * Address Deyan review comments * address review pr comments from Deyan * fix label styles * Visualize expanded row as a state graph and address some pr review comments * Add warning when limit of events is reached and rename onClickLabel * Update texts * Fix translations * Update some Labels in the expanded states visualization * move getPanelDataForRule to a separate file * Add header to the list of events * Move HistoryErrorMessage to a separate file * remove getPanelDataForRule function and test * add comment * fitler by instance label results shown inthe state chart * remove defaults.ini changes * fix having single event on time state chart --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
11 months ago
gap: size === 'md' ? theme.spacing() : theme.spacing(0.5),
}),
};
};