opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-23 07:33:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cloud Monitoring: Adds metric type to Metric drop down options (#43268)

Browse Source 
* Fixes Google Cloud Monitoring Deduplication

Bug: #42931

* Use useStyles instead of stylesFactory
This commit is contained in:
Calle Gustafsson
2021-12-27 08:59:04 +01:00
committed by GitHub
parent 169d39f8e4
commit c3eb1ffe85
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
View File

@ -1,13 +1,14 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { startCase, uniqBy } from 'lodash'; import { startCase, uniqBy } from 'lodash';
import { Select } from '@grafana/ui'; import { Select, useTheme2, getSelectStyles, useStyles2 } from '@grafana/ui';
import { TemplateSrv } from '@grafana/runtime'; import { TemplateSrv } from '@grafana/runtime';
import { SelectableValue } from '@grafana/data'; import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { QueryEditorRow, QueryEditorField } from '.'; import { QueryEditorRow, QueryEditorField } from '.';
import CloudMonitoringDatasource from '../datasource'; import CloudMonitoringDatasource from '../datasource';
import { INNER_LABEL_WIDTH, LABEL_WIDTH, SELECT_WIDTH } from '../constants'; import { INNER_LABEL_WIDTH, LABEL_WIDTH, SELECT_WIDTH } from '../constants';
import { MetricDescriptor } from '../types'; import { MetricDescriptor } from '../types';
import { css } from '@emotion/css';
export interface Props { export interface Props {
onChange: (metricDescriptor: MetricDescriptor) => void; onChange: (metricDescriptor: MetricDescriptor) => void;
@ -39,6 +40,11 @@ export function Metrics(props: Props) {
projectName: null, projectName: null,
}); });
const theme = useTheme2();
const selectStyles = getSelectStyles(theme);
const customStyle = useStyles2(getStyles);
const { services, service, metrics, metricDescriptors } = state; const { services, service, metrics, metricDescriptors } = state;
const { metricType, templateVariableOptions, projectName, templateSrv, datasource, onChange, children } = props; const { metricType, templateVariableOptions, projectName, templateSrv, datasource, onChange, children } = props;
@ -55,13 +61,21 @@ export function Metrics(props: Props) {
if (!selectedMetricDescriptor) { if (!selectedMetricDescriptor) {
return []; return [];
} }
const metricsByService = metricDescriptors const metricsByService = metricDescriptors
.filter((m) => m.service === selectedMetricDescriptor.service) .filter((m) => m.service === selectedMetricDescriptor.service)
.map((m) => ({ .map((m) => ({
service: m.service, service: m.service,
value: m.type, value: m.type,
label: m.displayName, label: m.displayName,
description: m.description, component: function optionComponent() {
return (
<div>
<div className={customStyle}>{m.type}</div>
<div className={selectStyles.optionDescription}>{m.description}</div>
</div>
);
},
})); }));
return metricsByService; return metricsByService;
}; };
@ -84,7 +98,7 @@ export function Metrics(props: Props) {
} }
}; };
loadMetricDescriptors(); loadMetricDescriptors();
}, [datasource, getSelectedMetricDescriptor, metricType, projectName]); }, [datasource, getSelectedMetricDescriptor, metricType, projectName, customStyle, selectStyles.optionDescription]);
const onServiceChange = ({ value: service }: any) => { const onServiceChange = ({ value: service }: any) => {
const metrics = metricDescriptors const metrics = metricDescriptors
@ -159,3 +173,10 @@ export function Metrics(props: Props) {
</> </>
); );
} }
const getStyles = (theme: GrafanaTheme2) => css`
label: grafana-select-option-description;
font-weight: normal;
font-style: italic;
color: ${theme.colors.text.secondary};
`;