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

Grafana-UI: Editor UI components (#41136)

Browse Source 
* Grafana-UI: Update theme.spacing to support string value when called with just one arugment

This allows theme.spacing("auto") to be valid

* Grafana-UI: Support width="auto" for Select component

This allows for inline Selects that are sized based on their content,
rather than occupying block-width

* Add toOption for creating Select options to @grafana/data

* Add test util
This commit is contained in:
Josh Hunt
2021-11-01 11:06:28 +00:00
committed by GitHub
parent 7b15cd0ed2
commit 419c465edf
12 changed files with 53 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
View File

@@ -1,11 +1,10 @@
import React from 'react';
import { LegacyForms } from '@grafana/ui';
import { TemplateSrv } from '@grafana/runtime';
import { SelectableValue } from '@grafana/data';
import { SelectableValue, toOption } from '@grafana/data';
import CloudMonitoringDatasource from '../datasource';
import { AnnotationsHelp, LabelFilter, Metrics, Project, QueryEditorRow } from './';
import { toOption } from '../functions';
import { AnnotationTarget, EditorMode, MetricDescriptor, MetricKind } from '../types';
const { Input } = LegacyForms;

4
public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
View File

@@ -1,10 +1,10 @@
import React, { FunctionComponent, useCallback, useMemo } from 'react';
import { flatten } from 'lodash';
import { SelectableValue } from '@grafana/data';
import { SelectableValue, toOption } from '@grafana/data';
import { CustomControlProps } from '@grafana/ui/src/components/Select/types';
import { Button, HorizontalGroup, Select, VerticalGroup } from '@grafana/ui';
import { labelsToGroupedOptions, stringArrayToFilters, toOption } from '../functions';
import { labelsToGroupedOptions, stringArrayToFilters } from '../functions';
import { Filter } from '../types';
import { SELECT_WIDTH } from '../constants';
import { QueryEditorRow } from '.';

3
public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
View File

@@ -1,13 +1,12 @@
import React, { PureComponent } from 'react';
import { css } from '@emotion/css';
import { QueryEditorProps } from '@grafana/data';
import { QueryEditorProps, toOption } from '@grafana/data';
import { Button, Select } from '@grafana/ui';
import { MetricQueryEditor, SLOQueryEditor, QueryEditorRow } from './';
import { CloudMonitoringQuery, MetricQuery, QueryType, SLOQuery, EditorMode } from '../types';
import { SELECT_WIDTH, QUERY_TYPES } from '../constants';
import { defaultQuery } from './MetricQueryEditor';
import { defaultQuery as defaultSLOQuery } from './SLO/SLOQueryEditor';
import { toOption } from '../functions';
import CloudMonitoringDatasource from '../datasource';
export type Props = QueryEditorProps<CloudMonitoringDatasource, CloudMonitoringQuery>;

3
public/app/plugins/datasource/cloud-monitoring/functions.ts
View File

@@ -1,6 +1,5 @@
import { chunk, flatten, initial, startCase, uniqBy } from 'lodash';
import { ALIGNMENTS, AGGREGATIONS, SYSTEM_LABELS } from './constants';
import { SelectableValue } from '@grafana/data';
import CloudMonitoringDatasource from './datasource';
import { TemplateSrv, getTemplateSrv } from '@grafana/runtime';
import { MetricDescriptor, ValueTypes, MetricKind, AlignmentTypes, PreprocessorType, Filter } from './types';
@@ -118,8 +117,6 @@ export const stringArrayToFilters = (filterArray: string[]) =>
condition,
}));
export const toOption = (value: string) => ({ label: value, value } as SelectableValue<string>);
export const formatCloudMonitoringError = (error: any) => {
let message = error.statusText ?? '';
if (error.data && error.data.error) {