GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 02:48:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into issue-2511

Browse Source
This commit is contained in:
Prashant Shahi 2023-04-24 18:09:35 +05:30 committed by GitHub
commit 6322578842
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
193 changed files with 6661 additions and 1215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/CODEOWNERS vendored
View File

@ -2,6 +2,6 @@
# Owners are automatically requested for review for PRs that changes code
# that they own.
* @ankitnayan
/frontend/ @palashgdev @pranshuchittora
/frontend/ @palashgdev
/deploy/ @prashant-shahi
**/query-service/ @srikanthccv

6
.github/workflows/staging-deployment.yaml vendored
View File

@ -11,21 +11,23 @@ jobs:
environment: staging
steps:
- name: Executing remote ssh commands using ssh key
uses: appleboy/ssh-action@v0.1.6
uses: appleboy/ssh-action@v0.1.8
env:
GITHUB_BRANCH: develop
GITHUB_SHA: ${{ github.sha }}
with:
host: ${{ secrets.HOST_DNS }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.EC2_SSH_KEY }}
key: ${{ secrets.SSH_KEY }}
envs: GITHUB_BRANCH,GITHUB_SHA
command_timeout: 60m
script: |
echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
echo "GITHUB_SHA: ${GITHUB_SHA}"
export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
export OTELCOL_TAG="main"
docker system prune --force
docker pull signoz/signoz-otel-collector:main
cd ~/signoz
git status
git add .

4
.github/workflows/testing-deployment.yaml vendored
View File

@ -11,14 +11,14 @@ jobs:
if: ${{ github.event.label.name == 'testing-deploy' }}
steps:
- name: Executing remote ssh commands using ssh key
uses: appleboy/ssh-action@v0.1.6
uses: appleboy/ssh-action@v0.1.8
env:
GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
GITHUB_SHA: ${{ github.sha }}
with:
host: ${{ secrets.HOST_DNS }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.EC2_SSH_KEY }}
key: ${{ secrets.SSH_KEY }}
envs: GITHUB_BRANCH,GITHUB_SHA
command_timeout: 60m
script: |

4
README.de-de.md
View File

@ -85,9 +85,9 @@ Hier findest du die vollständige Liste von unterstützten Programmiersprachen -
### Bereitstellung mit Docker
Bitte folge den [hier](https://signoz.io/docs/deployment/docker/) aufgelisteten Schritten um deine Anwendung mit Docker bereitzustellen.
Bitte folge den [hier](https://signoz.io/docs/install/docker/) aufgelisteten Schritten um deine Anwendung mit Docker bereitzustellen.
Die [Anleitungen zur Fehlerbehebung](https://signoz.io/docs/deployment/troubleshooting) könnten hilfreich sein, falls du auf irgendwelche Schwierigkeiten stößt.
Die [Anleitungen zur Fehlerbehebung](https://signoz.io/docs/install/troubleshooting/) könnten hilfreich sein, falls du auf irgendwelche Schwierigkeiten stößt.
<p>&nbsp </p>

4
README.md
View File

@ -130,9 +130,9 @@ You can find the complete list of languages here - https://opentelemetry.io/docs
### Deploy using Docker
Please follow the steps listed [here](https://signoz.io/docs/deployment/docker/) to install using docker
Please follow the steps listed [here](https://signoz.io/docs/install/docker/) to install using docker
The [troubleshooting instructions](https://signoz.io/docs/deployment/troubleshooting) may be helpful if you face any issues.
The [troubleshooting instructions](https://signoz.io/docs/install/troubleshooting/) may be helpful if you face any issues.
<p>&nbsp </p>

4
README.pt-br.md
View File

@ -84,9 +84,9 @@ Você pode encontrar a lista completa de linguagens aqui - https://opentelemetry
### Implantar usando Docker
Siga as etapas listadas [aqui](https://signoz.io/docs/deployment/docker/) para instalar usando o Docker.
Siga as etapas listadas [aqui](https://signoz.io/docs/install/docker/) para instalar usando o Docker.
Esse [guia para solução de problemas](https://signoz.io/docs/deployment/troubleshooting) pode ser útil se você enfrentar quaisquer problemas.
Esse [guia para solução de problemas](https://signoz.io/docs/install/troubleshooting/) pode ser útil se você enfrentar quaisquer problemas.
<p>&nbsp </p>

4
README.zh-cn.md
View File

@ -80,9 +80,9 @@ SigNoz帮助开发人员监控应用并排查已部署应用中的问题。SigNo
### 使用Docker部署
请按照[这里](https://signoz.io/docs/deployment/docker/)列出的步骤使用Docker来安装
请按照[这里](https://signoz.io/docs/install/docker/)列出的步骤使用Docker来安装
如果你遇到任何问题，这个[排查指南](https://signoz.io/docs/deployment/troubleshooting)会对你有帮助。
如果你遇到任何问题，这个[排查指南](https://signoz.io/docs/install/troubleshooting/)会对你有帮助。
<p>&nbsp </p>

8
deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
View File

@ -137,7 +137,7 @@ services:
condition: on-failure
query-service:
image: signoz/query-service:0.17.0
image: signoz/query-service:0.18.1
command: ["-config=/root/config/prometheus.yml"]
# ports:
# - "6060:6060" # pprof port
@ -166,7 +166,7 @@ services:
<<: *clickhouse-depend
frontend:
image: signoz/frontend:0.17.0
image: signoz/frontend:0.18.1
deploy:
restart_policy:
condition: on-failure
@ -179,7 +179,7 @@ services:
- ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
otel-collector:
image: signoz/signoz-otel-collector:0.66.6
image: signoz/signoz-otel-collector:0.66.7
command: ["--config=/etc/otel-collector-config.yaml"]
user: root # required for reading docker container logs
volumes:
@ -208,7 +208,7 @@ services:
<<: *clickhouse-depend
otel-collector-metrics:
image: signoz/signoz-otel-collector:0.66.6
image: signoz/signoz-otel-collector:0.66.7
command: ["--config=/etc/otel-collector-metrics-config.yaml"]
volumes:
- ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

4
deploy/docker/clickhouse-setup/docker-compose-core.yaml
View File

@ -41,7 +41,7 @@ services:
# Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
otel-collector:
container_name: otel-collector
image: signoz/signoz-otel-collector:0.66.6
image: signoz/signoz-otel-collector:0.66.7
command: ["--config=/etc/otel-collector-config.yaml"]
# user: root # required for reading docker container logs
volumes:
@ -67,7 +67,7 @@ services:
otel-collector-metrics:
container_name: otel-collector-metrics
image: signoz/signoz-otel-collector:0.66.6
image: signoz/signoz-otel-collector:0.66.7
command: ["--config=/etc/otel-collector-metrics-config.yaml"]
volumes:
- ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

8
deploy/docker/clickhouse-setup/docker-compose.yaml
View File

@ -153,7 +153,7 @@ services:
# Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
query-service:
image: signoz/query-service:${DOCKER_TAG:-0.17.0}
image: signoz/query-service:${DOCKER_TAG:-0.18.1}
container_name: query-service
command: ["-config=/root/config/prometheus.yml"]
# ports:
@ -181,7 +181,7 @@ services:
<<: *clickhouse-depend
frontend:
image: signoz/frontend:${DOCKER_TAG:-0.17.0}
image: signoz/frontend:${DOCKER_TAG:-0.18.1}
container_name: frontend
restart: on-failure
depends_on:
@ -193,7 +193,7 @@ services:
- ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
otel-collector:
image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.6}
image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.7}
command: ["--config=/etc/otel-collector-config.yaml"]
user: root # required for reading docker container logs
volumes:
@ -219,7 +219,7 @@ services:
<<: *clickhouse-depend
otel-collector-metrics:
image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.6}
image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.7}
command: ["--config=/etc/otel-collector-metrics-config.yaml"]
volumes:
- ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

6
deploy/install.sh
View File

@ -125,7 +125,7 @@ check_ports_occupied() {
echo "+++++++++++ ERROR ++++++++++++++++++++++"
echo "SigNoz requires ports 3301 & 4317 to be open. Please shut down any other service(s) that may be running on these ports."
echo "You can run SigNoz on another port following this guide https://signoz.io/docs/deployment/docker#troubleshooting"
echo "You can run SigNoz on another port following this guide https://signoz.io/docs/install/troubleshooting/"
echo "++++++++++++++++++++++++++++++++++++++++"
echo ""
exit 1
@ -249,7 +249,7 @@ bye() { # Prints a friendly good bye message and exits the script.
echo ""
echo -e "$sudo_cmd docker-compose -f ./docker/clickhouse-setup/docker-compose.yaml ps -a"
# echo "Please read our troubleshooting guide https://signoz.io/docs/deployment/docker#troubleshooting"
echo "Please read our troubleshooting guide https://signoz.io/docs/install/troubleshooting/"
echo "or reach us for support in #help channel in our Slack Community https://signoz.io/slack"
echo "++++++++++++++++++++++++++++++++++++++++"
@ -500,7 +500,7 @@ if [[ $status_code -ne 200 ]]; then
echo -e "$sudo_cmd docker-compose -f ./docker/clickhouse-setup/docker-compose.yaml ps -a"
echo "Please read our troubleshooting guide https://signoz.io/docs/deployment/docker/#troubleshooting-of-common-issues"
echo "Please read our troubleshooting guide https://signoz.io/docs/install/troubleshooting/"
echo "or reach us on SigNoz for support https://signoz.io/slack"
echo "++++++++++++++++++++++++++++++++++++++++"

15
frontend/jest.setup.ts
View File

@ -1,5 +1,20 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable object-shorthand */
/* eslint-disable func-names */
/**
* Adds custom matchers from the react testing library to all tests
*/
import '@testing-library/jest-dom';
import 'jest-styled-components';
// Mock window.matchMedia
window.matchMedia =
window.matchMedia ||
function (): any {
return {
matches: false,
addListener: function () {},
removeListener: function () {},
};
};

45
frontend/src/AppRoutes/index.tsx
View File

@ -4,6 +4,7 @@ import Spinner from 'components/Spinner';
import AppLayout from 'container/AppLayout';
import { useThemeConfig } from 'hooks/useDarkMode';
import { NotificationProvider } from 'hooks/useNotifications';
import { ResourceProvider } from 'hooks/useResourceAttribute';
import history from 'lib/history';
import { QueryBuilderProvider } from 'providers/QueryBuilder';
import React, { Suspense } from 'react';
@ -17,30 +18,32 @@ function App(): JSX.Element {
return (
<ConfigProvider theme={themeConfig}>
<NotificationProvider>
<Router history={history}>
<Router history={history}>
<NotificationProvider>
<PrivateRoute>
<QueryBuilderProvider>
<AppLayout>
<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
<Switch>
{routes.map(({ path, component, exact }) => (
<Route
key={`${path}`}
exact={exact}
path={path}
component={component}
/>
))}
<ResourceProvider>
<QueryBuilderProvider>
<AppLayout>
<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
<Switch>
{routes.map(({ path, component, exact }) => (
<Route
key={`${path}`}
exact={exact}
path={path}
component={component}
/>
))}
<Route path="*" component={NotFound} />
</Switch>
</Suspense>
</AppLayout>
</QueryBuilderProvider>
<Route path="*" component={NotFound} />
</Switch>
</Suspense>
</AppLayout>
</QueryBuilderProvider>
</ResourceProvider>
</PrivateRoute>
</Router>
</NotificationProvider>
</NotificationProvider>
</Router>
</ConfigProvider>
);
}

1
frontend/src/api/apiV1.ts
View File

@ -1,6 +1,7 @@
const apiV1 = '/api/v1/';
export const apiV2 = '/api/v2/';
export const apiV3 = '/api/v3/';
export const apiAlertManager = '/api/alertmanager';
export default apiV1;

17
frontend/src/api/errors/getAll.ts
View File

@ -1,7 +1,6 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import createQueryParams from 'lib/createQueryParams';
import { ErrorResponse, SuccessResponse } from 'types/api';
import { PayloadProps, Props } from 'types/api/errors/getAll';
@ -9,11 +8,17 @@ const getAll = async (
props: Props,
): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
try {
const response = await axios.get(
`/listErrors?${createQueryParams({
...props,
})}`,
);
const response = await axios.post(`/listErrors`, {
start: `${props.start}`,
end: `${props.end}`,
order: props.order,
orderParam: props.orderParam,
limit: props.limit,
offset: props.offset,
exceptionType: props.exceptionType,
serviceName: props.serviceName,
tags: props.tags,
});
return {
statusCode: 200,

13
frontend/src/api/errors/getErrorCounts.ts
View File

@ -1,7 +1,6 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import createQueryParams from 'lib/createQueryParams';
import { ErrorResponse, SuccessResponse } from 'types/api';
import { PayloadProps, Props } from 'types/api/errors/getErrorCounts';
@ -9,11 +8,13 @@ const getErrorCounts = async (
props: Props,
): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
try {
const response = await axios.get(
`/countErrors?${createQueryParams({
...props,
})}`,
);
const response = await axios.post(`/countErrors`, {
start: `${props.start}`,
end: `${props.end}`,
exceptionType: props.exceptionType,
serviceName: props.serviceName,
tags: props.tags,
});
return {
statusCode: 200,

13
frontend/src/api/index.ts
View File

@ -9,7 +9,7 @@ import { ENVIRONMENT } from 'constants/env';
import { LOCALSTORAGE } from 'constants/localStorage';
import store from 'store';
import apiV1, { apiAlertManager, apiV2 } from './apiV1';
import apiV1, { apiAlertManager, apiV2, apiV3 } from './apiV1';
import { Logout } from './utils';
const interceptorsResponse = (
@ -109,6 +109,17 @@ ApiV2Instance.interceptors.response.use(
);
ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
// axios V3
export const ApiV3Instance = axios.create({
baseURL: `${ENVIRONMENT.baseURL}${apiV3}`,
});
ApiV3Instance.interceptors.response.use(
interceptorsResponse,
interceptorRejected,
);
ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
//
AxiosAlertManagerInstance.interceptors.response.use(
interceptorsResponse,
interceptorRejected,

33
frontend/src/api/queryBuilder/getAggregateAttribute.ts Normal file
View File

@ -0,0 +1,33 @@
import { ApiV3Instance } from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError, AxiosResponse } from 'axios';
// ** Helpers
import { ErrorResponse, SuccessResponse } from 'types/api';
// ** Types
import { IGetAggregateAttributePayload } from 'types/api/queryBuilder/getAggregatorAttribute';
import { IQueryAutocompleteResponse } from 'types/api/queryBuilder/queryAutocompleteResponse';
export const getAggregateAttribute = async ({
aggregateOperator,
searchText,
dataSource,
}: IGetAggregateAttributePayload): Promise<
SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
> => {
try {
const response: AxiosResponse<{
data: IQueryAutocompleteResponse;
}> = await ApiV3Instance.get(
`autocomplete/aggregate_attributes?aggregateOperator=${aggregateOperator}&dataSource=${dataSource}&searchText=${searchText}`,
);
return {
statusCode: 200,
error: null,
message: response.statusText,
payload: response.data.data,
};
} catch (e) {
return ErrorResponseHandler(e as AxiosError);
}
};

34
frontend/src/api/queryBuilder/getAttributeKeys.ts Normal file
View File

@ -0,0 +1,34 @@
import { ApiV3Instance } from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError, AxiosResponse } from 'axios';
import { ErrorResponse, SuccessResponse } from 'types/api';
// ** Types
import { IGetAttributeKeysPayload } from 'types/api/queryBuilder/getAttributeKeys';
import { IQueryAutocompleteResponse } from 'types/api/queryBuilder/queryAutocompleteResponse';
export const getAggregateKeys = async ({
aggregateOperator,
searchText,
dataSource,
aggregateAttribute,
tagType,
}: IGetAttributeKeysPayload): Promise<
SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
> => {
try {
const response: AxiosResponse<{
data: IQueryAutocompleteResponse;
}> = await ApiV3Instance.get(
`autocomplete/attribute_keys?aggregateOperator=${aggregateOperator}&dataSource=${dataSource}&aggregateAttribute=${aggregateAttribute}&tagType=${tagType}&searchText=${searchText}`,
);
return {
statusCode: 200,
error: null,
message: response.statusText,
payload: response.data.data,
};
} catch (e) {
return ErrorResponseHandler(e as AxiosError);
}
};

63
frontend/src/api/queryBuilder/getAttributesKeysValues.ts Normal file
View File

@ -0,0 +1,63 @@
import { ApiV3Instance } from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { ErrorResponse, SuccessResponse } from 'types/api';
export type TagKeyValueProps = {
dataSource: string;
aggregateOperator?: string;
aggregateAttribute?: string;
searchText?: string;
attributeKey?: string;
};
export interface AttributeKeyOptions {
key: string;
type: string;
dataType: 'string' | 'boolean' | 'number';
isColumn: boolean;
}
export const getAttributesKeys = async (
props: TagKeyValueProps,
): Promise<SuccessResponse<AttributeKeyOptions[]> | ErrorResponse> => {
try {
const response = await ApiV3Instance.get(
`/autocomplete/attribute_keys?aggregateOperator=${props.aggregateOperator}&dataSource=${props.dataSource}&aggregateAttribute=${props.aggregateAttribute}&searchText=${props.searchText}`,
);
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data.attributeKeys,
};
} catch (error) {
return ErrorResponseHandler(error as AxiosError);
}
};
export interface TagValuePayloadProps {
boolAttributeValues: null | string[];
numberAttributeValues: null | string[];
stringAttributeValues: null | string[];
}
export const getAttributesValues = async (
props: TagKeyValueProps,
): Promise<SuccessResponse<TagValuePayloadProps> | ErrorResponse> => {
try {
const response = await ApiV3Instance.get(
`/autocomplete/attribute_values?aggregateOperator=${props.aggregateOperator}&dataSource=${props.dataSource}&aggregateAttribute=${props.aggregateAttribute}&searchText=${props.searchText}&attributeKey=${props.attributeKey}`,
);
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler(error as AxiosError);
}
};

2
frontend/src/api/trace/getSpans.ts
View File

@ -10,7 +10,7 @@ const getSpans = async (
): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
try {
const updatedSelectedTags = props.selectedTags.map((e) => ({
Key: e.Key,
Key: `${e.Key}.(string)`,
Operator: e.Operator,
StringValues: e.StringValues,
NumberValues: e.NumberValues,

2
frontend/src/api/trace/getSpansAggregate.ts
View File

@ -28,7 +28,7 @@ const getSpanAggregate = async (
});
const updatedSelectedTags = props.selectedTags.map((e) => ({
Key: e.Key,
Key: `${e.Key}.(string)`,
Operator: e.Operator,
StringValues: e.StringValues,
NumberValues: e.NumberValues,

2
frontend/src/components/Logs/TableView/styles.ts
View File

@ -16,6 +16,4 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
font-size: 0.875rem;
line-height: 2rem;
cursor: pointer;
`;

47
frontend/src/components/TextToolTip/index.tsx
View File

@ -1,23 +1,40 @@
/* eslint-disable react/no-unstable-nested-components */
import { grey } from '@ant-design/colors';
import { QuestionCircleFilled } from '@ant-design/icons';
import { Tooltip } from 'antd';
import React from 'react';
import { themeColors } from 'constants/theme';
import { useIsDarkMode } from 'hooks/useDarkMode';
import React, { useMemo } from 'react';
import { style } from './styles';
function TextToolTip({ text, url }: TextToolTipProps): JSX.Element {
const isDarkMode = useIsDarkMode();
const overlay = useMemo(
() => (
<div>
{`${text} `}
{url && (
<a href={url} rel="noopener noreferrer" target="_blank">
here
</a>
)}
</div>
),
[text, url],
);
const iconStyle = useMemo(
() => ({
...style,
color: isDarkMode ? themeColors.whiteCream : grey[0],
}),
[isDarkMode],
);
return (
<Tooltip
overlay={(): JSX.Element => (
<div>
{`${text} `}
{url && (
<a href={url} rel="noopener noreferrer" target="_blank">
here
</a>
)}
</div>
)}
>
<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
<Tooltip overlay={overlay}>
<QuestionCircleFilled style={iconStyle} />
</Tooltip>
);
}

1
frontend/src/components/TextToolTip/styles.ts Normal file
View File

@ -0,0 +1 @@
export const style = { fontSize: '1.3125rem' };

4
frontend/src/constants/query.ts
View File

@ -1,5 +1,4 @@
// eslint-disable-next-line @typescript-eslint/naming-convention
export enum METRICS_PAGE_QUERY_PARAM {
export enum QueryParams {
interval = 'interval',
startTime = 'startTime',
endTime = 'endTime',
@ -12,4 +11,5 @@ export enum METRICS_PAGE_QUERY_PARAM {
selectedTags = 'selectedTags',
aggregationOption = 'aggregationOption',
entity = 'entity',
resourceAttributes = 'resourceAttribute',
}

177
frontend/src/constants/queryBuilder.ts Normal file
View File

@ -0,0 +1,177 @@
// ** Helpers
import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
import { LocalDataType } from 'types/api/queryBuilder/queryAutocompleteResponse';
import {
Having,
IBuilderFormula,
IBuilderQueryForm,
} from 'types/api/queryBuilder/queryBuilderData';
import {
BoolOperators,
DataSource,
LogsAggregatorOperator,
MetricAggregateOperator,
NumberOperators,
StringOperators,
TracesAggregatorOperator,
} from 'types/common/queryBuilder';
export const MAX_FORMULAS = 20;
export const MAX_QUERIES = 26;
export const formulasNames: string[] = Array.from(
Array(MAX_FORMULAS),
(_, i) => `F${i + 1}`,
);
const alpha: number[] = Array.from(Array(MAX_QUERIES), (_, i) => i + 65);
export const alphabet: string[] = alpha.map((str) => String.fromCharCode(str));
export enum QueryBuilderKeys {
GET_AGGREGATE_ATTRIBUTE = 'GET_AGGREGATE_ATTRIBUTE',
GET_AGGREGATE_KEYS = 'GET_AGGREGATE_KEYS',
}
export const mapOfOperators: Record<DataSource, string[]> = {
metrics: Object.values(MetricAggregateOperator),
logs: Object.values(LogsAggregatorOperator),
traces: Object.values(TracesAggregatorOperator),
};
export const mapOfFilters: Record<DataSource, string[]> = {
// eslint-disable-next-line sonarjs/no-duplicate-string
metrics: ['Aggregation interval', 'Having'],
logs: ['Order by', 'Limit', 'Having', 'Aggregation interval'],
traces: ['Order by', 'Limit', 'Having', 'Aggregation interval'],
};
export const initialHavingValues: Having = {
columnName: '',
op: '',
value: [],
};
export const initialAggregateAttribute: IBuilderQueryForm['aggregateAttribute'] = {
dataType: null,
key: '',
isColumn: null,
type: null,
};
export const initialQueryBuilderFormValues: IBuilderQueryForm = {
dataSource: DataSource.METRICS,
queryName: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
aggregateOperator: Object.values(MetricAggregateOperator)[0],
aggregateAttribute: initialAggregateAttribute,
tagFilters: { items: [], op: 'AND' },
expression: '',
disabled: false,
having: [],
stepInterval: 30,
limit: 10,
orderBy: [],
groupBy: [],
legend: '',
reduceTo: '',
};
export const initialFormulaBuilderFormValues: IBuilderFormula = {
label: createNewBuilderItemName({
existNames: [],
sourceNames: formulasNames,
}),
expression: '',
disabled: false,
legend: '',
};
export const operatorsByTypes: Record<LocalDataType, string[]> = {
string: Object.values(StringOperators),
number: Object.values(NumberOperators),
bool: Object.values(BoolOperators),
};
export type IQueryBuilderState = 'search';
export const QUERY_BUILDER_SEARCH_VALUES = {
MULTIPLY: 'MULTIPLY_VALUE',
SINGLE: 'SINGLE_VALUE',
NON: 'NON_VALUE',
NOT_VALID: 'NOT_VALID',
};
export const OPERATORS = {
IN: 'IN',
NIN: 'NOT_IN',
LIKE: 'LIKE',
NLIKE: 'NOT_LIKE',
EQUALS: '=',
NOT_EQUALS: '!=',
EXISTS: 'EXISTS',
NOT_EXISTS: 'NOT_EXISTS',
CONTAINS: 'CONTAINS',
NOT_CONTAINS: 'NOT_CONTAINS',
GTE: '>=',
GT: '>',
LTE: '<=',
LT: '<',
};
export const QUERY_BUILDER_OPERATORS_BY_TYPES = {
string: [
OPERATORS.EQUALS,
OPERATORS.NOT_EQUALS,
OPERATORS.IN,
OPERATORS.NIN,
OPERATORS.LIKE,
OPERATORS.NLIKE,
OPERATORS.CONTAINS,
OPERATORS.NOT_CONTAINS,
OPERATORS.EXISTS,
OPERATORS.NOT_EXISTS,
],
number: [
OPERATORS.EQUALS,
OPERATORS.NOT_EQUALS,
OPERATORS.IN,
OPERATORS.NIN,
OPERATORS.EXISTS,
OPERATORS.NOT_EXISTS,
OPERATORS.GTE,
OPERATORS.GT,
OPERATORS.LTE,
OPERATORS.LT,
],
boolean: [
OPERATORS.EQUALS,
OPERATORS.NOT_EQUALS,
OPERATORS.EXISTS,
OPERATORS.NOT_EXISTS,
],
universal: [
OPERATORS.EQUALS,
OPERATORS.NOT_EQUALS,
OPERATORS.IN,
OPERATORS.NIN,
OPERATORS.EXISTS,
OPERATORS.NOT_EXISTS,
OPERATORS.LIKE,
OPERATORS.NLIKE,
OPERATORS.GTE,
OPERATORS.GT,
OPERATORS.LTE,
OPERATORS.LT,
OPERATORS.CONTAINS,
OPERATORS.NOT_CONTAINS,
],
};
export const HAVING_OPERATORS: string[] = [
OPERATORS.EQUALS,
OPERATORS.NOT_EQUALS,
OPERATORS.IN,
OPERATORS.NIN,
OPERATORS.GTE,
OPERATORS.GT,
OPERATORS.LTE,
OPERATORS.LT,
];

9
frontend/src/container/AllError/index.tsx
View File

@ -18,6 +18,8 @@ import { ResizeTable } from 'components/ResizeTable';
import ROUTES from 'constants/routes';
import dayjs from 'dayjs';
import { useNotifications } from 'hooks/useNotifications';
import useResourceAttribute from 'hooks/useResourceAttribute';
import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
import useUrlQuery from 'hooks/useUrlQuery';
import createQueryParams from 'lib/createQueryParams';
import history from 'lib/history';
@ -93,9 +95,11 @@ function AllErrors(): JSX.Element {
],
);
const { queries } = useResourceAttribute();
const [{ isLoading, data }, errorCountResponse] = useQueries([
{
queryKey: ['getAllErrors', updatedPath, maxTime, minTime],
queryKey: ['getAllErrors', updatedPath, maxTime, minTime, queries],
queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
getAll({
end: maxTime,
@ -106,6 +110,7 @@ function AllErrors(): JSX.Element {
orderParam: getUpdatedParams,
exceptionType: getUpdatedExceptionType,
serviceName: getUpdatedServiceName,
tags: convertRawQueriesToTraceSelectedTags(queries),
}),
enabled: !loading,
},
@ -116,6 +121,7 @@ function AllErrors(): JSX.Element {
minTime,
getUpdatedExceptionType,
getUpdatedServiceName,
queries,
],
queryFn: (): Promise<ErrorResponse | SuccessResponse<number>> =>
getErrorCounts({
@ -123,6 +129,7 @@ function AllErrors(): JSX.Element {
start: minTime,
exceptionType: getUpdatedExceptionType,
serviceName: getUpdatedServiceName,
tags: convertRawQueriesToTraceSelectedTags(queries),
}),
enabled: !loading,
},

12
frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx
View File

@ -1,23 +1,15 @@
import { Button, Row } from 'antd';
import React from 'react';
import { QueryFields } from './utils';
interface SearchFieldsActionBarProps {
fieldsQuery: QueryFields[][];
applyUpdate: () => void;
clearFilters: () => void;
applyUpdate: VoidFunction;
clearFilters: VoidFunction;
}
export function SearchFieldsActionBar({
fieldsQuery,
applyUpdate,
clearFilters,
}: SearchFieldsActionBarProps): JSX.Element | null {
if (fieldsQuery.length === 0) {
return null;
}
return (
<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
<Button

16
frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
View File

@ -1,4 +1,5 @@
import { useNotifications } from 'hooks/useNotifications';
import { reverseParser } from 'lib/logql';
import { flatten } from 'lodash-es';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
@ -18,13 +19,13 @@ import {
} from './utils';
export interface SearchFieldsProps {
updateParsedQuery: (query: QueryFields[]) => void;
onDropDownToggleHandler: (value: boolean) => VoidFunction;
updateQueryString: (value: string) => void;
}
function SearchFields({
updateParsedQuery,
onDropDownToggleHandler,
updateQueryString,
}: SearchFieldsProps): JSX.Element {
const {
searchFilter: { parsedQuery },
@ -90,15 +91,15 @@ function SearchFields({
}
keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
updateParsedQuery(flatParsedQuery);
updateQueryString(reverseParser(flatParsedQuery));
onDropDownToggleHandler(false)();
}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery, notifications]);
}, [fieldsQuery, notifications, onDropDownToggleHandler, updateQueryString]);
const clearFilters = useCallback((): void => {
keyPrefixRef.current = hashCode(JSON.stringify([]));
updateParsedQuery([]);
onDropDownToggleHandler(false)();
}, [onDropDownToggleHandler, updateParsedQuery]);
setFieldsQuery([]);
updateQueryString('');
}, [updateQueryString]);
return (
<>
@ -113,7 +114,6 @@ function SearchFields({
<SearchFieldsActionBar
applyUpdate={applyUpdate}
clearFilters={clearFilters}
fieldsQuery={fieldsQuery}
/>
<Suggestions applySuggestion={addSuggestedField} />
</>

8
frontend/src/container/LogsSearchFilter/index.tsx
View File

@ -36,11 +36,7 @@ function SearchFilter({
getLogsAggregate,
getLogsFields,
}: SearchFilterProps): JSX.Element {
const {
updateParsedQuery,
updateQueryString,
queryString,
} = useSearchParser();
const { updateQueryString, queryString } = useSearchParser();
const [searchText, setSearchText] = useState(queryString);
const [showDropDown, setShowDropDown] = useState(false);
const searchRef = useRef<InputRef>(null);
@ -187,8 +183,8 @@ function SearchFilter({
content={
<DropDownContainer>
<SearchFields
updateQueryString={updateQueryString}
onDropDownToggleHandler={onDropDownToggleHandler}
updateParsedQuery={updateParsedQuery as never}
/>
</DropDownContainer>
}

29
frontend/src/container/LogsSearchFilter/useSearchParser.ts
View File

@ -1,8 +1,7 @@
import { getMinMax } from 'container/TopNav/AutoRefresh/config';
import useUrlQuery from 'hooks/useUrlQuery';
import history from 'lib/history';
import { parseQuery, reverseParser } from 'lib/logql';
import { ILogQLParsedQueryItem } from 'lib/logql/types';
import { parseQuery } from 'lib/logql';
import isEqual from 'lodash-es/isEqual';
import { useCallback, useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
@ -21,7 +20,6 @@ import { getGlobalTime } from './utils';
export function useSearchParser(): {
queryString: string;
parsedQuery: unknown;
updateParsedQuery: (arg0: ILogQLParsedQueryItem[]) => void;
updateQueryString: (arg0: string) => void;
} {
const dispatch = useDispatch<Dispatch<AppActions>>();
@ -64,7 +62,7 @@ export function useSearchParser(): {
},
// need to hide this warning as we don't want to update the query string on every change
// eslint-disable-next-line react-hooks/exhaustive-deps
[dispatch, parsedQuery],
[dispatch, parsedQuery, selectedTime],
);
useEffect(() => {
@ -75,32 +73,9 @@ export function useSearchParser(): {
}
}, [queryString, updateQueryString, parsedFilters]);
const updateParsedQuery = useCallback(
(updatedParsedPayload: ILogQLParsedQueryItem[]) => {
dispatch({
type: SET_SEARCH_QUERY_PARSED_PAYLOAD,
payload: updatedParsedPayload,
});
const reversedParsedQuery = reverseParser(updatedParsedPayload);
if (
!isEqual(queryString, reversedParsedQuery) ||
(queryString === '' && reversedParsedQuery === '')
) {
dispatch({
type: SET_SEARCH_QUERY_STRING,
payload: {
searchQueryString: reversedParsedQuery,
},
});
}
},
[dispatch, queryString],
);
return {
queryString,
parsedQuery,
updateParsedQuery,
updateQueryString,
};
}

32
frontend/src/container/MetricsApplication/ResourceAttributesFilter/QueryChip.tsx
View File

@ -1,32 +0,0 @@
import { convertMetricKeyToTrace } from 'lib/resourceAttributes';
import React from 'react';
import { QueryChipContainer, QueryChipItem } from './styles';
import { IResourceAttributeQuery } from './types';
interface IQueryChipProps {
queryData: IResourceAttributeQuery;
onClose: (id: string) => void;
disabled: boolean;
}
export default function QueryChip({
queryData,
onClose,
disabled,
}: IQueryChipProps): JSX.Element {
return (
<QueryChipContainer>
<QueryChipItem>{convertMetricKeyToTrace(queryData.tagKey)}</QueryChipItem>
<QueryChipItem>{queryData.operator}</QueryChipItem>
<QueryChipItem
closable={!disabled}
onClose={(): void => {
if (!disabled) onClose(queryData.id);
}}
>
{queryData.tagValue.join(', ')}
</QueryChipItem>
</QueryChipContainer>
);
}

61
frontend/src/container/MetricsApplication/ResourceAttributesFilter/ResourceAttributesFilter.Machine.ts
View File

@ -1,61 +0,0 @@
import { createMachine } from 'xstate';
export const ResourceAttributesFilterMachine =
/** @xstate-layout N4IgpgJg5mDOIC5QBECGsAWAjA9qgThAAQDKYBAxhkQIIB2xAYgJYA2ALmPgHQAqqUANJgAngGIAcgFEAGr0SgADjljN2zHHQUgAHogAcAFgAM3AOz6ATAEYAzJdsA2Y4cOWAnABoQIxAFpDR2tuQ319AFYTcKdbFycAX3jvNExcAmIySmp6JjZOHn4hUTFNACFWAFd8bWVVdU1tPQQzY1MXY2tDdzNHM3dHd0NvXwR7biMTa313S0i+63DE5PRsPEJScnwqWgYiFg4uPgFhcQAlKRIpeSQQWrUNLRumx3Czbg8TR0sbS31jfUcw38fW47gBHmm4XCVms3SWIBSq3SGyyO1yBx4AHlFFxUOwcPhJLJrkoVPcGk9ENYFuF3i5YR0wtEHECEAEgiEmV8zH1DLYzHZ4Yi0utMltsrt9vluNjcfjCWVKtUbnd6o9QE1rMYBtxbGFvsZ3NrZj1WdYOfotUZLX0XEFHEKViKMpttjk9nlDrL8HiCWJzpcSbcyWrGoh3NCQj0zK53P1ph1WeFLLqnJZ2s5vmZLA6kginWsXaj3VLDoUAGqoSpgEp0cpVGohh5hhDWDy0sz8zruakzamWVm-Qyg362V5-AZOayO1KFlHitEejFHKCV6v+i5XRt1ZuU1s52zjNOOaZfdOWIY+RDZ0Hc6ZmKEXqyLPPCudit2Sz08ACSEFYNbSHI27kuquiIOEjiONwjJgrM3RWJYZisgEIJgnYPTmuEdi2OaiR5nQOAQHA2hvsiH4Sui0qFCcIGhnuLSmP0YJuJ2xjJsmKELG8XZTK0tjdHG06vgW5GupRS7St6vrKqSO4UhqVL8TBWp8o4eqdl0A5Xmy3G6gK56-B4uERDOSKiuJi6lgUAhrhUYB0buimtrEKZBDYrxaS0OZca8+ltheybOI4hivGZzrzp+VGHH+AGOQp4EIHy+ghNYnawtG4TsbYvk8QKfHGAJfQ9uF76WSW37xWBTSGJ0qXpd0vRZdEKGPqC2YeO2-zfO4+HxEAA */
createMachine({
tsTypes: {} as import('./ResourceAttributesFilter.Machine.typegen').Typegen0,
initial: 'Idle',
states: {
TagKey: {
on: {
NEXT: {
actions: 'onSelectOperator',
target: 'Operator',
},
onBlur: {
actions: 'onBlurPurge',
target: 'Idle',
},
RESET: {
target: 'Idle',
},
},
},
Operator: {
on: {
NEXT: {
actions: 'onSelectTagValue',
target: 'TagValue',
},
onBlur: {
actions: 'onBlurPurge',
target: 'Idle',
},
RESET: {
target: 'Idle',
},
},
},
TagValue: {
on: {
onBlur: {
actions: ['onValidateQuery', 'onBlurPurge'],
target: 'Idle',
},
RESET: {
target: 'Idle',
},
},
},
Idle: {
on: {
NEXT: {
actions: 'onSelectTagKey',
description: 'Select Category',
target: 'TagKey',
},
},
},
},
id: 'Dashboard Search And Filter',
});

219
frontend/src/container/MetricsApplication/ResourceAttributesFilter/index.tsx
View File

@ -1,219 +0,0 @@
import { CloseCircleFilled } from '@ant-design/icons';
import { useMachine } from '@xstate/react';
import { Button, Select, Spin } from 'antd';
import ROUTES from 'constants/routes';
import history from 'lib/history';
import { convertMetricKeyToTrace } from 'lib/resourceAttributes';
import { map } from 'lodash-es';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ResetInitialData } from 'store/actions/metrics/resetInitialData';
import { SetResourceAttributeQueries } from 'store/actions/metrics/setResourceAttributeQueries';
import { AppState } from 'store/reducers';
import MetricReducer from 'types/reducer/metrics';
import { v4 as uuid } from 'uuid';
import QueryChip from './QueryChip';
import { ResourceAttributesFilterMachine } from './ResourceAttributesFilter.Machine';
import { QueryChipItem, SearchContainer } from './styles';
import { IOption, IResourceAttributeQuery } from './types';
import { createQuery, GetTagKeys, GetTagValues, OperatorSchema } from './utils';
function ResourceAttributesFilter(): JSX.Element | null {
const dispatch = useDispatch();
const [disabled, setDisabled] = useState(
!(history.location.pathname === ROUTES.APPLICATION),
);
useEffect(() => {
const unListen = history.listen(({ pathname }) => {
setDisabled(!(pathname === ROUTES.APPLICATION));
});
return (): void => {
if (!history.location.pathname.startsWith(`${ROUTES.APPLICATION}/`)) {
dispatch(ResetInitialData());
}
unListen();
};
}, [dispatch]);
const { resourceAttributeQueries } = useSelector<AppState, MetricReducer>(
(state) => state.metrics,
);
const [loading, setLoading] = useState(true);
const [selectedValues, setSelectedValues] = useState<string[]>([]);
const [staging, setStaging] = useState<string[]>([]);
const [queries, setQueries] = useState<IResourceAttributeQuery[]>([]);
const [optionsData, setOptionsData] = useState<{
mode: undefined | 'tags' | 'multiple';
options: IOption[];
}>({
mode: undefined,
options: [],
});
const dispatchQueries = (updatedQueries: IResourceAttributeQuery[]): void => {
dispatch(SetResourceAttributeQueries(updatedQueries));
};
const handleLoading = (isLoading: boolean): void => {
setLoading(isLoading);
if (isLoading) {
setOptionsData({ mode: undefined, options: [] });
}
};
const [state, send] = useMachine(ResourceAttributesFilterMachine, {
actions: {
onSelectTagKey: () => {
handleLoading(true);
GetTagKeys()
.then((tagKeys) => setOptionsData({ options: tagKeys, mode: undefined }))
.finally(() => {
handleLoading(false);
});
},
onSelectOperator: () => {
setOptionsData({ options: OperatorSchema, mode: undefined });
},
onSelectTagValue: () => {
handleLoading(true);
GetTagValues(staging[0])
.then((tagValuesOptions) =>
setOptionsData({ options: tagValuesOptions, mode: 'multiple' }),
)
.finally(() => {
handleLoading(false);
});
},
onBlurPurge: () => {
setSelectedValues([]);
setStaging([]);
},
onValidateQuery: (): void => {
if (staging.length < 2 || selectedValues.length === 0) {
return;
}
const generatedQuery = createQuery([...staging, selectedValues]);
if (generatedQuery) {
dispatchQueries([...queries, generatedQuery]);
}
},
},
});
useEffect(() => {
setQueries(resourceAttributeQueries);
}, [resourceAttributeQueries]);
const handleFocus = (): void => {
if (state.value === 'Idle') {
send('NEXT');
}
};
const handleBlur = (): void => {
send('onBlur');
};
const handleChange = (value: never): void => {
if (!optionsData.mode) {
setStaging((prevStaging) => [...prevStaging, value]);
setSelectedValues([]);
send('NEXT');
return;
}
setSelectedValues([...value]);
};
const handleClose = (id: string): void => {
dispatchQueries(queries.filter((queryData) => queryData.id !== id));
};
const handleClearAll = (): void => {
send('RESET');
dispatchQueries([]);
setStaging([]);
setSelectedValues([]);
};
const disabledAndEmpty = !!(
!queries.length &&
!staging.length &&
!selectedValues.length &&
disabled
);
const disabledOrEmpty = !!(
queries.length ||
staging.length ||
selectedValues.length ||
disabled
);
if (disabledAndEmpty) {
return null;
}
return (
<SearchContainer disabled={disabled}>
<div
style={{
maxWidth: disabled ? '100%' : '70%',
display: 'flex',
overflowX: 'auto',
}}
>
{map(
queries,
(query): JSX.Element => (
<QueryChip
disabled={disabled}
key={query.id}
queryData={query}
onClose={handleClose}
/>
),
)}
{map(staging, (item, idx) => (
<QueryChipItem key={uuid()}>
{idx === 0 ? convertMetricKeyToTrace(item) : item}
</QueryChipItem>
))}
</div>
{!disabled && (
<Select
placeholder={
disabledOrEmpty ? '' : 'Search and Filter based on resource attributes.'
}
disabled={disabled}
onChange={handleChange}
bordered={false}
value={selectedValues as never}
style={{ flex: 1 }}
options={optionsData.options}
mode={optionsData?.mode}
showArrow={false}
onFocus={handleFocus}
onBlur={handleBlur}
notFoundContent={
loading ? (
<span>
<Spin size="small" /> Loading...{' '}
</span>
) : (
<span>
No resource attributes available to filter. Please refer docs to send
attributes.
</span>
)
}
/>
)}
{(queries.length || staging.length || selectedValues.length) && !disabled ? (
<Button onClick={handleClearAll} icon={<CloseCircleFilled />} type="text" />
) : null}
</SearchContainer>
);
}
export default ResourceAttributesFilter;

11
frontend/src/container/MetricsApplication/ResourceAttributesFilter/types.ts
View File

@ -1,11 +0,0 @@
export interface IOption {
label: string;
value: string;
}
export interface IResourceAttributeQuery {
id: string;
tagKey: string;
operator: string;
tagValue: string[];
}

64
frontend/src/container/MetricsApplication/ResourceAttributesFilter/utils.ts
View File

@ -1,64 +0,0 @@
import {
getResourceAttributesTagKeys,
getResourceAttributesTagValues,
} from 'api/metrics/getResourceAttributes';
import { OperatorConversions } from 'constants/resourceAttributes';
import { convertMetricKeyToTrace } from 'lib/resourceAttributes';
import { v4 as uuid } from 'uuid';
import { IOption, IResourceAttributeQuery } from './types';
export const OperatorSchema: IOption[] = OperatorConversions.map(
(operator) => ({
label: operator.label,
value: operator.label,
}),
);
export const GetTagKeys = async (): Promise<IOption[]> => {
// if (TagKeysCache) {
// return new Promise((resolve) => {
// resolve(TagKeysCache);
// });
// }
const { payload } = await getResourceAttributesTagKeys({
metricName: 'signoz_calls_total',
match: 'resource_',
});
if (!payload || !payload?.data) {
return [];
}
return payload.data.map((tagKey: string) => ({
label: convertMetricKeyToTrace(tagKey),
value: tagKey,
}));
};
export const GetTagValues = async (tagKey: string): Promise<IOption[]> => {
const { payload } = await getResourceAttributesTagValues({
tagKey,
metricName: 'signoz_calls_total',
});
if (!payload || !payload?.data) {
return [];
}
return payload.data.map((tagValue: string) => ({
label: tagValue,
value: tagValue,
}));
};
export const createQuery = (
selectedItems: Array<string | string[]> = [],
): IResourceAttributeQuery | null => {
if (selectedItems.length === 3) {
return {
id: uuid().slice(0, 8),
tagKey: selectedItems[0] as string,
operator: selectedItems[1] as string,
tagValue: selectedItems[2] as string[],
};
}
return null;
};

25
frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
View File

@ -4,21 +4,20 @@ import {
databaseCallsAvgDuration,
databaseCallsRPS,
} from 'container/MetricsApplication/MetricsPageQueries/DBCallQueries';
import useResourceAttribute from 'hooks/useResourceAttribute';
import {
convertRawQueriesToTraceSelectedTags,
resourceAttributesToTagFilterItems,
} from 'lib/resourceAttributes';
} from 'hooks/useResourceAttribute/utils';
import React, { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { Widgets } from 'types/api/dashboard/getAll';
import MetricReducer from 'types/reducer/metrics';
import { Card, GraphContainer, GraphTitle, Row } from '../styles';
import { Button } from './styles';
import {
dbSystemTags,
handleNonInQueryRange,
onGraphClickHandler,
onViewTracePopupClick,
} from './util';
@ -26,22 +25,22 @@ import {
function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>();
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { resourceAttributeQueries } = useSelector<AppState, MetricReducer>(
(state) => state.metrics,
);
const { queries } = useResourceAttribute();
const tagFilterItems = useMemo(
() => resourceAttributesToTagFilterItems(resourceAttributeQueries) || [],
[resourceAttributeQueries],
() =>
handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
[queries],
);
const selectedTraceTags: string = useMemo(
() =>
JSON.stringify(
convertRawQueriesToTraceSelectedTags(resourceAttributeQueries).concat(
...dbSystemTags,
) || [],
convertRawQueriesToTraceSelectedTags(queries).concat(...dbSystemTags) || [],
),
[resourceAttributeQueries],
[queries],
);
const legend = '{{db_system}}';
const databaseCallsRPSWidget = useMemo(

28
frontend/src/container/MetricsApplication/Tabs/External.tsx
View File

@ -6,33 +6,34 @@ import {
externalCallErrorPercent,
externalCallRpsByAddress,
} from 'container/MetricsApplication/MetricsPageQueries/ExternalQueries';
import useResourceAttribute from 'hooks/useResourceAttribute';
import {
convertRawQueriesToTraceSelectedTags,
resourceAttributesToTagFilterItems,
} from 'lib/resourceAttributes';
} from 'hooks/useResourceAttribute/utils';
import React, { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { Widgets } from 'types/api/dashboard/getAll';
import MetricReducer from 'types/reducer/metrics';
import { Card, GraphContainer, GraphTitle, Row } from '../styles';
import { legend } from './constant';
import { Button } from './styles';
import { onGraphClickHandler, onViewTracePopupClick } from './util';
import {
handleNonInQueryRange,
onGraphClickHandler,
onViewTracePopupClick,
} from './util';
function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { servicename } = useParams<{ servicename?: string }>();
const { resourceAttributeQueries } = useSelector<AppState, MetricReducer>(
(state) => state.metrics,
);
const { queries } = useResourceAttribute();
const tagFilterItems = useMemo(
() => resourceAttributesToTagFilterItems(resourceAttributeQueries) || [],
[resourceAttributeQueries],
() =>
handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
[queries],
);
const externalCallErrorWidget = useMemo(
@ -51,11 +52,8 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
);
const selectedTraceTags = useMemo(
() =>
JSON.stringify(
convertRawQueriesToTraceSelectedTags(resourceAttributeQueries) || [],
),
[resourceAttributeQueries],
() => JSON.stringify(convertRawQueriesToTraceSelectedTags(queries) || []),
[queries],
);
const externalCallDurationWidget = useMemo(

54
frontend/src/container/MetricsApplication/Tabs/Overview.tsx
View File

@ -1,18 +1,21 @@
import { ActiveElement, Chart, ChartData, ChartEvent } from 'chart.js';
import Graph from 'components/Graph';
import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes';
import FullView from 'container/GridGraphLayout/Graph/FullView/index.metricsBuilder';
import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
import { colors } from 'lib/getRandomColor';
import history from 'lib/history';
import { routeConfig } from 'container/SideNav/config';
import { getQueryString } from 'container/SideNav/helper';
import useResourceAttribute from 'hooks/useResourceAttribute';
import {
convertRawQueriesToTraceSelectedTags,
resourceAttributesToTagFilterItems,
} from 'lib/resourceAttributes';
} from 'hooks/useResourceAttribute/utils';
import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
import { colors } from 'lib/getRandomColor';
import history from 'lib/history';
import React, { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { useLocation, useParams } from 'react-router-dom';
import { UpdateTimeInterval } from 'store/actions';
import { AppState } from 'store/reducers';
import { Widgets } from 'types/api/dashboard/getAll';
@ -25,11 +28,16 @@ import {
import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
import TopOperationsTable from '../TopOperationsTable';
import { Button } from './styles';
import { onGraphClickHandler, onViewTracePopupClick } from './util';
import {
handleNonInQueryRange,
onGraphClickHandler,
onViewTracePopupClick,
} from './util';
function Application({ getWidgetQueryBuilder }: DashboardProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>();
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { search } = useLocation();
const handleSetTimeStamp = useCallback((selectTime: number) => {
setSelectedTimeStamp(selectTime);
@ -54,20 +62,21 @@ function Application({ getWidgetQueryBuilder }: DashboardProps): JSX.Element {
[handleSetTimeStamp],
);
const {
topOperations,
serviceOverview,
resourceAttributeQueries,
topLevelOperations,
} = useSelector<AppState, MetricReducer>((state) => state.metrics);
const { topOperations, serviceOverview, topLevelOperations } = useSelector<
AppState,
MetricReducer
>((state) => state.metrics);
const { queries } = useResourceAttribute();
const selectedTraceTags: string = JSON.stringify(
convertRawQueriesToTraceSelectedTags(resourceAttributeQueries) || [],
convertRawQueriesToTraceSelectedTags(queries) || [],
);
const tagFilterItems = useMemo(
() => resourceAttributesToTagFilterItems(resourceAttributeQueries) || [],
[resourceAttributeQueries],
() =>
handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
[queries],
);
const operationPerSecWidget = useMemo(
@ -116,14 +125,19 @@ function Application({ getWidgetQueryBuilder }: DashboardProps): JSX.Element {
const currentTime = timestamp;
const tPlusOne = timestamp + 60 * 1000;
const urlParams = new URLSearchParams();
urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime, currentTime.toString());
urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
const urlParams = new URLSearchParams(search);
urlParams.set(QueryParams.startTime, currentTime.toString());
urlParams.set(QueryParams.endTime, tPlusOne.toString());
const avialableParams = routeConfig[ROUTES.TRACE];
const queryString = getQueryString(avialableParams, urlParams);
history.replace(
`${
ROUTES.TRACE
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&isFilterExclude={"serviceName":false,"status":false}&userSelectedFilter={"serviceName":["${servicename}"],"status":["error"]}&spanAggregateCurrentPage=1`,
}?selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&isFilterExclude={"serviceName":false,"status":false}&userSelectedFilter={"serviceName":["${servicename}"],"status":["error"]}&spanAggregateCurrentPage=1&${queryString.join(
'',
)}`,
);
};

30
frontend/src/container/MetricsApplication/Tabs/util.ts
View File

@ -1,7 +1,10 @@
import { ActiveElement, Chart, ChartData, ChartEvent } from 'chart.js';
import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes';
import { routeConfig } from 'container/SideNav/config';
import { getQueryString } from 'container/SideNav/helper';
import history from 'lib/history';
import { IQueryBuilderTagFilterItems } from 'types/api/dashboard/getAll';
import { Tags } from 'types/reducer/trace';
export const dbSystemTags: Tags[] = [
@ -30,16 +33,18 @@ export function onViewTracePopupClick({
const currentTime = timestamp;
const tPlusOne = timestamp + 60 * 1000;
const urlParams = new URLSearchParams();
urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime, currentTime.toString());
urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
const urlParams = new URLSearchParams(window.location.search);
urlParams.set(QueryParams.startTime, currentTime.toString());
urlParams.set(QueryParams.endTime, tPlusOne.toString());
const avialableParams = routeConfig[ROUTES.TRACE];
const queryString = getQueryString(avialableParams, urlParams);
history.replace(
`${
ROUTES.TRACE
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&&isFilterExclude={"serviceName":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&spanAggregateCurrentPage=1${
isExternalCall ? '&spanKind=3' : ''
}`,
}&${queryString.join('&')}`,
);
};
}
@ -60,7 +65,7 @@ export function onGraphClickHandler(
const points = chart.getElementsAtEventForMode(
event.native,
'nearest',
{ intersect: true },
{ intersect: false },
true,
);
const id = `${from}_button`;
@ -84,3 +89,16 @@ export function onGraphClickHandler(
}
};
}
export const handleNonInQueryRange = (
tags: IQueryBuilderTagFilterItems[],
): IQueryBuilderTagFilterItems[] =>
tags.map((tag) => {
if (tag.op === 'Not IN') {
return {
...tag,
op: 'NIN',
};
}
return tag;
});

22
frontend/src/container/MetricsApplication/TopOperationsTable.tsx
View File

@ -1,27 +1,25 @@
import { Tooltip, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { ResizeTable } from 'components/ResizeTable';
import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes';
import useResourceAttribute from 'hooks/useResourceAttribute';
import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
import history from 'lib/history';
import { convertRawQueriesToTraceSelectedTags } from 'lib/resourceAttributes';
import React from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime';
import MetricReducer from 'types/reducer/metrics';
function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
const { resourceAttributeQueries } = useSelector<AppState, MetricReducer>(
(state) => state.metrics,
);
const { queries } = useResourceAttribute();
const selectedTraceTags: string = JSON.stringify(
convertRawQueriesToTraceSelectedTags(resourceAttributeQueries) || [],
convertRawQueriesToTraceSelectedTags(queries) || [],
);
const { data } = props;
@ -31,14 +29,8 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
const handleOnClick = (operation: string): void => {
const urlParams = new URLSearchParams();
const { servicename } = params;
urlParams.set(
METRICS_PAGE_QUERY_PARAM.startTime,
(minTime / 1000000).toString(),
);
urlParams.set(
METRICS_PAGE_QUERY_PARAM.endTime,
(maxTime / 1000000).toString(),
);
urlParams.set(QueryParams.startTime, (minTime / 1000000).toString());
urlParams.set(QueryParams.endTime, (maxTime / 1000000).toString());
history.push(
`${

2
frontend/src/container/MetricsApplication/index.tsx
View File

@ -1,11 +1,11 @@
import RouteTab from 'components/RouteTab';
import ROUTES from 'constants/routes';
import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
import React, { memo } from 'react';
import { generatePath, useParams } from 'react-router-dom';
import { useLocation } from 'react-use';
import { getWidgetQueryBuilder } from './MetricsApplication.factory';
import ResourceAttributesFilter from './ResourceAttributesFilter';
import DBCall from './Tabs/DBCall';
import External from './Tabs/External';
import Overview from './Tabs/Overview';

70
frontend/src/container/MetricsTable/Metrics.test.tsx Normal file
View File

@ -0,0 +1,70 @@
import { render, RenderResult, screen, waitFor } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import {
combineReducers,
legacy_createStore as createStore,
Store,
} from 'redux';
import { InitialValue } from '../../store/reducers/metric';
import Metrics from './index';
const rootReducer = combineReducers({
metrics: (state = InitialValue) => state,
});
const mockStore = createStore(rootReducer);
const renderWithReduxAndRouter = (mockStore: Store) => (
component: React.ReactElement,
): RenderResult =>
render(
<BrowserRouter>
<Provider store={mockStore}>{component}</Provider>
</BrowserRouter>,
);
describe('Metrics Component', () => {
it('renders without errors', async () => {
renderWithReduxAndRouter(mockStore)(<Metrics />);
await waitFor(() => {
expect(screen.getByText(/application/i)).toBeInTheDocument();
expect(screen.getByText(/p99 latency \(in ms\)/i)).toBeInTheDocument();
expect(screen.getByText(/error rate \(% of total\)/i)).toBeInTheDocument();
expect(screen.getByText(/operations per second/i)).toBeInTheDocument();
});
});
it('renders loading when required conditions are met', async () => {
const customStore = createStore(rootReducer, {
metrics: {
services: [],
loading: true,
error: false,
},
});
const { container } = renderWithReduxAndRouter(customStore)(<Metrics />);
const spinner = container.querySelector('.ant-spin-nested-loading');
expect(spinner).toBeInTheDocument();
});
it('renders no data when required conditions are met', async () => {
const customStore = createStore(rootReducer, {
metrics: {
services: [],
loading: false,
error: false,
},
});
renderWithReduxAndRouter(customStore)(<Metrics />);
expect(screen.getByText('No data')).toBeInTheDocument();
});
});

18
frontend/src/container/MetricsTable/index.tsx
View File

@ -11,6 +11,8 @@ import localStorageSet from 'api/browser/localstorage/set';
import { ResizeTable } from 'components/ResizeTable';
import { SKIP_ONBOARDING } from 'constants/onboarding';
import ROUTES from 'constants/routes';
import { routeConfig } from 'container/SideNav/config';
import { getQueryString } from 'container/SideNav/helper';
import React, { useCallback, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { Link, useLocation } from 'react-router-dom';
@ -88,11 +90,17 @@ function Metrics(): JSX.Element {
.toString()
.toLowerCase()
.includes(value.toString().toLowerCase()),
render: (text: string): JSX.Element => (
<Link to={`${ROUTES.APPLICATION}/${text}${search}`}>
<Name>{text}</Name>
</Link>
),
render: (metrics: string): JSX.Element => {
const urlParams = new URLSearchParams(search);
const avialableParams = routeConfig[ROUTES.SERVICE_METRICS];
const queryString = getQueryString(avialableParams, urlParams);
return (
<Link to={`${ROUTES.APPLICATION}/${metrics}?${queryString.join('')}`}>
<Name>{metrics}</Name>
</Link>
);
},
}),
[filterDropdown, FilterIcon, search],
);

3
frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
View File

@ -129,7 +129,8 @@ function VariableItem({
useEffect(() => {
getOptions();
}, [getOptions]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleChange = (value: string | string[]): void => {
if (

30
frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.typegen.ts
View File

@ -2,31 +2,31 @@
export interface Typegen0 {
'@@xstate/typegen': true;
eventsCausingActions: {
onSelectOperator: 'NEXT';
onBlurPurge: 'onBlur';
onSelectTagValue: 'NEXT';
onValidateQuery: 'onBlur';
onSelectTagKey: 'NEXT';
};
internalEvents: {
'xstate.init': { type: 'xstate.init' };
};
invokeSrcNameMap: {};
missingImplementations: {
actions:
| 'onSelectOperator'
| 'onBlurPurge'
| 'onSelectOperator'
| 'onSelectTagKey'
| 'onSelectTagValue'
| 'onValidateQuery'
| 'onSelectTagKey';
services: never;
guards: never;
| 'onValidateQuery';
delays: never;
guards: never;
services: never;
};
eventsCausingActions: {
onBlurPurge: 'onBlur';
onSelectOperator: 'NEXT';
onSelectTagKey: 'NEXT';
onSelectTagValue: 'NEXT';
onValidateQuery: 'onBlur';
};
eventsCausingServices: {};
eventsCausingGuards: {};
eventsCausingDelays: {};
matchesStates: 'TagKey' | 'Operator' | 'TagValue' | 'Idle';
eventsCausingGuards: {};
eventsCausingServices: {};
matchesStates: 'Idle' | 'Operator' | 'TagKey' | 'TagValue';
tags: never;
}

13
frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
View File

@ -1,10 +1,9 @@
/* eslint-disable */
//@ts-nocheck
/* eslint-disable @typescript-eslint/no-unused-vars */
import { Button, Tabs } from 'antd';
import TextToolTip from 'components/TextToolTip';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
import { QueryBuilder } from 'container/QueryBuilder';
import { cloneDeep, isEqual } from 'lodash-es';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { connect, useSelector } from 'react-redux';
@ -31,6 +30,7 @@ import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
import PromQLQueryContainer from './QueryBuilder/promQL';
import QueryBuilderQueryContainer from './QueryBuilder/queryBuilder';
import TabHeader from './TabHeader';
import { IHandleUpdatedQuery } from './types';
import { getQueryKey } from './utils/getQueryKey';
import { showUnstagedStashConfirmBox } from './utils/userSettings';
@ -54,9 +54,7 @@ function QuerySection({
const { search } = useLocation();
const { widgets } = selectedDashboards.data;
const urlQuery = useMemo(() => {
return new URLSearchParams(search);
}, [search]);
const urlQuery = useMemo(() => new URLSearchParams(search), [search]);
const getWidget = useCallback(() => {
const widgetId = urlQuery.get('widgetId');
@ -169,6 +167,9 @@ function QuerySection({
}
selectedGraph={selectedGraph}
/>
// TODO: uncomment for testing new QueryBuilder
// <QueryBuilder panelType={selectedGraph} />
),
},
{

2
frontend/src/container/NewWidget/styles.ts
View File

@ -11,12 +11,14 @@ export const Container = styled.div`
export const RightContainerWrapper = styled(Col)`
&&& {
min-width: 200px;
margin-bottom: 1rem;
}
`;
export const LeftContainerWrapper = styled(Col)`
&&& {
margin-right: 1rem;
margin-bottom: 1rem;
max-width: 70%;
}
`;

17
frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
View File

@ -1,9 +1,14 @@
import {
IBuilderFormula,
IBuilderQuery,
} from 'types/api/queryBuilder/queryBuilderData';
import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
import { DataSource } from 'types/common/queryBuilder';
export type QueryBuilderConfig =
| {
queryVariant: 'static';
initialDataSource: DataSource;
}
| { queryVariant: 'dropdown' };
export type QueryBuilderProps = {
queryData: IBuilderQuery[];
queryFormula: IBuilderFormula[];
config?: QueryBuilderConfig;
panelType?: ITEMS;
};

100
frontend/src/container/QueryBuilder/QueryBuilder.tsx
View File

@ -1,23 +1,93 @@
import { PlusOutlined } from '@ant-design/icons';
import { Button, Col, Row } from 'antd';
import { MAX_FORMULAS, MAX_QUERIES } from 'constants/queryBuilder';
// ** Hooks
import { useQueryBuilder } from 'hooks/useQueryBuilder';
import React from 'react';
// ** Constants
import React, { memo, useEffect, useMemo } from 'react';
// ** Components
import { Formula, Query } from './components';
// ** Types
import { QueryBuilderProps } from './QueryBuilder.interfaces';
// ** Styles
// TODO: temporary eslint disable while variable isn't used
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function QueryBuilder(props: QueryBuilderProps): JSX.Element {
// TODO: temporary doesn't use
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { queryBuilderData } = useQueryBuilder();
export const QueryBuilder = memo(function QueryBuilder({
config,
panelType,
}: QueryBuilderProps): JSX.Element {
const {
queryBuilderData,
setupInitialDataSource,
addNewQuery,
addNewFormula,
} = useQueryBuilder();
// Here we can use Form from antd library and fill context data or edit
// Connect form with adding or removing items from the list
useEffect(() => {
if (config && config.queryVariant === 'static') {
setupInitialDataSource(config.initialDataSource);
}
// Here will be map of query queryBuilderData.queryData and queryBuilderData.queryFormulas components
// Each component can be part of antd Form list where we can add or remove items
// Also need decide to make a copy of queryData for working with form or not and after it set the full new list with formulas or queries to the context
// With button to add him
return <div>null</div>;
}
return (): void => {
setupInitialDataSource(null);
};
}, [config, setupInitialDataSource]);
const isDisabledQueryButton = useMemo(
() => queryBuilderData.queryData.length >= MAX_QUERIES,
[queryBuilderData],
);
const isDisabledFormulaButton = useMemo(
() => queryBuilderData.queryFormulas.length >= MAX_FORMULAS,
[queryBuilderData],
);
return (
<Row gutter={[0, 20]} justify="start">
<Col span={24}>
<Row gutter={[0, 50]}>
{queryBuilderData.queryData.map((query, index) => (
<Col key={query.queryName} span={24}>
<Query
index={index}
isAvailableToDisable={queryBuilderData.queryData.length > 1}
queryVariant={config?.queryVariant || 'dropdown'}
query={query}
panelType={panelType}
/>
</Col>
))}
{queryBuilderData.queryFormulas.map((formula, index) => (
<Col key={formula.label} span={24}>
<Formula formula={formula} index={index} />
</Col>
))}
</Row>
</Col>
<Row gutter={[20, 0]}>
<Col>
<Button
disabled={isDisabledQueryButton}
type="primary"
icon={<PlusOutlined />}
onClick={addNewQuery}
>
Query
</Button>
</Col>
<Col>
<Button
disabled={isDisabledFormulaButton}
onClick={addNewFormula}
type="primary"
icon={<PlusOutlined />}
>
Formula
</Button>
</Col>
</Row>
</Row>
);
});

6
frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
export type AdditionalFiltersProps = {
listOfAdditionalFilter: string[];
children: React.ReactNode;
};

34
frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styled.ts Normal file
View File

@ -0,0 +1,34 @@
import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
import { Col, Typography } from 'antd';
import styled, { css } from 'styled-components';
const IconCss = css`
margin-right: 0.6875rem;
transition: all 0.2s ease;
`;
export const StyledIconOpen = styled(PlusSquareOutlined)`
${IconCss}
`;
export const StyledIconClose = styled(MinusSquareOutlined)`
${IconCss}
`;
export const StyledInner = styled(Col)`
width: fit-content;
display: flex;
align-items: center;
margin-bottom: 0.875rem;
min-height: 1.375rem;
cursor: pointer;
&:hover {
${StyledIconOpen}, ${StyledIconClose} {
opacity: 0.7;
}
}
`;
export const StyledLink = styled(Typography.Link)`
pointer-events: none;
`;

53
frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx Normal file
View File

@ -0,0 +1,53 @@
import { Col, Row } from 'antd';
import React, { Fragment, memo, ReactNode, useState } from 'react';
// ** Types
import { AdditionalFiltersProps } from './AdditionalFiltersToggler.interfaces';
// ** Styles
import {
StyledIconClose,
StyledIconOpen,
StyledInner,
StyledLink,
} from './AdditionalFiltersToggler.styled';
export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
children,
listOfAdditionalFilter,
}: AdditionalFiltersProps): JSX.Element {
const [isOpenedFilters, setIsOpenedFilters] = useState<boolean>(false);
const handleToggleOpenFilters = (): void => {
setIsOpenedFilters((prevState) => !prevState);
};
const filtersTexts: ReactNode = listOfAdditionalFilter.map((str, index) => {
const isNextLast = index + 1 === listOfAdditionalFilter.length - 1;
if (index === listOfAdditionalFilter.length - 1) {
return (
<Fragment key={str}>
and <StyledLink>{str.toUpperCase()}</StyledLink>
</Fragment>
);
}
return (
<span key={str}>
<StyledLink>{str.toUpperCase()}</StyledLink>
{isNextLast ? ' ' : ', '}
</span>
);
});
return (
<Row>
<Col span={24}>
<StyledInner onClick={handleToggleOpenFilters}>
{isOpenedFilters ? <StyledIconClose /> : <StyledIconOpen />}
{!isOpenedFilters && <span>Add conditions for {filtersTexts}</span>}
</StyledInner>
</Col>
{isOpenedFilters && <Col span={24}>{children}</Col>}
</Row>
);
});

1
frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/index.ts Normal file
View File

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

6
frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.interfaces.ts Normal file
View File

@ -0,0 +1,6 @@
import { SelectProps } from 'antd';
import { DataSource } from 'types/common/queryBuilder';
export type QueryLabelProps = {
onChange: (value: DataSource) => void;
} & Omit<SelectProps, 'onChange'>;

35
frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Select } from 'antd';
import React, { memo } from 'react';
import { DataSource } from 'types/common/queryBuilder';
import { SelectOption } from 'types/common/select';
// ** Helpers
import { transformToUpperCase } from 'utils/transformToUpperCase';
// ** Types
import { QueryLabelProps } from './DataSourceDropdown.interfaces';
const dataSourceMap = [DataSource.LOGS, DataSource.METRICS, DataSource.TRACES];
export const DataSourceDropdown = memo(function DataSourceDropdown(
props: QueryLabelProps,
): JSX.Element {
const { onChange, value, style } = props;
const dataSourceOptions: SelectOption<
DataSource,
string
>[] = dataSourceMap.map((source) => ({
label: transformToUpperCase(source),
value: source,
}));
return (
<Select
defaultValue={dataSourceOptions[0].value}
options={dataSourceOptions}
onChange={onChange}
value={value}
style={style}
/>
);
});

1
frontend/src/container/QueryBuilder/components/DataSourceDropdown/index.ts Normal file
View File

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

6
frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.interfaces.ts Normal file
View File

@ -0,0 +1,6 @@
import { CSSProperties } from 'react';
export type FilterLabelProps = {
label: string;
style?: CSSProperties;
};

13
frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts Normal file
View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
export const StyledLabel = styled.div`
padding: 0 0.6875rem;
min-height: 2rem;
width: 100%;
display: inline-flex;
white-space: nowrap;
align-items: center;
border-radius: 0.125rem;
border: 0.0625rem solid #434343;
background-color: #141414;
`;

12
frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx Normal file
View File

@ -0,0 +1,12 @@
import React, { memo } from 'react';
// ** Types
import { FilterLabelProps } from './FilterLabel.interfaces';
// ** Styles
import { StyledLabel } from './FilterLabel.styled';
export const FilterLabel = memo(function FilterLabel({
label,
}: FilterLabelProps): JSX.Element {
return <StyledLabel>{label}</StyledLabel>;
});

1
frontend/src/container/QueryBuilder/components/FilterLabel/index.ts Normal file
View File

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

3
frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts Normal file
View File

@ -0,0 +1,3 @@
import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
export type FormulaProps = { formula: IBuilderFormula; index: number };

73
frontend/src/container/QueryBuilder/components/Formula/Formula.tsx Normal file
View File

@ -0,0 +1,73 @@
import { Col, Input } from 'antd';
// ** Components
import { ListItemWrapper, ListMarker } from 'container/QueryBuilder/components';
// ** Hooks
import { useQueryBuilder } from 'hooks/useQueryBuilder';
import React, { ChangeEvent, useCallback } from 'react';
import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
// ** Types
import { FormulaProps } from './Formula.interfaces';
const { TextArea } = Input;
export function Formula({ index, formula }: FormulaProps): JSX.Element {
const { removeEntityByIndex, handleSetFormulaData } = useQueryBuilder();
const handleDelete = useCallback(() => {
removeEntityByIndex('queryFormulas', index);
}, [index, removeEntityByIndex]);
const handleToggleDisableFormula = useCallback((): void => {
const newFormula: IBuilderFormula = {
...formula,
disabled: !formula.disabled,
};
handleSetFormulaData(index, newFormula);
}, [index, formula, handleSetFormulaData]);
const handleChange = useCallback(
(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
const newFormula: IBuilderFormula = {
...formula,
[name]: value,
};
handleSetFormulaData(index, newFormula);
},
[index, formula, handleSetFormulaData],
);
return (
<ListItemWrapper onDelete={handleDelete}>
<Col span={24}>
<ListMarker
isDisabled={formula.disabled}
onDisable={handleToggleDisableFormula}
labelName={formula.label}
index={index}
/>
</Col>
<Col span={24}>
<TextArea
name="expression"
onChange={handleChange}
size="middle"
value={formula.expression}
rows={2}
/>
</Col>
<Col span={24}>
<Input
name="legend"
onChange={handleChange}
size="middle"
value={formula.legend}
addonBefore="Legend Format"
/>
</Col>
</ListItemWrapper>
);
}

1
frontend/src/container/QueryBuilder/components/Formula/index.ts Normal file
View File

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

6
frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.interfaces.ts Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
export type ListItemWrapperProps = {
onDelete: () => void;
children: React.ReactNode;
};

26
frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.styled.ts Normal file
View File

@ -0,0 +1,26 @@
import { CloseCircleOutlined } from '@ant-design/icons';
import { Row } from 'antd';
import styled from 'styled-components';
export const StyledDeleteEntity = styled(CloseCircleOutlined)`
position: absolute;
top: 0.5rem;
right: 0.9375rem;
z-index: 1;
cursor: pointer;
opacity: 0.45;
width: 1.3125rem;
height: 1.3125rem;
svg {
width: 100%;
height: 100%;
}
`;
export const StyledRow = styled(Row)`
padding-right: 3rem;
`;
export const StyledFilterRow = styled(Row)`
margin-bottom: 0.875rem;
`;

18
frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
// ** Types
import { ListItemWrapperProps } from './ListItemWrapper.interfaces';
// ** Styles
import { StyledDeleteEntity, StyledRow } from './ListItemWrapper.styled';
export function ListItemWrapper({
children,
onDelete,
}: ListItemWrapperProps): JSX.Element {
return (
<StyledRow gutter={[0, 15]}>
<StyledDeleteEntity onClick={onDelete} />
{children}
</StyledRow>
);
}

1
frontend/src/container/QueryBuilder/components/ListItemWrapper/index.ts Normal file
View File

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

7
frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.interfaces.ts
View File

@ -1,8 +1,11 @@
import { CSSProperties } from 'react';
export type ListMarkerProps = {
isDisabled: boolean;
labelName: string;
index: number;
className?: string;
isAvailableToDisable: boolean;
toggleDisabled: (index: number) => void;
isAvailableToDisable?: boolean;
onDisable: (index: number) => void;
style?: CSSProperties;
};

8
frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.styled.ts
View File

@ -1,9 +1,13 @@
import { Button } from 'antd';
import styled from 'styled-components';
export const StyledButton = styled(Button)`
export const StyledButton = styled(Button)<{ $isAvailableToDisable: boolean }>`
min-width: 2rem;
height: 2.25rem;
padding: 0.125rem;
padding: ${(props): string =>
props.$isAvailableToDisable ? '0.43rem' : '0.43rem 0.68rem'};
border-radius: 0.375rem;
margin-right: 0.5rem;
pointer-events: ${(props): string =>
props.$isAvailableToDisable ? 'default' : 'none'};
`;

15
frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx
View File

@ -1,25 +1,26 @@
import { EyeFilled, EyeInvisibleFilled } from '@ant-design/icons';
import { ButtonProps } from 'antd';
import React from 'react';
import React, { memo } from 'react';
// ** Types
import { ListMarkerProps } from './ListMarker.interfaces';
// ** Styles
import { StyledButton } from './ListMarker.styled';
export function ListMarker({
export const ListMarker = memo(function ListMarker({
isDisabled,
labelName,
index,
isAvailableToDisable,
isAvailableToDisable = true,
className,
toggleDisabled,
onDisable,
style,
}: ListMarkerProps): JSX.Element {
const buttonProps: Partial<ButtonProps> = isAvailableToDisable
? {
type: isDisabled ? 'default' : 'primary',
icon: isDisabled ? <EyeInvisibleFilled /> : <EyeFilled />,
onClick: (): void => toggleDisabled(index),
onClick: (): void => onDisable(index),
}
: { type: 'primary' };
@ -29,8 +30,10 @@ export function ListMarker({
icon={buttonProps.icon}
onClick={buttonProps.onClick}
className={className}
$isAvailableToDisable={isAvailableToDisable}
style={style}
>
{labelName}
</StyledButton>
);
}
});

10
frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts Normal file
View File

@ -0,0 +1,10 @@
import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
export type QueryProps = {
index: number;
isAvailableToDisable: boolean;
query: IBuilderQueryForm;
queryVariant: 'static' | 'dropdown';
panelType?: ITEMS;
};

393
frontend/src/container/QueryBuilder/components/Query/Query.tsx Normal file
View File

@ -0,0 +1,393 @@
import { Col, Input, Row } from 'antd';
// ** Constants
import {
initialAggregateAttribute,
initialQueryBuilderFormValues,
mapOfFilters,
mapOfOperators,
} from 'constants/queryBuilder';
// ** Components
import {
AdditionalFiltersToggler,
DataSourceDropdown,
FilterLabel,
ListItemWrapper,
ListMarker,
} from 'container/QueryBuilder/components';
import {
AggregatorFilter,
GroupByFilter,
HavingFilter,
OperatorsSelect,
ReduceToFilter,
} from 'container/QueryBuilder/filters';
import AggregateEveryFilter from 'container/QueryBuilder/filters/AggregateEveryFilter';
import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter';
import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
import { useQueryBuilder } from 'hooks/useQueryBuilder';
import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator';
// ** Hooks
import React, { memo, useCallback, useMemo } from 'react';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import {
Having,
IBuilderQueryForm,
TagFilter,
} from 'types/api/queryBuilder/queryBuilderData';
import { DataSource, StringOperators } from 'types/common/queryBuilder';
import { transformToUpperCase } from 'utils/transformToUpperCase';
// ** Types
import { QueryProps } from './Query.interfaces';
export const Query = memo(function Query({
index,
isAvailableToDisable,
queryVariant,
query,
panelType,
}: QueryProps): JSX.Element {
const {
handleSetQueryData,
removeEntityByIndex,
initialDataSource,
} = useQueryBuilder();
const currentListOfOperators = useMemo(
() => mapOfOperators[query.dataSource],
[query],
);
const listOfAdditionalFilters = useMemo(() => mapOfFilters[query.dataSource], [
query,
]);
const handleChangeOperator = useCallback(
(value: string): void => {
const aggregateDataType: BaseAutocompleteData['dataType'] =
query.aggregateAttribute.dataType;
const newQuery: IBuilderQueryForm = {
...query,
aggregateOperator: value,
having: [],
groupBy: [],
orderBy: [],
limit: null,
tagFilters: { items: [], op: 'AND' },
};
if (!aggregateDataType) {
handleSetQueryData(index, newQuery);
return;
}
switch (aggregateDataType) {
case 'string':
case 'bool': {
const typeOfValue = findDataTypeOfOperator(value);
handleSetQueryData(index, {
...newQuery,
...(typeOfValue === 'number'
? { aggregateAttribute: initialAggregateAttribute }
: {}),
});
break;
}
case 'float64':
case 'int64': {
handleSetQueryData(index, newQuery);
break;
}
default: {
handleSetQueryData(index, newQuery);
break;
}
}
},
[index, query, handleSetQueryData],
);
const handleChangeAggregatorAttribute = useCallback(
(value: BaseAutocompleteData): void => {
const newQuery: IBuilderQueryForm = {
...query,
aggregateAttribute: value,
having: [],
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleChangeDataSource = useCallback(
(nextSource: DataSource): void => {
let newQuery: IBuilderQueryForm = {
...query,
dataSource: nextSource,
};
if (nextSource !== query.dataSource) {
const initCopy = {
...(initialQueryBuilderFormValues as Partial<IBuilderQueryForm>),
};
delete initCopy.queryName;
newQuery = {
...newQuery,
...initCopy,
dataSource: initialDataSource || nextSource,
aggregateOperator: mapOfOperators[nextSource][0],
};
}
handleSetQueryData(index, newQuery);
},
[index, query, initialDataSource, handleSetQueryData],
);
const handleToggleDisableQuery = useCallback((): void => {
const newQuery: IBuilderQueryForm = {
...query,
disabled: !query.disabled,
};
handleSetQueryData(index, newQuery);
}, [index, query, handleSetQueryData]);
const handleChangeGroupByKeys = useCallback(
(values: BaseAutocompleteData[]): void => {
const newQuery: IBuilderQueryForm = {
...query,
groupBy: values,
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleChangeQueryLegend = useCallback(
(e: React.ChangeEvent<HTMLInputElement>): void => {
const newQuery: IBuilderQueryForm = {
...query,
legend: e.target.value,
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleChangeReduceTo = useCallback(
(value: string): void => {
const newQuery: IBuilderQueryForm = {
...query,
reduceTo: value,
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleChangeHavingFilter = useCallback(
(having: Having[]) => {
const newQuery: IBuilderQueryForm = { ...query, having };
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleDeleteQuery = useCallback(() => {
removeEntityByIndex('queryData', index);
}, [removeEntityByIndex, index]);
const isMatricsDataSource = useMemo(
() => query.dataSource === DataSource.METRICS,
[query.dataSource],
);
const handleChangeOrderByKeys = useCallback(
(values: BaseAutocompleteData[]): void => {
const newQuery: IBuilderQueryForm = {
...query,
orderBy: values,
};
handleSetQueryData(index, newQuery);
},
[handleSetQueryData, index, query],
);
const handleChangeLimit = useCallback(
(value: number | null): void => {
const newQuery: IBuilderQueryForm = {
...query,
limit: value,
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleChangeAggregateEvery = useCallback(
(value: number): void => {
const newQuery: IBuilderQueryForm = {
...query,
stepInterval: value,
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
const handleChangeTagFilters = useCallback(
(value: TagFilter): void => {
const newQuery: IBuilderQueryForm = {
...query,
tagFilters: value,
};
handleSetQueryData(index, newQuery);
},
[index, query, handleSetQueryData],
);
return (
<ListItemWrapper onDelete={handleDeleteQuery}>
<Col span={24}>
<Row align="middle">
<Col>
<ListMarker
isDisabled={query.disabled}
onDisable={handleToggleDisableQuery}
labelName={query.queryName}
index={index}
isAvailableToDisable={isAvailableToDisable}
/>
{queryVariant === 'dropdown' ? (
<DataSourceDropdown
onChange={handleChangeDataSource}
value={query.dataSource}
style={{ marginRight: '0.5rem' }}
/>
) : (
<FilterLabel label={transformToUpperCase(query.dataSource)} />
)}
</Col>
<Col flex="1">
<Row gutter={[11, 5]}>
{isMatricsDataSource && (
<Col>
<FilterLabel label="WHERE" />
</Col>
)}
<Col flex="1">
<QueryBuilderSearch query={query} onChange={handleChangeTagFilters} />
</Col>
</Row>
</Col>
</Row>
</Col>
<Col span={11}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<OperatorsSelect
value={query.aggregateOperator || currentListOfOperators[0]}
onChange={handleChangeOperator}
operators={currentListOfOperators}
/>
</Col>
<Col flex="1 1 12.5rem">
<AggregatorFilter
onChange={handleChangeAggregatorAttribute}
query={query}
/>
</Col>
</Row>
</Col>
<Col span={11} offset={2}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<FilterLabel label={panelType === 'VALUE' ? 'Reduce to' : 'Group by'} />
</Col>
<Col flex="1 1 12.5rem">
{panelType === 'VALUE' ? (
<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
) : (
<GroupByFilter query={query} onChange={handleChangeGroupByKeys} />
)}
</Col>
</Row>
</Col>
<Col span={24}>
<AdditionalFiltersToggler listOfAdditionalFilter={listOfAdditionalFilters}>
<Row gutter={[0, 11]} justify="space-between">
{!isMatricsDataSource && (
<Col span={11}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<FilterLabel label="Limit" />
</Col>
<Col flex="1 1 12.5rem">
<LimitFilter query={query} onChange={handleChangeLimit} />
</Col>
</Row>
</Col>
)}
{query.aggregateOperator !== StringOperators.NOOP && (
<Col span={11}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<FilterLabel label="HAVING" />
</Col>
<Col flex="1 1 12.5rem">
<HavingFilter onChange={handleChangeHavingFilter} query={query} />
</Col>
</Row>
</Col>
)}
{!isMatricsDataSource && (
<Col span={11}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<FilterLabel label="Order by" />
</Col>
<Col flex="1 1 12.5rem">
<OrderByFilter query={query} onChange={handleChangeOrderByKeys} />
</Col>
</Row>
</Col>
)}
<Col span={11}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<FilterLabel label="Aggregate Every" />
</Col>
<Col flex="1 1 6rem">
<AggregateEveryFilter
query={query}
onChange={handleChangeAggregateEvery}
/>
</Col>
</Row>
</Col>
</Row>
</AdditionalFiltersToggler>
</Col>
<Row style={{ width: '100%' }}>
<Input
onChange={handleChangeQueryLegend}
size="middle"
value={query.legend}
addonBefore="Legend Format"
/>
</Row>
</ListItemWrapper>
);
});

1
frontend/src/container/QueryBuilder/components/Query/index.ts Normal file
View File

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

17
frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.interfaces.ts
View File

@ -1,17 +0,0 @@
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';
}

19
frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.styled.ts
View File

@ -1,19 +0,0 @@
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}
`;

49
frontend/src/container/QueryBuilder/components/QueryLabel/QueryLabel.tsx
View File

@ -1,49 +0,0 @@
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}
/>
);
}

1
frontend/src/container/QueryBuilder/components/QueryLabel/index.ts
View File

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

7
frontend/src/container/QueryBuilder/components/index.ts
View File

@ -1,2 +1,7 @@
export { AdditionalFiltersToggler } from './AdditionalFiltersToggler';
export { DataSourceDropdown } from './DataSourceDropdown';
export { FilterLabel } from './FilterLabel';
export { Formula } from './Formula';
export { ListItemWrapper } from './ListItemWrapper';
export { ListMarker } from './ListMarker';
export { QueryLabel } from './QueryLabel';
export { Query } from './Query';

62
frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx Normal file
View File

@ -0,0 +1,62 @@
import { Input } from 'antd';
import getStep from 'lib/getStep';
import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
import { GlobalReducer } from 'types/reducer/globalTime';
import { selectStyle } from '../QueryBuilderSearch/config';
function AggregateEveryFilter({
onChange,
query,
}: AggregateEveryFilterProps): JSX.Element {
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
const stepInterval = useMemo(
() =>
getStep({
start: minTime,
end: maxTime,
inputFormat: 'ns',
}),
[maxTime, minTime],
);
const handleKeyDown = (event: {
keyCode: number;
which: number;
preventDefault: () => void;
}): void => {
const keyCode = event.keyCode || event.which;
const isBackspace = keyCode === 8;
const isNumeric =
(keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
if (!isNumeric && !isBackspace) {
event.preventDefault();
}
};
return (
<Input
type="text"
placeholder="Enter in seconds"
disabled={!query.aggregateAttribute.key}
style={selectStyle}
defaultValue={stepInterval ?? query.stepInterval}
onChange={(event): void => onChange(Number(event.target.value))}
onKeyDown={handleKeyDown}
/>
);
}
interface AggregateEveryFilterProps {
onChange: (values: number) => void;
query: IBuilderQueryForm;
}
export default AggregateEveryFilter;

7
frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.intefaces.ts Normal file
View File

@ -0,0 +1,7 @@
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
export type AgregatorFilterProps = {
onChange: (value: BaseAutocompleteData) => void;
query: IBuilderQueryForm;
};

83
frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx Normal file
View File

@ -0,0 +1,83 @@
// ** Components
import { AutoComplete, Spin } from 'antd';
// ** Api
import { getAggregateAttribute } from 'api/queryBuilder/getAggregateAttribute';
import { initialAggregateAttribute } from 'constants/queryBuilder';
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import React, { memo, useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { SelectOption } from 'types/common/select';
import { transformToUpperCase } from 'utils/transformToUpperCase';
import { selectStyle } from '../QueryBuilderSearch/config';
// ** Types
import { AgregatorFilterProps } from './AggregatorFilter.intefaces';
export const AggregatorFilter = memo(function AggregatorFilter({
onChange,
query,
}: AgregatorFilterProps): JSX.Element {
const [searchText, setSearchText] = useState<string>('');
const { data, isFetching } = useQuery(
[
'GET_AGGREGATE_ATTRIBUTE',
searchText,
query.aggregateOperator,
query.dataSource,
],
async () =>
getAggregateAttribute({
searchText,
aggregateOperator: query.aggregateOperator,
dataSource: query.dataSource,
}),
{ enabled: !!query.aggregateOperator && !!query.dataSource },
);
const handleSearchAttribute = (searchText: string): void =>
setSearchText(searchText);
const optionsData: SelectOption<string, string>[] =
data?.payload?.attributeKeys?.map((item) => ({
label: transformStringWithPrefix({
str: item.key,
prefix: item.type || '',
condition: !item.isColumn,
}),
value: item.key,
})) || [];
const handleChangeAttribute = (value: string): void => {
const currentAttributeObj = data?.payload?.attributeKeys?.find(
(item) => item.key === value,
) || { ...initialAggregateAttribute, key: value };
onChange(currentAttributeObj);
};
const value = useMemo(
() =>
transformStringWithPrefix({
str: query.aggregateAttribute.key,
prefix: query.aggregateAttribute.type || '',
condition: !query.aggregateAttribute.isColumn,
}),
[query],
);
return (
<AutoComplete
showSearch
placeholder={`${transformToUpperCase(query.dataSource)} name`}
style={selectStyle}
showArrow={false}
filterOption={false}
onSearch={handleSearchAttribute}
notFoundContent={isFetching ? <Spin size="small" /> : null}
options={optionsData}
value={value}
onChange={handleChangeAttribute}
/>
);
});

1
frontend/src/container/QueryBuilder/filters/AggregatorFilter/index.ts Normal file
View File

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

15
frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.interfaces.ts Normal file
View File

@ -0,0 +1,15 @@
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
export type GroupByFilterProps = {
query: IBuilderQueryForm;
onChange: (values: BaseAutocompleteData[]) => void;
};
export type GroupByFilterValue = {
disabled: boolean | undefined;
key: string;
label: string;
title: string | undefined;
value: string;
};

107
frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx Normal file
View File

@ -0,0 +1,107 @@
import { Select, Spin } from 'antd';
import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
// ** Constants
import { QueryBuilderKeys } from 'constants/queryBuilder';
// ** Components
// ** Helpers
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import React, { memo, useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { MetricAggregateOperator } from 'types/common/queryBuilder';
import { SelectOption } from 'types/common/select';
import { selectStyle } from '../QueryBuilderSearch/config';
import {
GroupByFilterProps,
GroupByFilterValue,
} from './GroupByFilter.interfaces';
export const GroupByFilter = memo(function GroupByFilter({
query,
onChange,
}: GroupByFilterProps): JSX.Element {
const [searchText, setSearchText] = useState<string>('');
const { data, isFetching } = useQuery(
[QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText],
async () =>
getAggregateKeys({
aggregateAttribute: query.aggregateAttribute.key,
tagType: query.aggregateAttribute.type,
dataSource: query.dataSource,
aggregateOperator: query.aggregateOperator,
searchText,
}),
{ enabled: !!query.aggregateAttribute.key, keepPreviousData: true },
);
const handleSearchKeys = (searchText: string): void => {
setSearchText(searchText);
};
const optionsData: SelectOption<string, string>[] =
data?.payload?.attributeKeys?.map((item) => ({
label: transformStringWithPrefix({
str: item.key,
prefix: item.type || '',
condition: !item.isColumn,
}),
value: item.key,
})) || [];
const handleChange = (values: GroupByFilterValue[]): void => {
const groupByValues: BaseAutocompleteData[] = values.map((item) => {
const iterationArray = data?.payload?.attributeKeys || query.groupBy;
const existGroup = iterationArray.find((group) => group.key === item.value);
if (existGroup) {
return existGroup;
}
return {
isColumn: null,
key: item.value,
dataType: null,
type: null,
};
});
onChange(groupByValues);
};
const values: GroupByFilterValue[] = query.groupBy.map((item) => ({
label: transformStringWithPrefix({
str: item.key,
prefix: item.type || '',
condition: !item.isColumn,
}),
key: item.key,
value: item.key,
disabled: undefined,
title: undefined,
}));
const isDisabledSelect = useMemo(
() =>
!query.aggregateAttribute.key ||
query.aggregateOperator === MetricAggregateOperator.NOOP,
[query.aggregateAttribute.key, query.aggregateOperator],
);
return (
<Select
mode="tags"
style={selectStyle}
onSearch={handleSearchKeys}
showSearch
disabled={isDisabledSelect}
showArrow={false}
filterOption={false}
options={optionsData}
labelInValue
value={values}
notFoundContent={isFetching ? <Spin size="small" /> : null}
onChange={handleChange}
/>
);
});

1
frontend/src/container/QueryBuilder/filters/GroupByFilter/index.ts Normal file
View File

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

9
frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.interfaces.ts Normal file
View File

@ -0,0 +1,9 @@
import {
Having,
IBuilderQueryForm,
} from 'types/api/queryBuilder/queryBuilderData';
export type HavingFilterProps = {
query: IBuilderQueryForm;
onChange: (having: Having[]) => void;
};

196
frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx Normal file
View File

@ -0,0 +1,196 @@
import { Select } from 'antd';
// ** Constants
import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
// ** Hooks
import { useTagValidation } from 'hooks/queryBuilder/useTagValidation';
import {
transformFromStringToHaving,
transformHavingToStringValue,
} from 'lib/query/transformQueryBuilderData';
// ** Helpers
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Having } from 'types/api/queryBuilder/queryBuilderData';
import { SelectOption } from 'types/common/select';
// ** Types
import { HavingFilterProps } from './HavingFilter.interfaces';
const { Option } = Select;
export function HavingFilter({
query,
onChange,
}: HavingFilterProps): JSX.Element {
const { having } = query;
const [searchText, setSearchText] = useState<string>('');
const [options, setOptions] = useState<SelectOption<string, string>[]>([]);
const [localValues, setLocalValues] = useState<string[]>([]);
const [currentFormValue, setCurrentFormValue] = useState<Having>(
initialHavingValues,
);
const { isMulti } = useTagValidation(
searchText,
currentFormValue.op,
currentFormValue.value,
);
const aggregatorAttribute = useMemo(
() =>
transformStringWithPrefix({
str: query.aggregateAttribute.key,
prefix: query.aggregateAttribute.type || '',
condition: !query.aggregateAttribute.isColumn,
}),
[query],
);
const columnName = useMemo(
() => `${query.aggregateOperator.toUpperCase()}(${aggregatorAttribute})`,
[query, aggregatorAttribute],
);
const aggregatorOptions: SelectOption<string, string>[] = useMemo(
() => [{ label: columnName, value: columnName }],
[columnName],
);
const getHavingObject = useCallback((currentSearch: string): Having => {
const textArr = currentSearch.split(' ');
const [columnName = '', op = '', ...value] = textArr;
return { columnName, op, value };
}, []);
const generateOptions = useCallback(
(search: string): void => {
const [aggregator = '', op = '', ...restValue] = search.split(' ');
let newOptions: SelectOption<string, string>[] = [];
const isAggregatorExist = columnName
.toLowerCase()
.includes(search.toLowerCase());
const isAggregatorChosen = aggregator === columnName;
if (isAggregatorExist || aggregator === '') {
newOptions = aggregatorOptions;
}
if ((isAggregatorChosen && op === '') || op) {
const filteredOperators = HAVING_OPERATORS.filter((num) =>
num.toLowerCase().includes(op.toLowerCase()),
);
newOptions = filteredOperators.map((opt) => ({
label: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
value: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
}));
}
setOptions(newOptions);
},
[columnName, aggregatorOptions],
);
const isValidHavingValue = (search: string): boolean => {
const values = getHavingObject(search).value.join(' ');
if (values) {
const numRegexp = /^[^a-zA-Z]*$/;
return numRegexp.test(values);
}
return true;
};
const handleSearch = (search: string): void => {
const trimmedSearch = search.replace(/\s\s+/g, ' ').trimStart();
const currentSearch = isMulti
? trimmedSearch
: trimmedSearch.split(' ').slice(0, 3).join(' ');
const isValidSearch = isValidHavingValue(currentSearch);
if (isValidSearch) {
setSearchText(currentSearch);
}
};
const resetChanges = (): void => {
handleSearch('');
setCurrentFormValue(initialHavingValues);
setOptions(aggregatorOptions);
};
const handleChange = (values: string[]): void => {
const having: Having[] = values.map(transformFromStringToHaving);
const isSelectable: boolean =
currentFormValue.value.length > 0 &&
currentFormValue.value.every((value) => !!value);
if (isSelectable) {
onChange(having);
resetChanges();
}
};
const handleSelect = (currentValue: string): void => {
const { columnName, op, value } = getHavingObject(currentValue);
const isCompletedValue = value.every((item) => !!item);
const isClearSearch = isCompletedValue && columnName && op;
handleSearch(isClearSearch ? '' : currentValue);
};
const parseSearchText = useCallback(
(text: string) => {
const { columnName, op, value } = getHavingObject(text);
setCurrentFormValue({ columnName, op, value });
generateOptions(text);
},
[generateOptions, getHavingObject],
);
const handleDeselect = (value: string): void => {
const result = localValues.filter((item) => item !== value);
setLocalValues(result);
};
useEffect(() => {
parseSearchText(searchText);
}, [searchText, parseSearchText]);
useEffect(() => {
setLocalValues(transformHavingToStringValue(having));
}, [having]);
return (
<Select
mode="multiple"
onSearch={handleSearch}
searchValue={searchText}
value={localValues}
data-testid="havingSelect"
disabled={!query.aggregateAttribute.key}
style={{ width: '100%' }}
notFoundContent={currentFormValue.value.length === 0 ? undefined : null}
placeholder="Count(operation) > 5"
onDeselect={handleDeselect}
onBlur={resetChanges}
onChange={handleChange}
onSelect={handleSelect}
>
{options.map((opt) => (
<Option key={opt.value} value={opt.value} title="havingOption">
{opt.label}
</Option>
))}
</Select>
);
}

166
frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx Normal file
View File

@ -0,0 +1,166 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// Constants
import {
HAVING_OPERATORS,
initialQueryBuilderFormValues,
} from 'constants/queryBuilder';
import { transformFromStringToHaving } from 'lib/query/transformQueryBuilderData';
import React from 'react';
// ** Types
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
import { DataSource } from 'types/common/queryBuilder';
// ** Components
import { HavingFilter } from '../HavingFilter';
const valueWithAttributeAndOperator: IBuilderQueryForm = {
...initialQueryBuilderFormValues,
dataSource: DataSource.LOGS,
aggregateOperator: 'SUM',
aggregateAttribute: {
isColumn: false,
key: 'bytes',
type: 'tag',
dataType: 'float64',
},
};
describe('Having filter behaviour', () => {
test('Having filter render is rendered', () => {
const mockFn = jest.fn();
const { unmount } = render(
<HavingFilter query={initialQueryBuilderFormValues} onChange={mockFn} />,
);
const selectId = 'havingSelect';
const select = screen.getByTestId(selectId);
expect(select).toBeInTheDocument();
unmount();
});
test('Having render is disabled initially', () => {
const mockFn = jest.fn();
const { unmount } = render(
<HavingFilter query={initialQueryBuilderFormValues} onChange={mockFn} />,
);
const input = screen.getByRole('combobox');
expect(input).toBeDisabled();
unmount();
});
test('Is having filter is enable', () => {
const mockFn = jest.fn();
const { unmount } = render(
<HavingFilter query={valueWithAttributeAndOperator} onChange={mockFn} />,
);
const input = screen.getByRole('combobox');
expect(input).toBeEnabled();
unmount();
});
test('Autocomplete in the having filter', async () => {
const onChange = jest.fn();
const user = userEvent.setup();
const constructedAttribute = 'SUM(tag_bytes)';
const optionTestTitle = 'havingOption';
const { unmount } = render(
<HavingFilter query={valueWithAttributeAndOperator} onChange={onChange} />,
);
// get input
const input = screen.getByRole('combobox');
// click on the select
await user.click(input);
// show predefined options for operator with attribute SUM(tag_bytes)
const option = screen.getByTitle(optionTestTitle);
expect(option).toBeInTheDocument();
await user.click(option);
// autocomplete input
expect(input).toHaveValue(constructedAttribute);
// clear value from input and write from keyboard
await user.clear(input);
await user.type(input, 'bytes');
// show again predefined options for operator with attribute SUM(tag_bytes)
const sameAttributeOption = screen.getByTitle(optionTestTitle);
expect(sameAttributeOption).toBeInTheDocument();
await user.click(sameAttributeOption);
expect(input).toHaveValue(constructedAttribute);
// show operators after SUM(tag_bytes)
const operatorsOptions = screen.getAllByTitle(optionTestTitle);
expect(operatorsOptions.length).toEqual(HAVING_OPERATORS.length);
// show operators after SUM(tag_bytes) when type from keyboard
await user.clear(input);
await user.type(input, `${constructedAttribute} !=`);
// get filtered operators
const filteredOperators = screen.getAllByTitle(optionTestTitle);
expect(filteredOperators.length).toEqual(1);
// clear and show again all operators
await user.clear(input);
await user.type(input, constructedAttribute);
const returnedOptions = screen.getAllByTitle(optionTestTitle);
expect(returnedOptions.length).toEqual(HAVING_OPERATORS.length);
// check write value after operator
await user.clear(input);
await user.type(input, `${constructedAttribute} != 123`);
expect(input).toHaveValue(`${constructedAttribute} != 123`);
const optionWithValue = screen.getByTitle(optionTestTitle);
// onChange after complete writting in the input or autocomplete
await user.click(optionWithValue);
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith([
transformFromStringToHaving(`${constructedAttribute} != 123`),
]);
// onChange with multiple operator
await user.type(input, `${constructedAttribute} IN 123 123`);
expect(input).toHaveValue(`${constructedAttribute} IN 123 123`);
const optionWithMultipleValue = screen.getByTitle(optionTestTitle);
await user.click(optionWithMultipleValue);
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenCalledWith([
transformFromStringToHaving(`${constructedAttribute} IN 123 123`),
]);
unmount();
});
});

1
frontend/src/container/QueryBuilder/filters/HavingFilter/index.ts Normal file
View File

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

28
frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx Normal file
View File

@ -0,0 +1,28 @@
import { InputNumber } from 'antd';
import React from 'react';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
import { selectStyle } from '../QueryBuilderSearch/config';
function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
const onChangeHandler = (value: number | null): void => {
onChange(value);
};
return (
<InputNumber
min={1}
type="number"
disabled={!query.aggregateAttribute.key}
style={selectStyle}
onChange={onChangeHandler}
/>
);
}
interface LimitFilterProps {
onChange: (values: number | null) => void;
query: IBuilderQueryForm;
}
export default LimitFilter;

7
frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.interfaces.ts Normal file
View File

@ -0,0 +1,7 @@
import { SelectProps } from 'antd';
export type OperatorsSelectProps = Omit<SelectProps, 'onChange' | 'value'> & {
operators: string[];
onChange: (value: string) => void;
value: string;
};

34
frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Select } from 'antd';
import React, { memo } from 'react';
// ** Types
import { SelectOption } from 'types/common/select';
// ** Helpers
import { transformToUpperCase } from 'utils/transformToUpperCase';
import { selectStyle } from '../QueryBuilderSearch/config';
import { OperatorsSelectProps } from './OperatorsSelect.interfaces';
export const OperatorsSelect = memo(function OperatorsSelect({
operators,
value,
onChange,
...props
}: OperatorsSelectProps): JSX.Element {
const operatorsOptions: SelectOption<string, string>[] = operators.map(
(operator) => ({
label: transformToUpperCase(operator),
value: operator,
}),
);
return (
<Select
options={operatorsOptions}
value={value}
onChange={onChange}
style={selectStyle}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
});

1
frontend/src/container/QueryBuilder/filters/OperatorsSelect/index.ts Normal file
View File

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

15
frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts Normal file
View File

@ -0,0 +1,15 @@
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
export type OrderByFilterProps = {
query: IBuilderQueryForm;
onChange: (values: BaseAutocompleteData[]) => void;
};
export type OrderByFilterValue = {
disabled: boolean | undefined;
key: string;
label: string;
title: string | undefined;
value: string;
};

141
frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx Normal file
View File

@ -0,0 +1,141 @@
import { Select, Spin } from 'antd';
import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
import { QueryBuilderKeys } from 'constants/queryBuilder';
import { IOption } from 'hooks/useResourceAttribute/types';
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import React, { useCallback, useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
import { MetricAggregateOperator } from 'types/common/queryBuilder';
import { selectStyle } from '../QueryBuilderSearch/config';
import {
OrderByFilterProps,
OrderByFilterValue,
} from './OrderByFilter.interfaces';
import { getLabelFromValue, mapLabelValuePairs } from './utils';
export function OrderByFilter({
query,
onChange,
}: OrderByFilterProps): JSX.Element {
const [searchText, setSearchText] = useState<string>('');
const [selectedValue, setSelectedValue] = useState<OrderByFilterValue[]>([]);
const { data, isFetching } = useQuery(
[QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText],
async () =>
getAggregateKeys({
aggregateAttribute: query.aggregateAttribute.key,
tagType: query.aggregateAttribute.type,
dataSource: query.dataSource,
aggregateOperator: query.aggregateOperator,
searchText,
}),
{ enabled: !!query.aggregateAttribute.key, keepPreviousData: true },
);
const handleSearchKeys = useCallback(
(searchText: string): void => setSearchText(searchText),
[],
);
const generateOptionsData = (
attributeKeys: BaseAutocompleteData[] | undefined,
selectedValue: OrderByFilterValue[],
query: IBuilderQueryForm,
): IOption[] => {
const selectedValueLabels = getLabelFromValue(selectedValue);
const noAggregationOptions = attributeKeys
? mapLabelValuePairs(attributeKeys)
.flat()
.filter(
(option) => !selectedValueLabels.includes(option.label.split(' ')[0]),
)
: [];
const aggregationOptions = mapLabelValuePairs(query.groupBy)
.flat()
.concat([
{
label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`,
value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`,
},
{
label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`,
value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`,
},
])
.filter(
(option) => !selectedValueLabels.includes(option.label.split(' ')[0]),
);
return query.aggregateOperator === MetricAggregateOperator.NOOP
? noAggregationOptions
: aggregationOptions;
};
const optionsData = useMemo(
() => generateOptionsData(data?.payload?.attributeKeys, selectedValue, query),
[data?.payload?.attributeKeys, query, selectedValue],
);
const handleChange = (values: OrderByFilterValue[]): void => {
setSelectedValue(values);
const orderByValues: BaseAutocompleteData[] = values?.map((item) => {
const iterationArray = data?.payload?.attributeKeys || query.orderBy;
const existingOrderValues = iterationArray.find(
(group) => group.key === item.value,
);
if (existingOrderValues) {
return existingOrderValues;
}
return {
isColumn: null,
key: item.value,
dataType: null,
type: null,
};
});
onChange(orderByValues);
};
const values: OrderByFilterValue[] = query.orderBy.map((item) => ({
label: transformStringWithPrefix({
str: item.key,
prefix: item.type || '',
condition: !item.isColumn,
}),
key: item.key,
value: item.key,
disabled: undefined,
title: undefined,
}));
const isDisabledSelect = useMemo(
() =>
!query.aggregateAttribute.key ||
query.aggregateOperator === MetricAggregateOperator.NOOP,
[query.aggregateAttribute.key, query.aggregateOperator],
);
return (
<Select
mode="tags"
style={selectStyle}
onSearch={handleSearchKeys}
showSearch
disabled={isDisabledSelect}
showArrow={false}
filterOption={false}
options={optionsData}
labelInValue
value={values}
notFoundContent={isFetching ? <Spin size="small" /> : null}
onChange={handleChange}
/>
);
}

1
frontend/src/container/QueryBuilder/filters/OrderByFilter/index.ts Normal file
View File

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

32
frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts Normal file
View File

@ -0,0 +1,32 @@
import { IOption } from 'hooks/useResourceAttribute/types';
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { OrderByFilterValue } from './OrderByFilter.interfaces';
export function mapLabelValuePairs(
arr: BaseAutocompleteData[],
): Array<IOption>[] {
return arr.map((item) => {
const label = transformStringWithPrefix({
str: item.key,
prefix: item.type || '',
condition: !item.isColumn,
});
const value = item.key;
return [
{
label: `${label} asc`,
value: `${value} asc`,
},
{
label: `${label} desc`,
value: `${value} desc`,
},
];
});
}
export function getLabelFromValue(arr: OrderByFilterValue[]): string[] {
return arr.map((value) => value.label.split(' ')[0]);
}

1
frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/config.ts Normal file
View File

@ -0,0 +1 @@
export const selectStyle = { width: '100%' };

Some files were not shown because too many files have changed in this diff Show More