From 8ea0f72178f9d6b671b8ab53fb1818cfb601a0fd Mon Sep 17 00:00:00 2001 From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com> Date: Mon, 27 Mar 2023 14:19:49 +0300 Subject: [PATCH] feat(UI): add new query label (#2488) --- .../ListMarker/ListMarker.interfaces.ts | 8 +++ .../ListMarker/ListMarker.styled.ts | 9 ++++ .../components/ListMarker/ListMarker.tsx | 36 ++++++++++++++ .../components/ListMarker/index.ts | 1 + .../QueryLabel/QueryLabel.interfaces.ts | 17 +++++++ .../QueryLabel/QueryLabel.styled.ts | 19 +++++++ .../components/QueryLabel/QueryLabel.tsx | 49 +++++++++++++++++++ .../components/QueryLabel/index.ts | 1 + .../QueryBuilder/components/index.ts | 2 + frontend/src/types/common/queryBuilder.ts | 5 ++ frontend/src/types/common/select.ts | 4 ++ 11 files changed, 151 insertions(+) create mode 100644 frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.interfaces.ts create mode 100644 frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.styled.ts create mode 100644 frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx create mode 100644 frontend/src/container/QueryBuilder/components/ListMarker/index.ts create mode 100644 frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.interfaces.ts create mode 100644 frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.styled.ts create mode 100644 frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.tsx create mode 100644 frontend/src/container/QueryBuilder/components/QueryLabel/index.ts create mode 100644 frontend/src/container/QueryBuilder/components/index.ts create mode 100644 frontend/src/types/common/queryBuilder.ts create mode 100644 frontend/src/types/common/select.ts diff --git a/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.interfaces.ts b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.interfaces.ts new file mode 100644 index 0000000000..5ef7ac5a9a --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.interfaces.ts @@ -0,0 +1,8 @@ +export type ListMarkerProps = { + isDisabled: boolean; + labelName: string; + index: number; + className?: string; + isAvailableToDisable: boolean; + toggleDisabled: (index: number) => void; +}; diff --git a/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.styled.ts b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.styled.ts new file mode 100644 index 0000000000..f876af973b --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.styled.ts @@ -0,0 +1,9 @@ +import { Button } from 'antd'; +import styled from 'styled-components'; + +export const StyledButton = styled(Button)` + min-width: 2rem; + height: 2.25rem; + padding: 0.125rem; + border-radius: 0.375rem; +`; diff --git a/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx new file mode 100644 index 0000000000..a1f0437864 --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx @@ -0,0 +1,36 @@ +import { EyeFilled, EyeInvisibleFilled } from '@ant-design/icons'; +import { ButtonProps } from 'antd'; +import React from 'react'; + +// ** Types +import { ListMarkerProps } from './ListMarker.interfaces'; +// ** Styles +import { StyledButton } from './ListMarker.styled'; + +export function ListMarker({ + isDisabled, + labelName, + index, + isAvailableToDisable, + className, + toggleDisabled, +}: ListMarkerProps): JSX.Element { + const buttonProps: Partial = isAvailableToDisable + ? { + type: isDisabled ? 'default' : 'primary', + icon: isDisabled ? : , + onClick: (): void => toggleDisabled(index), + } + : { type: 'primary' }; + + return ( + + {labelName} + + ); +} diff --git a/frontend/src/container/QueryBuilder/components/ListMarker/index.ts b/frontend/src/container/QueryBuilder/components/ListMarker/index.ts new file mode 100644 index 0000000000..089011726b --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/ListMarker/index.ts @@ -0,0 +1 @@ +export { ListMarker } from './ListMarker'; diff --git a/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.interfaces.ts b/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.interfaces.ts new file mode 100644 index 0000000000..48b8775b1f --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.interfaces.ts @@ -0,0 +1,17 @@ +import { SelectProps } from 'antd'; +import { DataSource } from 'types/common/queryBuilder'; + +type StaticLabel = { variant: 'static'; dataSource: DataSource }; + +export type DropdownLabel = { + variant: 'dropdown'; + onChange: (value: DataSource) => void; +} & Omit; + +export type QueryLabelProps = StaticLabel | DropdownLabel; + +export function isLabelDropdown( + label: QueryLabelProps, +): label is DropdownLabel { + return label.variant === 'dropdown'; +} diff --git a/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.styled.ts b/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.styled.ts new file mode 100644 index 0000000000..56b4030035 --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.styled.ts @@ -0,0 +1,19 @@ +import { Select } from 'antd'; +import styled, { css } from 'styled-components'; + +// ** Types +import { DropdownLabel } from './QueryLabel.interfaces'; + +const LabelStyle = css` + width: fit-content; + min-width: 5.75rem; +`; + +export const StyledSingleLabel = styled(Select)` + pointer-events: none; + ${LabelStyle} +`; + +export const StyledDropdownLabel = styled(Select)` + ${LabelStyle} +`; diff --git a/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.tsx b/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.tsx new file mode 100644 index 0000000000..1bc6fad1a4 --- /dev/null +++ b/frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.tsx @@ -0,0 +1,49 @@ +import { Select } from 'antd'; +import React from 'react'; +import { DataSource } from 'types/common/queryBuilder'; +import { SelectOption } from 'types/common/select'; + +// ** Types +import { isLabelDropdown, QueryLabelProps } from './QueryLabel.interfaces'; +// ** Styles +import { StyledSingleLabel } from './QueryLabel.styled'; + +const { Option } = Select; + +const dataSourceMap = [DataSource.LOGS, DataSource.METRICS, DataSource.TRACES]; + +export function QueryLabel(props: QueryLabelProps): JSX.Element { + const isDropdown = isLabelDropdown(props); + + if (!isDropdown) { + const { dataSource } = props; + + return ( + + + + ); + } + + const { onChange } = props; + + const dataSourceOptions: SelectOption< + DataSource, + string + >[] = dataSourceMap.map((source) => ({ + label: source.charAt(0).toUpperCase() + source.slice(1), + value: source, + })); + + return ( +