mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-12 17:48:59 +08:00
FE: added more eslint rule (#2090)
* 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:
parent
2f1ca93eda
commit
e62e541fc4
@ -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',
|
||||||
|
@ -29,8 +29,7 @@ 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);
|
||||||
@ -60,7 +59,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
|
|||||||
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
|
||||||
@ -84,9 +83,9 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
|
|||||||
boxSpan.style.borderColor = `${item?.strokeStyle}`;
|
boxSpan.style.borderColor = `${item?.strokeStyle}`;
|
||||||
boxSpan.style.borderWidth = `${item.lineWidth}px`;
|
boxSpan.style.borderWidth = `${item.lineWidth}px`;
|
||||||
boxSpan.style.display = 'inline-block';
|
boxSpan.style.display = 'inline-block';
|
||||||
boxSpan.style.minHeight = '0.75rem';
|
boxSpan.style.minHeight = '20px';
|
||||||
boxSpan.style.marginRight = '0.5rem';
|
boxSpan.style.marginRight = '10px';
|
||||||
boxSpan.style.minWidth = '0.75rem';
|
boxSpan.style.minWidth = '20px';
|
||||||
boxSpan.style.borderRadius = '50%';
|
boxSpan.style.borderRadius = '50%';
|
||||||
|
|
||||||
if (item.text) {
|
if (item.text) {
|
||||||
@ -105,5 +104,4 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
};
|
|
||||||
|
@ -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 }} />
|
||||||
|
@ -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;
|
||||||
|
@ -6,8 +6,7 @@ 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 && (
|
||||||
@ -16,8 +15,7 @@ function TextToolTip({ text, url }: TextToolTipProps): JSX.Element {
|
|||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
)}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
|
<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@ -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'}
|
||||||
}}
|
|
||||||
`;
|
`;
|
||||||
|
@ -184,8 +184,7 @@ 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
|
||||||
@ -212,8 +211,7 @@ function AllErrors(): JSX.Element {
|
|||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
),
|
||||||
},
|
|
||||||
[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
|
[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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) {
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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,
|
||||||
|
});
|
||||||
|
@ -211,34 +211,27 @@ 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) => {
|
||||||
@ -282,7 +275,6 @@ function QuerySection({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
const handleRunQuery = (): void => {
|
const handleRunQuery = (): void => {
|
||||||
runQuery();
|
runQuery();
|
||||||
|
@ -38,8 +38,7 @@ 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}
|
||||||
@ -62,10 +61,8 @@ function RuleOptions({
|
|||||||
<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' }}
|
||||||
@ -78,10 +75,8 @@ function RuleOptions({
|
|||||||
<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' }}
|
||||||
@ -91,10 +86,8 @@ function RuleOptions({
|
|||||||
<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' }}
|
||||||
@ -116,10 +109,8 @@ function RuleOptions({
|
|||||||
<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')}{' '}
|
||||||
@ -127,9 +118,7 @@ function RuleOptions({
|
|||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
);
|
);
|
||||||
};
|
const renderPromRuleOptions = (): JSX.Element => (
|
||||||
const renderPromRuleOptions = (): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<Typography.Text>
|
<Typography.Text>
|
||||||
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
|
{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
|
||||||
@ -137,7 +126,6 @@ function RuleOptions({
|
|||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -15,8 +15,7 @@ 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>
|
||||||
@ -27,9 +26,7 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</StyledList>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
const renderStep2QB = (): JSX.Element => (
|
||||||
const renderStep2QB = (): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
|
<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
|
||||||
<StyledList>
|
<StyledList>
|
||||||
@ -38,10 +35,8 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</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>
|
||||||
@ -50,19 +45,15 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</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 => {
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
|
<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
|
||||||
<StyledList>
|
<StyledList>
|
||||||
@ -71,9 +62,7 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</StyledList>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
const renderStep2PQL = (): JSX.Element => (
|
||||||
const renderStep2PQL = (): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
|
<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
|
||||||
<StyledList>
|
<StyledList>
|
||||||
@ -82,10 +71,8 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</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>
|
||||||
@ -94,20 +81,16 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</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>
|
||||||
@ -129,9 +112,7 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</StyledList>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
const renderStep2CH = (): JSX.Element => (
|
||||||
const renderStep2CH = (): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
|
<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
|
||||||
<StyledList>
|
<StyledList>
|
||||||
@ -140,10 +121,8 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</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>
|
||||||
@ -152,17 +131,14 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
|
|||||||
</StyledList>
|
</StyledList>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
const renderGuideForCH = (): JSX.Element => {
|
const renderGuideForCH = (): JSX.Element => (
|
||||||
return (
|
|
||||||
<>
|
<>
|
||||||
{renderStep1CH()}
|
{renderStep1CH()}
|
||||||
{renderStep2CH()}
|
{renderStep2CH()}
|
||||||
{renderStep3CH()}
|
{renderStep3CH()}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<StyledMainContainer>
|
<StyledMainContainer>
|
||||||
<Row>
|
<Row>
|
||||||
|
@ -436,8 +436,7 @@ 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=""
|
||||||
@ -446,10 +445,8 @@ function FormAlertRules({
|
|||||||
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"
|
||||||
@ -457,10 +454,8 @@ function FormAlertRules({
|
|||||||
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"
|
||||||
@ -470,7 +465,6 @@ function FormAlertRules({
|
|||||||
selectedInterval={toChartInterval(alertDef.evalWindow)}
|
selectedInterval={toChartInterval(alertDef.evalWindow)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{Element}
|
{Element}
|
||||||
|
@ -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%' }}>
|
||||||
|
@ -42,8 +42,7 @@ 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,
|
||||||
@ -51,8 +50,7 @@ export const toIMetricsBuilderQuery = (
|
|||||||
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,
|
||||||
|
@ -112,8 +112,7 @@ 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,
|
||||||
@ -125,8 +124,7 @@ const getSpanWithoutChildren = (
|
|||||||
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,
|
||||||
|
@ -81,11 +81,10 @@ 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: () =>
|
||||||
return getQueryResult({
|
getQueryResult({
|
||||||
end: queryMinMax.max.toString(),
|
end: queryMinMax.max.toString(),
|
||||||
query: query.query,
|
query: query.query,
|
||||||
start: queryMinMax.min.toString(),
|
start: queryMinMax.min.toString(),
|
||||||
@ -94,12 +93,10 @@ function FullView({
|
|||||||
end: queryMinMax.max,
|
end: queryMinMax.max,
|
||||||
inputFormat: 's',
|
inputFormat: 's',
|
||||||
})}`,
|
})}`,
|
||||||
});
|
}),
|
||||||
},
|
|
||||||
queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
|
queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
|
||||||
retryOnMount: false,
|
retryOnMount: false,
|
||||||
};
|
})),
|
||||||
}),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const isError =
|
const isError =
|
||||||
|
@ -101,8 +101,7 @@ 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
|
||||||
@ -126,16 +125,11 @@ function GridCardGraph({
|
|||||||
destroyOnClose
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<FullViewContainer>
|
<FullViewContainer>
|
||||||
<FullView
|
<FullView name={`${name}expanded`} widget={widget} yAxisUnit={yAxisUnit} />
|
||||||
name={`${name}expanded`}
|
|
||||||
widget={widget}
|
|
||||||
yAxisUnit={yAxisUnit}
|
|
||||||
/>
|
|
||||||
</FullViewContainer>
|
</FullViewContainer>
|
||||||
</Modal>
|
</Modal>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
const handleOnView = (): void => {
|
const handleOnView = (): void => {
|
||||||
onToggleModal(setModal);
|
onToggleModal(setModal);
|
||||||
|
@ -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,8 +126,7 @@ 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} />
|
||||||
|
|
||||||
@ -142,8 +139,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
|
|||||||
|
|
||||||
<DeleteAlert notifications={notifications} setData={setData} id={id} />
|
<DeleteAlert notifications={notifications} setData={setData} id={id} />
|
||||||
</>
|
</>
|
||||||
);
|
),
|
||||||
},
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
|
@ -157,8 +157,7 @@ function Login({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderSAMLAction = (): JSX.Element => {
|
const renderSAMLAction = (): JSX.Element => (
|
||||||
return (
|
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
loading={isLoading}
|
loading={isLoading}
|
||||||
@ -168,7 +167,6 @@ function Login({
|
|||||||
{t('login_with_sso')}
|
{t('login_with_sso')}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
const renderOnSsoError = (): JSX.Element | null => {
|
const renderOnSsoError = (): JSX.Element | null => {
|
||||||
if (!ssoerror) {
|
if (!ssoerror) {
|
||||||
|
@ -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>
|
||||||
|
@ -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';
|
|
||||||
}};
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -44,8 +44,7 @@ export const getQueryBuilderQuerieswithFormula = ({
|
|||||||
}: BuilderQuerieswithFormulaProps): {
|
}: BuilderQuerieswithFormulaProps): {
|
||||||
formulas: IMetricsBuilderFormula[];
|
formulas: IMetricsBuilderFormula[];
|
||||||
queryBuilder: IMetricsBuilderQuery[];
|
queryBuilder: IMetricsBuilderQuery[];
|
||||||
} => {
|
} => ({
|
||||||
return {
|
|
||||||
formulas: [
|
formulas: [
|
||||||
{
|
{
|
||||||
disabled: false,
|
disabled: false,
|
||||||
@ -82,8 +81,7 @@ export const getQueryBuilderQuerieswithFormula = ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
});
|
||||||
};
|
|
||||||
|
|
||||||
interface BuilderQueriesProps {
|
interface BuilderQueriesProps {
|
||||||
metricName: string;
|
metricName: string;
|
||||||
|
@ -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
|
||||||
|
@ -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}
|
||||||
|
@ -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}
|
||||||
|
@ -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 = [
|
||||||
{
|
{
|
||||||
|
@ -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 && (
|
||||||
|
@ -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' },
|
||||||
|
@ -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%' }}>
|
||||||
|
@ -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
|
||||||
];
|
];
|
||||||
};
|
|
||||||
|
@ -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;
|
|
||||||
}),
|
|
||||||
);
|
);
|
||||||
|
@ -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`
|
||||||
|
@ -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>();
|
||||||
|
|
||||||
|
@ -231,8 +231,7 @@ 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)}
|
||||||
@ -241,8 +240,7 @@ function AuthDomains(): JSX.Element {
|
|||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</Button>
|
</Button>
|
||||||
);
|
),
|
||||||
},
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -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) => {
|
||||||
|
@ -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],
|
||||||
);
|
);
|
||||||
|
@ -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 = []) =>
|
||||||
|
payload?.map((data) => ({
|
||||||
key: data.createdAt,
|
key: data.createdAt,
|
||||||
name: data.name,
|
name: data.name,
|
||||||
email: data.email,
|
email: data.email,
|
||||||
accessLevel: data.role,
|
accessLevel: data.role,
|
||||||
inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`,
|
inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`,
|
||||||
}));
|
})),
|
||||||
}, []);
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hash === INVITE_MEMBERS_HASH) {
|
if (hash === INVITE_MEMBERS_HASH) {
|
||||||
|
@ -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
|
() =>
|
||||||
|
selectedGroupBy.length === 0
|
||||||
? getChartData(payload)
|
? getChartData(payload)
|
||||||
: getChartDataforGroupBy(payload);
|
: getChartDataforGroupBy(payload),
|
||||||
}, [payload, selectedGroupBy]);
|
[payload, selectedGroupBy],
|
||||||
|
);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
|
@ -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 ');
|
||||||
|
|
||||||
|
@ -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'],
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
})}
|
))}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -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],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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,8 +60,7 @@ 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,
|
||||||
@ -73,8 +69,7 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
|
|||||||
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],
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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(','),
|
||||||
}));
|
}));
|
||||||
};
|
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
|
@ -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} />
|
||||||
})}
|
))}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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) => {
|
||||||
|
@ -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>,
|
||||||
|
): void => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'APPLY_SETTINGS_TO_PANEL',
|
type: 'APPLY_SETTINGS_TO_PANEL',
|
||||||
payload: props,
|
payload: props,
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface ApplySettingsToPanelProps {
|
export interface ApplySettingsToPanelProps {
|
||||||
|
@ -5,8 +5,9 @@ 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>,
|
||||||
|
): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
const response = await deleteDashboardApi({
|
const response = await deleteDashboardApi({
|
||||||
uuid,
|
uuid,
|
||||||
@ -36,7 +37,6 @@ export const DeleteDashboard = ({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface DeleteDashboardProps {
|
export interface DeleteDashboardProps {
|
||||||
|
@ -4,8 +4,9 @@ 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>,
|
||||||
|
): void => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'DELETE_QUERY',
|
type: 'DELETE_QUERY',
|
||||||
payload: {
|
payload: {
|
||||||
@ -13,5 +14,4 @@ export const DeleteQuery = (
|
|||||||
widgetId: props.widgetId,
|
widgetId: props.widgetId,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -10,8 +10,9 @@ 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>,
|
||||||
|
): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
const { dashboards } = store.getState();
|
const { dashboards } = store.getState();
|
||||||
const [selectedDashboard] = dashboards.dashboards;
|
const [selectedDashboard] = dashboards.dashboards;
|
||||||
@ -61,7 +62,6 @@ export const DeleteWidget = ({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface DeleteWidgetProps {
|
export interface DeleteWidgetProps {
|
||||||
|
@ -5,8 +5,7 @@ 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',
|
||||||
@ -34,5 +33,4 @@ export const GetAllDashboards = (): ((
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -15,8 +15,9 @@ 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>,
|
||||||
|
): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'GET_DASHBOARD_LOADING_START',
|
type: 'GET_DASHBOARD_LOADING_START',
|
||||||
@ -98,7 +99,6 @@ export const GetDashboard = ({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface GetDashboardProps {
|
export interface GetDashboardProps {
|
||||||
|
@ -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'];
|
||||||
|
@ -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>,
|
||||||
|
): void => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'IS_ADD_WIDGET',
|
type: 'IS_ADD_WIDGET',
|
||||||
payload: {
|
payload: {
|
||||||
isAddWidget: props,
|
isAddWidget: props,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ToggleAddWidgetProps = boolean;
|
export type ToggleAddWidgetProps = boolean;
|
||||||
|
@ -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',
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -7,8 +7,7 @@ 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;
|
||||||
|
|
||||||
@ -49,7 +48,6 @@ export const UpdateDashboardTitleDescriptionTags = ({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface UpdateDashboardTitleDescriptionTagsProps {
|
export interface UpdateDashboardTitleDescriptionTagsProps {
|
||||||
|
@ -4,8 +4,9 @@ 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>,
|
||||||
|
): void => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'UPDATE_QUERY',
|
type: 'UPDATE_QUERY',
|
||||||
payload: {
|
payload: {
|
||||||
@ -14,7 +15,6 @@ export const UpdateQuery = (
|
|||||||
yAxisUnit: props.yAxisUnit,
|
yAxisUnit: props.yAxisUnit,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface UpdateQueryProps {
|
export interface UpdateQueryProps {
|
||||||
|
@ -8,8 +8,9 @@ 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>,
|
||||||
|
): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: UPDATE_DASHBOARD_VARIABLES,
|
type: UPDATE_DASHBOARD_VARIABLES,
|
||||||
@ -34,5 +35,4 @@ export const UpdateDashboardVariables = (
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -7,8 +7,9 @@ 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>,
|
||||||
|
): void => {
|
||||||
const { maxTime, minTime } = GetMinMax(interval, dateTimeRange);
|
const { maxTime, minTime } = GetMinMax(interval, dateTimeRange);
|
||||||
|
|
||||||
dispatch({
|
dispatch({
|
||||||
@ -19,15 +20,12 @@ export const UpdateTimeInterval = (
|
|||||||
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',
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -5,8 +5,9 @@ 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>,
|
||||||
|
) => void) => async (dispatch): Promise<void> => {
|
||||||
const response = await GetSearchFields();
|
const response = await GetSearchFields();
|
||||||
if (response.payload) {
|
if (response.payload) {
|
||||||
dispatch({
|
dispatch({
|
||||||
@ -19,5 +20,4 @@ export const GetLogsFields = (): ((dispatch: Dispatch<AppActions>) => void) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -6,8 +6,9 @@ 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({
|
dispatch({
|
||||||
type: SET_LOADING,
|
type: SET_LOADING,
|
||||||
payload: true,
|
payload: true,
|
||||||
@ -30,5 +31,4 @@ export const getLogs = (
|
|||||||
type: SET_LOADING,
|
type: SET_LOADING,
|
||||||
payload: false,
|
payload: false,
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -10,8 +10,9 @@ 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,
|
||||||
|
): Promise<void> => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: SET_LOADING_AGGREGATE,
|
type: SET_LOADING_AGGREGATE,
|
||||||
payload: true,
|
payload: true,
|
||||||
@ -19,11 +20,9 @@ export const getLogsAggregate = (
|
|||||||
|
|
||||||
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({
|
dispatch({
|
||||||
type: SET_LOGS_AGGREGATE_SERIES,
|
type: SET_LOGS_AGGREGATE_SERIES,
|
||||||
@ -40,5 +39,4 @@ export const getLogsAggregate = (
|
|||||||
type: SET_LOADING_AGGREGATE,
|
type: SET_LOADING_AGGREGATE,
|
||||||
payload: false,
|
payload: false,
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -17,8 +17,10 @@ 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>,
|
||||||
|
getState: () => AppState,
|
||||||
|
) => void) => async (dispatch, getState): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
const { globalTime } = getState();
|
const { globalTime } = getState();
|
||||||
|
|
||||||
@ -125,7 +127,6 @@ export const GetInitialData = (
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface GetInitialDataProps {
|
export interface GetInitialDataProps {
|
||||||
|
@ -9,8 +9,10 @@ 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>,
|
||||||
|
getState: () => AppState,
|
||||||
|
) => void) => async (dispatch, getState): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
const { globalTime } = getState();
|
const { globalTime } = getState();
|
||||||
|
|
||||||
@ -57,7 +59,6 @@ export const GetService = (
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type GetServiceProps = {
|
export type GetServiceProps = {
|
||||||
|
@ -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',
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -30,8 +30,9 @@ export interface ServiceMapLoading {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
|
export const getDetailedServiceMapItems = (globalTime: GlobalTime) => async (
|
||||||
return async (dispatch: Dispatch): Promise<void> => {
|
dispatch: Dispatch,
|
||||||
|
): Promise<void> => {
|
||||||
const start = `${globalTime.minTime}`;
|
const start = `${globalTime.minTime}`;
|
||||||
const end = `${globalTime.maxTime}`;
|
const end = `${globalTime.maxTime}`;
|
||||||
|
|
||||||
@ -55,5 +56,4 @@ export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
|
|||||||
loading: false,
|
loading: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -32,9 +32,8 @@ 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;
|
||||||
|
|
||||||
@ -55,15 +54,9 @@ export const GetInitialTraceFilter = (
|
|||||||
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,
|
||||||
@ -205,5 +198,4 @@ export const GetInitialTraceFilter = (
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -15,8 +15,7 @@ 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;
|
||||||
|
|
||||||
@ -129,7 +128,6 @@ export const GetSpansAggregate = (
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface GetSpansAggregateProps {
|
export interface GetSpansAggregateProps {
|
||||||
|
@ -11,8 +11,7 @@ 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();
|
||||||
|
|
||||||
@ -50,5 +49,4 @@ export const SelectedTraceFilter = (props: {
|
|||||||
traces.spansAggregate.pageSize,
|
traces.spansAggregate.pageSize,
|
||||||
traces.spansAggregate.orderParam,
|
traces.spansAggregate.orderParam,
|
||||||
);
|
);
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -19,8 +19,7 @@ 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 || ''}`;
|
||||||
@ -32,5 +31,4 @@ export const 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
|
||||||
});
|
});
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -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';
|
||||||
};
|
|
||||||
|
@ -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 }[] => {
|
||||||
|
@ -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;
|
||||||
};
|
}
|
||||||
|
@ -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;
|
||||||
};
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user