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

fix: disable step interval for all views (#3070)

Browse Source 
* fix: disable step interval for all views

* fix: disable interval for dashboard

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
This commit is contained in:
Yevhen Shevchenko 2023-07-07 15:49:35 +03:00 committed by GitHub
parent 84c81b054c
commit 5042c56b4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 103 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/container/LogExplorerQuerySection/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Button } from 'antd';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import { QueryBuilder } from 'container/QueryBuilder';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
import { ButtonWrapperStyled } from 'pages/LogsExplorer/styles';
import { prepareQueryWithDefaultTimestamp } from 'pages/LogsExplorer/utils';
import { memo, useMemo } from 'react';
import { DataSource } from 'types/common/queryBuilder';
function LogExplorerQuerySection(): JSX.Element {
const { handleRunQuery, updateAllQueriesOperators } = useQueryBuilder();
const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
const defaultValue = useMemo(() => {
const updatedQuery = updateAllQueriesOperators(
initialQueriesMap.logs,
PANEL_TYPES.LIST,
DataSource.LOGS,
);
return prepareQueryWithDefaultTimestamp(updatedQuery);
}, [updateAllQueriesOperators]);
useShareBuilderUrl(defaultValue);
const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
const isTable = panelTypes === PANEL_TYPES.TABLE;
const config: QueryBuilderProps['filterConfigs'] = {
stepInterval: { isHidden: isTable, isDisabled: true },
};
return config;
}, [panelTypes]);
return (
<QueryBuilder
panelType={panelTypes}
config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
filterConfigs={filterConfigs}
actions={
<ButtonWrapperStyled>
<Button type="primary" onClick={handleRunQuery}>
Run Query
</Button>
</ButtonWrapperStyled>
}
/>
);
}
export default memo(LogExplorerQuerySection);

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

@ -3,12 +3,13 @@ import TextToolTip from 'components/TextToolTip';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import { WidgetGraphProps } from 'container/NewWidget/types';
import { QueryBuilder } from 'container/QueryBuilder';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
import useUrlQuery from 'hooks/useUrlQuery';
import { useCallback } from 'react';
import { useCallback, useMemo } from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
@ -101,12 +102,22 @@ function QuerySection({
handleStageQuery(currentQuery);
};
const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
const config: QueryBuilderProps['filterConfigs'] = {
stepInterval: { isHidden: false, isDisabled: true },
};
return config;
}, []);
const items = [
{
key: EQueryType.QUERY_BUILDER,
label: 'Query Builder',
tab: <Typography>Query Builder</Typography>,
children: <QueryBuilder panelType={selectedGraph} />,
children: (
<QueryBuilder panelType={selectedGraph} filterConfigs={filterConfigs} />
),
},
{
key: EQueryType.CLICKHOUSE,

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

@ -14,5 +14,7 @@ export type QueryBuilderProps = {
config?: QueryBuilderConfig;
panelType: ITEMS;
actions?: ReactNode;
inactiveFilters?: Partial<Record<keyof IBuilderQuery, boolean>>;
filterConfigs?: Partial<
Record<keyof IBuilderQuery, { isHidden: boolean; isDisabled: boolean }>
>;
};

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

@ -15,7 +15,7 @@ export const QueryBuilder = memo(function QueryBuilder({
config,
panelType: newPanelType,
actions,
inactiveFilters = {},
filterConfigs = {},
}: QueryBuilderProps): JSX.Element {
const {
currentQuery,
@ -73,7 +73,7 @@ export const QueryBuilder = memo(function QueryBuilder({
isAvailableToDisable={isAvailableToDisableQuery}
queryVariant={config?.queryVariant || 'dropdown'}
query={query}
inactiveFilters={inactiveFilters}
filterConfigs={filterConfigs}
/>
</Col>
))}

2
frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts
View File

@ -6,4 +6,4 @@ export type QueryProps = {
isAvailableToDisable: boolean;
query: IBuilderQuery;
queryVariant: 'static' | 'dropdown';
} & Pick<QueryBuilderProps, 'inactiveFilters'>;
} & Pick<QueryBuilderProps, 'filterConfigs'>;

14
frontend/src/container/QueryBuilder/components/Query/Query.tsx
View File

@ -35,7 +35,7 @@ export const Query = memo(function Query({
isAvailableToDisable,
queryVariant,
query,
inactiveFilters,
filterConfigs,
}: QueryProps): JSX.Element {
const { panelType } = useQueryBuilder();
const {
@ -48,7 +48,7 @@ export const Query = memo(function Query({
handleChangeQueryData,
handleChangeOperator,
handleDeleteQuery,
} = useQueryOperations({ index, query, inactiveFilters });
} = useQueryOperations({ index, query, filterConfigs });
const handleChangeAggregateEvery = useCallback(
(value: IBuilderQuery['stepInterval']) => {
@ -112,7 +112,7 @@ export const Query = memo(function Query({
const renderAggregateEveryFilter = useCallback(
(): JSX.Element | null =>
!inactiveFilters?.stepInterval ? (
!filterConfigs?.stepInterval?.isHidden ? (
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<FilterLabel label="Aggregate Every" />
@ -120,12 +120,18 @@ export const Query = memo(function Query({
<Col flex="1 1 6rem">
<AggregateEveryFilter
query={query}
disabled={filterConfigs?.stepInterval?.isDisabled || false}
onChange={handleChangeAggregateEvery}
/>
</Col>
</Row>
) : null,
[inactiveFilters?.stepInterval, query, handleChangeAggregateEvery],
[
filterConfigs?.stepInterval?.isHidden,
filterConfigs?.stepInterval?.isDisabled,
query,
handleChangeAggregateEvery,
],
);
const renderAdditionalFilters = useCallback((): ReactNode => {

5
frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx
View File

@ -8,6 +8,7 @@ import { selectStyle } from '../QueryBuilderSearch/config';
function AggregateEveryFilter({
onChange,
query,
disabled,
}: AggregateEveryFilterProps): JSX.Element {
const isMetricsDataSource = useMemo(
() => query.dataSource === DataSource.METRICS,
@ -20,7 +21,8 @@ function AggregateEveryFilter({
}
};
const isDisabled = isMetricsDataSource && !query.aggregateAttribute.key;
const isDisabled =
(isMetricsDataSource && !query.aggregateAttribute.key) || disabled;
return (
<InputNumber
@ -37,6 +39,7 @@ function AggregateEveryFilter({
interface AggregateEveryFilterProps {
onChange: (values: number) => void;
query: IBuilderQuery;
disabled: boolean;
}
export default AggregateEveryFilter;

12
frontend/src/container/TracesExplorer/QuerySection/index.tsx
View File

@ -1,9 +1,10 @@
import { Button } from 'antd';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { QueryBuilder } from 'container/QueryBuilder';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { memo } from 'react';
import { memo, useMemo } from 'react';
import { DataSource } from 'types/common/queryBuilder';
import { ButtonWrapper, Container } from './styles';
@ -13,6 +14,14 @@ function QuerySection(): JSX.Element {
const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
const config: QueryBuilderProps['filterConfigs'] = {
stepInterval: { isHidden: false, isDisabled: true },
};
return config;
}, []);
return (
<Container>
<QueryBuilder
@ -21,6 +30,7 @@ function QuerySection(): JSX.Element {
queryVariant: 'static',
initialDataSource: DataSource.TRACES,
}}
filterConfigs={filterConfigs}
actions={
<ButtonWrapper>
<Button onClick={handleRunQuery} type="primary">

6
frontend/src/hooks/queryBuilder/useQueryOperations.ts
View File

@ -20,7 +20,7 @@ import { SelectOption } from 'types/common/select';
export const useQueryOperations: UseQueryOperations = ({
query,
index,
inactiveFilters,
filterConfigs,
}) => {
const {
handleSetQueryData,
@ -64,7 +64,7 @@ export const useQueryOperations: UseQueryOperations = ({
(dataSource: DataSource): string[] => {
const result: string[] = mapOfFilters[dataSource].reduce<string[]>(
(acc, item) => {
if (inactiveFilters && inactiveFilters[item.field]) {
if (filterConfigs && filterConfigs[item.field]?.isHidden) {
return acc;
}
@ -78,7 +78,7 @@ export const useQueryOperations: UseQueryOperations = ({
return result;
},
[inactiveFilters],
[filterConfigs],
);
const handleChangeAggregatorAttribute = useCallback(

51
frontend/src/pages/LogsExplorer/index.tsx
View File

@ -1,59 +1,16 @@
import { Button, Col, Row } from 'antd';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import { Col, Row } from 'antd';
import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
import LogsExplorerViews from 'container/LogsExplorerViews';
import { QueryBuilder } from 'container/QueryBuilder';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
import { useMemo } from 'react';
import { DataSource } from 'types/common/queryBuilder';
// ** Styles
import { ButtonWrapperStyled, WrapperStyled } from './styles';
import { prepareQueryWithDefaultTimestamp } from './utils';
import { WrapperStyled } from './styles';
function LogsExplorer(): JSX.Element {
const { handleRunQuery, updateAllQueriesOperators } = useQueryBuilder();
const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
const defaultValue = useMemo(() => {
const updatedQuery = updateAllQueriesOperators(
initialQueriesMap.logs,
PANEL_TYPES.LIST,
DataSource.LOGS,
);
return prepareQueryWithDefaultTimestamp(updatedQuery);
}, [updateAllQueriesOperators]);
useShareBuilderUrl(defaultValue);
const inactiveLogsFilters: QueryBuilderProps['inactiveFilters'] = useMemo(() => {
if (panelTypes === PANEL_TYPES.TABLE) {
const result: QueryBuilderProps['inactiveFilters'] = { stepInterval: true };
return result;
}
return {};
}, [panelTypes]);
return (
<WrapperStyled>
<Row gutter={[0, 28]}>
<Col xs={24}>
<QueryBuilder
panelType={panelTypes}
config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
inactiveFilters={inactiveLogsFilters}
actions={
<ButtonWrapperStyled>
<Button type="primary" onClick={handleRunQuery}>
Run Query
</Button>
</ButtonWrapperStyled>
}
/>
<LogExplorerQuerySection />
</Col>
<Col xs={24}>
<LogsExplorerViews />

2
frontend/src/types/common/operations.types.ts
View File

@ -7,7 +7,7 @@ import { DataSource } from 'types/common/queryBuilder';
import { SelectOption } from './select';
type UseQueryOperationsParams = Pick<QueryProps, 'index' | 'query'> &
Pick<QueryBuilderProps, 'inactiveFilters'>;
Pick<QueryBuilderProps, 'filterConfigs'>;
export type HandleChangeQueryData = <
Key extends keyof IBuilderQuery,