IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

sort alert instance, "datasource" -> "data source" (#34724)

Browse Source
This commit is contained in:
Domas 2021-05-27 13:47:26 +03:00 committed by GitHub
parent c7b58fe186
commit 871e476e41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-runtime/src/components/DataSourcePicker.tsx
View File

@ -56,7 +56,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
static defaultProps: Partial<DataSourcePickerProps> = {
autoFocus: false,
openMenuOnFocus: false,
placeholder: 'Select datasource',
placeholder: 'Select data source',
};
state: DataSourcePickerState = {};

23
public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
View File

@ -1,8 +1,8 @@
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { AlertingRule } from 'app/types/unified-alerting';
import { Alert } from 'app/types/unified-alerting';
import { css, cx } from '@emotion/css';
import React, { FC, Fragment, useState } from 'react';
import React, { FC, Fragment, useMemo, useState } from 'react';
import { getAlertTableStyles } from '../../styles/table';
import { alertInstanceKey } from '../../utils/rules';
import { AlertLabels } from '../AlertLabels';
@ -10,8 +10,10 @@ import { CollapseToggle } from '../CollapseToggle';
import { AlertInstanceDetails } from './AlertInstanceDetails';
import { AlertStateTag } from './AlertStateTag';
type AlertWithKey = Alert & { key: string };
interface Props {
instances: AlertingRule['alerts'];
instances: Alert[];
}
export const AlertInstancesTable: FC<Props> = ({ instances }) => {
@ -20,6 +22,18 @@ export const AlertInstancesTable: FC<Props> = ({ instances }) => {
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
// add key & sort instance. API returns instances in random order, different every time.
const sortedInstances = useMemo(
(): AlertWithKey[] =>
instances
.map((instance) => ({
...instance,
key: alertInstanceKey(instance),
}))
.sort((a, b) => a.key.localeCompare(b.key)),
[instances]
);
const toggleExpandedState = (ruleKey: string) =>
setExpandedKeys(
expandedKeys.includes(ruleKey) ? expandedKeys.filter((key) => key !== ruleKey) : [...expandedKeys, ruleKey]
@ -42,8 +56,7 @@ export const AlertInstancesTable: FC<Props> = ({ instances }) => {
</tr>
</thead>
<tbody>
{instances.map((instance, idx) => {
const key = alertInstanceKey(instance);
{sortedInstances.map(({ key, ...instance }, idx) => {
const isExpanded = expandedKeys.includes(key);
// don't allow expanding if there's nothing to show