From e62e541fc4ecff40d12fa3307cd0880c305e5b4e Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Tue, 24 Jan 2023 18:53:04 +0530 Subject: [PATCH] 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 --- frontend/.eslintrc.js | 2 + .../src/components/Graph/Plugin/Legend.ts | 144 +++++---- .../src/components/Logs/LogItem/index.tsx | 8 +- frontend/src/components/ReleaseNote/index.tsx | 6 +- frontend/src/components/TextToolTip/index.tsx | 22 +- .../TimePreferenceDropDown/styles.ts | 5 +- frontend/src/container/AllError/index.tsx | 58 ++-- frontend/src/container/AllError/utils.ts | 14 +- .../container/CreateAlertChannels/index.tsx | 9 +- .../src/container/EditAlertChannels/index.tsx | 18 +- .../ChQuerySection/transform.ts | 8 +- .../container/FormAlertRules/QuerySection.tsx | 110 +++---- .../container/FormAlertRules/RuleOptions.tsx | 178 +++++------ .../FormAlertRules/UserGuide/index.tsx | 258 +++++++-------- .../src/container/FormAlertRules/index.tsx | 60 ++-- .../container/FormAlertRules/labels/index.tsx | 14 +- .../src/container/FormAlertRules/utils.ts | 20 +- frontend/src/container/GantChart/utils.ts | 28 +- .../GridGraphLayout/Graph/FullView/index.tsx | 35 +- .../container/GridGraphLayout/Graph/index.tsx | 62 ++-- .../container/ListAlertRules/ListAlert.tsx | 38 +-- .../ListAlertRules/ToggleAlertState.tsx | 8 +- .../ListOfDashboard/SearchFilter/index.tsx | 18 +- .../ListOfDashboard/SearchFilter/utils.ts | 4 +- .../container/LogDetailedView/TableView.tsx | 12 +- frontend/src/container/Login/index.tsx | 22 +- .../src/container/LogsAggregate/index.tsx | 9 +- frontend/src/container/LogsFilters/styles.ts | 4 +- .../MetricsPageQueriesFactory.ts | 74 +++-- .../ResourceAttributesFilter/index.tsx | 30 +- .../MetricsApplication/Tabs/Overview.tsx | 9 +- .../MetricsApplication/TopOperationsTable.tsx | 4 +- .../DashboardSettings/Variables/index.tsx | 4 +- .../VariableItem.tsx | 6 +- .../QuerySection/QueryBuilder/Options.ts | 10 +- .../queryBuilder/MetricTagKeyFilter/index.tsx | 14 +- .../QuerySection/utils/getQueryKey.ts | 5 +- .../RightContainer/dataFormatCategories.ts | 4 +- .../NewWidget/RightContainer/styles.ts | 5 +- frontend/src/container/NewWidget/index.tsx | 4 +- .../AuthDomains/index.tsx | 22 +- .../EditMembersDetails/index.tsx | 5 +- .../InviteTeamMembers/index.tsx | 27 +- .../PendingInvitesContainer/index.tsx | 20 +- frontend/src/container/Trace/Graph/index.tsx | 12 +- frontend/src/container/Trace/Search/util.ts | 6 +- .../src/container/Trace/TraceTable/index.tsx | 11 +- frontend/src/container/TraceDetail/index.tsx | 5 + frontend/src/container/TraceDetail/utils.ts | 4 +- .../TriggeredAlerts/NoFilterTable.tsx | 6 +- frontend/src/hooks/useComponentPermission.ts | 5 +- frontend/src/lib/convertDateToAmAndPm.ts | 5 +- .../src/lib/convertToNanoSecondsToSecond.ts | 5 +- frontend/src/lib/covertIntoEpoc.ts | 5 +- frontend/src/lib/getChartData.ts | 33 +- .../lib/getStartAndEndTime/getMicroSeconds.ts | 5 +- frontend/src/lib/query/GetFormulaName.ts | 4 +- frontend/src/lib/query/GetQueryName.ts | 4 +- .../src/lib/query/convertObjectIntoParams.ts | 5 +- frontend/src/lib/resourceAttributes.ts | 24 +- .../src/pages/AlertChannelCreate/index.tsx | 4 +- frontend/src/pages/GettingStarted/index.tsx | 6 +- frontend/src/pages/Trace/index.tsx | 9 +- .../actions/dashboard/applySettingsToPanel.ts | 14 +- .../actions/dashboard/deleteDashboard.ts | 50 +-- .../store/actions/dashboard/deleteQuery.ts | 20 +- .../store/actions/dashboard/deleteWidget.ts | 82 ++--- .../actions/dashboard/getAllDashboard.ts | 44 ++- .../store/actions/dashboard/getDashboard.ts | 134 ++++---- .../store/actions/dashboard/saveDashboard.ts | 5 +- .../actions/dashboard/toggleAddWidget.ts | 18 +- .../store/actions/dashboard/toggleEditMode.ts | 12 +- .../actions/dashboard/updateDashboardTitle.ts | 64 ++-- .../store/actions/dashboard/updateQuery.ts | 22 +- .../dashboard/updatedDashboardVariables.ts | 50 +-- frontend/src/store/actions/global.ts | 34 +- .../store/actions/logs/addToSelectedField.ts | 16 +- frontend/src/store/actions/logs/getFields.ts | 30 +- frontend/src/store/actions/logs/getLogs.ts | 44 +-- .../store/actions/logs/getLogsAggregate.ts | 52 ++- .../store/actions/metrics/getInitialData.ts | 199 ++++++------ .../src/store/actions/metrics/getService.ts | 77 ++--- .../store/actions/metrics/resetInitialData.ts | 10 +- frontend/src/store/actions/serviceMap.ts | 48 +-- .../store/actions/trace/getInitialFilter.ts | 298 +++++++++--------- .../actions/trace/getInitialSpansAggregate.ts | 156 +++++---- .../store/actions/trace/selectTraceFilter.ts | 66 ++-- .../store/actions/trace/updateIsTagsError.ts | 16 +- .../actions/trace/updateTagPanelVisiblity.ts | 16 +- .../store/actions/trace/updateTagsSelected.ts | 16 +- frontend/src/store/actions/usage.ts | 24 +- frontend/src/utils/app.ts | 5 +- frontend/src/utils/spanToTree.ts | 5 +- frontend/src/utils/timeUtils.ts | 4 +- frontend/src/utils/toFixed.ts | 4 +- 95 files changed, 1526 insertions(+), 1684 deletions(-) diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 8f505c50e5..44cfdcb441 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -102,6 +102,8 @@ module.exports = { }, ], '@typescript-eslint/no-unused-vars': 'error', + 'func-style': ['error', 'declaration', { allowArrowFunctions: true }], + 'arrow-body-style': ['error', 'as-needed'], // eslint rules need to remove '@typescript-eslint/no-shadow': 'off', diff --git a/frontend/src/components/Graph/Plugin/Legend.ts b/frontend/src/components/Graph/Plugin/Legend.ts index 6d12812ff1..ec4d3f1d55 100644 --- a/frontend/src/components/Graph/Plugin/Legend.ts +++ b/frontend/src/components/Graph/Plugin/Legend.ts @@ -29,81 +29,79 @@ const getOrCreateLegendList = ( return listContainer; }; -export const legend = (id: string, isLonger: boolean): Plugin => { - return { - id: 'htmlLegend', - afterUpdate(chart): void { - const ul = getOrCreateLegendList(chart, id || 'legend', isLonger); +export const legend = (id: string, isLonger: boolean): Plugin => ({ + id: 'htmlLegend', + afterUpdate(chart): void { + const ul = getOrCreateLegendList(chart, id || 'legend', isLonger); - // Remove old legend items - while (ul.firstChild) { - ul.firstChild.remove(); - } + // Remove old legend items + while (ul.firstChild) { + ul.firstChild.remove(); + } - // Reuse the built-in legendItems generator - const items = get(chart, [ - 'options', - 'plugins', - 'legend', - 'labels', - 'generateLabels', - ]) - ? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])( - chart, - ) - : null; + // Reuse the built-in legendItems generator + const items = get(chart, [ + 'options', + 'plugins', + 'legend', + 'labels', + 'generateLabels', + ]) + ? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])( + chart, + ) + : null; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - items?.forEach((item: Record, index: number) => { - const li = document.createElement('li'); - li.style.alignItems = 'center'; - li.style.cursor = 'pointer'; - li.style.display = 'flex'; - li.style.marginLeft = '10px'; - // li.style.marginTop = '5px'; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + items?.forEach((item: Record, index: number) => { + const li = document.createElement('li'); + li.style.alignItems = 'center'; + li.style.cursor = 'pointer'; + li.style.display = 'flex'; + li.style.marginLeft = '10px'; + li.style.marginTop = '5px'; - li.onclick = (): void => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const { type } = chart.config; - if (type === 'pie' || type === 'doughnut') { - // Pie and doughnut charts only have a single dataset and visibility is per item - chart.toggleDataVisibility(index); - } else { - chart.setDatasetVisibility( - item.datasetIndex, - !chart.isDatasetVisible(item.datasetIndex), - ); - } - chart.update(); - }; - - // Color box - const boxSpan = document.createElement('span'); - boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`; - boxSpan.style.borderColor = `${item?.strokeStyle}`; - boxSpan.style.borderWidth = `${item.lineWidth}px`; - boxSpan.style.display = 'inline-block'; - boxSpan.style.minHeight = '0.75rem'; - boxSpan.style.marginRight = '0.5rem'; - boxSpan.style.minWidth = '0.75rem'; - boxSpan.style.borderRadius = '50%'; - - if (item.text) { - // Text - const textContainer = document.createElement('span'); - textContainer.style.margin = '0'; - textContainer.style.padding = '0'; - textContainer.style.textDecoration = item.hidden ? 'line-through' : ''; - - const text = document.createTextNode(item.text); - textContainer.appendChild(text); - - li.appendChild(boxSpan); - li.appendChild(textContainer); - ul.appendChild(li); + li.onclick = (): void => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const { type } = chart.config; + if (type === 'pie' || type === 'doughnut') { + // Pie and doughnut charts only have a single dataset and visibility is per item + chart.toggleDataVisibility(index); + } else { + chart.setDatasetVisibility( + item.datasetIndex, + !chart.isDatasetVisible(item.datasetIndex), + ); } - }); - }, - }; -}; + chart.update(); + }; + + // Color box + const boxSpan = document.createElement('span'); + boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`; + boxSpan.style.borderColor = `${item?.strokeStyle}`; + boxSpan.style.borderWidth = `${item.lineWidth}px`; + boxSpan.style.display = 'inline-block'; + boxSpan.style.minHeight = '20px'; + boxSpan.style.marginRight = '10px'; + boxSpan.style.minWidth = '20px'; + boxSpan.style.borderRadius = '50%'; + + if (item.text) { + // Text + const textContainer = document.createElement('span'); + textContainer.style.margin = '0'; + textContainer.style.padding = '0'; + textContainer.style.textDecoration = item.hidden ? 'line-through' : ''; + + const text = document.createTextNode(item.text); + textContainer.appendChild(text); + + li.appendChild(boxSpan); + li.appendChild(textContainer); + ul.appendChild(li); + } + }); + }, +}); diff --git a/frontend/src/components/Logs/LogItem/index.tsx b/frontend/src/components/Logs/LogItem/index.tsx index f6ee026e64..aa24cd7414 100644 --- a/frontend/src/components/Logs/LogItem/index.tsx +++ b/frontend/src/components/Logs/LogItem/index.tsx @@ -120,15 +120,15 @@ function LogItem({ logData }: LogItemProps): JSX.Element { {'}'}
- {map(selected, (field) => { - return isValidLogField(flattenLogData[field.name] as never) ? ( + {map(selected, (field) => + isValidLogField(flattenLogData[field.name] as never) ? ( - ) : null; - })} + ) : null, + )}
diff --git a/frontend/src/components/ReleaseNote/index.tsx b/frontend/src/components/ReleaseNote/index.tsx index 715eba724b..daede3a51f 100644 --- a/frontend/src/components/ReleaseNote/index.tsx +++ b/frontend/src/components/ReleaseNote/index.tsx @@ -48,9 +48,9 @@ function ReleaseNote({ path }: ReleaseNoteProps): JSX.Element | null { (state) => state.app, ); - const c = allComponentMap.find((item) => { - return item.match(path, currentVersion, userFlags); - }); + const c = allComponentMap.find((item) => + item.match(path, currentVersion, userFlags), + ); if (!c) { return null; diff --git a/frontend/src/components/TextToolTip/index.tsx b/frontend/src/components/TextToolTip/index.tsx index 60032ab5c9..7e6c04c6f1 100644 --- a/frontend/src/components/TextToolTip/index.tsx +++ b/frontend/src/components/TextToolTip/index.tsx @@ -6,18 +6,16 @@ import React from 'react'; function TextToolTip({ text, url }: TextToolTipProps): JSX.Element { return ( { - return ( -
- {`${text} `} - {url && ( - - here - - )} -
- ); - }} + overlay={(): JSX.Element => ( +
+ {`${text} `} + {url && ( + + here + + )} +
+ )} > diff --git a/frontend/src/components/TimePreferenceDropDown/styles.ts b/frontend/src/components/TimePreferenceDropDown/styles.ts index e2eeac983c..916d7a8ab4 100644 --- a/frontend/src/components/TimePreferenceDropDown/styles.ts +++ b/frontend/src/components/TimePreferenceDropDown/styles.ts @@ -8,7 +8,6 @@ export const TextContainer = styled.div` display: flex; > button { - margin-left: ${({ noButtonMargin }): string => { - return noButtonMargin ? '0' : '0.5rem'; - }} + margin-left: ${({ noButtonMargin }): string => + noButtonMargin ? '0' : '0.5rem'} `; diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index afb7517ae3..78db55123e 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -184,36 +184,34 @@ function AllErrors(): JSX.Element { confirm, placeholder, filterKey, - }: FilterDropdownExtendsProps) => { - return ( - - - - setSelectedKeys(e.target.value ? [e.target.value] : []) - } - allowClear - defaultValue={getDefaultFilterValue( - filterKey, - getUpdatedServiceName, - getUpdatedExceptionType, - )} - onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)} - /> - - - - ); - }, + }: FilterDropdownExtendsProps) => ( + + + + setSelectedKeys(e.target.value ? [e.target.value] : []) + } + allowClear + defaultValue={getDefaultFilterValue( + filterKey, + getUpdatedServiceName, + getUpdatedExceptionType, + )} + onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)} + /> + + + + ), [getUpdatedExceptionType, getUpdatedServiceName, handleSearch], ); diff --git a/frontend/src/container/AllError/utils.ts b/frontend/src/container/AllError/utils.ts index c9fe2096bd..c13cd8fd52 100644 --- a/frontend/src/container/AllError/utils.ts +++ b/frontend/src/container/AllError/utils.ts @@ -20,15 +20,14 @@ export const urlKey = { serviceName: 'serviceName', }; -export const isOrderParams = (orderBy: string | null): orderBy is OrderBy => { - return !!( +export const isOrderParams = (orderBy: string | null): orderBy is OrderBy => + !!( orderBy === 'serviceName' || orderBy === 'exceptionCount' || orderBy === 'lastSeen' || orderBy === 'firstSeen' || orderBy === 'exceptionType' ); -}; export const getOrder = (order: string | null): Order => { if (isOrder(order)) { @@ -82,12 +81,9 @@ export const getDefaultOrder = ( return undefined; }; -export const getNanoSeconds = (date: string): string => { - return ( - Math.floor(new Date(date).getTime() / 1e3).toString() + - String(Timestamp.fromString(date).getNano().toString()).padStart(9, '0') - ); -}; +export const getNanoSeconds = (date: string): string => + Math.floor(new Date(date).getTime() / 1e3).toString() + + String(Timestamp.fromString(date).getNano().toString()).padStart(9, '0'); export const getUpdatePageSize = (pageSize: string | null): number => { if (pageSize) { diff --git a/frontend/src/container/CreateAlertChannels/index.tsx b/frontend/src/container/CreateAlertChannels/index.tsx index fb5ea8a3f6..7600f00de3 100644 --- a/frontend/src/container/CreateAlertChannels/index.tsx +++ b/frontend/src/container/CreateAlertChannels/index.tsx @@ -78,16 +78,17 @@ function CreateAlertChannels({ [type, selectedConfig], ); - const prepareSlackRequest = useCallback(() => { - return { + const prepareSlackRequest = useCallback( + () => ({ api_url: selectedConfig?.api_url || '', channel: selectedConfig?.channel || '', name: selectedConfig?.name || '', send_resolved: true, text: selectedConfig?.text || '', title: selectedConfig?.title || '', - }; - }, [selectedConfig]); + }), + [selectedConfig], + ); const onSlackHandler = useCallback(async () => { setSavingState(true); diff --git a/frontend/src/container/EditAlertChannels/index.tsx b/frontend/src/container/EditAlertChannels/index.tsx index ef8f6a0a2e..0ced770e24 100644 --- a/frontend/src/container/EditAlertChannels/index.tsx +++ b/frontend/src/container/EditAlertChannels/index.tsx @@ -47,8 +47,8 @@ function EditAlertChannels({ setType(value as ChannelType); }, []); - const prepareSlackRequest = useCallback(() => { - return { + const prepareSlackRequest = useCallback( + () => ({ api_url: selectedConfig?.api_url || '', channel: selectedConfig?.channel || '', name: selectedConfig?.name || '', @@ -56,8 +56,9 @@ function EditAlertChannels({ text: selectedConfig?.text || '', title: selectedConfig?.title || '', id, - }; - }, [id, selectedConfig]); + }), + [id, selectedConfig], + ); const onSlackEditHandler = useCallback(async () => { setSavingState(true); @@ -143,8 +144,8 @@ function EditAlertChannels({ setSavingState(false); }, [prepareWebhookRequest, t, notifications, selectedConfig]); - const preparePagerRequest = useCallback(() => { - return { + const preparePagerRequest = useCallback( + () => ({ name: selectedConfig.name || '', routing_key: selectedConfig.routing_key, client: selectedConfig.client, @@ -157,8 +158,9 @@ function EditAlertChannels({ details: selectedConfig.details, detailsArray: JSON.parse(selectedConfig.details || '{}'), id, - }; - }, [id, selectedConfig]); + }), + [id, selectedConfig], + ); const onPagerEditHandler = useCallback(async () => { setSavingState(true); diff --git a/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts b/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts index 52ce2af4c8..2e2468dd16 100644 --- a/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts +++ b/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts @@ -32,6 +32,8 @@ export const rawQueryToIChQuery = ( // ClickHouseQueryBuilder format. The main difference is // use of rawQuery (in ClickHouseQueryBuilder) // and query (in alert builder) -export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => { - return { ...src, name: 'A', rawQuery: src.query }; -}; +export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => ({ + ...src, + name: 'A', + rawQuery: src.query, +}); diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/frontend/src/container/FormAlertRules/QuerySection.tsx index b5cf9574bd..a0fe8ac2b7 100644 --- a/frontend/src/container/FormAlertRules/QuerySection.tsx +++ b/frontend/src/container/FormAlertRules/QuerySection.tsx @@ -211,78 +211,70 @@ function QuerySection({ setFormulaQueries({ ...formulas }); }, [formulaQueries, setFormulaQueries]); - const renderPromqlUI = (): JSX.Element => { - return ( - - ); - }; + const renderPromqlUI = (): JSX.Element => ( + + ); - const renderChQueryUI = (): JSX.Element => { - return ; - }; + const renderChQueryUI = (): JSX.Element => ( + + ); - const renderFormulaButton = (): JSX.Element => { - return ( - }> - {t('button_formula')} - - ); - }; + const renderFormulaButton = (): JSX.Element => ( + }> + {t('button_formula')} + + ); - const renderQueryButton = (): JSX.Element => { - return ( - }> - {t('button_query')} - - ); - }; + const renderQueryButton = (): JSX.Element => ( + }> + {t('button_query')} + + ); - const renderMetricUI = (): JSX.Element => { - return ( -
- {metricQueries && - Object.keys(metricQueries).map((key: string) => { + const renderMetricUI = (): JSX.Element => ( +
+ {metricQueries && + Object.keys(metricQueries).map((key: string) => { + // todo(amol): need to handle this in fetch + const current = metricQueries[key]; + current.name = key; + + return ( + + ); + })} + + {queryCategory !== EQueryType.PROM && renderQueryButton()} +
+ {formulaQueries && + Object.keys(formulaQueries).map((key: string) => { // todo(amol): need to handle this in fetch - const current = metricQueries[key]; + const current = formulaQueries[key]; current.name = key; return ( - ); })} - - {queryCategory !== EQueryType.PROM && renderQueryButton()} -
- {formulaQueries && - Object.keys(formulaQueries).map((key: string) => { - // todo(amol): need to handle this in fetch - const current = formulaQueries[key]; - current.name = key; - - return ( - - ); - })} - {queryCategory === EQueryType.QUERY_BUILDER && - (!formulaQueries || Object.keys(formulaQueries).length === 0) && - metricQueries && - Object.keys(metricQueries).length > 0 && - renderFormulaButton()} -
+ {queryCategory === EQueryType.QUERY_BUILDER && + (!formulaQueries || Object.keys(formulaQueries).length === 0) && + metricQueries && + Object.keys(metricQueries).length > 0 && + renderFormulaButton()}
- ); - }; +
+ ); const handleRunQuery = (): void => { runQuery(); diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx index 968ce695e3..8bdf0382fc 100644 --- a/frontend/src/container/FormAlertRules/RuleOptions.tsx +++ b/frontend/src/container/FormAlertRules/RuleOptions.tsx @@ -38,106 +38,94 @@ function RuleOptions({ }); }; - const renderCompareOps = (): JSX.Element => { - return ( - { - const newOp = (value as string) || ''; + const renderCompareOps = (): JSX.Element => ( + { + const newOp = (value as string) || ''; - setAlertDef({ - ...alertDef, - condition: { - ...alertDef.condition, - op: newOp, - }, - }); - }} - > - - - - - - ); - }; + setAlertDef({ + ...alertDef, + condition: { + ...alertDef.condition, + op: newOp, + }, + }); + }} + > + + + + + + ); - const renderThresholdMatchOpts = (): JSX.Element => { - return ( - handleMatchOptChange(value)} - > - - - - - - ); - }; + const renderThresholdMatchOpts = (): JSX.Element => ( + handleMatchOptChange(value)} + > + + + + + + ); - const renderPromMatchOpts = (): JSX.Element => { - return ( - handleMatchOptChange(value)} - > - - - ); - }; + const renderPromMatchOpts = (): JSX.Element => ( + handleMatchOptChange(value)} + > + + + ); - const renderEvalWindows = (): JSX.Element => { - return ( - { - const ew = (value as string) || alertDef.evalWindow; - setAlertDef({ - ...alertDef, - evalWindow: ew, - }); - }} - > - {' '} - - - - - - - - ); - }; + const renderEvalWindows = (): JSX.Element => ( + { + const ew = (value as string) || alertDef.evalWindow; + setAlertDef({ + ...alertDef, + evalWindow: ew, + }); + }} + > + {' '} + + + + + + + + ); - const renderThresholdRuleOpts = (): JSX.Element => { - return ( - - - {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '} - {renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()} - - - ); - }; - const renderPromRuleOptions = (): JSX.Element => { - return ( - - - {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '} - {renderPromMatchOpts()} - - - ); - }; + const renderThresholdRuleOpts = (): JSX.Element => ( + + + {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '} + {renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()} + + + ); + const renderPromRuleOptions = (): JSX.Element => ( + + + {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '} + {renderPromMatchOpts()} + + + ); return ( <> diff --git a/frontend/src/container/FormAlertRules/UserGuide/index.tsx b/frontend/src/container/FormAlertRules/UserGuide/index.tsx index d24ac82cb2..33312a9fd7 100644 --- a/frontend/src/container/FormAlertRules/UserGuide/index.tsx +++ b/frontend/src/container/FormAlertRules/UserGuide/index.tsx @@ -15,154 +15,130 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element { // init namespace for translations const { t } = useTranslation('alerts'); - const renderStep1QB = (): JSX.Element => { - return ( - <> - {t('user_guide_qb_step1')} - - {t('user_guide_qb_step1a')} - {t('user_guide_qb_step1b')} - {t('user_guide_qb_step1c')} - {t('user_guide_qb_step1d')} - - - ); - }; - const renderStep2QB = (): JSX.Element => { - return ( - <> - {t('user_guide_qb_step2')} - - {t('user_guide_qb_step2a')} - {t('user_guide_qb_step2b')} - - - ); - }; + const renderStep1QB = (): JSX.Element => ( + <> + {t('user_guide_qb_step1')} + + {t('user_guide_qb_step1a')} + {t('user_guide_qb_step1b')} + {t('user_guide_qb_step1c')} + {t('user_guide_qb_step1d')} + + + ); + const renderStep2QB = (): JSX.Element => ( + <> + {t('user_guide_qb_step2')} + + {t('user_guide_qb_step2a')} + {t('user_guide_qb_step2b')} + + + ); - const renderStep3QB = (): JSX.Element => { - return ( - <> - {t('user_guide_qb_step3')} - - {t('user_guide_qb_step3a')} - {t('user_guide_qb_step3b')} - - - ); - }; + const renderStep3QB = (): JSX.Element => ( + <> + {t('user_guide_qb_step3')} + + {t('user_guide_qb_step3a')} + {t('user_guide_qb_step3b')} + + + ); - const renderGuideForQB = (): JSX.Element => { - return ( - <> - {renderStep1QB()} - {renderStep2QB()} - {renderStep3QB()} - - ); - }; - const renderStep1PQL = (): JSX.Element => { - return ( - <> - {t('user_guide_pql_step1')} - - {t('user_guide_pql_step1a')} - {t('user_guide_pql_step1b')} - - - ); - }; - const renderStep2PQL = (): JSX.Element => { - return ( - <> - {t('user_guide_pql_step2')} - - {t('user_guide_pql_step2a')} - {t('user_guide_pql_step2b')} - - - ); - }; + const renderGuideForQB = (): JSX.Element => ( + <> + {renderStep1QB()} + {renderStep2QB()} + {renderStep3QB()} + + ); + const renderStep1PQL = (): JSX.Element => ( + <> + {t('user_guide_pql_step1')} + + {t('user_guide_pql_step1a')} + {t('user_guide_pql_step1b')} + + + ); + const renderStep2PQL = (): JSX.Element => ( + <> + {t('user_guide_pql_step2')} + + {t('user_guide_pql_step2a')} + {t('user_guide_pql_step2b')} + + + ); - const renderStep3PQL = (): JSX.Element => { - return ( - <> - {t('user_guide_pql_step3')} - - {t('user_guide_pql_step3a')} - {t('user_guide_pql_step3b')} - - - ); - }; + const renderStep3PQL = (): JSX.Element => ( + <> + {t('user_guide_pql_step3')} + + {t('user_guide_pql_step3a')} + {t('user_guide_pql_step3b')} + + + ); - const renderGuideForPQL = (): JSX.Element => { - return ( - <> - {renderStep1PQL()} - {renderStep2PQL()} - {renderStep3PQL()} - - ); - }; + const renderGuideForPQL = (): JSX.Element => ( + <> + {renderStep1PQL()} + {renderStep2PQL()} + {renderStep3PQL()} + + ); - const renderStep1CH = (): JSX.Element => { - return ( - <> - {t('user_guide_ch_step1')} - - - , - ]} - /> - - {t('user_guide_ch_step1b')} - - - ); - }; - const renderStep2CH = (): JSX.Element => { - return ( - <> - {t('user_guide_ch_step2')} - - {t('user_guide_ch_step2a')} - {t('user_guide_ch_step2b')} - - - ); - }; + const renderStep1CH = (): JSX.Element => ( + <> + {t('user_guide_ch_step1')} + + + , + ]} + /> + + {t('user_guide_ch_step1b')} + + + ); + const renderStep2CH = (): JSX.Element => ( + <> + {t('user_guide_ch_step2')} + + {t('user_guide_ch_step2a')} + {t('user_guide_ch_step2b')} + + + ); - const renderStep3CH = (): JSX.Element => { - return ( - <> - {t('user_guide_ch_step3')} - - {t('user_guide_ch_step3a')} - {t('user_guide_ch_step3b')} - - - ); - }; + const renderStep3CH = (): JSX.Element => ( + <> + {t('user_guide_ch_step3')} + + {t('user_guide_ch_step3a')} + {t('user_guide_ch_step3b')} + + + ); - const renderGuideForCH = (): JSX.Element => { - return ( - <> - {renderStep1CH()} - {renderStep2CH()} - {renderStep3CH()} - - ); - }; + const renderGuideForCH = (): JSX.Element => ( + <> + {renderStep1CH()} + {renderStep2CH()} + {renderStep3CH()} + + ); return ( diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx index 98591d497b..c96b02719d 100644 --- a/frontend/src/container/FormAlertRules/index.tsx +++ b/frontend/src/container/FormAlertRules/index.tsx @@ -436,41 +436,35 @@ function FormAlertRules({ ); - const renderQBChartPreview = (): JSX.Element => { - return ( - } - name="" - threshold={alertDef.condition?.target} - query={debouncedStagedQuery} - selectedInterval={toChartInterval(alertDef.evalWindow)} - /> - ); - }; + const renderQBChartPreview = (): JSX.Element => ( + } + name="" + threshold={alertDef.condition?.target} + query={debouncedStagedQuery} + selectedInterval={toChartInterval(alertDef.evalWindow)} + /> + ); - const renderPromChartPreview = (): JSX.Element => { - return ( - } - name="Chart Preview" - threshold={alertDef.condition?.target} - query={debouncedStagedQuery} - /> - ); - }; + const renderPromChartPreview = (): JSX.Element => ( + } + name="Chart Preview" + threshold={alertDef.condition?.target} + query={debouncedStagedQuery} + /> + ); - const renderChQueryChartPreview = (): JSX.Element => { - return ( - } - name="Chart Preview" - threshold={alertDef.condition?.target} - query={manualStagedQuery} - userQueryKey={runQueryId} - selectedInterval={toChartInterval(alertDef.evalWindow)} - /> - ); - }; + const renderChQueryChartPreview = (): JSX.Element => ( + } + name="Chart Preview" + threshold={alertDef.condition?.target} + query={manualStagedQuery} + userQueryKey={runQueryId} + selectedInterval={toChartInterval(alertDef.evalWindow)} + /> + ); return ( <> {Element} diff --git a/frontend/src/container/FormAlertRules/labels/index.tsx b/frontend/src/container/FormAlertRules/labels/index.tsx index f4e91caa02..60ca08c052 100644 --- a/frontend/src/container/FormAlertRules/labels/index.tsx +++ b/frontend/src/container/FormAlertRules/labels/index.tsx @@ -119,17 +119,15 @@ function LabelSelect({ {queries.length > 0 && map( queries, - (query): JSX.Element => { - return ( - - ); - }, + (query): JSX.Element => ( + + ), )}
- {map(staging, (item) => { - return {item}; - })} + {map(staging, (item) => ( + {item} + ))}
diff --git a/frontend/src/container/FormAlertRules/utils.ts b/frontend/src/container/FormAlertRules/utils.ts index f759d0e37e..35a5eb158c 100644 --- a/frontend/src/container/FormAlertRules/utils.ts +++ b/frontend/src/container/FormAlertRules/utils.ts @@ -42,17 +42,15 @@ export const toMetricQueries = (b: IBuilderQueries): IMetricQueries => { export const toIMetricsBuilderQuery = ( q: IMetricQuery, -): IMetricsBuilderQuery => { - return { - name: q.name, - metricName: q.metricName, - tagFilters: q.tagFilters, - groupBy: q.groupBy, - aggregateOperator: q.aggregateOperator, - disabled: q.disabled, - legend: q.legend, - }; -}; +): IMetricsBuilderQuery => ({ + name: q.name, + metricName: q.metricName, + tagFilters: q.tagFilters, + groupBy: q.groupBy, + aggregateOperator: q.aggregateOperator, + disabled: q.disabled, + legend: q.legend, +}); export const prepareBuilderQueries = ( m: IMetricQueries, diff --git a/frontend/src/container/GantChart/utils.ts b/frontend/src/container/GantChart/utils.ts index c91564b3e2..0421fd40bd 100644 --- a/frontend/src/container/GantChart/utils.ts +++ b/frontend/src/container/GantChart/utils.ts @@ -112,21 +112,19 @@ export const getNodeById = ( const getSpanWithoutChildren = ( span: ITraceTree, -): Omit => { - return { - id: span.id, - name: span.name, - parent: span.parent, - serviceColour: span.serviceColour, - serviceName: span.serviceName, - startTime: span.startTime, - tags: span.tags, - time: span.time, - value: span.value, - event: span.event, - hasError: span.hasError, - }; -}; +): Omit => ({ + id: span.id, + name: span.name, + parent: span.parent, + serviceColour: span.serviceColour, + serviceName: span.serviceName, + startTime: span.startTime, + tags: span.tags, + time: span.time, + value: span.value, + event: span.event, + hasError: span.hasError, +}); export const isSpanPresentInSearchString = ( searchedString: string, diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx index fe9d5e08bc..b9c8ba7f38 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx @@ -81,25 +81,22 @@ function FullView({ const queryLength = widget.query.filter((e) => e.query.length !== 0); const response = useQueries( - queryLength.map((query) => { - return { - // eslint-disable-next-line @typescript-eslint/explicit-function-return-type - queryFn: () => { - return getQueryResult({ - end: queryMinMax.max.toString(), - query: query.query, - start: queryMinMax.min.toString(), - step: `${getStep({ - start: queryMinMax.min, - end: queryMinMax.max, - inputFormat: 's', - })}`, - }); - }, - queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`, - retryOnMount: false, - }; - }), + queryLength.map((query) => ({ + // eslint-disable-next-line @typescript-eslint/explicit-function-return-type + queryFn: () => + getQueryResult({ + end: queryMinMax.max.toString(), + query: query.query, + start: queryMinMax.min.toString(), + step: `${getStep({ + start: queryMinMax.min, + end: queryMinMax.max, + inputFormat: 's', + })}`, + }), + queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`, + retryOnMount: false, + })), ); const isError = diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx index 1a45b8174d..912b3d9c62 100644 --- a/frontend/src/container/GridGraphLayout/Graph/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx @@ -101,41 +101,35 @@ function GridCardGraph({ onToggleModal(setDeleteModal); }, [deleteWidget, layout, onToggleModal, setLayout, widget]); - const getModals = (): JSX.Element => { - return ( - <> - onToggleModal(setDeleteModal)} - open={deleteModal} - title="Delete" - height="10vh" - onOk={onDeleteHandler} - centered - > - Are you sure you want to delete this widget - + const getModals = (): JSX.Element => ( + <> + onToggleModal(setDeleteModal)} + open={deleteModal} + title="Delete" + height="10vh" + onOk={onDeleteHandler} + centered + > + Are you sure you want to delete this widget + - onToggleModal(setModal)} - width="85%" - destroyOnClose - > - - - - - - ); - }; + onToggleModal(setModal)} + width="85%" + destroyOnClose + > + + + + + + ); const handleOnView = (): void => { onToggleModal(setModal); diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 07f8f7664a..1f4d919f23 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -110,13 +110,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { return ( <> - {withOutSeverityKeys.map((e) => { - return ( - - {e}: {value[e]} - - ); - })} + {withOutSeverityKeys.map((e) => ( + + {e}: {value[e]} + + ))} ); }, @@ -128,22 +126,20 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { title: 'Action', dataIndex: 'id', key: 'action', - render: (id: GettableAlert['id'], record): JSX.Element => { - return ( - <> - + render: (id: GettableAlert['id'], record): JSX.Element => ( + <> + - onEditHandler(id.toString())} - type="link" - > - Edit - + onEditHandler(id.toString())} + type="link" + > + Edit + - - - ); - }, + + + ), }); } diff --git a/frontend/src/container/ListAlertRules/ToggleAlertState.tsx b/frontend/src/container/ListAlertRules/ToggleAlertState.tsx index 9b367ea891..69c888e7ab 100644 --- a/frontend/src/container/ListAlertRules/ToggleAlertState.tsx +++ b/frontend/src/container/ListAlertRules/ToggleAlertState.tsx @@ -40,8 +40,8 @@ function ToggleAlertState({ }); if (response.statusCode === 200) { - setData((state) => { - return state.map((alert) => { + setData((state) => + state.map((alert) => { if (alert.id === id) { return { ...alert, @@ -50,8 +50,8 @@ function ToggleAlertState({ }; } return alert; - }); - }); + }), + ); setAPIStatus((state) => ({ ...state, diff --git a/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx b/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx index 65d6509801..b8e16cd4db 100644 --- a/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx +++ b/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx @@ -184,16 +184,14 @@ function SearchFilter({ {optionsData.options && Array.isArray(optionsData.options) && optionsData.options.map( - (optionItem): JSX.Element => { - return ( - - {optionItem.name} - - ); - }, + (optionItem): JSX.Element => ( + + {optionItem.name} + + ), )} )} diff --git a/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts b/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts index 6487ccd789..d69cdfe8fa 100644 --- a/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts +++ b/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts @@ -19,9 +19,7 @@ export const convertQueriesToURLQuery = ( export const convertURLQueryStringToQuery = ( queryString: string, -): IQueryStructure[] => { - return JSON.parse(decode(queryString)); -}; +): IQueryStructure[] => JSON.parse(decode(queryString)); export const resolveOperator = ( result: unknown, diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx index 26acfa4ffc..5058be2fe1 100644 --- a/frontend/src/container/LogDetailedView/TableView.tsx +++ b/frontend/src/container/LogDetailedView/TableView.tsx @@ -30,13 +30,11 @@ function TableView({ logData }: TableViewProps): JSX.Element | null { flattenLogData !== null && Object.keys(flattenLogData) .filter((field) => fieldSearchFilter(field, fieldSearchInput)) - .map((key) => { - return { - key, - field: key, - value: JSON.stringify(flattenLogData[key]), - }; - }); + .map((key) => ({ + key, + field: key, + value: JSON.stringify(flattenLogData[key]), + })); if (!dataSource) { return null; diff --git a/frontend/src/container/Login/index.tsx b/frontend/src/container/Login/index.tsx index 61276ea3c3..2b46ffcf45 100644 --- a/frontend/src/container/Login/index.tsx +++ b/frontend/src/container/Login/index.tsx @@ -157,18 +157,16 @@ function Login({ } }; - const renderSAMLAction = (): JSX.Element => { - return ( - - ); - }; + const renderSAMLAction = (): JSX.Element => ( + + ); const renderOnSsoError = (): JSX.Element | null => { if (!ssoerror) { diff --git a/frontend/src/container/LogsAggregate/index.tsx b/frontend/src/container/LogsAggregate/index.tsx index 66a16f9ad3..5084f2fdca 100644 --- a/frontend/src/container/LogsAggregate/index.tsx +++ b/frontend/src/container/LogsAggregate/index.tsx @@ -77,8 +77,8 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element { // eslint-disable-next-line react-hooks/exhaustive-deps }, [getLogsAggregate, maxTime, minTime, liveTail]); - const graphData = useMemo(() => { - return { + const graphData = useMemo( + () => ({ labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)), datasets: [ { @@ -86,8 +86,9 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element { backgroundColor: blue[4], }, ], - }; - }, [logsAggregate]); + }), + [logsAggregate], + ); return ( diff --git a/frontend/src/container/LogsFilters/styles.ts b/frontend/src/container/LogsFilters/styles.ts index 56ffaebafe..e24167e00d 100644 --- a/frontend/src/container/LogsFilters/styles.ts +++ b/frontend/src/container/LogsFilters/styles.ts @@ -25,9 +25,7 @@ export const Field = styled.div<{ isDarkMode: boolean }>` justify-content: space-between; align-items: center; &:hover { - background: ${({ isDarkMode }): string => { - return isDarkMode ? grey[7] : '#ddd'; - }}; + background: ${({ isDarkMode }): string => (isDarkMode ? grey[7] : '#ddd')}; } `; diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts index bf7a4a0329..4654ebf20f 100644 --- a/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts +++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts @@ -44,46 +44,44 @@ export const getQueryBuilderQuerieswithFormula = ({ }: BuilderQuerieswithFormulaProps): { formulas: IMetricsBuilderFormula[]; queryBuilder: IMetricsBuilderQuery[]; -} => { - return { - formulas: [ - { - disabled: false, - expression, - name: 'F1', - legend: legendFormula, +} => ({ + formulas: [ + { + disabled: false, + expression, + name: 'F1', + legend: legendFormula, + }, + ], + queryBuilder: [ + { + aggregateOperator: 18, + disabled, + groupBy, + legend, + metricName: metricNameA, + name: 'A', + reduceTo: 1, + tagFilters: { + items: additionalItemsA, + op: 'AND', }, - ], - queryBuilder: [ - { - aggregateOperator: 18, - disabled, - groupBy, - legend, - metricName: metricNameA, - name: 'A', - reduceTo: 1, - tagFilters: { - items: additionalItemsA, - op: 'AND', - }, + }, + { + aggregateOperator: 18, + disabled, + groupBy, + legend, + metricName: metricNameB, + name: 'B', + reduceTo: 1, + tagFilters: { + items: additionalItemsB, + op: 'AND', }, - { - aggregateOperator: 18, - disabled, - groupBy, - legend, - metricName: metricNameB, - name: 'B', - reduceTo: 1, - tagFilters: { - items: additionalItemsB, - op: 'AND', - }, - }, - ], - }; -}; + }, + ], +}); interface BuilderQueriesProps { metricName: string; diff --git a/frontend/src/container/MetricsApplication/ResourceAttributesFilter/index.tsx b/frontend/src/container/MetricsApplication/ResourceAttributesFilter/index.tsx index 59179d2c6e..b8bed255f7 100644 --- a/frontend/src/container/MetricsApplication/ResourceAttributesFilter/index.tsx +++ b/frontend/src/container/MetricsApplication/ResourceAttributesFilter/index.tsx @@ -164,24 +164,20 @@ function ResourceAttributesFilter(): JSX.Element | null { > {map( queries, - (query): JSX.Element => { - return ( - - ); - }, + (query): JSX.Element => ( + + ), )} - {map(staging, (item, idx) => { - return ( - - {idx === 0 ? convertMetricKeyToTrace(item) : item} - - ); - })} + {map(staging, (item, idx) => ( + + {idx === 0 ? convertMetricKeyToTrace(item) : item} + + ))}
{!disabled && ( )} {errorMessage && ( diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts index 38d9094dcc..1ee8680391 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts @@ -2,12 +2,10 @@ import { EAggregateOperator } from 'types/common/dashboard'; export const AggregateFunctions = Object.keys(EAggregateOperator) .filter((key) => Number.isNaN(parseInt(key, 10))) - .map((key) => { - return { - label: key, - value: EAggregateOperator[key as keyof typeof EAggregateOperator], - }; - }); + .map((key) => ({ + label: key, + value: EAggregateOperator[key as keyof typeof EAggregateOperator], + })); export const TagKeyOperator = [ { label: 'In', value: 'IN' }, diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx index dd27ca04a1..d25c4e73dc 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx @@ -154,17 +154,15 @@ function MetricTagKeyFilter({ {queries.length > 0 && map( queries, - (query): JSX.Element => { - return ( - - ); - }, + (query): JSX.Element => ( + + ), )}
- {map(staging, (item) => { - return {item}; - })} + {map(staging, (item) => ( + {item} + ))}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/getQueryKey.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/getQueryKey.ts index b095621ec8..88b6eeb27a 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/getQueryKey.ts +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/utils/getQueryKey.ts @@ -4,8 +4,7 @@ import { EQueryTypeToQueryKeyMapping } from '../types'; export const getQueryKey = ( queryCategory: EQueryType, -): EQueryTypeToQueryKeyMapping => { - return EQueryTypeToQueryKeyMapping[ +): EQueryTypeToQueryKeyMapping => + EQueryTypeToQueryKeyMapping[ EQueryType[queryCategory] as keyof typeof EQueryTypeToQueryKeyMapping ]; -}; diff --git a/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts b/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts index fce3f9361c..fcf5aea58a 100644 --- a/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts +++ b/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts @@ -383,7 +383,5 @@ export const dataTypeCategories = [ ]; export const flattenedCategories = flattenDeep( - dataTypeCategories.map((category) => { - return category.formats; - }), + dataTypeCategories.map((category) => category.formats), ); diff --git a/frontend/src/container/NewWidget/RightContainer/styles.ts b/frontend/src/container/NewWidget/RightContainer/styles.ts index c30a38eeb3..93e5e46899 100644 --- a/frontend/src/container/NewWidget/RightContainer/styles.ts +++ b/frontend/src/container/NewWidget/RightContainer/styles.ts @@ -30,9 +30,8 @@ export const TextContainer = styled.div` margin-bottom: 1rem; > button { - margin-left: ${({ noButtonMargin }): string => { - return noButtonMargin ? '0' : '0.5rem'; - }} + margin-left: ${({ noButtonMargin }): string => + noButtonMargin ? '0' : '0.5rem'} `; export const NullButtonContainer = styled.div` diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 0530212e18..269d6e3666 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -57,9 +57,7 @@ function NewWidget({ const { search } = useLocation(); - const query = useMemo(() => { - return new URLSearchParams(search); - }, [search]); + const query = useMemo(() => new URLSearchParams(search), [search]); const { dashboardId } = useParams(); diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx index 448961dcec..0ad03c0f7e 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx @@ -231,18 +231,16 @@ function AuthDomains(): JSX.Element { title: 'Action', dataIndex: 'action', key: 'action', - render: (_, record): JSX.Element => { - return ( - - ); - }, + render: (_, record): JSX.Element => ( + + ), }, ]; diff --git a/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx b/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx index 17ce040488..378ec91c47 100644 --- a/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx +++ b/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx @@ -26,9 +26,8 @@ function EditMembersDetails({ const [isLoading, setIsLoading] = useState(false); const [state, copyToClipboard] = useCopyToClipboard(); - const getPasswordLink = (token: string): string => { - return `${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`; - }; + const getPasswordLink = (token: string): string => + `${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`; const onChangeHandler = useCallback( (setFunc: React.Dispatch>, value: string) => { diff --git a/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx b/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx index 6a4910de59..42d22e479a 100644 --- a/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx +++ b/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx @@ -11,8 +11,8 @@ const { Option } = Select; function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element { const { t } = useTranslation('organizationsettings'); - useEffect(() => { - return (): void => { + useEffect( + () => (): void => { setAllMembers([ { email: '', @@ -20,8 +20,9 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element { role: 'VIEWER', }, ]); - }; - }, [setAllMembers]); + }, + [setAllMembers], + ); const onAddHandler = (): void => { setAllMembers((state) => [ @@ -36,16 +37,14 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element { const onChangeHandler = useCallback( (value: string, index: number, type: string): void => { - setAllMembers((prev) => { - return [ - ...prev.slice(0, index), - { - ...prev[index], - [type]: value, - }, - ...prev.slice(index, prev.length - 1), - ]; - }); + setAllMembers((prev) => [ + ...prev.slice(0, index), + { + ...prev[index], + [type]: value, + }, + ...prev.slice(index, prev.length - 1), + ]); }, [setAllMembers], ); diff --git a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx index a662df6e83..2316bab5e0 100644 --- a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx +++ b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx @@ -63,15 +63,17 @@ function PendingInvitesContainer(): JSX.Element { const { hash } = useLocation(); - const getParsedInviteData = useCallback((payload: PayloadProps = []) => { - return payload?.map((data) => ({ - key: data.createdAt, - name: data.name, - email: data.email, - accessLevel: data.role, - inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`, - })); - }, []); + const getParsedInviteData = useCallback( + (payload: PayloadProps = []) => + payload?.map((data) => ({ + key: data.createdAt, + name: data.name, + email: data.email, + accessLevel: data.role, + inviteLink: `${window.location.origin}${ROUTES.SIGN_UP}?token=${data.token}`, + })), + [], + ); useEffect(() => { if (hash === INVITE_MEMBERS_HASH) { diff --git a/frontend/src/container/Trace/Graph/index.tsx b/frontend/src/container/Trace/Graph/index.tsx index 56d2d310a9..262c5bf7a3 100644 --- a/frontend/src/container/Trace/Graph/index.tsx +++ b/frontend/src/container/Trace/Graph/index.tsx @@ -20,11 +20,13 @@ function TraceGraph(): JSX.Element { const { loading, error, errorMessage, payload } = spansGraph; - const ChartData = useMemo(() => { - return selectedGroupBy.length === 0 - ? getChartData(payload) - : getChartDataforGroupBy(payload); - }, [payload, selectedGroupBy]); + const ChartData = useMemo( + () => + selectedGroupBy.length === 0 + ? getChartData(payload) + : getChartDataforGroupBy(payload), + [payload, selectedGroupBy], + ); if (error) { return ( diff --git a/frontend/src/container/Trace/Search/util.ts b/frontend/src/container/Trace/Search/util.ts index cda64d9b72..1e6dda96ca 100644 --- a/frontend/src/container/Trace/Search/util.ts +++ b/frontend/src/container/Trace/Search/util.ts @@ -77,9 +77,9 @@ export const parseTagsToQuery = (tags: Tags): PayloadProps => { isError = true; } - return `${Key[0]} ${Operator} (${Values.map((e) => { - return `"${e.replaceAll(/"/g, '')}"`; - }).join(',')})`; + return `${Key[0]} ${Operator} (${Values.map( + (e) => `"${e.replaceAll(/"/g, '')}"`, + ).join(',')})`; }) .join(' AND '); diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index a4df58231f..dbd9ffbe9c 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/frontend/src/container/Trace/TraceTable/index.tsx @@ -48,17 +48,16 @@ function TraceTable(): JSX.Element { type TableType = FlatArray; - const getLink = (record: TableType): string => { - return `${ROUTES.TRACE}/${record.traceID}${formUrlParams({ + const getLink = (record: TableType): string => + `${ROUTES.TRACE}/${record.traceID}${formUrlParams({ spanId: record.spanID, levelUp: 0, levelDown: 0, })}`; - }; - const getValue = (value: string): JSX.Element => { - return {value}; - }; + const getValue = (value: string): JSX.Element => ( + {value} + ); const getHttpMethodOrStatus = ( value: TableType['statusCode'], diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx index d433a12913..1b1791016e 100644 --- a/frontend/src/container/TraceDetail/index.tsx +++ b/frontend/src/container/TraceDetail/index.tsx @@ -100,6 +100,11 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element { [activeSelectedId, treesData], ); + // const onSearchHandler = (value: string) => { + // setSearchSpanString(value); + // setTreeData(spanToTreeUtil(response[0].events)); + // }; + const onFocusSelectedSpanHandler = (): void => { const treeNode = getNodeById(activeSelectedId, tree); diff --git a/frontend/src/container/TraceDetail/utils.ts b/frontend/src/container/TraceDetail/utils.ts index b017202e8d..1e978f28ae 100644 --- a/frontend/src/container/TraceDetail/utils.ts +++ b/frontend/src/container/TraceDetail/utils.ts @@ -49,9 +49,7 @@ export const INTERVAL_UNITS: IIntervalUnit[] = [ export const resolveTimeFromInterval = ( intervalTime: number, intervalUnit: IIntervalUnit, -): number => { - return intervalTime * intervalUnit.multiplier; -}; +): number => intervalTime * intervalUnit.multiplier; export const convertTimeToRelevantUnit = ( intervalTime: number, diff --git a/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx b/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx index ac4e45131a..ff3bf45185 100644 --- a/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx +++ b/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx @@ -52,9 +52,9 @@ function NoFilterTable({ return ( <> - {withOutSeverityKeys.map((e) => { - return {`${e} : ${labels[e]}`}; - })} + {withOutSeverityKeys.map((e) => ( + {`${e} : ${labels[e]}`} + ))} ); }, diff --git a/frontend/src/hooks/useComponentPermission.ts b/frontend/src/hooks/useComponentPermission.ts index 5294dd3f05..d439ef4173 100644 --- a/frontend/src/hooks/useComponentPermission.ts +++ b/frontend/src/hooks/useComponentPermission.ts @@ -7,9 +7,8 @@ const useComponentPermission = ( role: ROLES | null, ): boolean[] => { const getComponentPermission = useCallback( - (component: ComponentTypes): boolean => { - return !!componentPermission[component].find((roles) => role === roles); - }, + (component: ComponentTypes): boolean => + !!componentPermission[component].find((roles) => role === roles), [role], ); diff --git a/frontend/src/lib/convertDateToAmAndPm.ts b/frontend/src/lib/convertDateToAmAndPm.ts index 358a3f2667..7822b062d4 100644 --- a/frontend/src/lib/convertDateToAmAndPm.ts +++ b/frontend/src/lib/convertDateToAmAndPm.ts @@ -1,10 +1,9 @@ -const convertDateToAmAndPm = (date: Date): string => { - return date.toLocaleString('en-US', { +const convertDateToAmAndPm = (date: Date): string => + date.toLocaleString('en-US', { hour: '2-digit', minute: 'numeric', second: 'numeric', hour12: true, }); -}; export default convertDateToAmAndPm; diff --git a/frontend/src/lib/convertToNanoSecondsToSecond.ts b/frontend/src/lib/convertToNanoSecondsToSecond.ts index 6284b771f0..8331bf3190 100644 --- a/frontend/src/lib/convertToNanoSecondsToSecond.ts +++ b/frontend/src/lib/convertToNanoSecondsToSecond.ts @@ -1,5 +1,4 @@ -const convertToNanoSecondsToSecond = (number: number): string => { - return parseFloat((number / 1000000).toString()).toFixed(2); -}; +const convertToNanoSecondsToSecond = (number: number): string => + parseFloat((number / 1000000).toString()).toFixed(2); export default convertToNanoSecondsToSecond; diff --git a/frontend/src/lib/covertIntoEpoc.ts b/frontend/src/lib/covertIntoEpoc.ts index 60385c7e76..5c3877d653 100644 --- a/frontend/src/lib/covertIntoEpoc.ts +++ b/frontend/src/lib/covertIntoEpoc.ts @@ -1,5 +1,4 @@ -const convertIntoEpoc = (number: number): string => { - return number.toString().split('.').join('').toString(); -}; +const convertIntoEpoc = (number: number): string => + number.toString().split('.').join('').toString(); export default convertIntoEpoc; diff --git a/frontend/src/lib/getChartData.ts b/frontend/src/lib/getChartData.ts index 9f5c0c1a61..97e16dd895 100644 --- a/frontend/src/lib/getChartData.ts +++ b/frontend/src/lib/getChartData.ts @@ -17,8 +17,8 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => { const labels = Array.from(uniqueTimeLabels).sort((a, b) => a - b); const response = queryData.map( - ({ queryData, query: queryG, legend: legendG }) => { - return queryData.map((e) => { + ({ queryData, query: queryG, legend: legendG }) => + queryData.map((e) => { const { values = [], metric, legend, queryName } = e || {}; const labelNames = getLabelName( metric, @@ -35,9 +35,7 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => { // Fill the missing data with null const filledDataValues = Array.from(labels).map((e) => { const td1 = new Date(parseInt(convertIntoEpoc(e * 1000), 10)); - const data = dataValue.find((e1) => { - return e1.first.getTime() === td1.getTime(); - }); + const data = dataValue.find((e1) => e1.first.getTime() === td1.getTime()); return ( data || { first: new Date(parseInt(convertIntoEpoc(e * 1000), 10)), @@ -51,8 +49,7 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => { first: filledDataValues.map((e) => e.first), second: filledDataValues.map((e) => e.second), }; - }); - }, + }), ); const allLabels = response .map((e) => e.map((e) => e.label)) @@ -63,18 +60,16 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => { .reduce((a, b) => [...a, ...b], []); return { - datasets: alldata.map((e, index) => { - return { - data: e, - label: allLabels[index], - borderWidth: 1.5, - spanGaps: true, - animations: false, - borderColor: colors[index % colors.length] || 'red', - showLine: true, - pointRadius: 0, - }; - }), + datasets: alldata.map((e, index) => ({ + data: e, + label: allLabels[index], + borderWidth: 1.5, + spanGaps: true, + animations: false, + borderColor: colors[index % colors.length] || 'red', + showLine: true, + pointRadius: 0, + })), labels: response .map((e) => e.map((e) => e.first)) .reduce((a, b) => [...a, ...b], [])[0], diff --git a/frontend/src/lib/getStartAndEndTime/getMicroSeconds.ts b/frontend/src/lib/getStartAndEndTime/getMicroSeconds.ts index 8593ffb7de..36a528f506 100644 --- a/frontend/src/lib/getStartAndEndTime/getMicroSeconds.ts +++ b/frontend/src/lib/getStartAndEndTime/getMicroSeconds.ts @@ -1,6 +1,5 @@ -const getMicroSeconds = ({ time }: GetMicroSecondsProps): string => { - return (time / 1000).toString(); -}; +const getMicroSeconds = ({ time }: GetMicroSecondsProps): string => + (time / 1000).toString(); interface GetMicroSecondsProps { time: number; diff --git a/frontend/src/lib/query/GetFormulaName.ts b/frontend/src/lib/query/GetFormulaName.ts index a02ed45797..9eea375b82 100644 --- a/frontend/src/lib/query/GetFormulaName.ts +++ b/frontend/src/lib/query/GetFormulaName.ts @@ -11,9 +11,7 @@ function GetFormulaName( return null; } const formulasNameNumbered = sortBy( - formulas.map(({ name }: { name: string }) => { - return parseInt(name.slice(1), 10); - }), + formulas.map(({ name }: { name: string }) => parseInt(name.slice(1), 10)), (e) => e, ); diff --git a/frontend/src/lib/query/GetQueryName.ts b/frontend/src/lib/query/GetQueryName.ts index 94806ba359..ee5a52e5e3 100644 --- a/frontend/src/lib/query/GetQueryName.ts +++ b/frontend/src/lib/query/GetQueryName.ts @@ -6,9 +6,7 @@ function GetQueryName(queries: { name: string }[] = []): string | null { if (queries.length === MAX_QUERIES) { return null; } - const sortedQueries = sortBy(queries, (q) => { - return q.name; - }); + const sortedQueries = sortBy(queries, (q) => q.name); let queryIteratorIdx = 0; diff --git a/frontend/src/lib/query/convertObjectIntoParams.ts b/frontend/src/lib/query/convertObjectIntoParams.ts index 15bbed2c9c..09842ee31e 100644 --- a/frontend/src/lib/query/convertObjectIntoParams.ts +++ b/frontend/src/lib/query/convertObjectIntoParams.ts @@ -1,8 +1,8 @@ const convertObjectIntoParams = ( props: Record, stringify = false, -): string => { - return Object.keys(props) +): string => + Object.keys(props) .map( (e) => `${e}=${ @@ -10,6 +10,5 @@ const convertObjectIntoParams = ( }`, ) .join('&'); -}; export default convertObjectIntoParams; diff --git a/frontend/src/lib/resourceAttributes.ts b/frontend/src/lib/resourceAttributes.ts index d00d1b6c19..790877f74d 100644 --- a/frontend/src/lib/resourceAttributes.ts +++ b/frontend/src/lib/resourceAttributes.ts @@ -23,25 +23,21 @@ export const convertTraceKeyToMetric = (key: string): string => { return `resource_${splittedKey.join('_')}`; }; -export const convertOperatorLabelToMetricOperator = (label: string): string => { - return ( - OperatorConversions.find((operator) => operator.label === label) - ?.metricValue || '' - ); -}; +export const convertOperatorLabelToMetricOperator = (label: string): string => + OperatorConversions.find((operator) => operator.label === label) + ?.metricValue || ''; export const convertOperatorLabelToTraceOperator = ( label: string, -): OperatorValues => { - return OperatorConversions.find((operator) => operator.label === label) +): OperatorValues => + OperatorConversions.find((operator) => operator.label === label) ?.traceValue as OperatorValues; -}; export const convertRawQueriesToTraceSelectedTags = ( queries: IResourceAttributeQuery[], keyType: 'string' | 'array' = 'string', -): Tags[] | TagsAPI[] => { - return queries.map((query) => ({ +): Tags[] | TagsAPI[] => + queries.map((query) => ({ Key: keyType === 'array' ? [convertMetricKeyToTrace(query.tagKey)] @@ -49,7 +45,6 @@ export const convertRawQueriesToTraceSelectedTags = ( Operator: convertOperatorLabelToTraceOperator(query.operator), Values: query.tagValue, })); -}; /** * Converts Resource Attribute Queries to PromQL query string @@ -74,11 +69,10 @@ export const resourceAttributesQueryToPromQL = ( /* Convert resource attributes to tagFilter items for queryBuilder */ export const resourceAttributesToTagFilterItems = ( queries: IResourceAttributeQuery[], -): IQueryBuilderTagFilterItems[] => { - return queries.map((res) => ({ +): IQueryBuilderTagFilterItems[] => + queries.map((res) => ({ id: `${res.id}`, key: `${res.tagKey}`, op: `${res.operator}`, value: `${res.tagValue}`.split(','), })); -}; diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx index ecc94247a4..e2706a5a18 100644 --- a/frontend/src/pages/AlertChannelCreate/index.tsx +++ b/frontend/src/pages/AlertChannelCreate/index.tsx @@ -20,9 +20,7 @@ function SettingsPage(): JSX.Element { route: ROUTES.SETTINGS, }, { - Component: (): JSX.Element => { - return ; - }, + Component: (): JSX.Element => , name: t('routes.alert_channels'), route: ROUTES.ALL_CHANNELS, }, diff --git a/frontend/src/pages/GettingStarted/index.tsx b/frontend/src/pages/GettingStarted/index.tsx index 5703239b51..cba67ec6c8 100644 --- a/frontend/src/pages/GettingStarted/index.tsx +++ b/frontend/src/pages/GettingStarted/index.tsx @@ -11,9 +11,9 @@ function InstrumentationPage(): JSX.Element { Congrats, you have successfully installed SigNoz! Now lets get some data in and start deriving insights from them - {GetStartedContent().map((section) => { - return ; - })} + {GetStartedContent().map((section) => ( + + ))} ); } diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx index 7702377479..9a8727baec 100644 --- a/frontend/src/pages/Trace/index.tsx +++ b/frontend/src/pages/Trace/index.tsx @@ -101,13 +101,14 @@ function Trace({ isFilterExclude, ]); - useEffect(() => { - return (): void => { + useEffect( + () => (): void => { dispatch({ type: RESET_TRACE_FILTER, }); - }; - }, [dispatch]); + }, + [dispatch], + ); const onClickHandler: React.MouseEventHandler = useCallback( (e) => { diff --git a/frontend/src/store/actions/dashboard/applySettingsToPanel.ts b/frontend/src/store/actions/dashboard/applySettingsToPanel.ts index f4187cdc5f..0a9a6bdd5f 100644 --- a/frontend/src/store/actions/dashboard/applySettingsToPanel.ts +++ b/frontend/src/store/actions/dashboard/applySettingsToPanel.ts @@ -4,13 +4,13 @@ import { Widgets } from 'types/api/dashboard/getAll'; export const ApplySettingsToPanel = ( props: ApplySettingsToPanelProps, -): ((dispatch: Dispatch) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'APPLY_SETTINGS_TO_PANEL', - payload: props, - }); - }; +): ((dispatch: Dispatch) => void) => ( + dispatch: Dispatch, +): void => { + dispatch({ + type: 'APPLY_SETTINGS_TO_PANEL', + payload: props, + }); }; export interface ApplySettingsToPanelProps { diff --git a/frontend/src/store/actions/dashboard/deleteDashboard.ts b/frontend/src/store/actions/dashboard/deleteDashboard.ts index 29115f395b..139df48f6f 100644 --- a/frontend/src/store/actions/dashboard/deleteDashboard.ts +++ b/frontend/src/store/actions/dashboard/deleteDashboard.ts @@ -5,38 +5,38 @@ import { Dashboard } from 'types/api/dashboard/getAll'; export const DeleteDashboard = ({ uuid, -}: DeleteDashboardProps): ((dispatch: Dispatch) => void) => { - return async (dispatch: Dispatch): Promise => { - try { - const response = await deleteDashboardApi({ - uuid, - }); +}: DeleteDashboardProps): ((dispatch: Dispatch) => void) => async ( + dispatch: Dispatch, +): Promise => { + try { + const response = await deleteDashboardApi({ + uuid, + }); - if (response.statusCode === 200) { - dispatch({ - type: 'DELETE_DASHBOARD_SUCCESS', - payload: { - uuid, - }, - }); - } else { - dispatch({ - type: 'DELETE_DASHBOARD_ERROR', - payload: { - errorMessage: response.error || 'Something went wrong', - }, - }); - } - } catch (error) { + if (response.statusCode === 200) { + dispatch({ + type: 'DELETE_DASHBOARD_SUCCESS', + payload: { + uuid, + }, + }); + } else { dispatch({ type: 'DELETE_DASHBOARD_ERROR', payload: { - errorMessage: - error instanceof Error ? error.toString() : 'Something went wrong', + errorMessage: response.error || 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'DELETE_DASHBOARD_ERROR', + payload: { + errorMessage: + error instanceof Error ? error.toString() : 'Something went wrong', + }, + }); + } }; export interface DeleteDashboardProps { diff --git a/frontend/src/store/actions/dashboard/deleteQuery.ts b/frontend/src/store/actions/dashboard/deleteQuery.ts index c5940b43a8..0b0131d05f 100644 --- a/frontend/src/store/actions/dashboard/deleteQuery.ts +++ b/frontend/src/store/actions/dashboard/deleteQuery.ts @@ -4,14 +4,14 @@ import { DeleteQueryProps } from 'types/actions/dashboard'; export const DeleteQuery = ( props: DeleteQueryProps, -): ((dispatch: Dispatch) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'DELETE_QUERY', - payload: { - currentIndex: props.currentIndex, - widgetId: props.widgetId, - }, - }); - }; +): ((dispatch: Dispatch) => void) => ( + dispatch: Dispatch, +): void => { + dispatch({ + type: 'DELETE_QUERY', + payload: { + currentIndex: props.currentIndex, + widgetId: props.widgetId, + }, + }); }; diff --git a/frontend/src/store/actions/dashboard/deleteWidget.ts b/frontend/src/store/actions/dashboard/deleteWidget.ts index 8509cdbc46..ba8e1965e7 100644 --- a/frontend/src/store/actions/dashboard/deleteWidget.ts +++ b/frontend/src/store/actions/dashboard/deleteWidget.ts @@ -10,58 +10,58 @@ import { Dashboard, Widgets } from 'types/api/dashboard/getAll'; export const DeleteWidget = ({ widgetId, setLayout, -}: DeleteWidgetProps): ((dispatch: Dispatch) => void) => { - return async (dispatch: Dispatch): Promise => { - try { - const { dashboards } = store.getState(); - const [selectedDashboard] = dashboards.dashboards; +}: DeleteWidgetProps): ((dispatch: Dispatch) => void) => async ( + dispatch: Dispatch, +): Promise => { + try { + const { dashboards } = store.getState(); + const [selectedDashboard] = dashboards.dashboards; - const { widgets = [] } = selectedDashboard.data; - const updatedWidgets = widgets.filter((e) => e.id !== widgetId); - const updatedLayout = - selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || []; + const { widgets = [] } = selectedDashboard.data; + const updatedWidgets = widgets.filter((e) => e.id !== widgetId); + const updatedLayout = + selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || []; - const updatedSelectedDashboard: Dashboard = { - ...selectedDashboard, - data: { - title: selectedDashboard.data.title, - description: selectedDashboard.data.description, - name: selectedDashboard.data.name, - tags: selectedDashboard.data.tags, - widgets: updatedWidgets, - layout: updatedLayout, - variables: selectedDashboard.data.variables, - }, - uuid: selectedDashboard.uuid, - }; + const updatedSelectedDashboard: Dashboard = { + ...selectedDashboard, + data: { + title: selectedDashboard.data.title, + description: selectedDashboard.data.description, + name: selectedDashboard.data.name, + tags: selectedDashboard.data.tags, + widgets: updatedWidgets, + layout: updatedLayout, + variables: selectedDashboard.data.variables, + }, + uuid: selectedDashboard.uuid, + }; - const response = await updateDashboardApi(updatedSelectedDashboard); + const response = await updateDashboardApi(updatedSelectedDashboard); - if (response.statusCode === 200) { - dispatch({ - type: UPDATE_DASHBOARD, - payload: updatedSelectedDashboard, - }); - if (setLayout) { - setLayout(getPreLayouts(updatedWidgets, updatedLayout)); - } - } else { - dispatch({ - type: 'DELETE_WIDGET_ERROR', - payload: { - errorMessage: response.error || 'Something went wrong', - }, - }); + if (response.statusCode === 200) { + dispatch({ + type: UPDATE_DASHBOARD, + payload: updatedSelectedDashboard, + }); + if (setLayout) { + setLayout(getPreLayouts(updatedWidgets, updatedLayout)); } - } catch (error) { + } else { dispatch({ type: 'DELETE_WIDGET_ERROR', payload: { - errorMessage: (error as AxiosError).toString() || 'Something went wrong', + errorMessage: response.error || 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'DELETE_WIDGET_ERROR', + payload: { + errorMessage: (error as AxiosError).toString() || 'Something went wrong', + }, + }); + } }; export interface DeleteWidgetProps { diff --git a/frontend/src/store/actions/dashboard/getAllDashboard.ts b/frontend/src/store/actions/dashboard/getAllDashboard.ts index 2569436a62..93727d80fb 100644 --- a/frontend/src/store/actions/dashboard/getAllDashboard.ts +++ b/frontend/src/store/actions/dashboard/getAllDashboard.ts @@ -5,34 +5,32 @@ import AppActions from 'types/actions'; export const GetAllDashboards = (): (( dispatch: Dispatch, -) => void) => { - return async (dispatch: Dispatch): Promise => { - try { - dispatch({ - type: 'GET_ALL_DASHBOARD_LOADING_START', - }); - const response = await getAll(); +) => void) => async (dispatch: Dispatch): Promise => { + try { + dispatch({ + type: 'GET_ALL_DASHBOARD_LOADING_START', + }); + const response = await getAll(); - if (response.statusCode === 200) { - dispatch({ - type: 'GET_ALL_DASHBOARD_SUCCESS', - payload: response.payload, - }); - } else { - dispatch({ - type: 'GET_ALL_DASHBOARD_ERROR', - payload: { - errorMessage: response.error || 'Something went wrong', - }, - }); - } - } catch (error) { + if (response.statusCode === 200) { + dispatch({ + type: 'GET_ALL_DASHBOARD_SUCCESS', + payload: response.payload, + }); + } else { dispatch({ type: 'GET_ALL_DASHBOARD_ERROR', payload: { - errorMessage: (error as AxiosError).toString() || 'Something went wrong', + errorMessage: response.error || 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'GET_ALL_DASHBOARD_ERROR', + payload: { + errorMessage: (error as AxiosError).toString() || 'Something went wrong', + }, + }); + } }; diff --git a/frontend/src/store/actions/dashboard/getDashboard.ts b/frontend/src/store/actions/dashboard/getDashboard.ts index ea039ccc22..7b8e60ac8e 100644 --- a/frontend/src/store/actions/dashboard/getDashboard.ts +++ b/frontend/src/store/actions/dashboard/getDashboard.ts @@ -15,90 +15,90 @@ export const GetDashboard = ({ uuid, widgetId, graphType, -}: GetDashboardProps): ((dispatch: Dispatch) => void) => { - return async (dispatch: Dispatch): Promise => { - try { +}: GetDashboardProps): ((dispatch: Dispatch) => void) => async ( + dispatch: Dispatch, +): Promise => { + try { + dispatch({ + type: 'GET_DASHBOARD_LOADING_START', + }); + + const response = await getDashboard({ + uuid, + }); + + if (response.statusCode === 200) { dispatch({ - type: 'GET_DASHBOARD_LOADING_START', + payload: response.payload, + type: 'GET_DASHBOARD_SUCCESS', }); - const response = await getDashboard({ - uuid, - }); - - if (response.statusCode === 200) { + if (widgetId !== undefined) { dispatch({ - payload: response.payload, - type: 'GET_DASHBOARD_SUCCESS', - }); - - if (widgetId !== undefined) { - dispatch({ - type: 'CREATE_DEFAULT_WIDGET', - payload: { - description: '', - id: widgetId, - isStacked: false, - nullZeroValues: 'zero', - opacity: '0', - panelTypes: graphType || 'TIME_SERIES', - timePreferance: 'GLOBAL_TIME', - title: '', - queryType: 0, - queryData: { - data: { - queryData: [], - }, - - error: false, - errorMessage: '', - loading: false, + type: 'CREATE_DEFAULT_WIDGET', + payload: { + description: '', + id: widgetId, + isStacked: false, + nullZeroValues: 'zero', + opacity: '0', + panelTypes: graphType || 'TIME_SERIES', + timePreferance: 'GLOBAL_TIME', + title: '', + queryType: 0, + queryData: { + data: { + queryData: [], }, - query: { - queryType: EQueryType.QUERY_BUILDER, - promQL: [ - { - name: GetQueryName([]) as string, - ...PromQLQueryTemplate, - }, - ], - clickHouse: [ - { - name: GetQueryName([]) as string, - ...ClickHouseQueryTemplate, - }, - ], - metricsBuilder: { - formulas: [], - queryBuilder: [ - { - name: GetQueryName([]) as string, - ...QueryBuilderQueryTemplate, - }, - ], + + error: false, + errorMessage: '', + loading: false, + }, + query: { + queryType: EQueryType.QUERY_BUILDER, + promQL: [ + { + name: GetQueryName([]) as string, + ...PromQLQueryTemplate, }, + ], + clickHouse: [ + { + name: GetQueryName([]) as string, + ...ClickHouseQueryTemplate, + }, + ], + metricsBuilder: { + formulas: [], + queryBuilder: [ + { + name: GetQueryName([]) as string, + ...QueryBuilderQueryTemplate, + }, + ], }, }, - }); - } - } else { - dispatch({ - type: 'GET_DASHBOARD_ERROR', - payload: { - errorMessage: response.error || 'Something went wrong', }, }); } - } catch (error) { + } else { dispatch({ type: 'GET_DASHBOARD_ERROR', payload: { - errorMessage: - error instanceof Error ? error.toString() : 'Something went wrong', + errorMessage: response.error || 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'GET_DASHBOARD_ERROR', + payload: { + errorMessage: + error instanceof Error ? error.toString() : 'Something went wrong', + }, + }); + } }; export interface GetDashboardProps { diff --git a/frontend/src/store/actions/dashboard/saveDashboard.ts b/frontend/src/store/actions/dashboard/saveDashboard.ts index 54365330f3..881d94d0cb 100644 --- a/frontend/src/store/actions/dashboard/saveDashboard.ts +++ b/frontend/src/store/actions/dashboard/saveDashboard.ts @@ -21,9 +21,9 @@ export const SaveDashboard = ({ widgetId, dashboardId, yAxisUnit, -}: SaveDashboardProps): ((dispatch: Dispatch) => void) => { +}: SaveDashboardProps): ((dispatch: Dispatch) => void) => // eslint-disable-next-line sonarjs/cognitive-complexity - return async (dispatch: Dispatch): Promise => { + async (dispatch: Dispatch): Promise => { try { const dashboard = store.getState(); const search = new URLSearchParams(history.location.search); @@ -139,7 +139,6 @@ export const SaveDashboard = ({ }); } }; -}; export interface SaveDashboardProps { uuid: Dashboard['uuid']; diff --git a/frontend/src/store/actions/dashboard/toggleAddWidget.ts b/frontend/src/store/actions/dashboard/toggleAddWidget.ts index efbae4ba02..ba2ad08107 100644 --- a/frontend/src/store/actions/dashboard/toggleAddWidget.ts +++ b/frontend/src/store/actions/dashboard/toggleAddWidget.ts @@ -3,15 +3,15 @@ import AppActions from 'types/actions'; export const ToggleAddWidget = ( props: ToggleAddWidgetProps, -): ((dispatch: Dispatch) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'IS_ADD_WIDGET', - payload: { - isAddWidget: props, - }, - }); - }; +): ((dispatch: Dispatch) => void) => ( + dispatch: Dispatch, +): void => { + dispatch({ + type: 'IS_ADD_WIDGET', + payload: { + isAddWidget: props, + }, + }); }; export type ToggleAddWidgetProps = boolean; diff --git a/frontend/src/store/actions/dashboard/toggleEditMode.ts b/frontend/src/store/actions/dashboard/toggleEditMode.ts index bcff35bb54..f03d6c5ff4 100644 --- a/frontend/src/store/actions/dashboard/toggleEditMode.ts +++ b/frontend/src/store/actions/dashboard/toggleEditMode.ts @@ -1,12 +1,10 @@ -import { Dispatch } from 'react'; +import { Dispatch } from 'redux'; import AppActions from 'types/actions'; export const ToggleEditMode = (): (( dispatch: Dispatch, -) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'TOGGLE_EDIT_MODE', - }); - }; +) => void) => (dispatch: Dispatch): void => { + dispatch({ + type: 'TOGGLE_EDIT_MODE', + }); }; diff --git a/frontend/src/store/actions/dashboard/updateDashboardTitle.ts b/frontend/src/store/actions/dashboard/updateDashboardTitle.ts index 277ddf7629..4400e3ea39 100644 --- a/frontend/src/store/actions/dashboard/updateDashboardTitle.ts +++ b/frontend/src/store/actions/dashboard/updateDashboardTitle.ts @@ -7,49 +7,47 @@ export const UpdateDashboardTitleDescriptionTags = ({ dashboard, // @TODO need to grab the dashboard from the store }: UpdateDashboardTitleDescriptionTagsProps): (( dispatch: Dispatch, -) => void) => { - return async (dispatch: Dispatch): Promise => { - try { - const { data } = dashboard; +) => void) => async (dispatch: Dispatch): Promise => { + try { + const { data } = dashboard; - const response = await update({ - data: { - ...dashboard.data, + const response = await update({ + data: { + ...dashboard.data, + title: dashboard.data.title, + }, + uuid: dashboard.uuid, + }); + + if (response.statusCode === 200) { + dispatch({ + type: 'UPDATE_TITLE_DESCRIPTION_TAGS_SUCCESS', + payload: { + description: data.description, + tags: data.tags, title: dashboard.data.title, }, - uuid: dashboard.uuid, }); - - if (response.statusCode === 200) { - dispatch({ - type: 'UPDATE_TITLE_DESCRIPTION_TAGS_SUCCESS', - payload: { - description: data.description, - tags: data.tags, - title: dashboard.data.title, - }, - }); - dispatch({ - type: 'TOGGLE_EDIT_MODE', - }); - } else { - dispatch({ - type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR', - payload: { - errorMessage: response.error || 'Something went wrong', - }, - }); - } - } catch (error) { + dispatch({ + type: 'TOGGLE_EDIT_MODE', + }); + } else { dispatch({ type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR', payload: { - errorMessage: - error instanceof Error ? error.toString() : 'Something went wrong', + errorMessage: response.error || 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR', + payload: { + errorMessage: + error instanceof Error ? error.toString() : 'Something went wrong', + }, + }); + } }; export interface UpdateDashboardTitleDescriptionTagsProps { diff --git a/frontend/src/store/actions/dashboard/updateQuery.ts b/frontend/src/store/actions/dashboard/updateQuery.ts index 0e00c21948..be19ec0763 100644 --- a/frontend/src/store/actions/dashboard/updateQuery.ts +++ b/frontend/src/store/actions/dashboard/updateQuery.ts @@ -4,17 +4,17 @@ import { Query } from 'types/api/dashboard/getAll'; export const UpdateQuery = ( props: UpdateQueryProps, -): ((dispatch: Dispatch) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'UPDATE_QUERY', - payload: { - query: props.updatedQuery, - widgetId: props.widgetId, - yAxisUnit: props.yAxisUnit, - }, - }); - }; +): ((dispatch: Dispatch) => void) => ( + dispatch: Dispatch, +): void => { + dispatch({ + type: 'UPDATE_QUERY', + payload: { + query: props.updatedQuery, + widgetId: props.widgetId, + yAxisUnit: props.yAxisUnit, + }, + }); }; export interface UpdateQueryProps { diff --git a/frontend/src/store/actions/dashboard/updatedDashboardVariables.ts b/frontend/src/store/actions/dashboard/updatedDashboardVariables.ts index 20bbbd0a06..82fecc9ac4 100644 --- a/frontend/src/store/actions/dashboard/updatedDashboardVariables.ts +++ b/frontend/src/store/actions/dashboard/updatedDashboardVariables.ts @@ -8,31 +8,31 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll'; export const UpdateDashboardVariables = ( variables: Record, -): ((dispatch: Dispatch) => void) => { - return async (dispatch: Dispatch): Promise => { - try { - dispatch({ - type: UPDATE_DASHBOARD_VARIABLES, - payload: variables, +): ((dispatch: Dispatch) => void) => async ( + dispatch: Dispatch, +): Promise => { + try { + dispatch({ + type: UPDATE_DASHBOARD_VARIABLES, + payload: variables, + }); + + const reduxStoreState = store.getState(); + const [dashboard] = reduxStoreState.dashboards.dashboards; + + const response = await update({ + data: { + ...dashboard.data, + }, + uuid: dashboard.uuid, + }); + + if (response.statusCode !== 200) { + notification.error({ + message: response.error, }); - - const reduxStoreState = store.getState(); - const [dashboard] = reduxStoreState.dashboards.dashboards; - - const response = await update({ - data: { - ...dashboard.data, - }, - uuid: dashboard.uuid, - }); - - if (response.statusCode !== 200) { - notification.error({ - message: response.error, - }); - } - } catch (error) { - console.error(error); } - }; + } catch (error) { + console.error(error); + } }; diff --git a/frontend/src/store/actions/global.ts b/frontend/src/store/actions/global.ts index 0e7b2e172f..ab04490f94 100644 --- a/frontend/src/store/actions/global.ts +++ b/frontend/src/store/actions/global.ts @@ -7,27 +7,25 @@ import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime'; export const UpdateTimeInterval = ( interval: Time, dateTimeRange: [number, number] = [0, 0], -): ((dispatch: Dispatch) => void) => { - return (dispatch: Dispatch): void => { - const { maxTime, minTime } = GetMinMax(interval, dateTimeRange); +): ((dispatch: Dispatch) => void) => ( + dispatch: Dispatch, +): void => { + const { maxTime, minTime } = GetMinMax(interval, dateTimeRange); - dispatch({ - type: UPDATE_TIME_INTERVAL, - payload: { - maxTime, - minTime, - selectedTime: interval, - }, - }); - }; + dispatch({ + type: UPDATE_TIME_INTERVAL, + payload: { + maxTime, + minTime, + selectedTime: interval, + }, + }); }; export const GlobalTimeLoading = (): (( dispatch: Dispatch, -) => void) => { - return (dispatch: Dispatch): void => { - dispatch({ - type: 'GLOBAL_TIME_LOADING_START', - }); - }; +) => void) => (dispatch: Dispatch): void => { + dispatch({ + type: 'GLOBAL_TIME_LOADING_START', + }); }; diff --git a/frontend/src/store/actions/logs/addToSelectedField.ts b/frontend/src/store/actions/logs/addToSelectedField.ts index 619fdfeae4..5e8c6fc6a1 100644 --- a/frontend/src/store/actions/logs/addToSelectedField.ts +++ b/frontend/src/store/actions/logs/addToSelectedField.ts @@ -5,13 +5,11 @@ import { SET_FIELDS } from 'types/actions/logs'; export const AddToSelectedField = (): (( dispatch: Dispatch, -) => void) => { - return async (dispatch): Promise => { - const response = await GetSearchFields(); - if (response.payload) - dispatch({ - type: SET_FIELDS, - payload: response.payload, - }); - }; +) => void) => async (dispatch): Promise => { + const response = await GetSearchFields(); + if (response.payload) + dispatch({ + type: SET_FIELDS, + payload: response.payload, + }); }; diff --git a/frontend/src/store/actions/logs/getFields.ts b/frontend/src/store/actions/logs/getFields.ts index c7ed06c3c4..3dce6e1246 100644 --- a/frontend/src/store/actions/logs/getFields.ts +++ b/frontend/src/store/actions/logs/getFields.ts @@ -5,19 +5,19 @@ import { SET_FIELDS } from 'types/actions/logs'; const IGNORED_SELECTED_FIELDS = ['timestamp']; -export const GetLogsFields = (): ((dispatch: Dispatch) => void) => { - return async (dispatch): Promise => { - const response = await GetSearchFields(); - if (response.payload) { - dispatch({ - type: SET_FIELDS, - payload: { - interesting: response.payload.interesting, - selected: response.payload.selected.filter( - (field) => !IGNORED_SELECTED_FIELDS.includes(field.name), - ), - }, - }); - } - }; +export const GetLogsFields = (): (( + dispatch: Dispatch, +) => void) => async (dispatch): Promise => { + const response = await GetSearchFields(); + if (response.payload) { + dispatch({ + type: SET_FIELDS, + payload: { + interesting: response.payload.interesting, + selected: response.payload.selected.filter( + (field) => !IGNORED_SELECTED_FIELDS.includes(field.name), + ), + }, + }); + } }; diff --git a/frontend/src/store/actions/logs/getLogs.ts b/frontend/src/store/actions/logs/getLogs.ts index dd2aef7faf..3b34fafa0e 100644 --- a/frontend/src/store/actions/logs/getLogs.ts +++ b/frontend/src/store/actions/logs/getLogs.ts @@ -6,29 +6,29 @@ import { Props } from 'types/api/logs/getLogs'; export const getLogs = ( props: Props, -): ((dispatch: Dispatch) => void) => { - return async (dispatch): Promise => { +): ((dispatch: Dispatch) => void) => async ( + dispatch, +): Promise => { + dispatch({ + type: SET_LOADING, + payload: true, + }); + + const response = await GetLogs(props); + + if (response.payload) dispatch({ - type: SET_LOADING, - payload: true, + type: SET_LOGS, + payload: response.payload, + }); + else + dispatch({ + type: SET_LOGS, + payload: [], }); - const response = await GetLogs(props); - - if (response.payload) - dispatch({ - type: SET_LOGS, - payload: response.payload, - }); - else - dispatch({ - type: SET_LOGS, - payload: [], - }); - - dispatch({ - type: SET_LOADING, - payload: false, - }); - }; + dispatch({ + type: SET_LOADING, + payload: false, + }); }; diff --git a/frontend/src/store/actions/logs/getLogsAggregate.ts b/frontend/src/store/actions/logs/getLogsAggregate.ts index c024f735ca..d26f0a5e89 100644 --- a/frontend/src/store/actions/logs/getLogsAggregate.ts +++ b/frontend/src/store/actions/logs/getLogsAggregate.ts @@ -10,35 +10,33 @@ import { ILogsAggregate } from 'types/api/logs/logAggregate'; export const getLogsAggregate = ( props: Props, -): ((dispatch: Dispatch) => void) => { - return async (dispatch): Promise => { - dispatch({ - type: SET_LOADING_AGGREGATE, - payload: true, - }); +): ((dispatch: Dispatch) => void) => async ( + dispatch, +): Promise => { + dispatch({ + type: SET_LOADING_AGGREGATE, + payload: true, + }); - const response = await GetLogsAggregate(props); - if (response.payload) { - const convertedArray: ILogsAggregate[] = Object.values(response.payload).map( - (data) => { - return { ...data, time: new Date(data.timestamp / 1e6) }; - }, - ); - - dispatch({ - type: SET_LOGS_AGGREGATE_SERIES, - payload: convertedArray, - }); - } else { - dispatch({ - type: SET_LOGS_AGGREGATE_SERIES, - payload: [], - }); - } + const response = await GetLogsAggregate(props); + if (response.payload) { + const convertedArray: ILogsAggregate[] = Object.values( + response.payload, + ).map((data) => ({ ...data, time: new Date(data.timestamp / 1e6) })); dispatch({ - type: SET_LOADING_AGGREGATE, - payload: false, + type: SET_LOGS_AGGREGATE_SERIES, + payload: convertedArray, }); - }; + } else { + dispatch({ + type: SET_LOGS_AGGREGATE_SERIES, + payload: [], + }); + } + + dispatch({ + type: SET_LOADING_AGGREGATE, + payload: false, + }); }; diff --git a/frontend/src/store/actions/metrics/getInitialData.ts b/frontend/src/store/actions/metrics/getInitialData.ts index 0f607f6ea5..205aed6ed4 100644 --- a/frontend/src/store/actions/metrics/getInitialData.ts +++ b/frontend/src/store/actions/metrics/getInitialData.ts @@ -17,115 +17,116 @@ import { Tags } from 'types/reducer/trace'; export const GetInitialData = ( props: GetInitialDataProps, -): ((dispatch: Dispatch, getState: () => AppState) => void) => { - return async (dispatch, getState): Promise => { - try { - const { globalTime } = getState(); +): (( + dispatch: Dispatch, + getState: () => AppState, +) => void) => async (dispatch, getState): Promise => { + try { + const { globalTime } = getState(); - /** - * @description This is because we keeping the store as source of truth - */ - if ( - props.maxTime !== globalTime.maxTime && - props.minTime !== globalTime.minTime - ) { - return; - } + /** + * @description This is because we keeping the store as source of truth + */ + if ( + props.maxTime !== globalTime.maxTime && + props.minTime !== globalTime.minTime + ) { + return; + } + dispatch({ + type: 'GET_INITIAL_APPLICATION_LOADING', + }); + + const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [ + globalTime.minTime / 1000000, + globalTime.maxTime / 1000000, + ]); + + const [ + // getDBOverViewResponse, + // getExternalAverageDurationResponse, + // getExternalErrorResponse, + // getExternalServiceResponse, + getServiceOverviewResponse, + getTopOperationsResponse, + getTopLevelOperationsResponse, + ] = await Promise.all([ + // getDBOverView({ + // ...props, + // }), + // getExternalAverageDuration({ + // ...props, + // }), + // getExternalError({ + // ...props, + // }), + // getExternalService({ + // ...props, + // }), + getServiceOverview({ + end: maxTime, + service: props.serviceName, + start: minTime, + step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }), + selectedTags: props.selectedTags, + }), + getTopOperations({ + end: maxTime, + service: props.serviceName, + start: minTime, + selectedTags: props.selectedTags, + }), + getTopLevelOperations({ + service: props.serviceName, + }), + ]); + + if ( + // getDBOverViewResponse.statusCode === 200 && + // getExternalAverageDurationResponse.statusCode === 200 && + // getExternalErrorResponse.statusCode === 200 && + // getExternalServiceResponse.statusCode === 200 && + getServiceOverviewResponse.statusCode === 200 && + getTopOperationsResponse.statusCode === 200 && + getTopLevelOperationsResponse.statusCode === 200 + ) { dispatch({ - type: 'GET_INITIAL_APPLICATION_LOADING', + type: 'GET_INTIAL_APPLICATION_DATA', + payload: { + // dbOverView: getDBOverViewResponse.payload, + // externalAverageDuration: getExternalAverageDurationResponse.payload, + // externalError: getExternalErrorResponse.payload, + // externalService: getExternalServiceResponse.payload, + serviceOverview: getServiceOverviewResponse.payload, + topOperations: getTopOperationsResponse.payload, + topLevelOperations: getTopLevelOperationsResponse.payload, + }, }); - - const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [ - globalTime.minTime / 1000000, - globalTime.maxTime / 1000000, - ]); - - const [ - // getDBOverViewResponse, - // getExternalAverageDurationResponse, - // getExternalErrorResponse, - // getExternalServiceResponse, - getServiceOverviewResponse, - getTopOperationsResponse, - getTopLevelOperationsResponse, - ] = await Promise.all([ - // getDBOverView({ - // ...props, - // }), - // getExternalAverageDuration({ - // ...props, - // }), - // getExternalError({ - // ...props, - // }), - // getExternalService({ - // ...props, - // }), - getServiceOverview({ - end: maxTime, - service: props.serviceName, - start: minTime, - step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }), - selectedTags: props.selectedTags, - }), - getTopOperations({ - end: maxTime, - service: props.serviceName, - start: minTime, - selectedTags: props.selectedTags, - }), - getTopLevelOperations({ - service: props.serviceName, - }), - ]); - - if ( - // getDBOverViewResponse.statusCode === 200 && - // getExternalAverageDurationResponse.statusCode === 200 && - // getExternalErrorResponse.statusCode === 200 && - // getExternalServiceResponse.statusCode === 200 && - getServiceOverviewResponse.statusCode === 200 && - getTopOperationsResponse.statusCode === 200 && - getTopLevelOperationsResponse.statusCode === 200 - ) { - dispatch({ - type: 'GET_INTIAL_APPLICATION_DATA', - payload: { - // dbOverView: getDBOverViewResponse.payload, - // externalAverageDuration: getExternalAverageDurationResponse.payload, - // externalError: getExternalErrorResponse.payload, - // externalService: getExternalServiceResponse.payload, - serviceOverview: getServiceOverviewResponse.payload, - topOperations: getTopOperationsResponse.payload, - topLevelOperations: getTopLevelOperationsResponse.payload, - }, - }); - } else { - dispatch({ - type: 'GET_INITIAL_APPLICATION_ERROR', - payload: { - errorMessage: - getTopOperationsResponse.error || - getServiceOverviewResponse.error || - getTopLevelOperationsResponse.error || - // getExternalServiceResponse.error || - // getExternalErrorResponse.error || - // getExternalAverageDurationResponse.error || - // getDBOverViewResponse.error || - 'Something went wrong', - }, - }); - } - } catch (error) { + } else { dispatch({ type: 'GET_INITIAL_APPLICATION_ERROR', payload: { - errorMessage: (error as AxiosError).toString() || 'Something went wrong', + errorMessage: + getTopOperationsResponse.error || + getServiceOverviewResponse.error || + getTopLevelOperationsResponse.error || + // getExternalServiceResponse.error || + // getExternalErrorResponse.error || + // getExternalAverageDurationResponse.error || + // getDBOverViewResponse.error || + 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'GET_INITIAL_APPLICATION_ERROR', + payload: { + errorMessage: (error as AxiosError).toString() || 'Something went wrong', + }, + }); + } }; export interface GetInitialDataProps { diff --git a/frontend/src/store/actions/metrics/getService.ts b/frontend/src/store/actions/metrics/getService.ts index 82a3d7e820..90d65c0c43 100644 --- a/frontend/src/store/actions/metrics/getService.ts +++ b/frontend/src/store/actions/metrics/getService.ts @@ -9,55 +9,56 @@ import { Tags } from 'types/reducer/trace'; export const GetService = ( props: GetServiceProps, -): ((dispatch: Dispatch, getState: () => AppState) => void) => { - return async (dispatch, getState): Promise => { - try { - const { globalTime } = getState(); +): (( + dispatch: Dispatch, + getState: () => AppState, +) => void) => async (dispatch, getState): Promise => { + try { + const { globalTime } = getState(); - if ( - props.maxTime !== globalTime.maxTime && - props.minTime !== globalTime.minTime - ) { - return; - } + if ( + props.maxTime !== globalTime.maxTime && + props.minTime !== globalTime.minTime + ) { + return; + } - const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [ - globalTime.minTime / 1000000, - globalTime.maxTime / 1000000, - ]); + const { maxTime, minTime } = GetMinMax(globalTime.selectedTime, [ + globalTime.minTime / 1000000, + globalTime.maxTime / 1000000, + ]); + dispatch({ + type: 'GET_SERVICE_LIST_LOADING_START', + }); + + const response = await getService({ + end: maxTime, + start: minTime, + selectedTags: props.selectedTags, + }); + + if (response.statusCode === 200) { dispatch({ - type: 'GET_SERVICE_LIST_LOADING_START', + type: 'GET_SERVICE_LIST_SUCCESS', + payload: response.payload, }); - - const response = await getService({ - end: maxTime, - start: minTime, - selectedTags: props.selectedTags, - }); - - if (response.statusCode === 200) { - dispatch({ - type: 'GET_SERVICE_LIST_SUCCESS', - payload: response.payload, - }); - } else { - dispatch({ - type: 'GET_SERVICE_LIST_ERROR', - payload: { - errorMessage: response.error || 'Something went wrong', - }, - }); - } - } catch (error) { + } else { dispatch({ type: 'GET_SERVICE_LIST_ERROR', payload: { - errorMessage: (error as AxiosError).toString() || 'Something went wrong', + errorMessage: response.error || 'Something went wrong', }, }); } - }; + } catch (error) { + dispatch({ + type: 'GET_SERVICE_LIST_ERROR', + payload: { + errorMessage: (error as AxiosError).toString() || 'Something went wrong', + }, + }); + } }; export type GetServiceProps = { diff --git a/frontend/src/store/actions/metrics/resetInitialData.ts b/frontend/src/store/actions/metrics/resetInitialData.ts index fe21077a30..801d7c3382 100644 --- a/frontend/src/store/actions/metrics/resetInitialData.ts +++ b/frontend/src/store/actions/metrics/resetInitialData.ts @@ -5,10 +5,8 @@ import AppActions from 'types/actions'; export const ResetInitialData = (): (( dispatch: Dispatch, getState: () => AppState, -) => void) => { - return (dispatch): void => { - dispatch({ - type: 'RESET_INITIAL_APPLICATION_DATA', - }); - }; +) => void) => (dispatch): void => { + dispatch({ + type: 'RESET_INITIAL_APPLICATION_DATA', + }); }; diff --git a/frontend/src/store/actions/serviceMap.ts b/frontend/src/store/actions/serviceMap.ts index e3f527fc57..5274eec75c 100644 --- a/frontend/src/store/actions/serviceMap.ts +++ b/frontend/src/store/actions/serviceMap.ts @@ -30,30 +30,30 @@ export interface ServiceMapLoading { }; } -export const getDetailedServiceMapItems = (globalTime: GlobalTime) => { - return async (dispatch: Dispatch): Promise => { - const start = `${globalTime.minTime}`; - const end = `${globalTime.maxTime}`; +export const getDetailedServiceMapItems = (globalTime: GlobalTime) => async ( + dispatch: Dispatch, +): Promise => { + const start = `${globalTime.minTime}`; + const end = `${globalTime.maxTime}`; - const serviceMapPayload = { - start, - end, - tags: [], - }; - const [dependencyGraphResponse] = await Promise.all([ - api.post(`/dependency_graph`, serviceMapPayload), - ]); - - dispatch({ - type: ActionTypes.getServiceMapItems, - payload: dependencyGraphResponse.data, - }); - - dispatch({ - type: ActionTypes.serviceMapLoading, - payload: { - loading: false, - }, - }); + const serviceMapPayload = { + start, + end, + tags: [], }; + const [dependencyGraphResponse] = await Promise.all([ + api.post(`/dependency_graph`, serviceMapPayload), + ]); + + dispatch({ + type: ActionTypes.getServiceMapItems, + payload: dependencyGraphResponse.data, + }); + + dispatch({ + type: ActionTypes.serviceMapLoading, + payload: { + loading: false, + }, + }); }; diff --git a/frontend/src/store/actions/trace/getInitialFilter.ts b/frontend/src/store/actions/trace/getInitialFilter.ts index 6d5247bcf4..8cbc554e0a 100644 --- a/frontend/src/store/actions/trace/getInitialFilter.ts +++ b/frontend/src/store/actions/trace/getInitialFilter.ts @@ -32,178 +32,170 @@ export const GetInitialTraceFilter = ( ): (( dispatch: Dispatch, getState: Store['getState'], -) => void) => { // eslint-disable-next-line sonarjs/cognitive-complexity - return async (dispatch, getState): Promise => { - try { - const query = window.location.search; +) => void) => async (dispatch, getState): Promise => { + try { + const query = window.location.search; - const { traces, globalTime } = getState(); + const { traces, globalTime } = getState(); - if (globalTime.maxTime !== maxTime && globalTime.minTime !== minTime) { - return; - } + if (globalTime.maxTime !== maxTime && globalTime.minTime !== minTime) { + return; + } - const getSelectedFilter = parseSelectedFilter( - query, - traces.selectedFilter, - true, - ); + const getSelectedFilter = parseSelectedFilter( + query, + traces.selectedFilter, + true, + ); - const getFilterToFetchData = parseFilterToFetchData( - query, - traces.filterToFetchData, - ); + const getFilterToFetchData = parseFilterToFetchData( + query, + traces.filterToFetchData, + ); - const getUserSelected = parseSelectedFilter( - query, - traces.userSelectedFilter, - ); + const getUserSelected = parseSelectedFilter(query, traces.userSelectedFilter); - const getIsFilterExcluded = parseFilterExclude( - query, - traces.isFilterExclude, - ); + const getIsFilterExcluded = parseFilterExclude(query, traces.isFilterExclude); - const parsedQueryCurrent = parseQueryIntoCurrent( - query, - traces.spansAggregate.currentPage, - ); + const parsedQueryCurrent = parseQueryIntoCurrent( + query, + traces.spansAggregate.currentPage, + ); - const parsedQueryOrder = parseQueryIntoOrder( - query, - traces.spansAggregate.order, - ); + const parsedQueryOrder = parseQueryIntoOrder( + query, + traces.spansAggregate.order, + ); - const parsedPageSize = parseQueryIntoPageSize( - query, - traces.spansAggregate.pageSize, - ); + const parsedPageSize = parseQueryIntoPageSize( + query, + traces.spansAggregate.pageSize, + ); - const isSelectionSkipped = parseIsSkippedSelection(query); + const isSelectionSkipped = parseIsSkippedSelection(query); - const parsedSelectedTags = parseQueryIntoSelectedTags( - query, - traces.selectedTags, - ); + const parsedSelectedTags = parseQueryIntoSelectedTags( + query, + traces.selectedTags, + ); - const parsedOrderParams = parseAggregateOrderParams( - query, - traces.spansAggregate.orderParam, - ); + const parsedOrderParams = parseAggregateOrderParams( + query, + traces.spansAggregate.orderParam, + ); - const parsedFilter = parseQueryIntoFilter(query, traces.filter); + const parsedFilter = parseQueryIntoFilter(query, traces.filter); - // now filter are not matching we need to fetch the data and make in sync - dispatch({ - type: UPDATE_TRACE_FILTER_LOADING, - payload: { - filterLoading: true, - }, - }); + // now filter are not matching we need to fetch the data and make in sync + dispatch({ + type: UPDATE_TRACE_FILTER_LOADING, + payload: { + filterLoading: true, + }, + }); - const response = await getFiltersApi({ - end: String(maxTime), - getFilters: getFilterToFetchData.currentValue, - start: String(minTime), - other: Object.fromEntries(getSelectedFilter.currentValue), - isFilterExclude: getIsFilterExcluded.currentValue, - }); + const response = await getFiltersApi({ + end: String(maxTime), + getFilters: getFilterToFetchData.currentValue, + start: String(minTime), + other: Object.fromEntries(getSelectedFilter.currentValue), + isFilterExclude: getIsFilterExcluded.currentValue, + }); - const preSelectedFilter: Map = new Map( - getSelectedFilter.currentValue, - ); + const preSelectedFilter: Map = new Map( + getSelectedFilter.currentValue, + ); - if (response.payload && !isSelectionSkipped.currentValue) { - const diff = - query.length === 0 - ? traces.filterToFetchData - : xor(traces.filterToFetchData, getFilterToFetchData.currentValue); + if (response.payload && !isSelectionSkipped.currentValue) { + const diff = + query.length === 0 + ? traces.filterToFetchData + : xor(traces.filterToFetchData, getFilterToFetchData.currentValue); - Object.keys(response.payload).forEach((key) => { - const value = response.payload[key]; - Object.keys(value) - // remove maxDuration and minDuration filter from initial selection logic - .filter((e) => !['maxDuration', 'minDuration'].includes(e)) - .forEach((preKey) => { - if (isTraceFilterEnum(key) && diff.find((v) => v === key)) { - // const preValue = preSelectedFilter?.get(key) || []; - const preValue = getUserSelected.currentValue?.get(key) || []; - // preSelectedFilter?.set(key, [...new Set([...preValue, preKey])]); - getUserSelected.currentValue.set(key, [ - ...new Set([...preValue, preKey]), - ]); - } - }); - }); - } - - if (response.statusCode === 200) { - const preResponseSelected: TraceReducer['filterResponseSelected'] = new Set(); - - const initialFilter = new Map>( - parsedFilter.currentValue, - ); - - Object.keys(response.payload).forEach((key) => { - const value = response.payload[key]; - if (isTraceFilterEnum(key)) { - Object.keys(value).forEach((e) => preResponseSelected.add(e)); - - initialFilter.set(key, { - ...initialFilter.get(key), - ...value, - }); - } - }); - - dispatch({ - type: UPDATE_ALL_FILTERS, - payload: { - filter: initialFilter, - selectedFilter: preSelectedFilter, - filterToFetchData: getFilterToFetchData.currentValue, - current: parsedQueryCurrent.currentValue, - selectedTags: parsedSelectedTags.currentValue, - userSelected: getUserSelected.currentValue, - isFilterExclude: getIsFilterExcluded.currentValue, - order: parsedQueryOrder.currentValue, - pageSize: parsedPageSize.currentValue, - orderParam: parsedOrderParams.currentValue, - }, - }); - } else { - notification.error({ - message: response.error || 'Something went wrong', - }); - } - - dispatch({ - type: UPDATE_TRACE_FILTER_LOADING, - payload: { - filterLoading: false, - }, - }); - dispatch({ - type: UPDATE_TRACE_GRAPH_LOADING, - payload: { - loading: false, - }, - }); - } catch (error) { - console.error(error); - dispatch({ - type: UPDATE_TRACE_FILTER_LOADING, - payload: { - filterLoading: false, - }, - }); - dispatch({ - type: UPDATE_TRACE_GRAPH_LOADING, - payload: { - loading: false, - }, + Object.keys(response.payload).forEach((key) => { + const value = response.payload[key]; + Object.keys(value) + // remove maxDuration and minDuration filter from initial selection logic + .filter((e) => !['maxDuration', 'minDuration'].includes(e)) + .forEach((preKey) => { + if (isTraceFilterEnum(key) && diff.find((v) => v === key)) { + // const preValue = preSelectedFilter?.get(key) || []; + const preValue = getUserSelected.currentValue?.get(key) || []; + // preSelectedFilter?.set(key, [...new Set([...preValue, preKey])]); + getUserSelected.currentValue.set(key, [ + ...new Set([...preValue, preKey]), + ]); + } + }); }); } - }; + + if (response.statusCode === 200) { + const preResponseSelected: TraceReducer['filterResponseSelected'] = new Set(); + + const initialFilter = new Map>( + 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, + }, + }); + } }; diff --git a/frontend/src/store/actions/trace/getInitialSpansAggregate.ts b/frontend/src/store/actions/trace/getInitialSpansAggregate.ts index fff9a01902..2581065abb 100644 --- a/frontend/src/store/actions/trace/getInitialSpansAggregate.ts +++ b/frontend/src/store/actions/trace/getInitialSpansAggregate.ts @@ -15,35 +15,63 @@ export const GetSpansAggregate = ( ): (( dispatch: Dispatch, getState: Store['getState'], -) => void) => { - return async (dispatch, getState): Promise => { - const { traces, globalTime } = getState(); - const { spansAggregate } = traces; +) => void) => async (dispatch, getState): Promise => { + const { traces, globalTime } = getState(); + const { spansAggregate } = traces; - if ( - globalTime.maxTime !== props.maxTime && - globalTime.minTime !== props.minTime - ) { - return; - } + if ( + globalTime.maxTime !== props.maxTime && + globalTime.minTime !== props.minTime + ) { + return; + } - if (traces.filterLoading) { - return; - } + if (traces.filterLoading) { + return; + } - const { order = '' } = props; + const { order = '' } = props; - try { - // triggering loading + try { + // triggering loading + dispatch({ + type: UPDATE_SPANS_AGGREGATE, + payload: { + spansAggregate: { + currentPage: props.current, + loading: true, + data: spansAggregate.data, + error: false, + total: spansAggregate.total, + pageSize: props.pageSize, + order, + orderParam: spansAggregate.orderParam, + }, + }, + }); + + const response = await getSpansAggregate({ + end: props.maxTime, + start: props.minTime, + selectedFilter: props.selectedFilter, + limit: props.pageSize, + offset: props.current * props.pageSize - props.pageSize, + selectedTags: props.selectedTags, + isFilterExclude: traces.isFilterExclude, + order, + orderParam: props.orderParam, + }); + + if (response.statusCode === 200) { dispatch({ type: UPDATE_SPANS_AGGREGATE, payload: { spansAggregate: { currentPage: props.current, - loading: true, - data: spansAggregate.data, + loading: false, + data: response.payload.spans, error: false, - total: spansAggregate.total, + total: response.payload.totalSpans, pageSize: props.pageSize, order, orderParam: spansAggregate.orderParam, @@ -51,68 +79,22 @@ export const GetSpansAggregate = ( }, }); - const response = await getSpansAggregate({ - end: props.maxTime, - start: props.minTime, - selectedFilter: props.selectedFilter, - limit: props.pageSize, - offset: props.current * props.pageSize - props.pageSize, - selectedTags: props.selectedTags, - isFilterExclude: traces.isFilterExclude, + updateURL( + traces.selectedFilter, + traces.filterToFetchData, + props.current, + traces.selectedTags, + traces.isFilterExclude, + traces.userSelectedFilter, order, - orderParam: props.orderParam, + traces.spansAggregate.pageSize, + spansAggregate.orderParam, + ); + } else { + notification.error({ + message: response.error || 'Something went wrong', }); - if (response.statusCode === 200) { - dispatch({ - type: UPDATE_SPANS_AGGREGATE, - payload: { - spansAggregate: { - currentPage: props.current, - loading: false, - data: response.payload.spans, - error: false, - total: response.payload.totalSpans, - pageSize: props.pageSize, - order, - orderParam: spansAggregate.orderParam, - }, - }, - }); - - updateURL( - traces.selectedFilter, - traces.filterToFetchData, - props.current, - traces.selectedTags, - traces.isFilterExclude, - traces.userSelectedFilter, - order, - traces.spansAggregate.pageSize, - spansAggregate.orderParam, - ); - } else { - notification.error({ - message: response.error || 'Something went wrong', - }); - - dispatch({ - type: UPDATE_SPANS_AGGREGATE, - payload: { - spansAggregate: { - currentPage: props.current, - loading: false, - data: spansAggregate.data, - error: true, - total: spansAggregate.total, - pageSize: props.pageSize, - order, - orderParam: spansAggregate.orderParam, - }, - }, - }); - } - } catch (error) { dispatch({ type: UPDATE_SPANS_AGGREGATE, payload: { @@ -129,7 +111,23 @@ export const GetSpansAggregate = ( }, }); } - }; + } catch (error) { + dispatch({ + type: UPDATE_SPANS_AGGREGATE, + payload: { + spansAggregate: { + currentPage: props.current, + loading: false, + data: spansAggregate.data, + error: true, + total: spansAggregate.total, + pageSize: props.pageSize, + order, + orderParam: spansAggregate.orderParam, + }, + }, + }); + } }; export interface GetSpansAggregateProps { diff --git a/frontend/src/store/actions/trace/selectTraceFilter.ts b/frontend/src/store/actions/trace/selectTraceFilter.ts index d11b12022a..6b3e76d730 100644 --- a/frontend/src/store/actions/trace/selectTraceFilter.ts +++ b/frontend/src/store/actions/trace/selectTraceFilter.ts @@ -11,44 +11,42 @@ export const SelectedTraceFilter = (props: { }): (( dispatch: Dispatch, getState: Store['getState'], -) => void) => { - return (_, getState): void => { - const { topic, value } = props; - const { traces } = getState(); +) => void) => (_, getState): void => { + const { topic, value } = props; + const { traces } = getState(); - const filter = traces.selectedFilter; + const filter = traces.selectedFilter; - const isTopicPresent = filter.get(topic); + const isTopicPresent = filter.get(topic); - // append the value - if (!isTopicPresent) { - filter.set(props.topic, [props.value]); + // append the value + if (!isTopicPresent) { + filter.set(props.topic, [props.value]); + } else { + const isValuePresent = + isTopicPresent.find((e) => e === props.value) !== undefined; + + // check the value if present then remove the value + if (isValuePresent) { + filter.set( + props.topic, + isTopicPresent.filter((e) => e !== value), + ); } else { - const isValuePresent = - isTopicPresent.find((e) => e === props.value) !== undefined; - - // check the value if present then remove the value - if (isValuePresent) { - filter.set( - props.topic, - isTopicPresent.filter((e) => e !== value), - ); - } else { - // if not present add into the array of string - filter.set(props.topic, [...isTopicPresent, props.value]); - } + // if not present add into the array of string + filter.set(props.topic, [...isTopicPresent, props.value]); } + } - updateURL( - filter, - traces.filterToFetchData, - traces.spansAggregate.currentPage, - traces.selectedTags, - traces.isFilterExclude, - traces.userSelectedFilter, - traces.spansAggregate.order, - traces.spansAggregate.pageSize, - traces.spansAggregate.orderParam, - ); - }; + updateURL( + filter, + traces.filterToFetchData, + traces.spansAggregate.currentPage, + traces.selectedTags, + traces.isFilterExclude, + traces.userSelectedFilter, + traces.spansAggregate.order, + traces.spansAggregate.pageSize, + traces.spansAggregate.orderParam, + ); }; diff --git a/frontend/src/store/actions/trace/updateIsTagsError.ts b/frontend/src/store/actions/trace/updateIsTagsError.ts index f59f031c2f..fa4339f7d1 100644 --- a/frontend/src/store/actions/trace/updateIsTagsError.ts +++ b/frontend/src/store/actions/trace/updateIsTagsError.ts @@ -5,13 +5,11 @@ import { TraceReducer } from 'types/reducer/trace'; export const UpdateTagIsError = ( isTagModalError: TraceReducer['isTagModalError'], -): ((dispatch: Dispatch) => void) => { - return (dispatch): void => { - dispatch({ - type: UPDATE_IS_TAG_ERROR, - payload: { - isTagModalError, - }, - }); - }; +): ((dispatch: Dispatch) => void) => (dispatch): void => { + dispatch({ + type: UPDATE_IS_TAG_ERROR, + payload: { + isTagModalError, + }, + }); }; diff --git a/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts b/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts index 59fb070007..7a81657313 100644 --- a/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts +++ b/frontend/src/store/actions/trace/updateTagPanelVisiblity.ts @@ -5,13 +5,11 @@ import { TraceReducer } from 'types/reducer/trace'; export const UpdateTagVisibility = ( isTagModalOpen: TraceReducer['isTagModalOpen'], -): ((dispatch: Dispatch) => void) => { - return (dispatch): void => { - dispatch({ - type: UPDATE_TAG_MODAL_VISIBILITY, - payload: { - isTagModalOpen, - }, - }); - }; +): ((dispatch: Dispatch) => void) => (dispatch): void => { + dispatch({ + type: UPDATE_TAG_MODAL_VISIBILITY, + payload: { + isTagModalOpen, + }, + }); }; diff --git a/frontend/src/store/actions/trace/updateTagsSelected.ts b/frontend/src/store/actions/trace/updateTagsSelected.ts index e13a57cf80..4fc634b8fc 100644 --- a/frontend/src/store/actions/trace/updateTagsSelected.ts +++ b/frontend/src/store/actions/trace/updateTagsSelected.ts @@ -5,13 +5,11 @@ import { TraceReducer } from 'types/reducer/trace'; export const UpdateSelectedTags = ( selectedTags: TraceReducer['selectedTags'], -): ((dispatch: Dispatch) => void) => { - return (dispatch): void => { - dispatch({ - type: UPDATE_SELECTED_TAGS, - payload: { - selectedTags, - }, - }); - }; +): ((dispatch: Dispatch) => void) => (dispatch): void => { + dispatch({ + type: UPDATE_SELECTED_TAGS, + payload: { + selectedTags, + }, + }); }; diff --git a/frontend/src/store/actions/usage.ts b/frontend/src/store/actions/usage.ts index f343426bb3..0d8a420af2 100644 --- a/frontend/src/store/actions/usage.ts +++ b/frontend/src/store/actions/usage.ts @@ -19,18 +19,16 @@ export const getUsageData = ( maxTime: number, step: number, service: string, -) => { - return async (dispatch: Dispatch): Promise => { - const requesString = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch( - maxTime, - )}&step=${step}&service=${service || ''}`; - // Step can only be multiple of 3600 - const response = await api.get(requesString); +) => async (dispatch: Dispatch): Promise => { + const requesString = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch( + maxTime, + )}&step=${step}&service=${service || ''}`; + // Step can only be multiple of 3600 + const response = await api.get(requesString); - dispatch({ - type: ActionTypes.getUsageData, - payload: response.data, - // PNOTE - response.data in the axios response has the actual API response - }); - }; + dispatch({ + type: ActionTypes.getUsageData, + payload: response.data, + // PNOTE - response.data in the axios response has the actual API response + }); }; diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts index bd2f5ee16f..890fd64602 100644 --- a/frontend/src/utils/app.ts +++ b/frontend/src/utils/app.ts @@ -1,6 +1,5 @@ import getLocalStorage from 'api/browser/localstorage/get'; import { SKIP_ONBOARDING } from 'constants/onboarding'; -export const isOnboardingSkipped = (): boolean => { - return getLocalStorage(SKIP_ONBOARDING) === 'true'; -}; +export const isOnboardingSkipped = (): boolean => + getLocalStorage(SKIP_ONBOARDING) === 'true'; diff --git a/frontend/src/utils/spanToTree.ts b/frontend/src/utils/spanToTree.ts index c1de73690d..4a1933c2d4 100644 --- a/frontend/src/utils/spanToTree.ts +++ b/frontend/src/utils/spanToTree.ts @@ -4,8 +4,8 @@ import { ITraceForest, ITraceTree, Span } from 'types/api/trace/getTraceItem'; const getSpanReferences = ( rawReferences: string[] = [], -): Record[] => { - return rawReferences.map((rawRef) => { +): Record[] => + rawReferences.map((rawRef) => { const refObject: Record = {}; rawRef .replaceAll('{', '') @@ -19,7 +19,6 @@ const getSpanReferences = ( return refObject; }); -}; // This getSpanTags is migrated from the previous implementation. const getSpanTags = (spanData: Span): { key: string; value: string }[] => { diff --git a/frontend/src/utils/timeUtils.ts b/frontend/src/utils/timeUtils.ts index ca2c9d24a2..d5e2a633dd 100644 --- a/frontend/src/utils/timeUtils.ts +++ b/frontend/src/utils/timeUtils.ts @@ -1,4 +1,4 @@ -export const toUTCEpoch = (time: number): number => { +export function toUTCEpoch(time: number): number { const x = new Date(); return time + x.getTimezoneOffset() * 60 * 1000; -}; +} diff --git a/frontend/src/utils/toFixed.ts b/frontend/src/utils/toFixed.ts index fef653ffad..5b5fb5a49c 100644 --- a/frontend/src/utils/toFixed.ts +++ b/frontend/src/utils/toFixed.ts @@ -1,6 +1,6 @@ -export const toFixed = (input: number, fixedCount: number): number | string => { +export function toFixed(input: number, fixedCount: number): number | string { if (input.toString().split('.').length > 1) { return input.toFixed(fixedCount); } return input; -}; +}