feat(UI): add new query label (#2488)

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;
+};

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;
+`;

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<ButtonProps> = isAvailableToDisable
+		? {
+				type: isDisabled ? 'default' : 'primary',
+				icon: isDisabled ? <EyeInvisibleFilled /> : <EyeFilled />,
+				onClick: (): void => toggleDisabled(index),
+		  }
+		: { type: 'primary' };
+
+	return (
+		<StyledButton
+			type={buttonProps.type}
+			icon={buttonProps.icon}
+			onClick={buttonProps.onClick}
+			className={className}
+		>
+			{labelName}
+		</StyledButton>
+	);
+}

frontend/src/container/QueryBuilder/components/ListMarker/index.ts

@@ -0,0 +1 @@
+export { ListMarker } from './ListMarker';

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<SelectProps, 'onChange'>;
+
+export type QueryLabelProps = StaticLabel | DropdownLabel;
+
+export function isLabelDropdown(
+	label: QueryLabelProps,
+): label is DropdownLabel {
+	return label.variant === 'dropdown';
+}

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)<DropdownLabel>`
+	${LabelStyle}
+`;

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 (
+			<StyledSingleLabel
+				defaultValue={dataSource}
+				showArrow={false}
+				dropdownStyle={{ display: 'none' }}
+			>
+				<Option value={dataSource}>{dataSource}</Option>
+			</StyledSingleLabel>
+		);
+	}
+
+	const { onChange } = props;
+
+	const dataSourceOptions: SelectOption<
+		DataSource,
+		string
+	>[] = dataSourceMap.map((source) => ({
+		label: source.charAt(0).toUpperCase() + source.slice(1),
+		value: source,
+	}));
+
+	return (
+		<Select
+			defaultValue={dataSourceOptions[0].value}
+			options={dataSourceOptions}
+			onChange={onChange}
+		/>
+	);
+}

frontend/src/container/QueryBuilder/components/QueryLabel/index.ts

@@ -0,0 +1 @@
+export { QueryLabel } from './QueryLabel';

frontend/src/container/QueryBuilder/components/index.ts

@@ -0,0 +1,2 @@
+export { ListMarker } from './ListMarker';
+export { QueryLabel } from './QueryLabel';

frontend/src/types/common/queryBuilder.ts

@@ -0,0 +1,5 @@
+export enum DataSource {
+	METRICS = 'metrics',
+	TRACES = 'traces',
+	LOGS = 'logs',
+}

frontend/src/types/common/select.ts

@@ -0,0 +1,4 @@
+export type SelectOption<Value, Label extends unknown = string> = {
+	value: Value;
+	label: Label;
+};