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

FE: added more eslint rule (#2090)

Browse Source 
* chore: arrow-body-style func-style is added in the rule

* fix: linting issues fixed

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
Palash Gupta 2023-01-24 18:53:04 +05:30 committed by GitHub
parent 2f1ca93eda
commit e62e541fc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
95 changed files with 1526 additions and 1684 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.eslintrc.js
View File

@ -102,6 +102,8 @@ module.exports = {
},
],
'@typescript-eslint/no-unused-vars': 'error',
'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
'arrow-body-style': ['error', 'as-needed'],
// eslint rules need to remove
'@typescript-eslint/no-shadow': 'off',

144
frontend/src/components/Graph/Plugin/Legend.ts
View File

@ -29,81 +29,79 @@ const getOrCreateLegendList = (
return listContainer;
};
export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
return {
id: 'htmlLegend',
afterUpdate(chart): void {
const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
id: 'htmlLegend',
afterUpdate(chart): void {
const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
// Remove old legend items
while (ul.firstChild) {
ul.firstChild.remove();
}
// Remove old legend items
while (ul.firstChild) {
ul.firstChild.remove();
}
// Reuse the built-in legendItems generator
const items = get(chart, [
'options',
'plugins',
'legend',
'labels',
'generateLabels',
])
? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
chart,
)
: null;
// Reuse the built-in legendItems generator
const items = get(chart, [
'options',
'plugins',
'legend',
'labels',
'generateLabels',
])
? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
chart,
)
: null;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
items?.forEach((item: Record<any, any>, index: number) => {
const li = document.createElement('li');
li.style.alignItems = 'center';
li.style.cursor = 'pointer';
li.style.display = 'flex';
li.style.marginLeft = '10px';
// li.style.marginTop = '5px';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
items?.forEach((item: Record<any, any>, index: number) => {
const li = document.createElement('li');
li.style.alignItems = 'center';
li.style.cursor = 'pointer';
li.style.display = 'flex';
li.style.marginLeft = '10px';
li.style.marginTop = '5px';
li.onclick = (): void => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { type } = chart.config;
if (type === 'pie' || type === 'doughnut') {
// Pie and doughnut charts only have a single dataset and visibility is per item
chart.toggleDataVisibility(index);
} else {
chart.setDatasetVisibility(
item.datasetIndex,
!chart.isDatasetVisible(item.datasetIndex),
);
}
chart.update();
};
// Color box
const boxSpan = document.createElement('span');
boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
boxSpan.style.borderColor = `${item?.strokeStyle}`;
boxSpan.style.borderWidth = `${item.lineWidth}px`;
boxSpan.style.display = 'inline-block';
boxSpan.style.minHeight = '0.75rem';
boxSpan.style.marginRight = '0.5rem';
boxSpan.style.minWidth = '0.75rem';
boxSpan.style.borderRadius = '50%';
if (item.text) {
// Text
const textContainer = document.createElement('span');
textContainer.style.margin = '0';
textContainer.style.padding = '0';
textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
const text = document.createTextNode(item.text);
textContainer.appendChild(text);
li.appendChild(boxSpan);
li.appendChild(textContainer);
ul.appendChild(li);
li.onclick = (): void => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { type } = chart.config;
if (type === 'pie' || type === 'doughnut') {
// Pie and doughnut charts only have a single dataset and visibility is per item
chart.toggleDataVisibility(index);
} else {
chart.setDatasetVisibility(
item.datasetIndex,
!chart.isDatasetVisible(item.datasetIndex),
);
}
});
},
};
};
chart.update();
};
// Color box
const boxSpan = document.createElement('span');
boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
boxSpan.style.borderColor = `${item?.strokeStyle}`;
boxSpan.style.borderWidth = `${item.lineWidth}px`;
boxSpan.style.display = 'inline-block';
boxSpan.style.minHeight = '20px';
boxSpan.style.marginRight = '10px';
boxSpan.style.minWidth = '20px';
boxSpan.style.borderRadius = '50%';
if (item.text) {
// Text
const textContainer = document.createElement('span');
textContainer.style.margin = '0';
textContainer.style.padding = '0';
textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
const text = document.createTextNode(item.text);
textContainer.appendChild(text);
li.appendChild(boxSpan);
li.appendChild(textContainer);
ul.appendChild(li);
}
});
},
});

8
frontend/src/components/Logs/LogItem/index.tsx
View File

@ -120,15 +120,15 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
{'}'}
</div>
<div>
{map(selected, (field) => {
return isValidLogField(flattenLogData[field.name] as never) ? (
{map(selected, (field) =>
isValidLogField(flattenLogData[field.name] as never) ? (
<LogSelectedField
key={field.name}
fieldKey={field.name}
fieldValue={flattenLogData[field.name] as never}
/>
) : null;
})}
) : null,
)}
</div>
</div>
<Divider style={{ padding: 0, margin: '0.4rem 0', opacity: 0.5 }} />

6
frontend/src/components/ReleaseNote/index.tsx
View File

@ -48,9 +48,9 @@ function ReleaseNote({ path }: ReleaseNoteProps): JSX.Element | null {
(state) => state.app,
);
const c = allComponentMap.find((item) => {
return item.match(path, currentVersion, userFlags);
});
const c = allComponentMap.find((item) =>
item.match(path, currentVersion, userFlags),
);
if (!c) {
return null;

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

@ -6,18 +6,16 @@ import React from 'react';
function TextToolTip({ text, url }: TextToolTipProps): JSX.Element {
return (
<Tooltip
overlay={(): JSX.Element => {
return (
<div>
{`${text} `}
{url && (
<a href={url} rel="noopener noreferrer" target="_blank">
here
</a>
)}
</div>
);
}}
overlay={(): JSX.Element => (
<div>
{`${text} `}
{url && (
<a href={url} rel="noopener noreferrer" target="_blank">
here
</a>
)}
</div>
)}
>
<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
</Tooltip>

5
frontend/src/components/TimePreferenceDropDown/styles.ts
View File

@ -8,7 +8,6 @@ export const TextContainer = styled.div<TextContainerProps>`
display: flex;
> button {
margin-left: ${({ noButtonMargin }): string => {
return noButtonMargin ? '0' : '0.5rem';
}}
margin-left: ${({ noButtonMargin }): string =>
noButtonMargin ? '0' : '0.5rem'}
`;

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

@ -184,36 +184,34 @@ function AllErrors(): JSX.Element {
confirm,
placeholder,
filterKey,
}: FilterDropdownExtendsProps) => {
return (
<Card size="small">
<Space align="start" direction="vertical">
<Input
placeholder={placeholder}
value={selectedKeys[0]}
onChange={(e): void =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
allowClear
defaultValue={getDefaultFilterValue(
filterKey,
getUpdatedServiceName,
getUpdatedExceptionType,
)}
onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
/>
<Button
type="primary"
onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
icon={<SearchOutlined />}
size="small"
>
Search
</Button>
</Space>
</Card>
);
},
}: FilterDropdownExtendsProps) => (
<Card size="small">
<Space align="start" direction="vertical">
<Input
placeholder={placeholder}
value={selectedKeys[0]}
onChange={(e): void =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
allowClear
defaultValue={getDefaultFilterValue(
filterKey,
getUpdatedServiceName,
getUpdatedExceptionType,
)}
onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
/>
<Button
type="primary"
onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
icon={<SearchOutlined />}
size="small"
>
Search
</Button>
</Space>
</Card>
),
[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
);

14
frontend/src/container/AllError/utils.ts
View File

@ -20,15 +20,14 @@ export const urlKey = {
serviceName: 'serviceName',
};
export const isOrderParams = (orderBy: string | null): orderBy is OrderBy => {
return !!(
export const isOrderParams = (orderBy: string | null): orderBy is OrderBy =>
!!(
orderBy === 'serviceName' ||
orderBy === 'exceptionCount' ||
orderBy === 'lastSeen' ||
orderBy === 'firstSeen' ||
orderBy === 'exceptionType'
);
};
export const getOrder = (order: string | null): Order => {
if (isOrder(order)) {
@ -82,12 +81,9 @@ export const getDefaultOrder = (
return undefined;
};
export const getNanoSeconds = (date: string): string => {
return (
Math.floor(new Date(date).getTime() / 1e3).toString() +
String(Timestamp.fromString(date).getNano().toString()).padStart(9, '0')
);
};
export const getNanoSeconds = (date: string): string =>
Math.floor(new Date(date).getTime() / 1e3).toString() +
String(Timestamp.fromString(date).getNano().toString()).padStart(9, '0');
export const getUpdatePageSize = (pageSize: string | null): number => {
if (pageSize) {

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

@ -78,16 +78,17 @@ function CreateAlertChannels({
[type, selectedConfig],
);
const prepareSlackRequest = useCallback(() => {
return {
const prepareSlackRequest = useCallback(
() => ({
api_url: selectedConfig?.api_url || '',
channel: selectedConfig?.channel || '',
name: selectedConfig?.name || '',
send_resolved: true,
text: selectedConfig?.text || '',
title: selectedConfig?.title || '',
};
}, [selectedConfig]);
}),
[selectedConfig],
);
const onSlackHandler = useCallback(async () => {
setSavingState(true);

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

@ -47,8 +47,8 @@ function EditAlertChannels({
setType(value as ChannelType);
}, []);
const prepareSlackRequest = useCallback(() => {
return {
const prepareSlackRequest = useCallback(
() => ({
api_url: selectedConfig?.api_url || '',
channel: selectedConfig?.channel || '',
name: selectedConfig?.name || '',
@ -56,8 +56,9 @@ function EditAlertChannels({
text: selectedConfig?.text || '',
title: selectedConfig?.title || '',
id,
};
}, [id, selectedConfig]);
}),
[id, selectedConfig],
);
const onSlackEditHandler = useCallback(async () => {
setSavingState(true);
@ -143,8 +144,8 @@ function EditAlertChannels({
setSavingState(false);
}, [prepareWebhookRequest, t, notifications, selectedConfig]);
const preparePagerRequest = useCallback(() => {
return {
const preparePagerRequest = useCallback(
() => ({
name: selectedConfig.name || '',
routing_key: selectedConfig.routing_key,
client: selectedConfig.client,
@ -157,8 +158,9 @@ function EditAlertChannels({
details: selectedConfig.details,
detailsArray: JSON.parse(selectedConfig.details || '{}'),
id,
};
}, [id, selectedConfig]);
}),
[id, selectedConfig],
);
const onPagerEditHandler = useCallback(async () => {
setSavingState(true);

8
frontend/src/container/FormAlertRules/ChQuerySection/transform.ts
View File

@ -32,6 +32,8 @@ export const rawQueryToIChQuery = (
// ClickHouseQueryBuilder format. The main difference is
// use of rawQuery (in ClickHouseQueryBuilder)
// and query (in alert builder)
export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => {
return { ...src, name: 'A', rawQuery: src.query };
};
export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => ({
...src,
name: 'A',
rawQuery: src.query,
});

110
frontend/src/container/FormAlertRules/QuerySection.tsx
View File

@ -211,78 +211,70 @@ function QuerySection({
setFormulaQueries({ ...formulas });
}, [formulaQueries, setFormulaQueries]);
const renderPromqlUI = (): JSX.Element => {
return (
<PromqlSection promQueries={promQueries} setPromQueries={setPromQueries} />
);
};
const renderPromqlUI = (): JSX.Element => (
<PromqlSection promQueries={promQueries} setPromQueries={setPromQueries} />
);
const renderChQueryUI = (): JSX.Element => {
return <ChQuerySection chQueries={chQueries} setChQueries={setChQueries} />;
};
const renderChQueryUI = (): JSX.Element => (
<ChQuerySection chQueries={chQueries} setChQueries={setChQueries} />
);
const renderFormulaButton = (): JSX.Element => {
return (
<QueryButton onClick={addFormula} icon={<PlusOutlined />}>
{t('button_formula')}
</QueryButton>
);
};
const renderFormulaButton = (): JSX.Element => (
<QueryButton onClick={addFormula} icon={<PlusOutlined />}>
{t('button_formula')}
</QueryButton>
);
const renderQueryButton = (): JSX.Element => {
return (
<QueryButton onClick={addMetricQuery} icon={<PlusOutlined />}>
{t('button_query')}
</QueryButton>
);
};
const renderQueryButton = (): JSX.Element => (
<QueryButton onClick={addMetricQuery} icon={<PlusOutlined />}>
{t('button_query')}
</QueryButton>
);
const renderMetricUI = (): JSX.Element => {
return (
<div>
{metricQueries &&
Object.keys(metricQueries).map((key: string) => {
const renderMetricUI = (): JSX.Element => (
<div>
{metricQueries &&
Object.keys(metricQueries).map((key: string) => {
// todo(amol): need to handle this in fetch
const current = metricQueries[key];
current.name = key;
return (
<MetricsBuilder
key={key}
queryIndex={key}
queryData={toIMetricsBuilderQuery(current)}
selectedGraph="TIME_SERIES"
handleQueryChange={handleMetricQueryChange}
/>
);
})}
{queryCategory !== EQueryType.PROM && renderQueryButton()}
<div style={{ marginTop: '1rem' }}>
{formulaQueries &&
Object.keys(formulaQueries).map((key: string) => {
// todo(amol): need to handle this in fetch
const current = metricQueries[key];
const current = formulaQueries[key];
current.name = key;
return (
<MetricsBuilder
<MetricsBuilderFormula
key={key}
queryIndex={key}
queryData={toIMetricsBuilderQuery(current)}
selectedGraph="TIME_SERIES"
handleQueryChange={handleMetricQueryChange}
formulaIndex={key}
formulaData={current}
handleFormulaChange={handleFormulaChange}
/>
);
})}
{queryCategory !== EQueryType.PROM && renderQueryButton()}
<div style={{ marginTop: '1rem' }}>
{formulaQueries &&
Object.keys(formulaQueries).map((key: string) => {
// todo(amol): need to handle this in fetch
const current = formulaQueries[key];
current.name = key;
return (
<MetricsBuilderFormula
key={key}
formulaIndex={key}
formulaData={current}
handleFormulaChange={handleFormulaChange}
/>
);
})}
{queryCategory === EQueryType.QUERY_BUILDER &&
(!formulaQueries || Object.keys(formulaQueries).length === 0) &&
metricQueries &&
Object.keys(metricQueries).length > 0 &&
renderFormulaButton()}
</div>
{queryCategory === EQueryType.QUERY_BUILDER &&
(!formulaQueries || Object.keys(formulaQueries).length === 0) &&
metricQueries &&
Object.keys(metricQueries).length > 0 &&
renderFormulaButton()}
</div>
);
};
</div>
);
const handleRunQuery = (): void => {
runQuery();

178
frontend/src/container/FormAlertRules/RuleOptions.tsx
View File

@ -38,106 +38,94 @@ function RuleOptions({
});
};
const renderCompareOps = (): JSX.Element => {
return (
<InlineSelect
defaultValue={defaultCompareOp}
value={alertDef.condition?.op}
style={{ minWidth: '120px' }}
onChange={(value: string | unknown): void => {
const newOp = (value as string) || '';
const renderCompareOps = (): JSX.Element => (
<InlineSelect
defaultValue={defaultCompareOp}
value={alertDef.condition?.op}
style={{ minWidth: '120px' }}
onChange={(value: string | unknown): void => {
const newOp = (value as string) || '';
setAlertDef({
...alertDef,
condition: {
...alertDef.condition,
op: newOp,
},
});
}}
>
<Option value="1">{t('option_above')}</Option>
<Option value="2">{t('option_below')}</Option>
<Option value="3">{t('option_equal')}</Option>
<Option value="4">{t('option_notequal')}</Option>
</InlineSelect>
);
};
setAlertDef({
...alertDef,
condition: {
...alertDef.condition,
op: newOp,
},
});
}}
>
<Option value="1">{t('option_above')}</Option>
<Option value="2">{t('option_below')}</Option>
<Option value="3">{t('option_equal')}</Option>
<Option value="4">{t('option_notequal')}</Option>
</InlineSelect>
);
const renderThresholdMatchOpts = (): JSX.Element => {
return (
<InlineSelect
defaultValue={defaultMatchType}
style={{ minWidth: '130px' }}
value={alertDef.condition?.matchType}
onChange={(value: string | unknown): void => handleMatchOptChange(value)}
>
<Option value="1">{t('option_atleastonce')}</Option>
<Option value="2">{t('option_allthetimes')}</Option>
<Option value="3">{t('option_onaverage')}</Option>
<Option value="4">{t('option_intotal')}</Option>
</InlineSelect>
);
};
const renderThresholdMatchOpts = (): JSX.Element => (
<InlineSelect
defaultValue={defaultMatchType}
style={{ minWidth: '130px' }}
value={alertDef.condition?.matchType}
onChange={(value: string | unknown): void => handleMatchOptChange(value)}
>
<Option value="1">{t('option_atleastonce')}</Option>
<Option value="2">{t('option_allthetimes')}</Option>
<Option value="3">{t('option_onaverage')}</Option>
<Option value="4">{t('option_intotal')}</Option>
</InlineSelect>
);
const renderPromMatchOpts = (): JSX.Element => {
return (
<InlineSelect
defaultValue={defaultMatchType}
style={{ minWidth: '130px' }}
value={alertDef.condition?.matchType}
onChange={(value: string | unknown): void => handleMatchOptChange(value)}
>
<Option value="1">{t('option_atleastonce')}</Option>
</InlineSelect>
);
};
const renderPromMatchOpts = (): JSX.Element => (
<InlineSelect
defaultValue={defaultMatchType}
style={{ minWidth: '130px' }}
value={alertDef.condition?.matchType}
onChange={(value: string | unknown): void => handleMatchOptChange(value)}
>
<Option value="1">{t('option_atleastonce')}</Option>
</InlineSelect>
);
const renderEvalWindows = (): JSX.Element => {
return (
<InlineSelect
defaultValue={defaultEvalWindow}
style={{ minWidth: '120px' }}
value={alertDef.evalWindow}
onChange={(value: string | unknown): void => {
const ew = (value as string) || alertDef.evalWindow;
setAlertDef({
...alertDef,
evalWindow: ew,
});
}}
>
{' '}
<Option value="5m0s">{t('option_5min')}</Option>
<Option value="10m0s">{t('option_10min')}</Option>
<Option value="15m0s">{t('option_15min')}</Option>
<Option value="60m0s">{t('option_60min')}</Option>
<Option value="4h0m0s">{t('option_4hours')}</Option>
<Option value="24h0m0s">{t('option_24hours')}</Option>
</InlineSelect>
);
};
const renderEvalWindows = (): JSX.Element => (
<InlineSelect
defaultValue={defaultEvalWindow}
style={{ minWidth: '120px' }}
value={alertDef.evalWindow}
onChange={(value: string | unknown): void => {
const ew = (value as string) || alertDef.evalWindow;
setAlertDef({
...alertDef,
evalWindow: ew,
});
}}
>
{' '}
<Option value="5m0s">{t('option_5min')}</Option>
<Option value="10m0s">{t('option_10min')}</Option>
<Option value="15m0s">{t('option_15min')}</Option>
<Option value="60m0s">{t('option_60min')}</Option>
<Option value="4h0m0s">{t('option_4hours')}</Option>
<Option value="24h0m0s">{t('option_24hours')}</Option>
</InlineSelect>
);
const renderThresholdRuleOpts = (): JSX.Element => {
return (
<FormItem>
<Typography.Text>
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
{renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()}
</Typography.Text>
</FormItem>
);
};
const renderPromRuleOptions = (): JSX.Element => {
return (
<FormItem>
<Typography.Text>
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
{renderPromMatchOpts()}
</Typography.Text>
</FormItem>
);
};
const renderThresholdRuleOpts = (): JSX.Element => (
<FormItem>
<Typography.Text>
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
{renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()}
</Typography.Text>
</FormItem>
);
const renderPromRuleOptions = (): JSX.Element => (
<FormItem>
<Typography.Text>
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
{renderPromMatchOpts()}
</Typography.Text>
</FormItem>
);
return (
<>

258
frontend/src/container/FormAlertRules/UserGuide/index.tsx
View File

@ -15,154 +15,130 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
// init namespace for translations
const { t } = useTranslation('alerts');
const renderStep1QB = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep2QB = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep1QB = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
</StyledList>
</>
);
const renderStep2QB = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
</StyledList>
</>
);
const renderStep3QB = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep3QB = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
</StyledList>
</>
);
const renderGuideForQB = (): JSX.Element => {
return (
<>
{renderStep1QB()}
{renderStep2QB()}
{renderStep3QB()}
</>
);
};
const renderStep1PQL = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep2PQL = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
</StyledList>
</>
);
};
const renderGuideForQB = (): JSX.Element => (
<>
{renderStep1QB()}
{renderStep2QB()}
{renderStep3QB()}
</>
);
const renderStep1PQL = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
</StyledList>
</>
);
const renderStep2PQL = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
</StyledList>
</>
);
const renderStep3PQL = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep3PQL = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
</StyledList>
</>
);
const renderGuideForPQL = (): JSX.Element => {
return (
<>
{renderStep1PQL()}
{renderStep2PQL()}
{renderStep3PQL()}
</>
);
};
const renderGuideForPQL = (): JSX.Element => (
<>
{renderStep1PQL()}
{renderStep2PQL()}
{renderStep3PQL()}
</>
);
const renderStep1CH = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
<StyledList>
<StyledListItem>
<Trans
i18nKey="user_guide_ch_step1a"
t={t}
components={[
// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
<a
key={1}
target="_blank"
href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
/>,
]}
/>
</StyledListItem>
<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep2CH = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep1CH = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
<StyledList>
<StyledListItem>
<Trans
i18nKey="user_guide_ch_step1a"
t={t}
components={[
// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
<a
key={1}
target="_blank"
href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
/>,
]}
/>
</StyledListItem>
<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
</StyledList>
</>
);
const renderStep2CH = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
</StyledList>
</>
);
const renderStep3CH = (): JSX.Element => {
return (
<>
<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
</StyledList>
</>
);
};
const renderStep3CH = (): JSX.Element => (
<>
<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
<StyledList>
<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
</StyledList>
</>
);
const renderGuideForCH = (): JSX.Element => {
return (
<>
{renderStep1CH()}
{renderStep2CH()}
{renderStep3CH()}
</>
);
};
const renderGuideForCH = (): JSX.Element => (
<>
{renderStep1CH()}
{renderStep2CH()}
{renderStep3CH()}
</>
);
return (
<StyledMainContainer>
<Row>

60
frontend/src/container/FormAlertRules/index.tsx
View File

@ -436,41 +436,35 @@ function FormAlertRules({
<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
);
const renderQBChartPreview = (): JSX.Element => {
return (
<ChartPreview
headline={<PlotTag queryType={queryCategory} />}
name=""
threshold={alertDef.condition?.target}
query={debouncedStagedQuery}
selectedInterval={toChartInterval(alertDef.evalWindow)}
/>
);
};
const renderQBChartPreview = (): JSX.Element => (
<ChartPreview
headline={<PlotTag queryType={queryCategory} />}
name=""
threshold={alertDef.condition?.target}
query={debouncedStagedQuery}
selectedInterval={toChartInterval(alertDef.evalWindow)}
/>
);
const renderPromChartPreview = (): JSX.Element => {
return (
<ChartPreview
headline={<PlotTag queryType={queryCategory} />}
name="Chart Preview"
threshold={alertDef.condition?.target}
query={debouncedStagedQuery}
/>
);
};
const renderPromChartPreview = (): JSX.Element => (
<ChartPreview
headline={<PlotTag queryType={queryCategory} />}
name="Chart Preview"
threshold={alertDef.condition?.target}
query={debouncedStagedQuery}
/>
);
const renderChQueryChartPreview = (): JSX.Element => {
return (
<ChartPreview
headline={<PlotTag queryType={queryCategory} />}
name="Chart Preview"
threshold={alertDef.condition?.target}
query={manualStagedQuery}
userQueryKey={runQueryId}
selectedInterval={toChartInterval(alertDef.evalWindow)}
/>
);
};
const renderChQueryChartPreview = (): JSX.Element => (
<ChartPreview
headline={<PlotTag queryType={queryCategory} />}
name="Chart Preview"
threshold={alertDef.condition?.target}
query={manualStagedQuery}
userQueryKey={runQueryId}
selectedInterval={toChartInterval(alertDef.evalWindow)}
/>
);
return (
<>
{Element}

14
frontend/src/container/FormAlertRules/labels/index.tsx
View File

@ -119,17 +119,15 @@ function LabelSelect({
{queries.length > 0 &&
map(
queries,
(query): JSX.Element => {
return (
<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
);
},
(query): JSX.Element => (
<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
),
)}
</div>
<div>
{map(staging, (item) => {
return <QueryChipItem key={uuid()}>{item}</QueryChipItem>;
})}
{map(staging, (item) => (
<QueryChipItem key={uuid()}>{item}</QueryChipItem>
))}
</div>
<div style={{ display: 'flex', width: '100%' }}>

20
frontend/src/container/FormAlertRules/utils.ts
View File

@ -42,17 +42,15 @@ export const toMetricQueries = (b: IBuilderQueries): IMetricQueries => {
export const toIMetricsBuilderQuery = (
q: IMetricQuery,
): IMetricsBuilderQuery => {
return {
name: q.name,
metricName: q.metricName,
tagFilters: q.tagFilters,
groupBy: q.groupBy,
aggregateOperator: q.aggregateOperator,
disabled: q.disabled,
legend: q.legend,
};
};
): IMetricsBuilderQuery => ({
name: q.name,
metricName: q.metricName,
tagFilters: q.tagFilters,
groupBy: q.groupBy,
aggregateOperator: q.aggregateOperator,
disabled: q.disabled,
legend: q.legend,
});
export const prepareBuilderQueries = (
m: IMetricQueries,

28
frontend/src/container/GantChart/utils.ts
View File

@ -112,21 +112,19 @@ export const getNodeById = (
const getSpanWithoutChildren = (
span: ITraceTree,
): Omit<ITraceTree, 'children'> => {
return {
id: span.id,
name: span.name,
parent: span.parent,
serviceColour: span.serviceColour,
serviceName: span.serviceName,
startTime: span.startTime,
tags: span.tags,
time: span.time,
value: span.value,
event: span.event,
hasError: span.hasError,
};
};
): Omit<ITraceTree, 'children'> => ({
id: span.id,
name: span.name,
parent: span.parent,
serviceColour: span.serviceColour,
serviceName: span.serviceName,
startTime: span.startTime,
tags: span.tags,
time: span.time,
value: span.value,
event: span.event,
hasError: span.hasError,
});
export const isSpanPresentInSearchString = (
searchedString: string,

35
frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx
View File

@ -81,25 +81,22 @@ function FullView({
const queryLength = widget.query.filter((e) => e.query.length !== 0);
const response = useQueries(
queryLength.map((query) => {
return {
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
queryFn: () => {
return getQueryResult({
end: queryMinMax.max.toString(),
query: query.query,
start: queryMinMax.min.toString(),
step: `${getStep({
start: queryMinMax.min,
end: queryMinMax.max,
inputFormat: 's',
})}`,
});
},
queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
retryOnMount: false,
};
}),
queryLength.map((query) => ({
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
queryFn: () =>
getQueryResult({
end: queryMinMax.max.toString(),
query: query.query,
start: queryMinMax.min.toString(),
step: `${getStep({
start: queryMinMax.min,
end: queryMinMax.max,
inputFormat: 's',
})}`,
}),
queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
retryOnMount: false,
})),
);
const isError =

62
frontend/src/container/GridGraphLayout/Graph/index.tsx
View File

@ -101,41 +101,35 @@ function GridCardGraph({
onToggleModal(setDeleteModal);
}, [deleteWidget, layout, onToggleModal, setLayout, widget]);
const getModals = (): JSX.Element => {
return (
<>
<Modal
destroyOnClose
onCancel={(): void => onToggleModal(setDeleteModal)}
open={deleteModal}
title="Delete"
height="10vh"
onOk={onDeleteHandler}
centered
>
<Typography>Are you sure you want to delete this widget</Typography>
</Modal>
const getModals = (): JSX.Element => (
<>
<Modal
destroyOnClose
onCancel={(): void => onToggleModal(setDeleteModal)}
open={deleteModal}
title="Delete"
height="10vh"
onOk={onDeleteHandler}
centered
>
<Typography>Are you sure you want to delete this widget</Typography>
</Modal>
<Modal
title="View"
footer={[]}
centered
open={modal}
onCancel={(): void => onToggleModal(setModal)}
width="85%"
destroyOnClose
>
<FullViewContainer>
<FullView
name={`${name}expanded`}
widget={widget}
yAxisUnit={yAxisUnit}
/>
</FullViewContainer>
</Modal>
</>
);
};
<Modal
title="View"
footer={[]}
centered
open={modal}
onCancel={(): void => onToggleModal(setModal)}
width="85%"
destroyOnClose
>
<FullViewContainer>
<FullView name={`${name}expanded`} widget={widget} yAxisUnit={yAxisUnit} />
</FullViewContainer>
</Modal>
</>
);
const handleOnView = (): void => {
onToggleModal(setModal);

38
frontend/src/container/ListAlertRules/ListAlert.tsx
View File

@ -110,13 +110,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
return (
<>
{withOutSeverityKeys.map((e) => {
return (
<StyledTag key={e} color="magenta">
{e}: {value[e]}
</StyledTag>
);
})}
{withOutSeverityKeys.map((e) => (
<StyledTag key={e} color="magenta">
{e}: {value[e]}
</StyledTag>
))}
</>
);
},
@ -128,22 +126,20 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
title: 'Action',
dataIndex: 'id',
key: 'action',
render: (id: GettableAlert['id'], record): JSX.Element => {
return (
<>
<ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
render: (id: GettableAlert['id'], record): JSX.Element => (
<>
<ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
<ColumnButton
onClick={(): void => onEditHandler(id.toString())}
type="link"
>
Edit
</ColumnButton>
<ColumnButton
onClick={(): void => onEditHandler(id.toString())}
type="link"
>
Edit
</ColumnButton>
<DeleteAlert notifications={notifications} setData={setData} id={id} />
</>
);
},
<DeleteAlert notifications={notifications} setData={setData} id={id} />
</>
),
});
}

8
frontend/src/container/ListAlertRules/ToggleAlertState.tsx
View File

@ -40,8 +40,8 @@ function ToggleAlertState({
});
if (response.statusCode === 200) {
setData((state) => {
return state.map((alert) => {
setData((state) =>
state.map((alert) => {
if (alert.id === id) {
return {
...alert,
@ -50,8 +50,8 @@ function ToggleAlertState({
};
}
return alert;
});
});
}),
);
setAPIStatus((state) => ({
...state,

18
frontend/src/container/ListOfDashboard/SearchFilter/index.tsx
View File

@ -184,16 +184,14 @@ function SearchFilter({
{optionsData.options &&
Array.isArray(optionsData.options) &&
optionsData.options.map(
(optionItem): JSX.Element => {
return (
<Select.Option
key={(optionItem.value as string) || (optionItem.name as string)}
value={optionItem.value || optionItem.name}
>
{optionItem.name}
</Select.Option>
);
},
(optionItem): JSX.Element => (
<Select.Option
key={(optionItem.value as string) || (optionItem.name as string)}
value={optionItem.value || optionItem.name}
>
{optionItem.name}
</Select.Option>
),
)}
</Select>
)}

4
frontend/src/container/ListOfDashboard/SearchFilter/utils.ts
View File

@ -19,9 +19,7 @@ export const convertQueriesToURLQuery = (
export const convertURLQueryStringToQuery = (
queryString: string,
): IQueryStructure[] => {
return JSON.parse(decode(queryString));
};
): IQueryStructure[] => JSON.parse(decode(queryString));
export const resolveOperator = (
result: unknown,

12
frontend/src/container/LogDetailedView/TableView.tsx
View File

@ -30,13 +30,11 @@ function TableView({ logData }: TableViewProps): JSX.Element | null {
flattenLogData !== null &&
Object.keys(flattenLogData)
.filter((field) => fieldSearchFilter(field, fieldSearchInput))
.map((key) => {
return {
key,
field: key,
value: JSON.stringify(flattenLogData[key]),
};
});
.map((key) => ({
key,
field: key,
value: JSON.stringify(flattenLogData[key]),
}));
if (!dataSource) {
return null;

22
frontend/src/container/Login/index.tsx
View File

@ -157,18 +157,16 @@ function Login({
}
};
const renderSAMLAction = (): JSX.Element => {
return (
<Button
type="primary"
loading={isLoading}
disabled={isLoading}
href={precheckResult.ssoUrl}
>
{t('login_with_sso')}
</Button>
);
};
const renderSAMLAction = (): JSX.Element => (
<Button
type="primary"
loading={isLoading}
disabled={isLoading}
href={precheckResult.ssoUrl}
>
{t('login_with_sso')}
</Button>
);
const renderOnSsoError = (): JSX.Element | null => {
if (!ssoerror) {

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

@ -77,8 +77,8 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getLogsAggregate, maxTime, minTime, liveTail]);
const graphData = useMemo(() => {
return {
const graphData = useMemo(
() => ({
labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)),
datasets: [
{
@ -86,8 +86,9 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element {
backgroundColor: blue[4],
},
],
};
}, [logsAggregate]);
}),
[logsAggregate],
);
return (
<Container>

4
frontend/src/container/LogsFilters/styles.ts
View File

@ -25,9 +25,7 @@ export const Field = styled.div<{ isDarkMode: boolean }>`
justify-content: space-between;
align-items: center;
&:hover {
background: ${({ isDarkMode }): string => {
return isDarkMode ? grey[7] : '#ddd';
}};
background: ${({ isDarkMode }): string => (isDarkMode ? grey[7] : '#ddd')};
}
`;

74
frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts
View File

@ -44,46 +44,44 @@ export const getQueryBuilderQuerieswithFormula = ({
}: BuilderQuerieswithFormulaProps): {
formulas: IMetricsBuilderFormula[];
queryBuilder: IMetricsBuilderQuery[];
} => {
return {
formulas: [
{
disabled: false,
expression,
name: 'F1',
legend: legendFormula,
} => ({
formulas: [
{
disabled: false,
expression,
name: 'F1',
legend: legendFormula,
},
],
queryBuilder: [
{
aggregateOperator: 18,
disabled,
groupBy,
legend,
metricName: metricNameA,
name: 'A',
reduceTo: 1,
tagFilters: {
items: additionalItemsA,
op: 'AND',
},
],
queryBuilder: [
{
aggregateOperator: 18,
disabled,
groupBy,
legend,
metricName: metricNameA,
name: 'A',
reduceTo: 1,
tagFilters: {
items: additionalItemsA,
op: 'AND',
},
},
{
aggregateOperator: 18,
disabled,
groupBy,
legend,
metricName: metricNameB,
name: 'B',
reduceTo: 1,
tagFilters: {
items: additionalItemsB,
op: 'AND',
},
{
aggregateOperator: 18,
disabled,
groupBy,
legend,
metricName: metricNameB,
name: 'B',
reduceTo: 1,
tagFilters: {
items: additionalItemsB,
op: 'AND',
},
},
],
};
};
},
],
});
interface BuilderQueriesProps {
metricName: string;

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

@ -164,24 +164,20 @@ function ResourceAttributesFilter(): JSX.Element | null {
>
{map(
queries,
(query): JSX.Element => {
return (
<QueryChip
disabled={disabled}
key={query.id}
queryData={query}
onClose={handleClose}
/>
);
},
(query): JSX.Element => (
<QueryChip
disabled={disabled}
key={query.id}
queryData={query}
onClose={handleClose}
/>
),
)}
{map(staging, (item, idx) => {
return (
<QueryChipItem key={uuid()}>
{idx === 0 ? convertMetricKeyToTrace(item) : item}
</QueryChipItem>
);
})}
{map(staging, (item, idx) => (
<QueryChipItem key={uuid()}>
{idx === 0 ? convertMetricKeyToTrace(item) : item}
</QueryChipItem>
))}
</div>
{!disabled && (
<Select

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

@ -213,11 +213,10 @@ function Application({ getWidgetQueryBuilder }: DashboardProps): JSX.Element {
pointRadius: 1.5,
},
],
labels: serviceOverview.map((e) => {
return new Date(
parseFloat(convertToNanoSecondsToSecond(e.timestamp)),
);
}),
labels: serviceOverview.map(
(e) =>
new Date(parseFloat(convertToNanoSecondsToSecond(e.timestamp))),
),
}}
yAxisUnit="ms"
onDragSelect={onDragSelect}

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

@ -93,9 +93,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
return (
<Table
showHeader
title={(): string => {
return 'Key Operations';
}}
title={(): string => 'Key Operations'}
tableLayout="fixed"
dataSource={data}
columns={columns}

4
frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx
View File

@ -96,9 +96,7 @@ function VariablesSetting({
setDeleteVariableModal(false);
};
const validateVariableName = (name: string): boolean => {
return !variables[name];
};
const validateVariableName = (name: string): boolean => !variables[name];
const columns = [
{

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

@ -118,9 +118,9 @@ function VariableItem({
{variableData.multiSelect && variableData.showALLOption && (
<Option value={ALL_SELECT_VALUE}>ALL</Option>
)}
{map(optionsData, (option) => {
return <Option value={option}>{(option as string).toString()}</Option>;
})}
{map(optionsData, (option) => (
<Option value={option}>{(option as string).toString()}</Option>
))}
</Select>
)}
{errorMessage && (

10
frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts
View File

@ -2,12 +2,10 @@ import { EAggregateOperator } from 'types/common/dashboard';
export const AggregateFunctions = Object.keys(EAggregateOperator)
.filter((key) => Number.isNaN(parseInt(key, 10)))
.map((key) => {
return {
label: key,
value: EAggregateOperator[key as keyof typeof EAggregateOperator],
};
});
.map((key) => ({
label: key,
value: EAggregateOperator[key as keyof typeof EAggregateOperator],
}));
export const TagKeyOperator = [
{ label: 'In', value: 'IN' },

14
frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx
View File

@ -154,17 +154,15 @@ function MetricTagKeyFilter({
{queries.length > 0 &&
map(
queries,
(query): JSX.Element => {
return (
<QueryChip key={query.id} queryData={query} onClose={handleClose} />
);
},
(query): JSX.Element => (
<QueryChip key={query.id} queryData={query} onClose={handleClose} />
),
)}
</div>
<div>
{map(staging, (item) => {
return <QueryChipItem key={uuid()}>{item}</QueryChipItem>;
})}
{map(staging, (item) => (
<QueryChipItem key={uuid()}>{item}</QueryChipItem>
))}
</div>
<div style={{ display: 'flex', width: '100%' }}>

5
frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/getQueryKey.ts
View File

@ -4,8 +4,7 @@ import { EQueryTypeToQueryKeyMapping } from '../types';
export const getQueryKey = (
queryCategory: EQueryType,
): EQueryTypeToQueryKeyMapping => {
return EQueryTypeToQueryKeyMapping[
): EQueryTypeToQueryKeyMapping =>
EQueryTypeToQueryKeyMapping[
EQueryType[queryCategory] as keyof typeof EQueryTypeToQueryKeyMapping
];
};

4
frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
View File

@ -383,7 +383,5 @@ export const dataTypeCategories = [
];
export const flattenedCategories = flattenDeep(
dataTypeCategories.map((category) => {
return category.formats;
}),
dataTypeCategories.map((category) => category.formats),
);

5
frontend/src/container/NewWidget/RightContainer/styles.ts
View File

@ -30,9 +30,8 @@ export const TextContainer = styled.div<TextContainerProps>`
margin-bottom: 1rem;
> button {
margin-left: ${({ noButtonMargin }): string => {
return noButtonMargin ? '0' : '0.5rem';
}}
margin-left: ${({ noButtonMargin }): string =>
noButtonMargin ? '0' : '0.5rem'}
`;
export const NullButtonContainer = styled.div`

4
frontend/src/container/NewWidget/index.tsx
View File

@ -57,9 +57,7 @@ function NewWidget({
const { search } = useLocation();
const query = useMemo(() => {
return new URLSearchParams(search);
}, [search]);
const query = useMemo(() => new URLSearchParams(search), [search]);
const { dashboardId } = useParams<DashboardWidgetPageParams>();

22
frontend/src/container/OrganizationSettings/AuthDomains/index.tsx
View File

@ -231,18 +231,16 @@ function AuthDomains(): JSX.Element {
title: 'Action',
dataIndex: 'action',
key: 'action',
render: (_, record): JSX.Element => {
return (
<Button
disabled={!SSOFlag}
onClick={onDeleteHandler(record)}
danger
type="link"
>
Delete
</Button>
);
},
render: (_, record): JSX.Element => (
<Button
disabled={!SSOFlag}
onClick={onDeleteHandler(record)}
danger
type="link"
>
Delete
</Button>
),
},
];

5
frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx
View File

@ -26,9 +26,8 @@ function EditMembersDetails({
const [isLoading, setIsLoading] = useState<boolean>(false);
const [state, copyToClipboard] = useCopyToClipboard();
const getPasswordLink = (token: string): string => {
return `${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`;
};
const getPasswordLink = (token: string): string =>
`${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`;
const onChangeHandler = useCallback(
(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {

27
frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx
View File

@ -11,8 +11,8 @@ const { Option } = Select;
function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element {
const { t } = useTranslation('organizationsettings');
useEffect(() => {
return (): void => {
useEffect(
() => (): void => {
setAllMembers([
{
email: '',
@ -20,8 +20,9 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element {
role: 'VIEWER',
},
]);
};
}, [setAllMembers]);
},
[setAllMembers],
);
const onAddHandler = (): void => {
setAllMembers((state) => [
@ -36,16 +37,14 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element {
const onChangeHandler = useCallback(
(value: string, index: number, type: string): void => {
setAllMembers((prev) => {
return [
...prev.slice(0, index),
{
...prev[index],
[type]: value,
},
...prev.slice(index, prev.length - 1),
];
});
setAllMembers((prev) => [
...prev.slice(0, index),
{
...prev[index],
[type]: value,
},
...prev.slice(index, prev.length - 1),
]);
},
[setAllMembers],
);

20
frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx
View File

@ -63,15 +63,17 @@ function PendingInvitesContainer(): JSX.Element {
const { hash } = useLocation();
const getParsedInviteData = useCallback((payload: PayloadProps = []) => {
return payload?.map((data) => ({
key: data.createdAt,
name: data.name,
email: data.email,
accessLevel: data.role,
inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`,
}));
}, []);
const getParsedInviteData = useCallback(
(payload: PayloadProps = []) =>
payload?.map((data) => ({
key: data.createdAt,
name: data.name,
email: data.email,
accessLevel: data.role,
inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`,
})),
[],
);
useEffect(() => {
if (hash === INVITE_MEMBERS_HASH) {

12
frontend/src/container/Trace/Graph/index.tsx
View File

@ -20,11 +20,13 @@ function TraceGraph(): JSX.Element {
const { loading, error, errorMessage, payload } = spansGraph;
const ChartData = useMemo(() => {
return selectedGroupBy.length === 0
? getChartData(payload)
: getChartDataforGroupBy(payload);
}, [payload, selectedGroupBy]);
const ChartData = useMemo(
() =>
selectedGroupBy.length === 0
? getChartData(payload)
: getChartDataforGroupBy(payload),
[payload, selectedGroupBy],
);
if (error) {
return (

6
frontend/src/container/Trace/Search/util.ts
View File

@ -77,9 +77,9 @@ export const parseTagsToQuery = (tags: Tags): PayloadProps<string> => {
isError = true;
}
return `${Key[0]} ${Operator} (${Values.map((e) => {
return `"${e.replaceAll(/"/g, '')}"`;
}).join(',')})`;
return `${Key[0]} ${Operator} (${Values.map(
(e) => `"${e.replaceAll(/"/g, '')}"`,
).join(',')})`;
})
.join(' AND ');

11
frontend/src/container/Trace/TraceTable/index.tsx
View File

@ -48,17 +48,16 @@ function TraceTable(): JSX.Element {
type TableType = FlatArray<TraceReducer['spansAggregate']['data'], 1>;
const getLink = (record: TableType): string => {
return `${ROUTES.TRACE}/${record.traceID}${formUrlParams({
const getLink = (record: TableType): string =>
`${ROUTES.TRACE}/${record.traceID}${formUrlParams({
spanId: record.spanID,
levelUp: 0,
levelDown: 0,
})}`;
};
const getValue = (value: string): JSX.Element => {
return <Typography>{value}</Typography>;
};
const getValue = (value: string): JSX.Element => (
<Typography>{value}</Typography>
);
const getHttpMethodOrStatus = (
value: TableType['statusCode'],

5
frontend/src/container/TraceDetail/index.tsx
View File

@ -100,6 +100,11 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
[activeSelectedId, treesData],
);
// const onSearchHandler = (value: string) => {
// setSearchSpanString(value);
// setTreeData(spanToTreeUtil(response[0].events));
// };
const onFocusSelectedSpanHandler = (): void => {
const treeNode = getNodeById(activeSelectedId, tree);

4
frontend/src/container/TraceDetail/utils.ts
View File

@ -49,9 +49,7 @@ export const INTERVAL_UNITS: IIntervalUnit[] = [
export const resolveTimeFromInterval = (
intervalTime: number,
intervalUnit: IIntervalUnit,
): number => {
return intervalTime * intervalUnit.multiplier;
};
): number => intervalTime * intervalUnit.multiplier;
export const convertTimeToRelevantUnit = (
intervalTime: number,

6
frontend/src/container/TriggeredAlerts/NoFilterTable.tsx
View File

@ -52,9 +52,9 @@ function NoFilterTable({
return (
<>
{withOutSeverityKeys.map((e) => {
return <Tag key={e} color="magenta">{`${e} : ${labels[e]}`}</Tag>;
})}
{withOutSeverityKeys.map((e) => (
<Tag key={e} color="magenta">{`${e} : ${labels[e]}`}</Tag>
))}
</>
);
},

5
frontend/src/hooks/useComponentPermission.ts
View File

@ -7,9 +7,8 @@ const useComponentPermission = (
role: ROLES | null,
): boolean[] => {
const getComponentPermission = useCallback(
(component: ComponentTypes): boolean => {
return !!componentPermission[component].find((roles) => role === roles);
},
(component: ComponentTypes): boolean =>
!!componentPermission[component].find((roles) => role === roles),
[role],
);

5
frontend/src/lib/convertDateToAmAndPm.ts
View File

@ -1,10 +1,9 @@
const convertDateToAmAndPm = (date: Date): string => {
return date.toLocaleString('en-US', {
const convertDateToAmAndPm = (date: Date): string =>
date.toLocaleString('en-US', {
hour: '2-digit',
minute: 'numeric',
second: 'numeric',
hour12: true,
});
};
export default convertDateToAmAndPm;

5
frontend/src/lib/convertToNanoSecondsToSecond.ts
View File

@ -1,5 +1,4 @@
const convertToNanoSecondsToSecond = (number: number): string => {
return parseFloat((number / 1000000).toString()).toFixed(2);
};
const convertToNanoSecondsToSecond = (number: number): string =>
parseFloat((number / 1000000).toString()).toFixed(2);
export default convertToNanoSecondsToSecond;

5
frontend/src/lib/covertIntoEpoc.ts
View File

@ -1,5 +1,4 @@
const convertIntoEpoc = (number: number): string => {
return number.toString().split('.').join('').toString();
};
const convertIntoEpoc = (number: number): string =>
number.toString().split('.').join('').toString();
export default convertIntoEpoc;

33
frontend/src/lib/getChartData.ts
View File

@ -17,8 +17,8 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
const labels = Array.from(uniqueTimeLabels).sort((a, b) => a - b);
const response = queryData.map(
({ queryData, query: queryG, legend: legendG }) => {
return queryData.map((e) => {
({ queryData, query: queryG, legend: legendG }) =>
queryData.map((e) => {
const { values = [], metric, legend, queryName } = e || {};
const labelNames = getLabelName(
metric,
@ -35,9 +35,7 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
// Fill the missing data with null
const filledDataValues = Array.from(labels).map((e) => {
const td1 = new Date(parseInt(convertIntoEpoc(e * 1000), 10));
const data = dataValue.find((e1) => {
return e1.first.getTime() === td1.getTime();
});
const data = dataValue.find((e1) => e1.first.getTime() === td1.getTime());
return (
data || {
first: new Date(parseInt(convertIntoEpoc(e * 1000), 10)),
@ -51,8 +49,7 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
first: filledDataValues.map((e) => e.first),
second: filledDataValues.map((e) => e.second),
};
});
},
}),
);
const allLabels = response
.map((e) => e.map((e) => e.label))
@ -63,18 +60,16 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
.reduce((a, b) => [...a, ...b], []);
return {
datasets: alldata.map((e, index) => {
return {
data: e,
label: allLabels[index],
borderWidth: 1.5,
spanGaps: true,
animations: false,
borderColor: colors[index % colors.length] || 'red',
showLine: true,
pointRadius: 0,
};
}),
datasets: alldata.map((e, index) => ({
data: e,
label: allLabels[index],
borderWidth: 1.5,
spanGaps: true,
animations: false,
borderColor: colors[index % colors.length] || 'red',
showLine: true,
pointRadius: 0,
})),
labels: response
.map((e) => e.map((e) => e.first))
.reduce((a, b) => [...a, ...b], [])[0],

5
frontend/src/lib/getStartAndEndTime/getMicroSeconds.ts
View File

@ -1,6 +1,5 @@
const getMicroSeconds = ({ time }: GetMicroSecondsProps): string => {
return (time / 1000).toString();
};
const getMicroSeconds = ({ time }: GetMicroSecondsProps): string =>
(time / 1000).toString();
interface GetMicroSecondsProps {
time: number;

4
frontend/src/lib/query/GetFormulaName.ts
View File

@ -11,9 +11,7 @@ function GetFormulaName(
return null;
}
const formulasNameNumbered = sortBy(
formulas.map(({ name }: { name: string }) => {
return parseInt(name.slice(1), 10);
}),
formulas.map(({ name }: { name: string }) => parseInt(name.slice(1), 10)),
(e) => e,
);

4
frontend/src/lib/query/GetQueryName.ts
View File

@ -6,9 +6,7 @@ function GetQueryName(queries: { name: string }[] = []): string | null {
if (queries.length === MAX_QUERIES) {
return null;
}
const sortedQueries = sortBy(queries, (q) => {
return q.name;
});
const sortedQueries = sortBy(queries, (q) => q.name);
let queryIteratorIdx = 0;

5
frontend/src/lib/query/convertObjectIntoParams.ts
View File

@ -1,8 +1,8 @@
const convertObjectIntoParams = (
props: Record<string, unknown>,
stringify = false,
): string => {
return Object.keys(props)
): string =>
Object.keys(props)
.map(
(e) =>
`${e}=${
@ -10,6 +10,5 @@ const convertObjectIntoParams = (
}`,
)
.join('&');
};
export default convertObjectIntoParams;

24
frontend/src/lib/resourceAttributes.ts
View File

@ -23,25 +23,21 @@ export const convertTraceKeyToMetric = (key: string): string => {
return `resource_${splittedKey.join('_')}`;
};
export const convertOperatorLabelToMetricOperator = (label: string): string => {
return (
OperatorConversions.find((operator) => operator.label === label)
?.metricValue || ''
);
};
export const convertOperatorLabelToMetricOperator = (label: string): string =>
OperatorConversions.find((operator) => operator.label === label)
?.metricValue || '';
export const convertOperatorLabelToTraceOperator = (
label: string,
): OperatorValues => {
return OperatorConversions.find((operator) => operator.label === label)
): OperatorValues =>
OperatorConversions.find((operator) => operator.label === label)
?.traceValue as OperatorValues;
};
export const convertRawQueriesToTraceSelectedTags = (
queries: IResourceAttributeQuery[],
keyType: 'string' | 'array' = 'string',
): Tags[] | TagsAPI[] => {
return queries.map((query) => ({
): Tags[] | TagsAPI[] =>
queries.map((query) => ({
Key:
keyType === 'array'
? [convertMetricKeyToTrace(query.tagKey)]
@ -49,7 +45,6 @@ export const convertRawQueriesToTraceSelectedTags = (
Operator: convertOperatorLabelToTraceOperator(query.operator),
Values: query.tagValue,
}));
};
/**
* Converts Resource Attribute Queries to PromQL query string
@ -74,11 +69,10 @@ export const resourceAttributesQueryToPromQL = (
/* Convert resource attributes to tagFilter items for queryBuilder */
export const resourceAttributesToTagFilterItems = (
queries: IResourceAttributeQuery[],
): IQueryBuilderTagFilterItems[] => {
return queries.map((res) => ({
): IQueryBuilderTagFilterItems[] =>
queries.map((res) => ({
id: `${res.id}`,
key: `${res.tagKey}`,
op: `${res.operator}`,
value: `${res.tagValue}`.split(','),
}));
};

4
frontend/src/pages/AlertChannelCreate/index.tsx
View File

@ -20,9 +20,7 @@ function SettingsPage(): JSX.Element {
route: ROUTES.SETTINGS,
},
{
Component: (): JSX.Element => {
return <CreateAlertChannels preType="slack" />;
},
Component: (): JSX.Element => <CreateAlertChannels preType="slack" />,
name: t('routes.alert_channels'),
route: ROUTES.ALL_CHANNELS,
},

6
frontend/src/pages/GettingStarted/index.tsx
View File

@ -11,9 +11,9 @@ function InstrumentationPage(): JSX.Element {
Congrats, you have successfully installed SigNoz! Now lets get some data in
and start deriving insights from them
</Typography>
{GetStartedContent().map((section) => {
return <DocSection key={section.heading} sectionData={section} />;
})}
{GetStartedContent().map((section) => (
<DocSection key={section.heading} sectionData={section} />
))}
</>
);
}

9
frontend/src/pages/Trace/index.tsx
View File

@ -101,13 +101,14 @@ function Trace({
isFilterExclude,
]);
useEffect(() => {
return (): void => {
useEffect(
() => (): void => {
dispatch({
type: RESET_TRACE_FILTER,
});
};
}, [dispatch]);
},
[dispatch],
);
const onClickHandler: React.MouseEventHandler<HTMLElement> = useCallback(
(e) => {

14
frontend/src/store/actions/dashboard/applySettingsToPanel.ts
View File

@ -4,13 +4,13 @@ import { Widgets } from 'types/api/dashboard/getAll';
export const ApplySettingsToPanel = (
props: ApplySettingsToPanelProps,
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'APPLY_SETTINGS_TO_PANEL',
payload: props,
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (
dispatch: Dispatch<AppActions>,
): void => {
dispatch({
type: 'APPLY_SETTINGS_TO_PANEL',
payload: props,
});
};
export interface ApplySettingsToPanelProps {

50
frontend/src/store/actions/dashboard/deleteDashboard.ts
View File

@ -5,38 +5,38 @@ import { Dashboard } from 'types/api/dashboard/getAll';
export const DeleteDashboard = ({
uuid,
}: DeleteDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const response = await deleteDashboardApi({
uuid,
});
}: DeleteDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch: Dispatch<AppActions>,
): Promise<void> => {
try {
const response = await deleteDashboardApi({
uuid,
});
if (response.statusCode === 200) {
dispatch({
type: 'DELETE_DASHBOARD_SUCCESS',
payload: {
uuid,
},
});
} else {
dispatch({
type: 'DELETE_DASHBOARD_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
if (response.statusCode === 200) {
dispatch({
type: 'DELETE_DASHBOARD_SUCCESS',
payload: {
uuid,
},
});
} else {
dispatch({
type: 'DELETE_DASHBOARD_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
errorMessage: response.error || 'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'DELETE_DASHBOARD_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
},
});
}
};
export interface DeleteDashboardProps {

20
frontend/src/store/actions/dashboard/deleteQuery.ts
View File

@ -4,14 +4,14 @@ import { DeleteQueryProps } from 'types/actions/dashboard';
export const DeleteQuery = (
props: DeleteQueryProps,
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'DELETE_QUERY',
payload: {
currentIndex: props.currentIndex,
widgetId: props.widgetId,
},
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (
dispatch: Dispatch<AppActions>,
): void => {
dispatch({
type: 'DELETE_QUERY',
payload: {
currentIndex: props.currentIndex,
widgetId: props.widgetId,
},
});
};

82
frontend/src/store/actions/dashboard/deleteWidget.ts
View File

@ -10,58 +10,58 @@ import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
export const DeleteWidget = ({
widgetId,
setLayout,
}: DeleteWidgetProps): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const { dashboards } = store.getState();
const [selectedDashboard] = dashboards.dashboards;
}: DeleteWidgetProps): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch: Dispatch<AppActions>,
): Promise<void> => {
try {
const { dashboards } = store.getState();
const [selectedDashboard] = dashboards.dashboards;
const { widgets = [] } = selectedDashboard.data;
const updatedWidgets = widgets.filter((e) => e.id !== widgetId);
const updatedLayout =
selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || [];
const { widgets = [] } = selectedDashboard.data;
const updatedWidgets = widgets.filter((e) => e.id !== widgetId);
const updatedLayout =
selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || [];
const updatedSelectedDashboard: Dashboard = {
...selectedDashboard,
data: {
title: selectedDashboard.data.title,
description: selectedDashboard.data.description,
name: selectedDashboard.data.name,
tags: selectedDashboard.data.tags,
widgets: updatedWidgets,
layout: updatedLayout,
variables: selectedDashboard.data.variables,
},
uuid: selectedDashboard.uuid,
};
const updatedSelectedDashboard: Dashboard = {
...selectedDashboard,
data: {
title: selectedDashboard.data.title,
description: selectedDashboard.data.description,
name: selectedDashboard.data.name,
tags: selectedDashboard.data.tags,
widgets: updatedWidgets,
layout: updatedLayout,
variables: selectedDashboard.data.variables,
},
uuid: selectedDashboard.uuid,
};
const response = await updateDashboardApi(updatedSelectedDashboard);
const response = await updateDashboardApi(updatedSelectedDashboard);
if (response.statusCode === 200) {
dispatch({
type: UPDATE_DASHBOARD,
payload: updatedSelectedDashboard,
});
if (setLayout) {
setLayout(getPreLayouts(updatedWidgets, updatedLayout));
}
} else {
dispatch({
type: 'DELETE_WIDGET_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
if (response.statusCode === 200) {
dispatch({
type: UPDATE_DASHBOARD,
payload: updatedSelectedDashboard,
});
if (setLayout) {
setLayout(getPreLayouts(updatedWidgets, updatedLayout));
}
} catch (error) {
} else {
dispatch({
type: 'DELETE_WIDGET_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
errorMessage: response.error || 'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'DELETE_WIDGET_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
},
});
}
};
export interface DeleteWidgetProps {

44
frontend/src/store/actions/dashboard/getAllDashboard.ts
View File

@ -5,34 +5,32 @@ import AppActions from 'types/actions';
export const GetAllDashboards = (): ((
dispatch: Dispatch<AppActions>,
) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
dispatch({
type: 'GET_ALL_DASHBOARD_LOADING_START',
});
const response = await getAll();
) => void) => async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
dispatch({
type: 'GET_ALL_DASHBOARD_LOADING_START',
});
const response = await getAll();
if (response.statusCode === 200) {
dispatch({
type: 'GET_ALL_DASHBOARD_SUCCESS',
payload: response.payload,
});
} else {
dispatch({
type: 'GET_ALL_DASHBOARD_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
if (response.statusCode === 200) {
dispatch({
type: 'GET_ALL_DASHBOARD_SUCCESS',
payload: response.payload,
});
} else {
dispatch({
type: 'GET_ALL_DASHBOARD_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
errorMessage: response.error || 'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'GET_ALL_DASHBOARD_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
},
});
}
};

134
frontend/src/store/actions/dashboard/getDashboard.ts
View File

@ -15,90 +15,90 @@ export const GetDashboard = ({
uuid,
widgetId,
graphType,
}: GetDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
}: GetDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch: Dispatch<AppActions>,
): Promise<void> => {
try {
dispatch({
type: 'GET_DASHBOARD_LOADING_START',
});
const response = await getDashboard({
uuid,
});
if (response.statusCode === 200) {
dispatch({
type: 'GET_DASHBOARD_LOADING_START',
payload: response.payload,
type: 'GET_DASHBOARD_SUCCESS',
});
const response = await getDashboard({
uuid,
});
if (response.statusCode === 200) {
if (widgetId !== undefined) {
dispatch({
payload: response.payload,
type: 'GET_DASHBOARD_SUCCESS',
});
if (widgetId !== undefined) {
dispatch({
type: 'CREATE_DEFAULT_WIDGET',
payload: {
description: '',
id: widgetId,
isStacked: false,
nullZeroValues: 'zero',
opacity: '0',
panelTypes: graphType || 'TIME_SERIES',
timePreferance: 'GLOBAL_TIME',
title: '',
queryType: 0,
queryData: {
data: {
queryData: [],
},
error: false,
errorMessage: '',
loading: false,
type: 'CREATE_DEFAULT_WIDGET',
payload: {
description: '',
id: widgetId,
isStacked: false,
nullZeroValues: 'zero',
opacity: '0',
panelTypes: graphType || 'TIME_SERIES',
timePreferance: 'GLOBAL_TIME',
title: '',
queryType: 0,
queryData: {
data: {
queryData: [],
},
query: {
queryType: EQueryType.QUERY_BUILDER,
promQL: [
{
name: GetQueryName([]) as string,
...PromQLQueryTemplate,
},
],
clickHouse: [
{
name: GetQueryName([]) as string,
...ClickHouseQueryTemplate,
},
],
metricsBuilder: {
formulas: [],
queryBuilder: [
{
name: GetQueryName([]) as string,
...QueryBuilderQueryTemplate,
},
],
error: false,
errorMessage: '',
loading: false,
},
query: {
queryType: EQueryType.QUERY_BUILDER,
promQL: [
{
name: GetQueryName([]) as string,
...PromQLQueryTemplate,
},
],
clickHouse: [
{
name: GetQueryName([]) as string,
...ClickHouseQueryTemplate,
},
],
metricsBuilder: {
formulas: [],
queryBuilder: [
{
name: GetQueryName([]) as string,
...QueryBuilderQueryTemplate,
},
],
},
},
});
}
} else {
dispatch({
type: 'GET_DASHBOARD_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
} else {
dispatch({
type: 'GET_DASHBOARD_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
errorMessage: response.error || 'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'GET_DASHBOARD_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
},
});
}
};
export interface GetDashboardProps {

5
frontend/src/store/actions/dashboard/saveDashboard.ts
View File

@ -21,9 +21,9 @@ export const SaveDashboard = ({
widgetId,
dashboardId,
yAxisUnit,
}: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => {
}: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) =>
// eslint-disable-next-line sonarjs/cognitive-complexity
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const dashboard = store.getState();
const search = new URLSearchParams(history.location.search);
@ -139,7 +139,6 @@ export const SaveDashboard = ({
});
}
};
};
export interface SaveDashboardProps {
uuid: Dashboard['uuid'];

18
frontend/src/store/actions/dashboard/toggleAddWidget.ts
View File

@ -3,15 +3,15 @@ import AppActions from 'types/actions';
export const ToggleAddWidget = (
props: ToggleAddWidgetProps,
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'IS_ADD_WIDGET',
payload: {
isAddWidget: props,
},
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (
dispatch: Dispatch<AppActions>,
): void => {
dispatch({
type: 'IS_ADD_WIDGET',
payload: {
isAddWidget: props,
},
});
};
export type ToggleAddWidgetProps = boolean;

12
frontend/src/store/actions/dashboard/toggleEditMode.ts
View File

@ -1,12 +1,10 @@
import { Dispatch } from 'react';
import { Dispatch } from 'redux';
import AppActions from 'types/actions';
export const ToggleEditMode = (): ((
dispatch: Dispatch<AppActions>,
) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'TOGGLE_EDIT_MODE',
});
};
) => void) => (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'TOGGLE_EDIT_MODE',
});
};

64
frontend/src/store/actions/dashboard/updateDashboardTitle.ts
View File

@ -7,49 +7,47 @@ export const UpdateDashboardTitleDescriptionTags = ({
dashboard, // @TODO need to grab the dashboard from the store
}: UpdateDashboardTitleDescriptionTagsProps): ((
dispatch: Dispatch<AppActions>,
) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const { data } = dashboard;
) => void) => async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const { data } = dashboard;
const response = await update({
data: {
...dashboard.data,
const response = await update({
data: {
...dashboard.data,
title: dashboard.data.title,
},
uuid: dashboard.uuid,
});
if (response.statusCode === 200) {
dispatch({
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_SUCCESS',
payload: {
description: data.description,
tags: data.tags,
title: dashboard.data.title,
},
uuid: dashboard.uuid,
});
if (response.statusCode === 200) {
dispatch({
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_SUCCESS',
payload: {
description: data.description,
tags: data.tags,
title: dashboard.data.title,
},
});
dispatch({
type: 'TOGGLE_EDIT_MODE',
});
} else {
dispatch({
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
dispatch({
type: 'TOGGLE_EDIT_MODE',
});
} else {
dispatch({
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
errorMessage: response.error || 'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
},
});
}
};
export interface UpdateDashboardTitleDescriptionTagsProps {

22
frontend/src/store/actions/dashboard/updateQuery.ts
View File

@ -4,17 +4,17 @@ import { Query } from 'types/api/dashboard/getAll';
export const UpdateQuery = (
props: UpdateQueryProps,
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'UPDATE_QUERY',
payload: {
query: props.updatedQuery,
widgetId: props.widgetId,
yAxisUnit: props.yAxisUnit,
},
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (
dispatch: Dispatch<AppActions>,
): void => {
dispatch({
type: 'UPDATE_QUERY',
payload: {
query: props.updatedQuery,
widgetId: props.widgetId,
yAxisUnit: props.yAxisUnit,
},
});
};
export interface UpdateQueryProps {

50
frontend/src/store/actions/dashboard/updatedDashboardVariables.ts
View File

@ -8,31 +8,31 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
export const UpdateDashboardVariables = (
variables: Record<string, IDashboardVariable>,
): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
dispatch({
type: UPDATE_DASHBOARD_VARIABLES,
payload: variables,
): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch: Dispatch<AppActions>,
): Promise<void> => {
try {
dispatch({
type: UPDATE_DASHBOARD_VARIABLES,
payload: variables,
});
const reduxStoreState = store.getState();
const [dashboard] = reduxStoreState.dashboards.dashboards;
const response = await update({
data: {
...dashboard.data,
},
uuid: dashboard.uuid,
});
if (response.statusCode !== 200) {
notification.error({
message: response.error,
});
const reduxStoreState = store.getState();
const [dashboard] = reduxStoreState.dashboards.dashboards;
const response = await update({
data: {
...dashboard.data,
},
uuid: dashboard.uuid,
});
if (response.statusCode !== 200) {
notification.error({
message: response.error,
});
}
} catch (error) {
console.error(error);
}
};
} catch (error) {
console.error(error);
}
};

34
frontend/src/store/actions/global.ts
View File

@ -7,27 +7,25 @@ import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
export const UpdateTimeInterval = (
interval: Time,
dateTimeRange: [number, number] = [0, 0],
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
const { maxTime, minTime } = GetMinMax(interval, dateTimeRange);
): ((dispatch: Dispatch<AppActions>) => void) => (
dispatch: Dispatch<AppActions>,
): void => {
const { maxTime, minTime } = GetMinMax(interval, dateTimeRange);
dispatch({
type: UPDATE_TIME_INTERVAL,
payload: {
maxTime,
minTime,
selectedTime: interval,
},
});
};
dispatch({
type: UPDATE_TIME_INTERVAL,
payload: {
maxTime,
minTime,
selectedTime: interval,
},
});
};
export const GlobalTimeLoading = (): ((
dispatch: Dispatch<AppActions>,
) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'GLOBAL_TIME_LOADING_START',
});
};
) => void) => (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'GLOBAL_TIME_LOADING_START',
});
};

16
frontend/src/store/actions/logs/addToSelectedField.ts
View File

@ -5,13 +5,11 @@ import { SET_FIELDS } from 'types/actions/logs';
export const AddToSelectedField = (): ((
dispatch: Dispatch<AppActions>,
) => void) => {
return async (dispatch): Promise<void> => {
const response = await GetSearchFields();
if (response.payload)
dispatch({
type: SET_FIELDS,
payload: response.payload,
});
};
) => void) => async (dispatch): Promise<void> => {
const response = await GetSearchFields();
if (response.payload)
dispatch({
type: SET_FIELDS,
payload: response.payload,
});
};

30
frontend/src/store/actions/logs/getFields.ts
View File

@ -5,19 +5,19 @@ import { SET_FIELDS } from 'types/actions/logs';
const IGNORED_SELECTED_FIELDS = ['timestamp'];
export const GetLogsFields = (): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch): Promise<void> => {
const response = await GetSearchFields();
if (response.payload) {
dispatch({
type: SET_FIELDS,
payload: {
interesting: response.payload.interesting,
selected: response.payload.selected.filter(
(field) => !IGNORED_SELECTED_FIELDS.includes(field.name),
),
},
});
}
};
export const GetLogsFields = (): ((
dispatch: Dispatch<AppActions>,
) => void) => async (dispatch): Promise<void> => {
const response = await GetSearchFields();
if (response.payload) {
dispatch({
type: SET_FIELDS,
payload: {
interesting: response.payload.interesting,
selected: response.payload.selected.filter(
(field) => !IGNORED_SELECTED_FIELDS.includes(field.name),
),
},
});
}
};

44
frontend/src/store/actions/logs/getLogs.ts
View File

@ -6,29 +6,29 @@ import { Props } from 'types/api/logs/getLogs';
export const getLogs = (
props: Props,
): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch): Promise<void> => {
): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch,
): Promise<void> => {
dispatch({
type: SET_LOADING,
payload: true,
});
const response = await GetLogs(props);
if (response.payload)
dispatch({
type: SET_LOADING,
payload: true,
type: SET_LOGS,
payload: response.payload,
});
else
dispatch({
type: SET_LOGS,
payload: [],
});
const response = await GetLogs(props);
if (response.payload)
dispatch({
type: SET_LOGS,
payload: response.payload,
});
else
dispatch({
type: SET_LOGS,
payload: [],
});
dispatch({
type: SET_LOADING,
payload: false,
});
};
dispatch({
type: SET_LOADING,
payload: false,
});
};

52
frontend/src/store/actions/logs/getLogsAggregate.ts
View File

@ -10,35 +10,33 @@ import { ILogsAggregate } from 'types/api/logs/logAggregate';
export const getLogsAggregate = (
props: Props,
): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch): Promise<void> => {
dispatch({
type: SET_LOADING_AGGREGATE,
payload: true,
});
): ((dispatch: Dispatch<AppActions>) => void) => async (
dispatch,
): Promise<void> => {
dispatch({
type: SET_LOADING_AGGREGATE,
payload: true,
});
const response = await GetLogsAggregate(props);
if (response.payload) {
const convertedArray: ILogsAggregate[] = Object.values(response.payload).map(
(data) => {
return { ...data, time: new Date(data.timestamp / 1e6) };
},
);
dispatch({
type: SET_LOGS_AGGREGATE_SERIES,
payload: convertedArray,
});
} else {
dispatch({
type: SET_LOGS_AGGREGATE_SERIES,
payload: [],
});
}
const response = await GetLogsAggregate(props);
if (response.payload) {
const convertedArray: ILogsAggregate[] = Object.values(
response.payload,
).map((data) => ({ ...data, time: new Date(data.timestamp / 1e6) }));
dispatch({
type: SET_LOADING_AGGREGATE,
payload: false,
type: SET_LOGS_AGGREGATE_SERIES,
payload: convertedArray,
});
};
} else {
dispatch({
type: SET_LOGS_AGGREGATE_SERIES,
payload: [],
});
}
dispatch({
type: SET_LOADING_AGGREGATE,
payload: false,
});
};

199
frontend/src/store/actions/metrics/getInitialData.ts
View File

@ -17,115 +17,116 @@ import { Tags } from 'types/reducer/trace';
export const GetInitialData = (
props: GetInitialDataProps,
): ((dispatch: Dispatch<AppActions>, getState: () => AppState) => void) => {
return async (dispatch, getState): Promise<void> => {
try {
const { globalTime } = getState();
): ((
dispatch: Dispatch<AppActions>,
getState: () => AppState,
) => void) => async (dispatch, getState): Promise<void> => {
try {
const { globalTime } = getState();
/**
* @description This is because we keeping the store as source of truth
*/
if (
props.maxTime !== globalTime.maxTime &&
props.minTime !== globalTime.minTime
) {
return;
}
/**
* @description This is because we keeping the store as source of truth
*/
if (
props.maxTime !== globalTime.maxTime &&
props.minTime !== globalTime.minTime
) {
return;
}
dispatch({
type: 'GET_INITIAL_APPLICATION_LOADING',
});
const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [
globalTime.minTime / 1000000,
globalTime.maxTime / 1000000,
]);
const [
// getDBOverViewResponse,
// getExternalAverageDurationResponse,
// getExternalErrorResponse,
// getExternalServiceResponse,
getServiceOverviewResponse,
getTopOperationsResponse,
getTopLevelOperationsResponse,
] = await Promise.all([
// getDBOverView({
// ...props,
// }),
// getExternalAverageDuration({
// ...props,
// }),
// getExternalError({
// ...props,
// }),
// getExternalService({
// ...props,
// }),
getServiceOverview({
end: maxTime,
service: props.serviceName,
start: minTime,
step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
selectedTags: props.selectedTags,
}),
getTopOperations({
end: maxTime,
service: props.serviceName,
start: minTime,
selectedTags: props.selectedTags,
}),
getTopLevelOperations({
service: props.serviceName,
}),
]);
if (
// getDBOverViewResponse.statusCode === 200 &&
// getExternalAverageDurationResponse.statusCode === 200 &&
// getExternalErrorResponse.statusCode === 200 &&
// getExternalServiceResponse.statusCode === 200 &&
getServiceOverviewResponse.statusCode === 200 &&
getTopOperationsResponse.statusCode === 200 &&
getTopLevelOperationsResponse.statusCode === 200
) {
dispatch({
type: 'GET_INITIAL_APPLICATION_LOADING',
type: 'GET_INTIAL_APPLICATION_DATA',
payload: {
// dbOverView: getDBOverViewResponse.payload,
// externalAverageDuration: getExternalAverageDurationResponse.payload,
// externalError: getExternalErrorResponse.payload,
// externalService: getExternalServiceResponse.payload,
serviceOverview: getServiceOverviewResponse.payload,
topOperations: getTopOperationsResponse.payload,
topLevelOperations: getTopLevelOperationsResponse.payload,
},
});
const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [
globalTime.minTime / 1000000,
globalTime.maxTime / 1000000,
]);
const [
// getDBOverViewResponse,
// getExternalAverageDurationResponse,
// getExternalErrorResponse,
// getExternalServiceResponse,
getServiceOverviewResponse,
getTopOperationsResponse,
getTopLevelOperationsResponse,
] = await Promise.all([
// getDBOverView({
// ...props,
// }),
// getExternalAverageDuration({
// ...props,
// }),
// getExternalError({
// ...props,
// }),
// getExternalService({
// ...props,
// }),
getServiceOverview({
end: maxTime,
service: props.serviceName,
start: minTime,
step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
selectedTags: props.selectedTags,
}),
getTopOperations({
end: maxTime,
service: props.serviceName,
start: minTime,
selectedTags: props.selectedTags,
}),
getTopLevelOperations({
service: props.serviceName,
}),
]);
if (
// getDBOverViewResponse.statusCode === 200 &&
// getExternalAverageDurationResponse.statusCode === 200 &&
// getExternalErrorResponse.statusCode === 200 &&
// getExternalServiceResponse.statusCode === 200 &&
getServiceOverviewResponse.statusCode === 200 &&
getTopOperationsResponse.statusCode === 200 &&
getTopLevelOperationsResponse.statusCode === 200
) {
dispatch({
type: 'GET_INTIAL_APPLICATION_DATA',
payload: {
// dbOverView: getDBOverViewResponse.payload,
// externalAverageDuration: getExternalAverageDurationResponse.payload,
// externalError: getExternalErrorResponse.payload,
// externalService: getExternalServiceResponse.payload,
serviceOverview: getServiceOverviewResponse.payload,
topOperations: getTopOperationsResponse.payload,
topLevelOperations: getTopLevelOperationsResponse.payload,
},
});
} else {
dispatch({
type: 'GET_INITIAL_APPLICATION_ERROR',
payload: {
errorMessage:
getTopOperationsResponse.error ||
getServiceOverviewResponse.error ||
getTopLevelOperationsResponse.error ||
// getExternalServiceResponse.error ||
// getExternalErrorResponse.error ||
// getExternalAverageDurationResponse.error ||
// getDBOverViewResponse.error ||
'Something went wrong',
},
});
}
} catch (error) {
} else {
dispatch({
type: 'GET_INITIAL_APPLICATION_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
errorMessage:
getTopOperationsResponse.error ||
getServiceOverviewResponse.error ||
getTopLevelOperationsResponse.error ||
// getExternalServiceResponse.error ||
// getExternalErrorResponse.error ||
// getExternalAverageDurationResponse.error ||
// getDBOverViewResponse.error ||
'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'GET_INITIAL_APPLICATION_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
},
});
}
};
export interface GetInitialDataProps {

77
frontend/src/store/actions/metrics/getService.ts
View File

@ -9,55 +9,56 @@ import { Tags } from 'types/reducer/trace';
export const GetService = (
props: GetServiceProps,
): ((dispatch: Dispatch<AppActions>, getState: () => AppState) => void) => {
return async (dispatch, getState): Promise<void> => {
try {
const { globalTime } = getState();
): ((
dispatch: Dispatch<AppActions>,
getState: () => AppState,
) => void) => async (dispatch, getState): Promise<void> => {
try {
const { globalTime } = getState();
if (
props.maxTime !== globalTime.maxTime &&
props.minTime !== globalTime.minTime
) {
return;
}
if (
props.maxTime !== globalTime.maxTime &&
props.minTime !== globalTime.minTime
) {
return;
}
const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [
globalTime.minTime / 1000000,
globalTime.maxTime / 1000000,
]);
const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [
globalTime.minTime / 1000000,
globalTime.maxTime / 1000000,
]);
dispatch({
type: 'GET_SERVICE_LIST_LOADING_START',
});
const response = await getService({
end: maxTime,
start: minTime,
selectedTags: props.selectedTags,
});
if (response.statusCode === 200) {
dispatch({
type: 'GET_SERVICE_LIST_LOADING_START',
type: 'GET_SERVICE_LIST_SUCCESS',
payload: response.payload,
});
const response = await getService({
end: maxTime,
start: minTime,
selectedTags: props.selectedTags,
});
if (response.statusCode === 200) {
dispatch({
type: 'GET_SERVICE_LIST_SUCCESS',
payload: response.payload,
});
} else {
dispatch({
type: 'GET_SERVICE_LIST_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
} else {
dispatch({
type: 'GET_SERVICE_LIST_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
errorMessage: response.error || 'Something went wrong',
},
});
}
};
} catch (error) {
dispatch({
type: 'GET_SERVICE_LIST_ERROR',
payload: {
errorMessage: (error as AxiosError).toString() || 'Something went wrong',
},
});
}
};
export type GetServiceProps = {

10
frontend/src/store/actions/metrics/resetInitialData.ts
View File

@ -5,10 +5,8 @@ import AppActions from 'types/actions';
export const ResetInitialData = (): ((
dispatch: Dispatch<AppActions>,
getState: () => AppState,
) => void) => {
return (dispatch): void => {
dispatch({
type: 'RESET_INITIAL_APPLICATION_DATA',
});
};
) => void) => (dispatch): void => {
dispatch({
type: 'RESET_INITIAL_APPLICATION_DATA',
});
};

48
frontend/src/store/actions/serviceMap.ts
View File

@ -30,30 +30,30 @@ export interface ServiceMapLoading {
};
}
export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
return async (dispatch: Dispatch): Promise<void> => {
const start = `${globalTime.minTime}`;
const end = `${globalTime.maxTime}`;
export const getDetailedServiceMapItems = (globalTime: GlobalTime) => async (
dispatch: Dispatch,
): Promise<void> => {
const start = `${globalTime.minTime}`;
const end = `${globalTime.maxTime}`;
const serviceMapPayload = {
start,
end,
tags: [],
};
const [dependencyGraphResponse] = await Promise.all([
api.post<ServicesMapItem[]>(`/dependency_graph`, serviceMapPayload),
]);
dispatch<ServiceMapItemAction>({
type: ActionTypes.getServiceMapItems,
payload: dependencyGraphResponse.data,
});
dispatch<ServiceMapLoading>({
type: ActionTypes.serviceMapLoading,
payload: {
loading: false,
},
});
const serviceMapPayload = {
start,
end,
tags: [],
};
const [dependencyGraphResponse] = await Promise.all([
api.post<ServicesMapItem[]>(`/dependency_graph`, serviceMapPayload),
]);
dispatch<ServiceMapItemAction>({
type: ActionTypes.getServiceMapItems,
payload: dependencyGraphResponse.data,
});
dispatch<ServiceMapLoading>({
type: ActionTypes.serviceMapLoading,
payload: {
loading: false,
},
});
};

298
frontend/src/store/actions/trace/getInitialFilter.ts
View File

@ -32,178 +32,170 @@ export const GetInitialTraceFilter = (
): ((
dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'],
) => void) => {
// eslint-disable-next-line sonarjs/cognitive-complexity
return async (dispatch, getState): Promise<void> => {
try {
const query = window.location.search;
) => void) => async (dispatch, getState): Promise<void> => {
try {
const query = window.location.search;
const { traces, globalTime } = getState();
const { traces, globalTime } = getState();
if (globalTime.maxTime !== maxTime && globalTime.minTime !== minTime) {
return;
}
if (globalTime.maxTime !== maxTime && globalTime.minTime !== minTime) {
return;
}
const getSelectedFilter = parseSelectedFilter(
query,
traces.selectedFilter,
true,
);
const getSelectedFilter = parseSelectedFilter(
query,
traces.selectedFilter,
true,
);
const getFilterToFetchData = parseFilterToFetchData(
query,
traces.filterToFetchData,
);
const getFilterToFetchData = parseFilterToFetchData(
query,
traces.filterToFetchData,
);
const getUserSelected = parseSelectedFilter(
query,
traces.userSelectedFilter,
);
const getUserSelected = parseSelectedFilter(query, traces.userSelectedFilter);
const getIsFilterExcluded = parseFilterExclude(
query,
traces.isFilterExclude,
);
const getIsFilterExcluded = parseFilterExclude(query, traces.isFilterExclude);
const parsedQueryCurrent = parseQueryIntoCurrent(
query,
traces.spansAggregate.currentPage,
);
const parsedQueryCurrent = parseQueryIntoCurrent(
query,
traces.spansAggregate.currentPage,
);
const parsedQueryOrder = parseQueryIntoOrder(
query,
traces.spansAggregate.order,
);
const parsedQueryOrder = parseQueryIntoOrder(
query,
traces.spansAggregate.order,
);
const parsedPageSize = parseQueryIntoPageSize(
query,
traces.spansAggregate.pageSize,
);
const parsedPageSize = parseQueryIntoPageSize(
query,
traces.spansAggregate.pageSize,
);
const isSelectionSkipped = parseIsSkippedSelection(query);
const isSelectionSkipped = parseIsSkippedSelection(query);
const parsedSelectedTags = parseQueryIntoSelectedTags(
query,
traces.selectedTags,
);
const parsedSelectedTags = parseQueryIntoSelectedTags(
query,
traces.selectedTags,
);
const parsedOrderParams = parseAggregateOrderParams(
query,
traces.spansAggregate.orderParam,
);
const parsedOrderParams = parseAggregateOrderParams(
query,
traces.spansAggregate.orderParam,
);
const parsedFilter = parseQueryIntoFilter(query, traces.filter);
const parsedFilter = parseQueryIntoFilter(query, traces.filter);
// now filter are not matching we need to fetch the data and make in sync
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {
filterLoading: true,
},
});
// now filter are not matching we need to fetch the data and make in sync
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {
filterLoading: true,
},
});
const response = await getFiltersApi({
end: String(maxTime),
getFilters: getFilterToFetchData.currentValue,
start: String(minTime),
other: Object.fromEntries(getSelectedFilter.currentValue),
isFilterExclude: getIsFilterExcluded.currentValue,
});
const response = await getFiltersApi({
end: String(maxTime),
getFilters: getFilterToFetchData.currentValue,
start: String(minTime),
other: Object.fromEntries(getSelectedFilter.currentValue),
isFilterExclude: getIsFilterExcluded.currentValue,
});
const preSelectedFilter: Map<TraceFilterEnum, string[]> = new Map(
getSelectedFilter.currentValue,
);
const preSelectedFilter: Map<TraceFilterEnum, string[]> = new Map(
getSelectedFilter.currentValue,
);
if (response.payload && !isSelectionSkipped.currentValue) {
const diff =
query.length === 0
? traces.filterToFetchData
: xor(traces.filterToFetchData, getFilterToFetchData.currentValue);
if (response.payload && !isSelectionSkipped.currentValue) {
const diff =
query.length === 0
? traces.filterToFetchData
: xor(traces.filterToFetchData, getFilterToFetchData.currentValue);
Object.keys(response.payload).forEach((key) => {
const value = response.payload[key];
Object.keys(value)
// remove maxDuration and minDuration filter from initial selection logic
.filter((e) => !['maxDuration', 'minDuration'].includes(e))
.forEach((preKey) => {
if (isTraceFilterEnum(key) && diff.find((v) => v === key)) {
// const preValue = preSelectedFilter?.get(key) || [];
const preValue = getUserSelected.currentValue?.get(key) || [];
// preSelectedFilter?.set(key, [...new Set([...preValue, preKey])]);
getUserSelected.currentValue.set(key, [
...new Set([...preValue, preKey]),
]);
}
});
});
}
if (response.statusCode === 200) {
const preResponseSelected: TraceReducer['filterResponseSelected'] = new Set();
const initialFilter = new Map<TraceFilterEnum, Record<string, string>>(
parsedFilter.currentValue,
);
Object.keys(response.payload).forEach((key) => {
const value = response.payload[key];
if (isTraceFilterEnum(key)) {
Object.keys(value).forEach((e) => preResponseSelected.add(e));
initialFilter.set(key, {
...initialFilter.get(key),
...value,
});
}
});
dispatch({
type: UPDATE_ALL_FILTERS,
payload: {
filter: initialFilter,
selectedFilter: preSelectedFilter,
filterToFetchData: getFilterToFetchData.currentValue,
current: parsedQueryCurrent.currentValue,
selectedTags: parsedSelectedTags.currentValue,
userSelected: getUserSelected.currentValue,
isFilterExclude: getIsFilterExcluded.currentValue,
order: parsedQueryOrder.currentValue,
pageSize: parsedPageSize.currentValue,
orderParam: parsedOrderParams.currentValue,
},
});
} else {
notification.error({
message: response.error || 'Something went wrong',
});
}
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {
filterLoading: false,
},
});
dispatch({
type: UPDATE_TRACE_GRAPH_LOADING,
payload: {
loading: false,
},
});
} catch (error) {
console.error(error);
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {
filterLoading: false,
},
});
dispatch({
type: UPDATE_TRACE_GRAPH_LOADING,
payload: {
loading: false,
},
Object.keys(response.payload).forEach((key) => {
const value = response.payload[key];
Object.keys(value)
// remove maxDuration and minDuration filter from initial selection logic
.filter((e) => !['maxDuration', 'minDuration'].includes(e))
.forEach((preKey) => {
if (isTraceFilterEnum(key) && diff.find((v) => v === key)) {
// const preValue = preSelectedFilter?.get(key) || [];
const preValue = getUserSelected.currentValue?.get(key) || [];
// preSelectedFilter?.set(key, [...new Set([...preValue, preKey])]);
getUserSelected.currentValue.set(key, [
...new Set([...preValue, preKey]),
]);
}
});
});
}
};
if (response.statusCode === 200) {
const preResponseSelected: TraceReducer['filterResponseSelected'] = new Set();
const initialFilter = new Map<TraceFilterEnum, Record<string, string>>(
parsedFilter.currentValue,
);
Object.keys(response.payload).forEach((key) => {
const value = response.payload[key];
if (isTraceFilterEnum(key)) {
Object.keys(value).forEach((e) => preResponseSelected.add(e));
initialFilter.set(key, {
...initialFilter.get(key),
...value,
});
}
});
dispatch({
type: UPDATE_ALL_FILTERS,
payload: {
filter: initialFilter,
selectedFilter: preSelectedFilter,
filterToFetchData: getFilterToFetchData.currentValue,
current: parsedQueryCurrent.currentValue,
selectedTags: parsedSelectedTags.currentValue,
userSelected: getUserSelected.currentValue,
isFilterExclude: getIsFilterExcluded.currentValue,
order: parsedQueryOrder.currentValue,
pageSize: parsedPageSize.currentValue,
orderParam: parsedOrderParams.currentValue,
},
});
} else {
notification.error({
message: response.error || 'Something went wrong',
});
}
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {
filterLoading: false,
},
});
dispatch({
type: UPDATE_TRACE_GRAPH_LOADING,
payload: {
loading: false,
},
});
} catch (error) {
console.error(error);
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {
filterLoading: false,
},
});
dispatch({
type: UPDATE_TRACE_GRAPH_LOADING,
payload: {
loading: false,
},
});
}
};

156
frontend/src/store/actions/trace/getInitialSpansAggregate.ts
View File

@ -15,35 +15,63 @@ export const GetSpansAggregate = (
): ((
dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'],
) => void) => {
return async (dispatch, getState): Promise<void> => {
const { traces, globalTime } = getState();
const { spansAggregate } = traces;
) => void) => async (dispatch, getState): Promise<void> => {
const { traces, globalTime } = getState();
const { spansAggregate } = traces;
if (
globalTime.maxTime !== props.maxTime &&
globalTime.minTime !== props.minTime
) {
return;
}
if (
globalTime.maxTime !== props.maxTime &&
globalTime.minTime !== props.minTime
) {
return;
}
if (traces.filterLoading) {
return;
}
if (traces.filterLoading) {
return;
}
const { order = '' } = props;
const { order = '' } = props;
try {
// triggering loading
try {
// triggering loading
dispatch({
type: UPDATE_SPANS_AGGREGATE,
payload: {
spansAggregate: {
currentPage: props.current,
loading: true,
data: spansAggregate.data,
error: false,
total: spansAggregate.total,
pageSize: props.pageSize,
order,
orderParam: spansAggregate.orderParam,
},
},
});
const response = await getSpansAggregate({
end: props.maxTime,
start: props.minTime,
selectedFilter: props.selectedFilter,
limit: props.pageSize,
offset: props.current * props.pageSize - props.pageSize,
selectedTags: props.selectedTags,
isFilterExclude: traces.isFilterExclude,
order,
orderParam: props.orderParam,
});
if (response.statusCode === 200) {
dispatch({
type: UPDATE_SPANS_AGGREGATE,
payload: {
spansAggregate: {
currentPage: props.current,
loading: true,
data: spansAggregate.data,
loading: false,
data: response.payload.spans,
error: false,
total: spansAggregate.total,
total: response.payload.totalSpans,
pageSize: props.pageSize,
order,
orderParam: spansAggregate.orderParam,
@ -51,68 +79,22 @@ export const GetSpansAggregate = (
},
});
const response = await getSpansAggregate({
end: props.maxTime,
start: props.minTime,
selectedFilter: props.selectedFilter,
limit: props.pageSize,
offset: props.current * props.pageSize - props.pageSize,
selectedTags: props.selectedTags,
isFilterExclude: traces.isFilterExclude,
updateURL(
traces.selectedFilter,
traces.filterToFetchData,
props.current,
traces.selectedTags,
traces.isFilterExclude,
traces.userSelectedFilter,
order,
orderParam: props.orderParam,
traces.spansAggregate.pageSize,
spansAggregate.orderParam,
);
} else {
notification.error({
message: response.error || 'Something went wrong',
});
if (response.statusCode === 200) {
dispatch({
type: UPDATE_SPANS_AGGREGATE,
payload: {
spansAggregate: {
currentPage: props.current,
loading: false,
data: response.payload.spans,
error: false,
total: response.payload.totalSpans,
pageSize: props.pageSize,
order,
orderParam: spansAggregate.orderParam,
},
},
});
updateURL(
traces.selectedFilter,
traces.filterToFetchData,
props.current,
traces.selectedTags,
traces.isFilterExclude,
traces.userSelectedFilter,
order,
traces.spansAggregate.pageSize,
spansAggregate.orderParam,
);
} else {
notification.error({
message: response.error || 'Something went wrong',
});
dispatch({
type: UPDATE_SPANS_AGGREGATE,
payload: {
spansAggregate: {
currentPage: props.current,
loading: false,
data: spansAggregate.data,
error: true,
total: spansAggregate.total,
pageSize: props.pageSize,
order,
orderParam: spansAggregate.orderParam,
},
},
});
}
} catch (error) {
dispatch({
type: UPDATE_SPANS_AGGREGATE,
payload: {
@ -129,7 +111,23 @@ export const GetSpansAggregate = (
},
});
}
};
} catch (error) {
dispatch({
type: UPDATE_SPANS_AGGREGATE,
payload: {
spansAggregate: {
currentPage: props.current,
loading: false,
data: spansAggregate.data,
error: true,
total: spansAggregate.total,
pageSize: props.pageSize,
order,
orderParam: spansAggregate.orderParam,
},
},
});
}
};
export interface GetSpansAggregateProps {

66
frontend/src/store/actions/trace/selectTraceFilter.ts
View File

@ -11,44 +11,42 @@ export const SelectedTraceFilter = (props: {
}): ((
dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'],
) => void) => {
return (_, getState): void => {
const { topic, value } = props;
const { traces } = getState();
) => void) => (_, getState): void => {
const { topic, value } = props;
const { traces } = getState();
const filter = traces.selectedFilter;
const filter = traces.selectedFilter;
const isTopicPresent = filter.get(topic);
const isTopicPresent = filter.get(topic);
// append the value
if (!isTopicPresent) {
filter.set(props.topic, [props.value]);
// append the value
if (!isTopicPresent) {
filter.set(props.topic, [props.value]);
} else {
const isValuePresent =
isTopicPresent.find((e) => e === props.value) !== undefined;
// check the value if present then remove the value
if (isValuePresent) {
filter.set(
props.topic,
isTopicPresent.filter((e) => e !== value),
);
} else {
const isValuePresent =
isTopicPresent.find((e) => e === props.value) !== undefined;
// check the value if present then remove the value
if (isValuePresent) {
filter.set(
props.topic,
isTopicPresent.filter((e) => e !== value),
);
} else {
// if not present add into the array of string
filter.set(props.topic, [...isTopicPresent, props.value]);
}
// if not present add into the array of string
filter.set(props.topic, [...isTopicPresent, props.value]);
}
}
updateURL(
filter,
traces.filterToFetchData,
traces.spansAggregate.currentPage,
traces.selectedTags,
traces.isFilterExclude,
traces.userSelectedFilter,
traces.spansAggregate.order,
traces.spansAggregate.pageSize,
traces.spansAggregate.orderParam,
);
};
updateURL(
filter,
traces.filterToFetchData,
traces.spansAggregate.currentPage,
traces.selectedTags,
traces.isFilterExclude,
traces.userSelectedFilter,
traces.spansAggregate.order,
traces.spansAggregate.pageSize,
traces.spansAggregate.orderParam,
);
};

16
frontend/src/store/actions/trace/updateIsTagsError.ts
View File

@ -5,13 +5,11 @@ import { TraceReducer } from 'types/reducer/trace';
export const UpdateTagIsError = (
isTagModalError: TraceReducer['isTagModalError'],
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch): void => {
dispatch({
type: UPDATE_IS_TAG_ERROR,
payload: {
isTagModalError,
},
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (dispatch): void => {
dispatch({
type: UPDATE_IS_TAG_ERROR,
payload: {
isTagModalError,
},
});
};

16
frontend/src/store/actions/trace/updateTagPanelVisiblity.ts
View File

@ -5,13 +5,11 @@ import { TraceReducer } from 'types/reducer/trace';
export const UpdateTagVisibility = (
isTagModalOpen: TraceReducer['isTagModalOpen'],
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch): void => {
dispatch({
type: UPDATE_TAG_MODAL_VISIBILITY,
payload: {
isTagModalOpen,
},
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (dispatch): void => {
dispatch({
type: UPDATE_TAG_MODAL_VISIBILITY,
payload: {
isTagModalOpen,
},
});
};

16
frontend/src/store/actions/trace/updateTagsSelected.ts
View File

@ -5,13 +5,11 @@ import { TraceReducer } from 'types/reducer/trace';
export const UpdateSelectedTags = (
selectedTags: TraceReducer['selectedTags'],
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch): void => {
dispatch({
type: UPDATE_SELECTED_TAGS,
payload: {
selectedTags,
},
});
};
): ((dispatch: Dispatch<AppActions>) => void) => (dispatch): void => {
dispatch({
type: UPDATE_SELECTED_TAGS,
payload: {
selectedTags,
},
});
};

24
frontend/src/store/actions/usage.ts
View File

@ -19,18 +19,16 @@ export const getUsageData = (
maxTime: number,
step: number,
service: string,
) => {
return async (dispatch: Dispatch): Promise<void> => {
const requesString = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
maxTime,
)}&step=${step}&service=${service || ''}`;
// Step can only be multiple of 3600
const response = await api.get<UsageDataItem[]>(requesString);
) => async (dispatch: Dispatch): Promise<void> => {
const requesString = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
maxTime,
)}&step=${step}&service=${service || ''}`;
// Step can only be multiple of 3600
const response = await api.get<UsageDataItem[]>(requesString);
dispatch<GetUsageDataAction>({
type: ActionTypes.getUsageData,
payload: response.data,
// PNOTE - response.data in the axios response has the actual API response
});
};
dispatch<GetUsageDataAction>({
type: ActionTypes.getUsageData,
payload: response.data,
// PNOTE - response.data in the axios response has the actual API response
});
};

5
frontend/src/utils/app.ts
View File

@ -1,6 +1,5 @@
import getLocalStorage from 'api/browser/localstorage/get';
import { SKIP_ONBOARDING } from 'constants/onboarding';
export const isOnboardingSkipped = (): boolean => {
return getLocalStorage(SKIP_ONBOARDING) === 'true';
};
export const isOnboardingSkipped = (): boolean =>
getLocalStorage(SKIP_ONBOARDING) === 'true';

5
frontend/src/utils/spanToTree.ts
View File

@ -4,8 +4,8 @@ import { ITraceForest, ITraceTree, Span } from 'types/api/trace/getTraceItem';
const getSpanReferences = (
rawReferences: string[] = [],
): Record<string, string>[] => {
return rawReferences.map((rawRef) => {
): Record<string, string>[] =>
rawReferences.map((rawRef) => {
const refObject: Record<string, string> = {};
rawRef
.replaceAll('{', '')
@ -19,7 +19,6 @@ const getSpanReferences = (
return refObject;
});
};
// This getSpanTags is migrated from the previous implementation.
const getSpanTags = (spanData: Span): { key: string; value: string }[] => {

4
frontend/src/utils/timeUtils.ts
View File

@ -1,4 +1,4 @@
export const toUTCEpoch = (time: number): number => {
export function toUTCEpoch(time: number): number {
const x = new Date();
return time + x.getTimezoneOffset() * 60 * 1000;
};
}

4
frontend/src/utils/toFixed.ts
View File

@ -1,6 +1,6 @@
export const toFixed = (input: number, fixedCount: number): number | string => {
export function toFixed(input: number, fixedCount: number): number | string {
if (input.toString().split('.').length > 1) {
return input.toFixed(fixedCount);
}
return input;
};
}