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

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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 4 deletions
Show Stats 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 { startCase, uniqBy } from 'lodash';
import { Select } from '@grafana/ui';
import { Select, useTheme2, getSelectStyles, useStyles2 } from '@grafana/ui';
import { TemplateSrv } from '@grafana/runtime';
import { SelectableValue } from '@grafana/data';
import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { QueryEditorRow, QueryEditorField } from '.';
import CloudMonitoringDatasource from '../datasource';
import { INNER_LABEL_WIDTH, LABEL_WIDTH, SELECT_WIDTH } from '../constants';
import { MetricDescriptor } from '../types';
import { css } from '@emotion/css';
export interface Props {
onChange: (metricDescriptor: MetricDescriptor) => void;
@ -39,6 +40,11 @@ export function Metrics(props: Props) {
projectName: null,
});
const theme = useTheme2();
const selectStyles = getSelectStyles(theme);
const customStyle = useStyles2(getStyles);
const { services, service, metrics, metricDescriptors } = state;
const { metricType, templateVariableOptions, projectName, templateSrv, datasource, onChange, children } = props;
@ -55,13 +61,21 @@ export function Metrics(props: Props) {
if (!selectedMetricDescriptor) {
return [];
}
const metricsByService = metricDescriptors
.filter((m) => m.service === selectedMetricDescriptor.service)
.map((m) => ({
service: m.service,
value: m.type,
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;
};
@ -84,7 +98,7 @@ export function Metrics(props: Props) {
}
};
loadMetricDescriptors();
}, [datasource, getSelectedMetricDescriptor, metricType, projectName]);
}, [datasource, getSelectedMetricDescriptor, metricType, projectName, customStyle, selectStyles.optionDescription]);
const onServiceChange = ({ value: service }: any) => {
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};
`;