External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-17 23:47:12 +00: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', '@typescript-eslint/no-unused-vars': 'error',
'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
'arrow-body-style': ['error', 'as-needed'],
// eslint rules need to remove // eslint rules need to remove
'@typescript-eslint/no-shadow': 'off', '@typescript-eslint/no-shadow': 'off',

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

@ -29,81 +29,79 @@ const getOrCreateLegendList = (
return listContainer; return listContainer;
}; };
export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => { export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
return { id: 'htmlLegend',
id: 'htmlLegend', afterUpdate(chart): void {
afterUpdate(chart): void { const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
// Remove old legend items // Remove old legend items
while (ul.firstChild) { while (ul.firstChild) {
ul.firstChild.remove(); ul.firstChild.remove();
} }
// Reuse the built-in legendItems generator // Reuse the built-in legendItems generator
const items = get(chart, [ const items = get(chart, [
'options', 'options',
'plugins', 'plugins',
'legend', 'legend',
'labels', 'labels',
'generateLabels', 'generateLabels',
]) ])
? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])( ? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
chart, chart,
) )
: null; : null;
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
items?.forEach((item: Record<any, any>, index: number) => { items?.forEach((item: Record<any, any>, index: number) => {
const li = document.createElement('li'); const li = document.createElement('li');
li.style.alignItems = 'center'; li.style.alignItems = 'center';
li.style.cursor = 'pointer'; li.style.cursor = 'pointer';
li.style.display = 'flex'; li.style.display = 'flex';
li.style.marginLeft = '10px'; li.style.marginLeft = '10px';
// li.style.marginTop = '5px'; li.style.marginTop = '5px';
li.onclick = (): void => { li.onclick = (): void => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
const { type } = chart.config; const { type } = chart.config;
if (type === 'pie' || type === 'doughnut') { if (type === 'pie' || type === 'doughnut') {
// Pie and doughnut charts only have a single dataset and visibility is per item // Pie and doughnut charts only have a single dataset and visibility is per item
chart.toggleDataVisibility(index); chart.toggleDataVisibility(index);
} else { } else {
chart.setDatasetVisibility( chart.setDatasetVisibility(
item.datasetIndex, item.datasetIndex,
!chart.isDatasetVisible(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);
} }
}); 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>
<div> <div>
{map(selected, (field) => { {map(selected, (field) =>
return isValidLogField(flattenLogData[field.name] as never) ? ( isValidLogField(flattenLogData[field.name] as never) ? (
<LogSelectedField <LogSelectedField
key={field.name} key={field.name}
fieldKey={field.name} fieldKey={field.name}
fieldValue={flattenLogData[field.name] as never} fieldValue={flattenLogData[field.name] as never}
/> />
) : null; ) : null,
})} )}
</div> </div>
</div> </div>
<Divider style={{ padding: 0, margin: '0.4rem 0', opacity: 0.5 }} /> <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, (state) => state.app,
); );
const c = allComponentMap.find((item) => { const c = allComponentMap.find((item) =>
return item.match(path, currentVersion, userFlags); item.match(path, currentVersion, userFlags),
}); );
if (!c) { if (!c) {
return null; 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 { function TextToolTip({ text, url }: TextToolTipProps): JSX.Element {
return ( return (
<Tooltip <Tooltip
overlay={(): JSX.Element => { overlay={(): JSX.Element => (
return ( <div>
<div> {`${text} `}
{`${text} `} {url && (
{url && ( <a href={url} rel="noopener noreferrer" target="_blank">
<a href={url} rel="noopener noreferrer" target="_blank"> here
here </a>
</a> )}
)} </div>
</div> )}
);
}}
> >
<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} /> <QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
</Tooltip> </Tooltip>

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

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

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

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

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

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

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

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

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

@ -47,8 +47,8 @@ function EditAlertChannels({
setType(value as ChannelType); setType(value as ChannelType);
}, []); }, []);
const prepareSlackRequest = useCallback(() => { const prepareSlackRequest = useCallback(
return { () => ({
api_url: selectedConfig?.api_url || '', api_url: selectedConfig?.api_url || '',
channel: selectedConfig?.channel || '', channel: selectedConfig?.channel || '',
name: selectedConfig?.name || '', name: selectedConfig?.name || '',
@ -56,8 +56,9 @@ function EditAlertChannels({
text: selectedConfig?.text || '', text: selectedConfig?.text || '',
title: selectedConfig?.title || '', title: selectedConfig?.title || '',
id, id,
}; }),
}, [id, selectedConfig]); [id, selectedConfig],
);
const onSlackEditHandler = useCallback(async () => { const onSlackEditHandler = useCallback(async () => {
setSavingState(true); setSavingState(true);
@ -143,8 +144,8 @@ function EditAlertChannels({
setSavingState(false); setSavingState(false);
}, [prepareWebhookRequest, t, notifications, selectedConfig]); }, [prepareWebhookRequest, t, notifications, selectedConfig]);
const preparePagerRequest = useCallback(() => { const preparePagerRequest = useCallback(
return { () => ({
name: selectedConfig.name || '', name: selectedConfig.name || '',
routing_key: selectedConfig.routing_key, routing_key: selectedConfig.routing_key,
client: selectedConfig.client, client: selectedConfig.client,
@ -157,8 +158,9 @@ function EditAlertChannels({
details: selectedConfig.details, details: selectedConfig.details,
detailsArray: JSON.parse(selectedConfig.details || '{}'), detailsArray: JSON.parse(selectedConfig.details || '{}'),
id, id,
}; }),
}, [id, selectedConfig]); [id, selectedConfig],
);
const onPagerEditHandler = useCallback(async () => { const onPagerEditHandler = useCallback(async () => {
setSavingState(true); 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 // ClickHouseQueryBuilder format. The main difference is
// use of rawQuery (in ClickHouseQueryBuilder) // use of rawQuery (in ClickHouseQueryBuilder)
// and query (in alert builder) // and query (in alert builder)
export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => { export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => ({
return { ...src, name: 'A', rawQuery: src.query }; ...src,
}; name: 'A',
rawQuery: src.query,
});

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

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

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

@ -38,106 +38,94 @@ function RuleOptions({
}); });
}; };
const renderCompareOps = (): JSX.Element => { const renderCompareOps = (): JSX.Element => (
return ( <InlineSelect
<InlineSelect defaultValue={defaultCompareOp}
defaultValue={defaultCompareOp} value={alertDef.condition?.op}
value={alertDef.condition?.op} style={{ minWidth: '120px' }}
style={{ minWidth: '120px' }} onChange={(value: string | unknown): void => {
onChange={(value: string | unknown): void => { const newOp = (value as string) || '';
const newOp = (value as string) || '';
setAlertDef({ setAlertDef({
...alertDef, ...alertDef,
condition: { condition: {
...alertDef.condition, ...alertDef.condition,
op: newOp, op: newOp,
}, },
}); });
}} }}
> >
<Option value="1">{t('option_above')}</Option> <Option value="1">{t('option_above')}</Option>
<Option value="2">{t('option_below')}</Option> <Option value="2">{t('option_below')}</Option>
<Option value="3">{t('option_equal')}</Option> <Option value="3">{t('option_equal')}</Option>
<Option value="4">{t('option_notequal')}</Option> <Option value="4">{t('option_notequal')}</Option>
</InlineSelect> </InlineSelect>
); );
};
const renderThresholdMatchOpts = (): JSX.Element => { const renderThresholdMatchOpts = (): JSX.Element => (
return ( <InlineSelect
<InlineSelect defaultValue={defaultMatchType}
defaultValue={defaultMatchType} style={{ minWidth: '130px' }}
style={{ minWidth: '130px' }} value={alertDef.condition?.matchType}
value={alertDef.condition?.matchType} onChange={(value: string | unknown): void => handleMatchOptChange(value)}
onChange={(value: string | unknown): void => handleMatchOptChange(value)} >
> <Option value="1">{t('option_atleastonce')}</Option>
<Option value="1">{t('option_atleastonce')}</Option> <Option value="2">{t('option_allthetimes')}</Option>
<Option value="2">{t('option_allthetimes')}</Option> <Option value="3">{t('option_onaverage')}</Option>
<Option value="3">{t('option_onaverage')}</Option> <Option value="4">{t('option_intotal')}</Option>
<Option value="4">{t('option_intotal')}</Option> </InlineSelect>
</InlineSelect> );
);
};
const renderPromMatchOpts = (): JSX.Element => { const renderPromMatchOpts = (): JSX.Element => (
return ( <InlineSelect
<InlineSelect defaultValue={defaultMatchType}
defaultValue={defaultMatchType} style={{ minWidth: '130px' }}
style={{ minWidth: '130px' }} value={alertDef.condition?.matchType}
value={alertDef.condition?.matchType} onChange={(value: string | unknown): void => handleMatchOptChange(value)}
onChange={(value: string | unknown): void => handleMatchOptChange(value)} >
> <Option value="1">{t('option_atleastonce')}</Option>
<Option value="1">{t('option_atleastonce')}</Option> </InlineSelect>
</InlineSelect> );
);
};
const renderEvalWindows = (): JSX.Element => { const renderEvalWindows = (): JSX.Element => (
return ( <InlineSelect
<InlineSelect defaultValue={defaultEvalWindow}
defaultValue={defaultEvalWindow} style={{ minWidth: '120px' }}
style={{ minWidth: '120px' }} value={alertDef.evalWindow}
value={alertDef.evalWindow} onChange={(value: string | unknown): void => {
onChange={(value: string | unknown): void => { const ew = (value as string) || alertDef.evalWindow;
const ew = (value as string) || alertDef.evalWindow; setAlertDef({
setAlertDef({ ...alertDef,
...alertDef, evalWindow: ew,
evalWindow: ew, });
}); }}
}} >
> {' '}
{' '} <Option value="5m0s">{t('option_5min')}</Option>
<Option value="5m0s">{t('option_5min')}</Option> <Option value="10m0s">{t('option_10min')}</Option>
<Option value="10m0s">{t('option_10min')}</Option> <Option value="15m0s">{t('option_15min')}</Option>
<Option value="15m0s">{t('option_15min')}</Option> <Option value="60m0s">{t('option_60min')}</Option>
<Option value="60m0s">{t('option_60min')}</Option> <Option value="4h0m0s">{t('option_4hours')}</Option>
<Option value="4h0m0s">{t('option_4hours')}</Option> <Option value="24h0m0s">{t('option_24hours')}</Option>
<Option value="24h0m0s">{t('option_24hours')}</Option> </InlineSelect>
</InlineSelect> );
);
};
const renderThresholdRuleOpts = (): JSX.Element => { const renderThresholdRuleOpts = (): JSX.Element => (
return ( <FormItem>
<FormItem> <Typography.Text>
<Typography.Text> {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '} {renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()}
{renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()} </Typography.Text>
</Typography.Text> </FormItem>
</FormItem> );
); const renderPromRuleOptions = (): JSX.Element => (
}; <FormItem>
const renderPromRuleOptions = (): JSX.Element => { <Typography.Text>
return ( {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
<FormItem> {renderPromMatchOpts()}
<Typography.Text> </Typography.Text>
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '} </FormItem>
{renderPromMatchOpts()} );
</Typography.Text>
</FormItem>
);
};
return ( 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 // init namespace for translations
const { t } = useTranslation('alerts'); const { t } = useTranslation('alerts');
const renderStep1QB = (): JSX.Element => { const renderStep1QB = (): JSX.Element => (
return ( <>
<> <StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic> <StyledList>
<StyledList> <StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem> <StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem> <StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem> <StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem> </StyledList>
</StyledList> </>
</> );
); const renderStep2QB = (): JSX.Element => (
}; <>
const renderStep2QB = (): JSX.Element => { <StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
return ( <StyledList>
<> <StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic> <StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
<StyledList> </StyledList>
<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem> </>
<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem> );
</StyledList>
</>
);
};
const renderStep3QB = (): JSX.Element => { const renderStep3QB = (): JSX.Element => (
return ( <>
<> <StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic> <StyledList>
<StyledList> <StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem> <StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem> </StyledList>
</StyledList> </>
</> );
);
};
const renderGuideForQB = (): JSX.Element => { const renderGuideForQB = (): JSX.Element => (
return ( <>
<> {renderStep1QB()}
{renderStep1QB()} {renderStep2QB()}
{renderStep2QB()} {renderStep3QB()}
{renderStep3QB()} </>
</> );
); const renderStep1PQL = (): JSX.Element => (
}; <>
const renderStep1PQL = (): JSX.Element => { <StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
return ( <StyledList>
<> <StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic> <StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
<StyledList> </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>
const renderStep2PQL = (): JSX.Element => { <StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
return ( <StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
<> </StyledList>
<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 => { const renderStep3PQL = (): JSX.Element => (
return ( <>
<> <StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic> <StyledList>
<StyledList> <StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem> <StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem> </StyledList>
</StyledList> </>
</> );
);
};
const renderGuideForPQL = (): JSX.Element => { const renderGuideForPQL = (): JSX.Element => (
return ( <>
<> {renderStep1PQL()}
{renderStep1PQL()} {renderStep2PQL()}
{renderStep2PQL()} {renderStep3PQL()}
{renderStep3PQL()} </>
</> );
);
};
const renderStep1CH = (): JSX.Element => { const renderStep1CH = (): JSX.Element => (
return ( <>
<> <StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic> <StyledList>
<StyledList> <StyledListItem>
<StyledListItem> <Trans
<Trans i18nKey="user_guide_ch_step1a"
i18nKey="user_guide_ch_step1a" t={t}
t={t} components={[
components={[ // eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content <a
<a key={1}
key={1} target="_blank"
target="_blank" href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>" />,
/>, ]}
]} />
/> </StyledListItem>
</StyledListItem> <StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem> </StyledList>
</StyledList> </>
</> );
); const renderStep2CH = (): JSX.Element => (
}; <>
const renderStep2CH = (): JSX.Element => { <StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
return ( <StyledList>
<> <StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic> <StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
<StyledList> </StyledList>
<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem> </>
<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem> );
</StyledList>
</>
);
};
const renderStep3CH = (): JSX.Element => { const renderStep3CH = (): JSX.Element => (
return ( <>
<> <StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic> <StyledList>
<StyledList> <StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem> <StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem> </StyledList>
</StyledList> </>
</> );
);
};
const renderGuideForCH = (): JSX.Element => { const renderGuideForCH = (): JSX.Element => (
return ( <>
<> {renderStep1CH()}
{renderStep1CH()} {renderStep2CH()}
{renderStep2CH()} {renderStep3CH()}
{renderStep3CH()} </>
</> );
);
};
return ( return (
<StyledMainContainer> <StyledMainContainer>
<Row> <Row>

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

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

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

@ -119,17 +119,15 @@ function LabelSelect({
{queries.length > 0 && {queries.length > 0 &&
map( map(
queries, queries,
(query): JSX.Element => { (query): JSX.Element => (
return ( <QueryChip key={query.key} queryData={query} onRemove={handleClose} />
<QueryChip key={query.key} queryData={query} onRemove={handleClose} /> ),
);
},
)} )}
</div> </div>
<div> <div>
{map(staging, (item) => { {map(staging, (item) => (
return <QueryChipItem key={uuid()}>{item}</QueryChipItem>; <QueryChipItem key={uuid()}>{item}</QueryChipItem>
})} ))}
</div> </div>
<div style={{ display: 'flex', width: '100%' }}> <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 = ( export const toIMetricsBuilderQuery = (
q: IMetricQuery, q: IMetricQuery,
): IMetricsBuilderQuery => { ): IMetricsBuilderQuery => ({
return { name: q.name,
name: q.name, metricName: q.metricName,
metricName: q.metricName, tagFilters: q.tagFilters,
tagFilters: q.tagFilters, groupBy: q.groupBy,
groupBy: q.groupBy, aggregateOperator: q.aggregateOperator,
aggregateOperator: q.aggregateOperator, disabled: q.disabled,
disabled: q.disabled, legend: q.legend,
legend: q.legend, });
};
};
export const prepareBuilderQueries = ( export const prepareBuilderQueries = (
m: IMetricQueries, m: IMetricQueries,

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

@ -112,21 +112,19 @@ export const getNodeById = (
const getSpanWithoutChildren = ( const getSpanWithoutChildren = (
span: ITraceTree, span: ITraceTree,
): Omit<ITraceTree, 'children'> => { ): Omit<ITraceTree, 'children'> => ({
return { id: span.id,
id: span.id, name: span.name,
name: span.name, parent: span.parent,
parent: span.parent, serviceColour: span.serviceColour,
serviceColour: span.serviceColour, serviceName: span.serviceName,
serviceName: span.serviceName, startTime: span.startTime,
startTime: span.startTime, tags: span.tags,
tags: span.tags, time: span.time,
time: span.time, value: span.value,
value: span.value, event: span.event,
event: span.event, hasError: span.hasError,
hasError: span.hasError, });
};
};
export const isSpanPresentInSearchString = ( export const isSpanPresentInSearchString = (
searchedString: string, 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 queryLength = widget.query.filter((e) => e.query.length !== 0);
const response = useQueries( const response = useQueries(
queryLength.map((query) => { queryLength.map((query) => ({
return { // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type queryFn: () =>
queryFn: () => { getQueryResult({
return getQueryResult({ end: queryMinMax.max.toString(),
end: queryMinMax.max.toString(), query: query.query,
query: query.query, start: queryMinMax.min.toString(),
start: queryMinMax.min.toString(), step: `${getStep({
step: `${getStep({ start: queryMinMax.min,
start: queryMinMax.min, end: queryMinMax.max,
end: queryMinMax.max, inputFormat: 's',
inputFormat: 's', })}`,
})}`, }),
}); queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
}, retryOnMount: false,
queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`, })),
retryOnMount: false,
};
}),
); );
const isError = const isError =

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

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

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

@ -110,13 +110,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
return ( return (
<> <>
{withOutSeverityKeys.map((e) => { {withOutSeverityKeys.map((e) => (
return ( <StyledTag key={e} color="magenta">
<StyledTag key={e} color="magenta"> {e}: {value[e]}
{e}: {value[e]} </StyledTag>
</StyledTag> ))}
);
})}
</> </>
); );
}, },
@ -128,22 +126,20 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
title: 'Action', title: 'Action',
dataIndex: 'id', dataIndex: 'id',
key: 'action', key: 'action',
render: (id: GettableAlert['id'], record): JSX.Element => { render: (id: GettableAlert['id'], record): JSX.Element => (
return ( <>
<> <ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
<ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
<ColumnButton <ColumnButton
onClick={(): void => onEditHandler(id.toString())} onClick={(): void => onEditHandler(id.toString())}
type="link" type="link"
> >
Edit Edit
</ColumnButton> </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) { if (response.statusCode === 200) {
setData((state) => { setData((state) =>
return state.map((alert) => { state.map((alert) => {
if (alert.id === id) { if (alert.id === id) {
return { return {
...alert, ...alert,
@ -50,8 +50,8 @@ function ToggleAlertState({
}; };
} }
return alert; return alert;
}); }),
}); );
setAPIStatus((state) => ({ setAPIStatus((state) => ({
...state, ...state,

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

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

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

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

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

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

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

@ -157,18 +157,16 @@ function Login({
} }
}; };
const renderSAMLAction = (): JSX.Element => { const renderSAMLAction = (): JSX.Element => (
return ( <Button
<Button type="primary"
type="primary" loading={isLoading}
loading={isLoading} disabled={isLoading}
disabled={isLoading} href={precheckResult.ssoUrl}
href={precheckResult.ssoUrl} >
> {t('login_with_sso')}
{t('login_with_sso')} </Button>
</Button> );
);
};
const renderOnSsoError = (): JSX.Element | null => { const renderOnSsoError = (): JSX.Element | null => {
if (!ssoerror) { 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 // eslint-disable-next-line react-hooks/exhaustive-deps
}, [getLogsAggregate, maxTime, minTime, liveTail]); }, [getLogsAggregate, maxTime, minTime, liveTail]);
const graphData = useMemo(() => { const graphData = useMemo(
return { () => ({
labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)), labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)),
datasets: [ datasets: [
{ {
@ -86,8 +86,9 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element {
backgroundColor: blue[4], backgroundColor: blue[4],
}, },
], ],
}; }),
}, [logsAggregate]); [logsAggregate],
);
return ( return (
<Container> <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; justify-content: space-between;
align-items: center; align-items: center;
&:hover { &:hover {
background: ${({ isDarkMode }): string => { background: ${({ isDarkMode }): string => (isDarkMode ? grey[7] : '#ddd')};
return isDarkMode ? grey[7] : '#ddd';
}};
} }
`; `;

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

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

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

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

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

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

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

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

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

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

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

@ -118,9 +118,9 @@ function VariableItem({
{variableData.multiSelect && variableData.showALLOption && ( {variableData.multiSelect && variableData.showALLOption && (
<Option value={ALL_SELECT_VALUE}>ALL</Option> <Option value={ALL_SELECT_VALUE}>ALL</Option>
)} )}
{map(optionsData, (option) => { {map(optionsData, (option) => (
return <Option value={option}>{(option as string).toString()}</Option>; <Option value={option}>{(option as string).toString()}</Option>
})} ))}
</Select> </Select>
)} )}
{errorMessage && ( {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) export const AggregateFunctions = Object.keys(EAggregateOperator)
.filter((key) => Number.isNaN(parseInt(key, 10))) .filter((key) => Number.isNaN(parseInt(key, 10)))
.map((key) => { .map((key) => ({
return { label: key,
label: key, value: EAggregateOperator[key as keyof typeof EAggregateOperator],
value: EAggregateOperator[key as keyof typeof EAggregateOperator], }));
};
});
export const TagKeyOperator = [ export const TagKeyOperator = [
{ label: 'In', value: 'IN' }, { 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 && {queries.length > 0 &&
map( map(
queries, queries,
(query): JSX.Element => { (query): JSX.Element => (
return ( <QueryChip key={query.id} queryData={query} onClose={handleClose} />
<QueryChip key={query.id} queryData={query} onClose={handleClose} /> ),
);
},
)} )}
</div> </div>
<div> <div>
{map(staging, (item) => { {map(staging, (item) => (
return <QueryChipItem key={uuid()}>{item}</QueryChipItem>; <QueryChipItem key={uuid()}>{item}</QueryChipItem>
})} ))}
</div> </div>
<div style={{ display: 'flex', width: '100%' }}> <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 = ( export const getQueryKey = (
queryCategory: EQueryType, queryCategory: EQueryType,
): EQueryTypeToQueryKeyMapping => { ): EQueryTypeToQueryKeyMapping =>
return EQueryTypeToQueryKeyMapping[ EQueryTypeToQueryKeyMapping[
EQueryType[queryCategory] as keyof typeof 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( export const flattenedCategories = flattenDeep(
dataTypeCategories.map((category) => { dataTypeCategories.map((category) => category.formats),
return 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; margin-bottom: 1rem;
> button { > button {
margin-left: ${({ noButtonMargin }): string => { margin-left: ${({ noButtonMargin }): string =>
return noButtonMargin ? '0' : '0.5rem'; noButtonMargin ? '0' : '0.5rem'}
}}
`; `;
export const NullButtonContainer = styled.div` export const NullButtonContainer = styled.div`

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

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

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

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

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

@ -26,9 +26,8 @@ function EditMembersDetails({
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [state, copyToClipboard] = useCopyToClipboard(); const [state, copyToClipboard] = useCopyToClipboard();
const getPasswordLink = (token: string): string => { const getPasswordLink = (token: string): string =>
return `${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`; `${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`;
};
const onChangeHandler = useCallback( const onChangeHandler = useCallback(
(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => { (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 { function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element {
const { t } = useTranslation('organizationsettings'); const { t } = useTranslation('organizationsettings');
useEffect(() => { useEffect(
return (): void => { () => (): void => {
setAllMembers([ setAllMembers([
{ {
email: '', email: '',
@ -20,8 +20,9 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element {
role: 'VIEWER', role: 'VIEWER',
}, },
]); ]);
}; },
}, [setAllMembers]); [setAllMembers],
);
const onAddHandler = (): void => { const onAddHandler = (): void => {
setAllMembers((state) => [ setAllMembers((state) => [
@ -36,16 +37,14 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element {
const onChangeHandler = useCallback( const onChangeHandler = useCallback(
(value: string, index: number, type: string): void => { (value: string, index: number, type: string): void => {
setAllMembers((prev) => { setAllMembers((prev) => [
return [ ...prev.slice(0, index),
...prev.slice(0, index), {
{ ...prev[index],
...prev[index], [type]: value,
[type]: value, },
}, ...prev.slice(index, prev.length - 1),
...prev.slice(index, prev.length - 1), ]);
];
});
}, },
[setAllMembers], [setAllMembers],
); );

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

@ -63,15 +63,17 @@ function PendingInvitesContainer(): JSX.Element {
const { hash } = useLocation(); const { hash } = useLocation();
const getParsedInviteData = useCallback((payload: PayloadProps = []) => { const getParsedInviteData = useCallback(
return payload?.map((data) => ({ (payload: PayloadProps = []) =>
key: data.createdAt, payload?.map((data) => ({
name: data.name, key: data.createdAt,
email: data.email, name: data.name,
accessLevel: data.role, email: data.email,
inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`, accessLevel: data.role,
})); inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`,
}, []); })),
[],
);
useEffect(() => { useEffect(() => {
if (hash === INVITE_MEMBERS_HASH) { 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 { loading, error, errorMessage, payload } = spansGraph;
const ChartData = useMemo(() => { const ChartData = useMemo(
return selectedGroupBy.length === 0 () =>
? getChartData(payload) selectedGroupBy.length === 0
: getChartDataforGroupBy(payload); ? getChartData(payload)
}, [payload, selectedGroupBy]); : getChartDataforGroupBy(payload),
[payload, selectedGroupBy],
);
if (error) { if (error) {
return ( return (

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

@ -77,9 +77,9 @@ export const parseTagsToQuery = (tags: Tags): PayloadProps<string> => {
isError = true; isError = true;
} }
return `${Key[0]} ${Operator} (${Values.map((e) => { return `${Key[0]} ${Operator} (${Values.map(
return `"${e.replaceAll(/"/g, '')}"`; (e) => `"${e.replaceAll(/"/g, '')}"`,
}).join(',')})`; ).join(',')})`;
}) })
.join(' AND '); .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>; type TableType = FlatArray<TraceReducer['spansAggregate']['data'], 1>;
const getLink = (record: TableType): string => { const getLink = (record: TableType): string =>
return `${ROUTES.TRACE}/${record.traceID}${formUrlParams({ `${ROUTES.TRACE}/${record.traceID}${formUrlParams({
spanId: record.spanID, spanId: record.spanID,
levelUp: 0, levelUp: 0,
levelDown: 0, levelDown: 0,
})}`; })}`;
};
const getValue = (value: string): JSX.Element => { const getValue = (value: string): JSX.Element => (
return <Typography>{value}</Typography>; <Typography>{value}</Typography>
}; );
const getHttpMethodOrStatus = ( const getHttpMethodOrStatus = (
value: TableType['statusCode'], value: TableType['statusCode'],

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

@ -100,6 +100,11 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
[activeSelectedId, treesData], [activeSelectedId, treesData],
); );
// const onSearchHandler = (value: string) => {
// setSearchSpanString(value);
// setTreeData(spanToTreeUtil(response[0].events));
// };
const onFocusSelectedSpanHandler = (): void => { const onFocusSelectedSpanHandler = (): void => {
const treeNode = getNodeById(activeSelectedId, tree); 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 = ( export const resolveTimeFromInterval = (
intervalTime: number, intervalTime: number,
intervalUnit: IIntervalUnit, intervalUnit: IIntervalUnit,
): number => { ): number => intervalTime * intervalUnit.multiplier;
return intervalTime * intervalUnit.multiplier;
};
export const convertTimeToRelevantUnit = ( export const convertTimeToRelevantUnit = (
intervalTime: number, intervalTime: number,

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

@ -52,9 +52,9 @@ function NoFilterTable({
return ( return (
<> <>
{withOutSeverityKeys.map((e) => { {withOutSeverityKeys.map((e) => (
return <Tag key={e} color="magenta">{`${e} : ${labels[e]}`}</Tag>; <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, role: ROLES | null,
): boolean[] => { ): boolean[] => {
const getComponentPermission = useCallback( const getComponentPermission = useCallback(
(component: ComponentTypes): boolean => { (component: ComponentTypes): boolean =>
return !!componentPermission[component].find((roles) => role === roles); !!componentPermission[component].find((roles) => role === roles),
},
[role], [role],
); );

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

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

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

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

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

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

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

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

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

@ -11,9 +11,7 @@ function GetFormulaName(
return null; return null;
} }
const formulasNameNumbered = sortBy( const formulasNameNumbered = sortBy(
formulas.map(({ name }: { name: string }) => { formulas.map(({ name }: { name: string }) => parseInt(name.slice(1), 10)),
return parseInt(name.slice(1), 10);
}),
(e) => e, (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) { if (queries.length === MAX_QUERIES) {
return null; return null;
} }
const sortedQueries = sortBy(queries, (q) => { const sortedQueries = sortBy(queries, (q) => q.name);
return q.name;
});
let queryIteratorIdx = 0; let queryIteratorIdx = 0;

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

@ -1,8 +1,8 @@
const convertObjectIntoParams = ( const convertObjectIntoParams = (
props: Record<string, unknown>, props: Record<string, unknown>,
stringify = false, stringify = false,
): string => { ): string =>
return Object.keys(props) Object.keys(props)
.map( .map(
(e) => (e) =>
`${e}=${ `${e}=${
@ -10,6 +10,5 @@ const convertObjectIntoParams = (
}`, }`,
) )
.join('&'); .join('&');
};
export default convertObjectIntoParams; 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('_')}`; return `resource_${splittedKey.join('_')}`;
}; };
export const convertOperatorLabelToMetricOperator = (label: string): string => { export const convertOperatorLabelToMetricOperator = (label: string): string =>
return ( OperatorConversions.find((operator) => operator.label === label)
OperatorConversions.find((operator) => operator.label === label) ?.metricValue || '';
?.metricValue || ''
);
};
export const convertOperatorLabelToTraceOperator = ( export const convertOperatorLabelToTraceOperator = (
label: string, label: string,
): OperatorValues => { ): OperatorValues =>
return OperatorConversions.find((operator) => operator.label === label) OperatorConversions.find((operator) => operator.label === label)
?.traceValue as OperatorValues; ?.traceValue as OperatorValues;
};
export const convertRawQueriesToTraceSelectedTags = ( export const convertRawQueriesToTraceSelectedTags = (
queries: IResourceAttributeQuery[], queries: IResourceAttributeQuery[],
keyType: 'string' | 'array' = 'string', keyType: 'string' | 'array' = 'string',
): Tags[] | TagsAPI[] => { ): Tags[] | TagsAPI[] =>
return queries.map((query) => ({ queries.map((query) => ({
Key: Key:
keyType === 'array' keyType === 'array'
? [convertMetricKeyToTrace(query.tagKey)] ? [convertMetricKeyToTrace(query.tagKey)]
@ -49,7 +45,6 @@ export const convertRawQueriesToTraceSelectedTags = (
Operator: convertOperatorLabelToTraceOperator(query.operator), Operator: convertOperatorLabelToTraceOperator(query.operator),
Values: query.tagValue, Values: query.tagValue,
})); }));
};
/** /**
* Converts Resource Attribute Queries to PromQL query string * Converts Resource Attribute Queries to PromQL query string
@ -74,11 +69,10 @@ export const resourceAttributesQueryToPromQL = (
/* Convert resource attributes to tagFilter items for queryBuilder */ /* Convert resource attributes to tagFilter items for queryBuilder */
export const resourceAttributesToTagFilterItems = ( export const resourceAttributesToTagFilterItems = (
queries: IResourceAttributeQuery[], queries: IResourceAttributeQuery[],
): IQueryBuilderTagFilterItems[] => { ): IQueryBuilderTagFilterItems[] =>
return queries.map((res) => ({ queries.map((res) => ({
id: `${res.id}`, id: `${res.id}`,
key: `${res.tagKey}`, key: `${res.tagKey}`,
op: `${res.operator}`, op: `${res.operator}`,
value: `${res.tagValue}`.split(','), value: `${res.tagValue}`.split(','),
})); }));
};

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

@ -20,9 +20,7 @@ function SettingsPage(): JSX.Element {
route: ROUTES.SETTINGS, route: ROUTES.SETTINGS,
}, },
{ {
Component: (): JSX.Element => { Component: (): JSX.Element => <CreateAlertChannels preType="slack" />,
return <CreateAlertChannels preType="slack" />;
},
name: t('routes.alert_channels'), name: t('routes.alert_channels'),
route: ROUTES.ALL_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 Congrats, you have successfully installed SigNoz! Now lets get some data in
and start deriving insights from them and start deriving insights from them
</Typography> </Typography>
{GetStartedContent().map((section) => { {GetStartedContent().map((section) => (
return <DocSection key={section.heading} sectionData={section} />; <DocSection key={section.heading} sectionData={section} />
})} ))}
</> </>
); );
} }

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

@ -101,13 +101,14 @@ function Trace({
isFilterExclude, isFilterExclude,
]); ]);
useEffect(() => { useEffect(
return (): void => { () => (): void => {
dispatch({ dispatch({
type: RESET_TRACE_FILTER, type: RESET_TRACE_FILTER,
}); });
}; },
}, [dispatch]); [dispatch],
);
const onClickHandler: React.MouseEventHandler<HTMLElement> = useCallback( const onClickHandler: React.MouseEventHandler<HTMLElement> = useCallback(
(e) => { (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 = ( export const ApplySettingsToPanel = (
props: ApplySettingsToPanelProps, props: ApplySettingsToPanelProps,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => (
return (dispatch: Dispatch<AppActions>): void => { dispatch: Dispatch<AppActions>,
dispatch({ ): void => {
type: 'APPLY_SETTINGS_TO_PANEL', dispatch({
payload: props, type: 'APPLY_SETTINGS_TO_PANEL',
}); payload: props,
}; });
}; };
export interface ApplySettingsToPanelProps { 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 = ({ export const DeleteDashboard = ({
uuid, uuid,
}: DeleteDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => { }: DeleteDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => async (
return async (dispatch: Dispatch<AppActions>): Promise<void> => { dispatch: Dispatch<AppActions>,
try { ): Promise<void> => {
const response = await deleteDashboardApi({ try {
uuid, const response = await deleteDashboardApi({
}); uuid,
});
if (response.statusCode === 200) { if (response.statusCode === 200) {
dispatch({ dispatch({
type: 'DELETE_DASHBOARD_SUCCESS', type: 'DELETE_DASHBOARD_SUCCESS',
payload: { payload: {
uuid, uuid,
}, },
}); });
} else { } else {
dispatch({
type: 'DELETE_DASHBOARD_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
dispatch({ dispatch({
type: 'DELETE_DASHBOARD_ERROR', type: 'DELETE_DASHBOARD_ERROR',
payload: { payload: {
errorMessage: errorMessage: response.error || 'Something went wrong',
error instanceof Error ? error.toString() : 'Something went wrong',
}, },
}); });
} }
}; } catch (error) {
dispatch({
type: 'DELETE_DASHBOARD_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
},
});
}
}; };
export interface DeleteDashboardProps { 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 = ( export const DeleteQuery = (
props: DeleteQueryProps, props: DeleteQueryProps,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => (
return (dispatch: Dispatch<AppActions>): void => { dispatch: Dispatch<AppActions>,
dispatch({ ): void => {
type: 'DELETE_QUERY', dispatch({
payload: { type: 'DELETE_QUERY',
currentIndex: props.currentIndex, payload: {
widgetId: props.widgetId, 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 = ({ export const DeleteWidget = ({
widgetId, widgetId,
setLayout, setLayout,
}: DeleteWidgetProps): ((dispatch: Dispatch<AppActions>) => void) => { }: DeleteWidgetProps): ((dispatch: Dispatch<AppActions>) => void) => async (
return async (dispatch: Dispatch<AppActions>): Promise<void> => { dispatch: Dispatch<AppActions>,
try { ): Promise<void> => {
const { dashboards } = store.getState(); try {
const [selectedDashboard] = dashboards.dashboards; const { dashboards } = store.getState();
const [selectedDashboard] = dashboards.dashboards;
const { widgets = [] } = selectedDashboard.data; const { widgets = [] } = selectedDashboard.data;
const updatedWidgets = widgets.filter((e) => e.id !== widgetId); const updatedWidgets = widgets.filter((e) => e.id !== widgetId);
const updatedLayout = const updatedLayout =
selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || []; selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || [];
const updatedSelectedDashboard: Dashboard = { const updatedSelectedDashboard: Dashboard = {
...selectedDashboard, ...selectedDashboard,
data: { data: {
title: selectedDashboard.data.title, title: selectedDashboard.data.title,
description: selectedDashboard.data.description, description: selectedDashboard.data.description,
name: selectedDashboard.data.name, name: selectedDashboard.data.name,
tags: selectedDashboard.data.tags, tags: selectedDashboard.data.tags,
widgets: updatedWidgets, widgets: updatedWidgets,
layout: updatedLayout, layout: updatedLayout,
variables: selectedDashboard.data.variables, variables: selectedDashboard.data.variables,
}, },
uuid: selectedDashboard.uuid, uuid: selectedDashboard.uuid,
}; };
const response = await updateDashboardApi(updatedSelectedDashboard); const response = await updateDashboardApi(updatedSelectedDashboard);
if (response.statusCode === 200) { if (response.statusCode === 200) {
dispatch({ dispatch({
type: UPDATE_DASHBOARD, type: UPDATE_DASHBOARD,
payload: updatedSelectedDashboard, payload: updatedSelectedDashboard,
}); });
if (setLayout) { if (setLayout) {
setLayout(getPreLayouts(updatedWidgets, updatedLayout)); setLayout(getPreLayouts(updatedWidgets, updatedLayout));
}
} else {
dispatch({
type: 'DELETE_WIDGET_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
} }
} catch (error) { } else {
dispatch({ dispatch({
type: 'DELETE_WIDGET_ERROR', type: 'DELETE_WIDGET_ERROR',
payload: { 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 { 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 = (): (( export const GetAllDashboards = (): ((
dispatch: Dispatch<AppActions>, dispatch: Dispatch<AppActions>,
) => void) => { ) => void) => async (dispatch: Dispatch<AppActions>): Promise<void> => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => { try {
try { dispatch({
dispatch({ type: 'GET_ALL_DASHBOARD_LOADING_START',
type: 'GET_ALL_DASHBOARD_LOADING_START', });
}); const response = await getAll();
const response = await getAll();
if (response.statusCode === 200) { if (response.statusCode === 200) {
dispatch({ dispatch({
type: 'GET_ALL_DASHBOARD_SUCCESS', type: 'GET_ALL_DASHBOARD_SUCCESS',
payload: response.payload, payload: response.payload,
}); });
} else { } else {
dispatch({
type: 'GET_ALL_DASHBOARD_ERROR',
payload: {
errorMessage: response.error || 'Something went wrong',
},
});
}
} catch (error) {
dispatch({ dispatch({
type: 'GET_ALL_DASHBOARD_ERROR', type: 'GET_ALL_DASHBOARD_ERROR',
payload: { 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, uuid,
widgetId, widgetId,
graphType, graphType,
}: GetDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => { }: GetDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => async (
return async (dispatch: Dispatch<AppActions>): Promise<void> => { dispatch: Dispatch<AppActions>,
try { ): Promise<void> => {
try {
dispatch({
type: 'GET_DASHBOARD_LOADING_START',
});
const response = await getDashboard({
uuid,
});
if (response.statusCode === 200) {
dispatch({ dispatch({
type: 'GET_DASHBOARD_LOADING_START', payload: response.payload,
type: 'GET_DASHBOARD_SUCCESS',
}); });
const response = await getDashboard({ if (widgetId !== undefined) {
uuid,
});
if (response.statusCode === 200) {
dispatch({ dispatch({
payload: response.payload, type: 'CREATE_DEFAULT_WIDGET',
type: 'GET_DASHBOARD_SUCCESS', payload: {
}); description: '',
id: widgetId,
if (widgetId !== undefined) { isStacked: false,
dispatch({ nullZeroValues: 'zero',
type: 'CREATE_DEFAULT_WIDGET', opacity: '0',
payload: { panelTypes: graphType || 'TIME_SERIES',
description: '', timePreferance: 'GLOBAL_TIME',
id: widgetId, title: '',
isStacked: false, queryType: 0,
nullZeroValues: 'zero', queryData: {
opacity: '0', data: {
panelTypes: graphType || 'TIME_SERIES', queryData: [],
timePreferance: 'GLOBAL_TIME',
title: '',
queryType: 0,
queryData: {
data: {
queryData: [],
},
error: false,
errorMessage: '',
loading: false,
}, },
query: {
queryType: EQueryType.QUERY_BUILDER, error: false,
promQL: [ errorMessage: '',
{ loading: false,
name: GetQueryName([]) as string, },
...PromQLQueryTemplate, query: {
}, queryType: EQueryType.QUERY_BUILDER,
], promQL: [
clickHouse: [ {
{ name: GetQueryName([]) as string,
name: GetQueryName([]) as string, ...PromQLQueryTemplate,
...ClickHouseQueryTemplate,
},
],
metricsBuilder: {
formulas: [],
queryBuilder: [
{
name: GetQueryName([]) as string,
...QueryBuilderQueryTemplate,
},
],
}, },
],
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({ dispatch({
type: 'GET_DASHBOARD_ERROR', type: 'GET_DASHBOARD_ERROR',
payload: { payload: {
errorMessage: errorMessage: response.error || 'Something went wrong',
error instanceof Error ? error.toString() : 'Something went wrong',
}, },
}); });
} }
}; } catch (error) {
dispatch({
type: 'GET_DASHBOARD_ERROR',
payload: {
errorMessage:
error instanceof Error ? error.toString() : 'Something went wrong',
},
});
}
}; };
export interface GetDashboardProps { export interface GetDashboardProps {

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

@ -21,9 +21,9 @@ export const SaveDashboard = ({
widgetId, widgetId,
dashboardId, dashboardId,
yAxisUnit, yAxisUnit,
}: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => { }: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) =>
// eslint-disable-next-line sonarjs/cognitive-complexity // eslint-disable-next-line sonarjs/cognitive-complexity
return async (dispatch: Dispatch<AppActions>): Promise<void> => { async (dispatch: Dispatch<AppActions>): Promise<void> => {
try { try {
const dashboard = store.getState(); const dashboard = store.getState();
const search = new URLSearchParams(history.location.search); const search = new URLSearchParams(history.location.search);
@ -139,7 +139,6 @@ export const SaveDashboard = ({
}); });
} }
}; };
};
export interface SaveDashboardProps { export interface SaveDashboardProps {
uuid: Dashboard['uuid']; 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 = ( export const ToggleAddWidget = (
props: ToggleAddWidgetProps, props: ToggleAddWidgetProps,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => (
return (dispatch: Dispatch<AppActions>): void => { dispatch: Dispatch<AppActions>,
dispatch({ ): void => {
type: 'IS_ADD_WIDGET', dispatch({
payload: { type: 'IS_ADD_WIDGET',
isAddWidget: props, payload: {
}, isAddWidget: props,
}); },
}; });
}; };
export type ToggleAddWidgetProps = boolean; 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'; import AppActions from 'types/actions';
export const ToggleEditMode = (): (( export const ToggleEditMode = (): ((
dispatch: Dispatch<AppActions>, dispatch: Dispatch<AppActions>,
) => void) => { ) => void) => (dispatch: Dispatch<AppActions>): void => {
return (dispatch: Dispatch<AppActions>): void => { dispatch({
dispatch({ type: 'TOGGLE_EDIT_MODE',
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 dashboard, // @TODO need to grab the dashboard from the store
}: UpdateDashboardTitleDescriptionTagsProps): (( }: UpdateDashboardTitleDescriptionTagsProps): ((
dispatch: Dispatch<AppActions>, dispatch: Dispatch<AppActions>,
) => void) => { ) => void) => async (dispatch: Dispatch<AppActions>): Promise<void> => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => { try {
try { const { data } = dashboard;
const { data } = dashboard;
const response = await update({ const response = await update({
data: { data: {
...dashboard.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, title: dashboard.data.title,
}, },
uuid: dashboard.uuid,
}); });
dispatch({
if (response.statusCode === 200) { type: 'TOGGLE_EDIT_MODE',
dispatch({ });
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_SUCCESS', } else {
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({ dispatch({
type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR', type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR',
payload: { payload: {
errorMessage: errorMessage: response.error || 'Something went wrong',
error instanceof Error ? error.toString() : '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 { 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 = ( export const UpdateQuery = (
props: UpdateQueryProps, props: UpdateQueryProps,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => (
return (dispatch: Dispatch<AppActions>): void => { dispatch: Dispatch<AppActions>,
dispatch({ ): void => {
type: 'UPDATE_QUERY', dispatch({
payload: { type: 'UPDATE_QUERY',
query: props.updatedQuery, payload: {
widgetId: props.widgetId, query: props.updatedQuery,
yAxisUnit: props.yAxisUnit, widgetId: props.widgetId,
}, yAxisUnit: props.yAxisUnit,
}); },
}; });
}; };
export interface UpdateQueryProps { 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 = ( export const UpdateDashboardVariables = (
variables: Record<string, IDashboardVariable>, variables: Record<string, IDashboardVariable>,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => async (
return async (dispatch: Dispatch<AppActions>): Promise<void> => { dispatch: Dispatch<AppActions>,
try { ): Promise<void> => {
dispatch({ try {
type: UPDATE_DASHBOARD_VARIABLES, dispatch({
payload: variables, 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 = ( export const UpdateTimeInterval = (
interval: Time, interval: Time,
dateTimeRange: [number, number] = [0, 0], dateTimeRange: [number, number] = [0, 0],
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => (
return (dispatch: Dispatch<AppActions>): void => { dispatch: Dispatch<AppActions>,
const { maxTime, minTime } = GetMinMax(interval, dateTimeRange); ): void => {
const { maxTime, minTime } = GetMinMax(interval, dateTimeRange);
dispatch({ dispatch({
type: UPDATE_TIME_INTERVAL, type: UPDATE_TIME_INTERVAL,
payload: { payload: {
maxTime, maxTime,
minTime, minTime,
selectedTime: interval, selectedTime: interval,
}, },
}); });
};
}; };
export const GlobalTimeLoading = (): (( export const GlobalTimeLoading = (): ((
dispatch: Dispatch<AppActions>, dispatch: Dispatch<AppActions>,
) => void) => { ) => void) => (dispatch: Dispatch<AppActions>): void => {
return (dispatch: Dispatch<AppActions>): void => { dispatch({
dispatch({ type: 'GLOBAL_TIME_LOADING_START',
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 = (): (( export const AddToSelectedField = (): ((
dispatch: Dispatch<AppActions>, dispatch: Dispatch<AppActions>,
) => void) => { ) => void) => async (dispatch): Promise<void> => {
return async (dispatch): Promise<void> => { const response = await GetSearchFields();
const response = await GetSearchFields(); if (response.payload)
if (response.payload) dispatch({
dispatch({ type: SET_FIELDS,
type: SET_FIELDS, payload: response.payload,
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']; const IGNORED_SELECTED_FIELDS = ['timestamp'];
export const GetLogsFields = (): ((dispatch: Dispatch<AppActions>) => void) => { export const GetLogsFields = (): ((
return async (dispatch): Promise<void> => { dispatch: Dispatch<AppActions>,
const response = await GetSearchFields(); ) => void) => async (dispatch): Promise<void> => {
if (response.payload) { const response = await GetSearchFields();
dispatch({ if (response.payload) {
type: SET_FIELDS, dispatch({
payload: { type: SET_FIELDS,
interesting: response.payload.interesting, payload: {
selected: response.payload.selected.filter( interesting: response.payload.interesting,
(field) => !IGNORED_SELECTED_FIELDS.includes(field.name), 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 = ( export const getLogs = (
props: Props, props: Props,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => async (
return async (dispatch): Promise<void> => { dispatch,
): Promise<void> => {
dispatch({
type: SET_LOADING,
payload: true,
});
const response = await GetLogs(props);
if (response.payload)
dispatch({ dispatch({
type: SET_LOADING, type: SET_LOGS,
payload: true, payload: response.payload,
});
else
dispatch({
type: SET_LOGS,
payload: [],
}); });
const response = await GetLogs(props); dispatch({
type: SET_LOADING,
if (response.payload) payload: false,
dispatch({ });
type: SET_LOGS,
payload: response.payload,
});
else
dispatch({
type: SET_LOGS,
payload: [],
});
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 = ( export const getLogsAggregate = (
props: Props, props: Props,
): ((dispatch: Dispatch<AppActions>) => void) => { ): ((dispatch: Dispatch<AppActions>) => void) => async (
return async (dispatch): Promise<void> => { dispatch,
dispatch({ ): Promise<void> => {
type: SET_LOADING_AGGREGATE, dispatch({
payload: true, type: SET_LOADING_AGGREGATE,
}); payload: true,
});
const response = await GetLogsAggregate(props); const response = await GetLogsAggregate(props);
if (response.payload) { if (response.payload) {
const convertedArray: ILogsAggregate[] = Object.values(response.payload).map( const convertedArray: ILogsAggregate[] = Object.values(
(data) => { response.payload,
return { ...data, time: new Date(data.timestamp / 1e6) }; ).map((data) => ({ ...data, time: new Date(data.timestamp / 1e6) }));
},
);
dispatch({
type: SET_LOGS_AGGREGATE_SERIES,
payload: convertedArray,
});
} else {
dispatch({
type: SET_LOGS_AGGREGATE_SERIES,
payload: [],
});
}
dispatch({ dispatch({
type: SET_LOADING_AGGREGATE, type: SET_LOGS_AGGREGATE_SERIES,
payload: false, 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 = ( export const GetInitialData = (
props: GetInitialDataProps, props: GetInitialDataProps,
): ((dispatch: Dispatch<AppActions>, getState: () => AppState) => void) => { ): ((
return async (dispatch, getState): Promise<void> => { dispatch: Dispatch<AppActions>,
try { getState: () => AppState,
const { globalTime } = getState(); ) => void) => async (dispatch, getState): Promise<void> => {
try {
const { globalTime } = getState();
/** /**
* @description This is because we keeping the store as source of truth * @description This is because we keeping the store as source of truth
*/ */
if ( if (
props.maxTime !== globalTime.maxTime && props.maxTime !== globalTime.maxTime &&
props.minTime !== globalTime.minTime props.minTime !== globalTime.minTime
) { ) {
return; 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({ 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,
},
}); });
} else {
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) {
dispatch({ dispatch({
type: 'GET_INITIAL_APPLICATION_ERROR', type: 'GET_INITIAL_APPLICATION_ERROR',
payload: { 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 { 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 = ( export const GetService = (
props: GetServiceProps, props: GetServiceProps,
): ((dispatch: Dispatch<AppActions>, getState: () => AppState) => void) => { ): ((
return async (dispatch, getState): Promise<void> => { dispatch: Dispatch<AppActions>,
try { getState: () => AppState,
const { globalTime } = getState(); ) => void) => async (dispatch, getState): Promise<void> => {
try {
const { globalTime } = getState();
if ( if (
props.maxTime !== globalTime.maxTime && props.maxTime !== globalTime.maxTime &&
props.minTime !== globalTime.minTime props.minTime !== globalTime.minTime
) { ) {
return; return;
} }
const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [ const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [
globalTime.minTime / 1000000, globalTime.minTime / 1000000,
globalTime.maxTime / 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({ dispatch({
type: 'GET_SERVICE_LIST_LOADING_START', type: 'GET_SERVICE_LIST_SUCCESS',
payload: response.payload,
}); });
} else {
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) {
dispatch({ dispatch({
type: 'GET_SERVICE_LIST_ERROR', type: 'GET_SERVICE_LIST_ERROR',
payload: { 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 = { 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 = (): (( export const ResetInitialData = (): ((
dispatch: Dispatch<AppActions>, dispatch: Dispatch<AppActions>,
getState: () => AppState, getState: () => AppState,
) => void) => { ) => void) => (dispatch): void => {
return (dispatch): void => { dispatch({
dispatch({ type: 'RESET_INITIAL_APPLICATION_DATA',
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) => { export const getDetailedServiceMapItems = (globalTime: GlobalTime) => async (
return async (dispatch: Dispatch): Promise<void> => { dispatch: Dispatch,
const start = `${globalTime.minTime}`; ): Promise<void> => {
const end = `${globalTime.maxTime}`; const start = `${globalTime.minTime}`;
const end = `${globalTime.maxTime}`;
const serviceMapPayload = { const serviceMapPayload = {
start, start,
end, end,
tags: [], 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 [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>, dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'], getState: Store<AppState>['getState'],
) => void) => {
// eslint-disable-next-line sonarjs/cognitive-complexity // eslint-disable-next-line sonarjs/cognitive-complexity
return async (dispatch, getState): Promise<void> => { ) => void) => async (dispatch, getState): Promise<void> => {
try { try {
const query = window.location.search; const query = window.location.search;
const { traces, globalTime } = getState(); const { traces, globalTime } = getState();
if (globalTime.maxTime !== maxTime && globalTime.minTime !== minTime) { if (globalTime.maxTime !== maxTime && globalTime.minTime !== minTime) {
return; return;
} }
const getSelectedFilter = parseSelectedFilter( const getSelectedFilter = parseSelectedFilter(
query, query,
traces.selectedFilter, traces.selectedFilter,
true, true,
); );
const getFilterToFetchData = parseFilterToFetchData( const getFilterToFetchData = parseFilterToFetchData(
query, query,
traces.filterToFetchData, traces.filterToFetchData,
); );
const getUserSelected = parseSelectedFilter( const getUserSelected = parseSelectedFilter(query, traces.userSelectedFilter);
query,
traces.userSelectedFilter,
);
const getIsFilterExcluded = parseFilterExclude( const getIsFilterExcluded = parseFilterExclude(query, traces.isFilterExclude);
query,
traces.isFilterExclude,
);
const parsedQueryCurrent = parseQueryIntoCurrent( const parsedQueryCurrent = parseQueryIntoCurrent(
query, query,
traces.spansAggregate.currentPage, traces.spansAggregate.currentPage,
); );
const parsedQueryOrder = parseQueryIntoOrder( const parsedQueryOrder = parseQueryIntoOrder(
query, query,
traces.spansAggregate.order, traces.spansAggregate.order,
); );
const parsedPageSize = parseQueryIntoPageSize( const parsedPageSize = parseQueryIntoPageSize(
query, query,
traces.spansAggregate.pageSize, traces.spansAggregate.pageSize,
); );
const isSelectionSkipped = parseIsSkippedSelection(query); const isSelectionSkipped = parseIsSkippedSelection(query);
const parsedSelectedTags = parseQueryIntoSelectedTags( const parsedSelectedTags = parseQueryIntoSelectedTags(
query, query,
traces.selectedTags, traces.selectedTags,
); );
const parsedOrderParams = parseAggregateOrderParams( const parsedOrderParams = parseAggregateOrderParams(
query, query,
traces.spansAggregate.orderParam, 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 // now filter are not matching we need to fetch the data and make in sync
dispatch({ dispatch({
type: UPDATE_TRACE_FILTER_LOADING, type: UPDATE_TRACE_FILTER_LOADING,
payload: { payload: {
filterLoading: true, filterLoading: true,
}, },
}); });
const response = await getFiltersApi({ const response = await getFiltersApi({
end: String(maxTime), end: String(maxTime),
getFilters: getFilterToFetchData.currentValue, getFilters: getFilterToFetchData.currentValue,
start: String(minTime), start: String(minTime),
other: Object.fromEntries(getSelectedFilter.currentValue), other: Object.fromEntries(getSelectedFilter.currentValue),
isFilterExclude: getIsFilterExcluded.currentValue, isFilterExclude: getIsFilterExcluded.currentValue,
}); });
const preSelectedFilter: Map<TraceFilterEnum, string[]> = new Map( const preSelectedFilter: Map<TraceFilterEnum, string[]> = new Map(
getSelectedFilter.currentValue, getSelectedFilter.currentValue,
); );
if (response.payload && !isSelectionSkipped.currentValue) { if (response.payload && !isSelectionSkipped.currentValue) {
const diff = const diff =
query.length === 0 query.length === 0
? traces.filterToFetchData ? traces.filterToFetchData
: xor(traces.filterToFetchData, getFilterToFetchData.currentValue); : xor(traces.filterToFetchData, getFilterToFetchData.currentValue);
Object.keys(response.payload).forEach((key) => { Object.keys(response.payload).forEach((key) => {
const value = response.payload[key]; const value = response.payload[key];
Object.keys(value) Object.keys(value)
// remove maxDuration and minDuration filter from initial selection logic // remove maxDuration and minDuration filter from initial selection logic
.filter((e) => !['maxDuration', 'minDuration'].includes(e)) .filter((e) => !['maxDuration', 'minDuration'].includes(e))
.forEach((preKey) => { .forEach((preKey) => {
if (isTraceFilterEnum(key) && diff.find((v) => v === key)) { if (isTraceFilterEnum(key) && diff.find((v) => v === key)) {
// const preValue = preSelectedFilter?.get(key) || []; // const preValue = preSelectedFilter?.get(key) || [];
const preValue = getUserSelected.currentValue?.get(key) || []; const preValue = getUserSelected.currentValue?.get(key) || [];
// preSelectedFilter?.set(key, [...new Set([...preValue, preKey])]); // preSelectedFilter?.set(key, [...new Set([...preValue, preKey])]);
getUserSelected.currentValue.set(key, [ getUserSelected.currentValue.set(key, [
...new Set([...preValue, preKey]), ...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,
},
}); });
} }
};
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>, dispatch: Dispatch<AppActions>,
getState: Store<AppState>['getState'], getState: Store<AppState>['getState'],
) => void) => { ) => void) => async (dispatch, getState): Promise<void> => {
return async (dispatch, getState): Promise<void> => { const { traces, globalTime } = getState();
const { traces, globalTime } = getState(); const { spansAggregate } = traces;
const { spansAggregate } = traces;
if ( if (
globalTime.maxTime !== props.maxTime && globalTime.maxTime !== props.maxTime &&
globalTime.minTime !== props.minTime globalTime.minTime !== props.minTime
) { ) {
return; return;
} }
if (traces.filterLoading) { if (traces.filterLoading) {
return; return;
} }
const { order = '' } = props; const { order = '' } = props;
try { try {
// triggering loading // 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({ dispatch({
type: UPDATE_SPANS_AGGREGATE, type: UPDATE_SPANS_AGGREGATE,
payload: { payload: {
spansAggregate: { spansAggregate: {
currentPage: props.current, currentPage: props.current,
loading: true, loading: false,
data: spansAggregate.data, data: response.payload.spans,
error: false, error: false,
total: spansAggregate.total, total: response.payload.totalSpans,
pageSize: props.pageSize, pageSize: props.pageSize,
order, order,
orderParam: spansAggregate.orderParam, orderParam: spansAggregate.orderParam,
@ -51,68 +79,22 @@ export const GetSpansAggregate = (
}, },
}); });
const response = await getSpansAggregate({ updateURL(
end: props.maxTime, traces.selectedFilter,
start: props.minTime, traces.filterToFetchData,
selectedFilter: props.selectedFilter, props.current,
limit: props.pageSize, traces.selectedTags,
offset: props.current * props.pageSize - props.pageSize, traces.isFilterExclude,
selectedTags: props.selectedTags, traces.userSelectedFilter,
isFilterExclude: traces.isFilterExclude,
order, 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({ dispatch({
type: UPDATE_SPANS_AGGREGATE, type: UPDATE_SPANS_AGGREGATE,
payload: { 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 { export interface GetSpansAggregateProps {

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

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

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

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

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

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

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

@ -19,18 +19,16 @@ export const getUsageData = (
maxTime: number, maxTime: number,
step: number, step: number,
service: string, service: string,
) => { ) => async (dispatch: Dispatch): Promise<void> => {
return async (dispatch: Dispatch): Promise<void> => { const requesString = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
const requesString = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch( maxTime,
maxTime, )}&step=${step}&service=${service || ''}`;
)}&step=${step}&service=${service || ''}`; // Step can only be multiple of 3600
// Step can only be multiple of 3600 const response = await api.get<UsageDataItem[]>(requesString);
const response = await api.get<UsageDataItem[]>(requesString);
dispatch<GetUsageDataAction>({ dispatch<GetUsageDataAction>({
type: ActionTypes.getUsageData, type: ActionTypes.getUsageData,
payload: response.data, payload: response.data,
// PNOTE - response.data in the axios response has the actual API response // 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 getLocalStorage from 'api/browser/localstorage/get';
import { SKIP_ONBOARDING } from 'constants/onboarding'; import { SKIP_ONBOARDING } from 'constants/onboarding';
export const isOnboardingSkipped = (): boolean => { export const isOnboardingSkipped = (): boolean =>
return getLocalStorage(SKIP_ONBOARDING) === 'true'; 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 = ( const getSpanReferences = (
rawReferences: string[] = [], rawReferences: string[] = [],
): Record<string, string>[] => { ): Record<string, string>[] =>
return rawReferences.map((rawRef) => { rawReferences.map((rawRef) => {
const refObject: Record<string, string> = {}; const refObject: Record<string, string> = {};
rawRef rawRef
.replaceAll('{', '') .replaceAll('{', '')
@ -19,7 +19,6 @@ const getSpanReferences = (
return refObject; return refObject;
}); });
};
// This getSpanTags is migrated from the previous implementation. // This getSpanTags is migrated from the previous implementation.
const getSpanTags = (spanData: Span): { key: string; value: string }[] => { 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(); const x = new Date();
return time + x.getTimezoneOffset() * 60 * 1000; 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) { if (input.toString().split('.').length > 1) {
return input.toFixed(fixedCount); return input.toFixed(fixedCount);
} }
return input; return input;
}; }