From bb462d8b12a27676ddbc714ac7b0cf0c2a2676a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= Date: Mon, 16 Aug 2021 12:34:57 +0200 Subject: [PATCH] Section -> SegmentSection --- .../src/components/Section/Section.tsx | 25 -------------- .../src/components/Section/index.ts | 2 -- .../src/components/Segment/Segment.story.tsx | 6 ++-- .../components/Segment/SegmentAsync.story.tsx | 6 ++-- .../components/Segment/SegmentInput.story.tsx | 4 +-- .../src/components/Segment/SegmentSection.tsx | 29 ++++++++++++++++ .../SegmentSectionFill.tsx} | 2 +- .../SegmentSectionLabel.tsx} | 2 +- .../src/components/Segment/index.ts | 2 ++ packages/grafana-ui/src/components/index.ts | 3 +- .../graphite/components/FunctionsSection.tsx | 6 ++-- .../graphite/components/SeriesSection.tsx | 6 ++-- .../VisualInfluxQLEditor/Editor.tsx | 34 +++++++++---------- 13 files changed, 65 insertions(+), 62 deletions(-) delete mode 100644 packages/grafana-ui/src/components/Section/Section.tsx delete mode 100644 packages/grafana-ui/src/components/Section/index.ts create mode 100644 packages/grafana-ui/src/components/Segment/SegmentSection.tsx rename packages/grafana-ui/src/components/{Section/SectionFill.tsx => Segment/SegmentSectionFill.tsx} (79%) rename packages/grafana-ui/src/components/{Section/SectionLabel.tsx => Segment/SegmentSectionLabel.tsx} (62%) diff --git a/packages/grafana-ui/src/components/Section/Section.tsx b/packages/grafana-ui/src/components/Section/Section.tsx deleted file mode 100644 index ceb9720fca4..00000000000 --- a/packages/grafana-ui/src/components/Section/Section.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { SectionFill } from './SectionFill'; -import { SectionLabel } from './SectionLabel'; - -/** - * @alpha - */ -export const Section = ({ - label, - children, - fill, -}: { - label: string; - children: React.ReactNode; - inline?: boolean; - fill?: boolean; -}) => ( -
-
- - {children} -
- {fill && } -
-); diff --git a/packages/grafana-ui/src/components/Section/index.ts b/packages/grafana-ui/src/components/Section/index.ts deleted file mode 100644 index 7c1a1418086..00000000000 --- a/packages/grafana-ui/src/components/Section/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Section } from './Section'; -export { SectionLabel } from './SectionLabel'; diff --git a/packages/grafana-ui/src/components/Segment/Segment.story.tsx b/packages/grafana-ui/src/components/Segment/Segment.story.tsx index f7fe431501a..ab629544ce8 100644 --- a/packages/grafana-ui/src/components/Segment/Segment.story.tsx +++ b/packages/grafana-ui/src/components/Segment/Segment.story.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { action } from '@storybook/addon-actions'; -import { Segment, Icon, Section } from '@grafana/ui'; +import { Segment, Icon, SegmentSection } from '@grafana/ui'; const AddButton = ( @@ -17,10 +17,10 @@ const groupedOptions = [ const SegmentFrame = ({ options, children }: any) => ( <> -
+ {children} action('New value added')(value)} options={options} /> -
+ ); diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx index cec8f3a542d..0c720b7350c 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { AsyncState } from 'react-use/lib/useAsync'; import { action } from '@storybook/addon-actions'; import { SelectableValue } from '@grafana/data'; -import { SegmentAsync, Icon, Section } from '@grafana/ui'; +import { SegmentAsync, Icon, SegmentSection } from '@grafana/ui'; const AddButton = ( @@ -21,14 +21,14 @@ const loadOptionsErr = (): Promise>> => const SegmentFrame = ({ loadOptions, children }: any) => ( <> -
+ {children} action('New value added')(value)} loadOptions={() => loadOptions(options)} /> -
+ ); diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx index 491eb3197b0..a89caff94f3 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { action } from '@storybook/addon-actions'; -import { SegmentInput, Icon, Section } from '@grafana/ui'; +import { SegmentInput, Icon, SegmentSection } from '@grafana/ui'; const SegmentFrame = ({ children }: any) => ( <> -
{children}
+ {children} ); diff --git a/packages/grafana-ui/src/components/Segment/SegmentSection.tsx b/packages/grafana-ui/src/components/Segment/SegmentSection.tsx new file mode 100644 index 00000000000..8a53f110953 --- /dev/null +++ b/packages/grafana-ui/src/components/Segment/SegmentSection.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { SegmentSectionFill } from './SegmentSectionFill'; +import { SegmentSectionLabel } from './SegmentSectionLabel'; + +/** + * Horizontal section for editor components. + * + * @alpha + */ +export const SegmentSection = ({ + label, + children, + fill, +}: { + // Name of the section + label: string; + // List of components in the section + children: React.ReactNode; + // Fill the space at the end + fill?: boolean; +}) => ( +
+
+ + {children} +
+ {fill && } +
+); diff --git a/packages/grafana-ui/src/components/Section/SectionFill.tsx b/packages/grafana-ui/src/components/Segment/SegmentSectionFill.tsx similarity index 79% rename from packages/grafana-ui/src/components/Section/SectionFill.tsx rename to packages/grafana-ui/src/components/Segment/SegmentSectionFill.tsx index 477f4bf83c8..63f945b2dd2 100644 --- a/packages/grafana-ui/src/components/Section/SectionFill.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentSectionFill.tsx @@ -3,7 +3,7 @@ import React from 'react'; /** * @alpha */ -export const SectionFill = () => ( +export const SegmentSectionFill = () => (
diff --git a/packages/grafana-ui/src/components/Section/SectionLabel.tsx b/packages/grafana-ui/src/components/Segment/SegmentSectionLabel.tsx similarity index 62% rename from packages/grafana-ui/src/components/Section/SectionLabel.tsx rename to packages/grafana-ui/src/components/Segment/SegmentSectionLabel.tsx index 90cae09bc66..2606e85429b 100644 --- a/packages/grafana-ui/src/components/Section/SectionLabel.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentSectionLabel.tsx @@ -4,6 +4,6 @@ import { cx } from '@emotion/css'; /** * @alpha */ -export const SectionLabel = ({ name, className }: { name: string; className?: string }) => ( +export const SegmentSectionLabel = ({ name, className }: { name: string; className?: string }) => ( ); diff --git a/packages/grafana-ui/src/components/Segment/index.ts b/packages/grafana-ui/src/components/Segment/index.ts index 040d96f3612..6c0f404075c 100644 --- a/packages/grafana-ui/src/components/Segment/index.ts +++ b/packages/grafana-ui/src/components/Segment/index.ts @@ -2,5 +2,7 @@ export { Segment } from './Segment'; export { SegmentAsync } from './SegmentAsync'; export { SegmentSelect } from './SegmentSelect'; export { SegmentInput } from './SegmentInput'; +export { SegmentSection } from './SegmentSection'; +export { SegmentSectionLabel } from './SegmentSectionLabel'; export { SegmentProps } from './types'; export { useExpandableLabel } from './useExpandableLabel'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 26a1d8d760b..b5b17c35e1e 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -152,8 +152,7 @@ export { CertificationKey } from './DataSourceSettings/CertificationKey'; export { Spinner } from './Spinner/Spinner'; export { FadeTransition } from './transitions/FadeTransition'; export { SlideOutTransition } from './transitions/SlideOutTransition'; -export { Segment, SegmentAsync, SegmentInput, SegmentSelect } from './Segment/'; -export { Section, SectionLabel } from './Section/'; +export { Segment, SegmentAsync, SegmentInput, SegmentSelect, SegmentSection, SegmentSectionLabel } from './Segment/'; export { Drawer } from './Drawer/Drawer'; export { Slider } from './Slider/Slider'; export { RangeSlider } from './Slider/RangeSlider'; diff --git a/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx b/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx index a12a836dc13..81cce8c702a 100644 --- a/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx +++ b/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { FuncDefs, FuncInstance } from '../gfunc'; import { GraphiteFunctionEditor } from './GraphiteFunctionEditor'; import { AddGraphiteFunction } from './AddGraphiteFunction'; -import { Section } from '@grafana/ui'; +import { SegmentSection } from '@grafana/ui'; type Props = { functions: FuncInstance[]; @@ -11,11 +11,11 @@ type Props = { export function FunctionsSection({ functions = [], funcDefs }: Props) { return ( -
+ {functions.map((func: FuncInstance, index: number) => { return !func.hidden && ; })} -
+ ); } diff --git a/public/app/plugins/datasource/graphite/components/SeriesSection.tsx b/public/app/plugins/datasource/graphite/components/SeriesSection.tsx index 3908cf905bc..7ec29a4a3d4 100644 --- a/public/app/plugins/datasource/graphite/components/SeriesSection.tsx +++ b/public/app/plugins/datasource/graphite/components/SeriesSection.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { GraphiteQueryEditorState } from '../state/store'; import { TagsSection } from './TagsSection'; import { MetricsSection } from './MetricsSection'; -import { Section } from '@grafana/ui'; +import { SegmentSection } from '@grafana/ui'; type Props = { state: GraphiteQueryEditorState; @@ -16,8 +16,8 @@ export function SeriesSection({ state }: Props) { ); return ( -
+ {sectionContent} -
+ ); } diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx index 337c0356f87..ac8173b5462 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx +++ b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx @@ -26,7 +26,7 @@ import { import { FormatAsSection } from './FormatAsSection'; import { DEFAULT_RESULT_FORMAT } from '../constants'; import { getNewSelectPartOptions, getNewGroupByPartOptions, makePartList } from './partListUtils'; -import { Section, SectionLabel } from '@grafana/ui'; +import { SegmentSection, SegmentSectionLabel } from '@grafana/ui'; type Props = { query: InfluxQuery; @@ -103,7 +103,7 @@ export const Editor = (props: Props): JSX.Element => { return (
-
+ { } onChange={handleFromSectionChange} /> - + { withTemplateVariableOptions(getTagValues(key, measurement, policy, query.tags ?? [], datasource)) } /> -
+ {selectLists.map((sel, index) => ( -
+ Promise.resolve(getNewSelectPartOptions())} @@ -141,9 +141,9 @@ export const Editor = (props: Props): JSX.Element => { onAppliedChange(removeSelectPart(query, partIndex, index)); }} /> -
+ ))} -
+ getNewGroupByPartOptions(query, getTagKeys)} @@ -158,8 +158,8 @@ export const Editor = (props: Props): JSX.Element => { onAppliedChange(removeGroupByPart(query, partIndex)); }} /> -
-
+ + { onAppliedChange({ ...query, tz }); }} /> - + { onAppliedChange({ ...query, orderByTime: v }); }} /> -
+ {/* query.fill is ignored in the query-editor, and it is deleted whenever query-editor changes. the influx_query_model still handles it, but the new approach seem to be to handle "fill" inside query.groupBy. so, if you have a panel where in the json you have query.fill, it will be applied, as long as you do not edit that query. */} -
+ { onAppliedChange({ ...query, limit }); }} /> - + { onAppliedChange({ ...query, slimit }); }} /> -
-
+ + { @@ -206,7 +206,7 @@ export const Editor = (props: Props): JSX.Element => { /> {query.resultFormat !== 'table' && ( <> - + { /> )} -
+
); };