Skip to content

Commit

Permalink
Fix: f/e: log pipelines: changes should be preserved when collapsing …
Browse files Browse the repository at this point in the history 
…edited pipelines (#3770)

* chore: pass dirty pipeline to preview action when editing

* chore: update snapshot for pipeline lists view

* chore: log pipelines list view: refactor dirty pipeline state management

* chore: use memoized value for filtered pipelines instead of useEffect based updates

* chore: update pipeline reorder logic to work on filtered view too

* chore: minor cleanup

---------

Co-authored-by: Rajat Dabade <rajat@signoz.io>
  • Loading branch information
@raj-k-singh
raj-k-singh and Rajat Dabade authored Oct 25, 2023
1 parent f90ae99 commit 2c2775c
Showing 1 changed file with 53 additions and 47 deletions.
100 changes: 53 additions & 47 deletions frontend/src/container/PipelinePage/PipelineListsView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Modal, Table } from 'antd';
import { ExpandableConfig } from 'antd/es/table/interface';
import savePipeline from 'api/pipeline/post';
import { useNotifications } from 'hooks/useNotifications';
import { cloneDeep } from 'lodash-es';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import cloneDeep from 'lodash-es/cloneDeep';
import React, { useCallback, useMemo, useState } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -61,31 +61,52 @@ function PipelineListsView({
const [currPipelineData, setCurrPipelineData] = useState<Array<PipelineData>>(
cloneDeep(pipelineData?.pipelines),
);
const [
expandedPipelineData,
setExpandedPipelineData,
] = useState<PipelineData>();

const [expandedPipelineId, setExpandedPipelineId] = useState<
string | undefined
>(undefined);
const expandedPipelineData = useCallback(
() => currPipelineData.find((p) => p.id === expandedPipelineId),
[currPipelineData, expandedPipelineId],
);
const setExpandedPipelineData = useCallback(
(newData: PipelineData): void => {
if (expandedPipelineId) {
const pipelineIdx = currPipelineData.findIndex(
(p) => p.id === expandedPipelineId,
);
if (pipelineIdx >= 0) {
const newPipelineData = [...currPipelineData];
newPipelineData[pipelineIdx] = newData;
setCurrPipelineData(newPipelineData);
}
}
},
[expandedPipelineId, currPipelineData],
);

const [
selectedProcessorData,
setSelectedProcessorData,
] = useState<ProcessorData>();

const [
selectedPipelineData,
setSelectedPipelineData,
] = useState<PipelineData>();

const [expandedRowKeys, setExpandedRowKeys] = useState<Array<string>>();
const [showSaveButton, setShowSaveButton] = useState<string>();
const isEditingActionMode = isActionMode === ActionMode.Editing;

useEffect(() => {
if (pipelineSearchValue === '') setCurrPipelineData(pipelineData?.pipelines);
if (pipelineSearchValue !== '') {
const filterData = pipelineData?.pipelines.filter((data: PipelineData) =>
getDataOnSearch(data as never, pipelineSearchValue),
);
setCurrPipelineData(filterData);
const visibleCurrPipelines = useMemo((): Array<PipelineData> => {
if (pipelineSearchValue === '') {
return currPipelineData;
}
}, [pipelineSearchValue, pipelineData?.pipelines]);
return currPipelineData.filter((data) =>
getDataOnSearch(data as never, pipelineSearchValue),
);
}, [currPipelineData, pipelineSearchValue]);

const handleAlert = useCallback(
({ title, descrition, buttontext, onCancel, onOk }: AlertMessage) => {
Expand Down Expand Up @@ -173,11 +194,7 @@ function PipelineListsView({
align: 'center',
render: (_value, record): JSX.Element => (
<PipelineActions
pipeline={
expandedPipelineData?.id === record.id
? (expandedPipelineData as PipelineData)
: record
}
pipeline={record}
editAction={pipelineEditAction(record)}
deleteAction={pipelineDeleteAction(record)}
/>
Expand Down Expand Up @@ -214,7 +231,6 @@ function PipelineListsView({
pipelineEditAction,
pipelineDeleteAction,
onSwitchPipelineChange,
expandedPipelineData,
]);

const updatePipelineSequence = useCallback(
Expand All @@ -236,23 +252,30 @@ function PipelineListsView({
(dragIndex: number, hoverIndex: number) => {
if (currPipelineData && isEditingActionMode) {
const rawData = currPipelineData;
const updatedRow = getUpdatedRow(currPipelineData, dragIndex, hoverIndex);
updatedRow.forEach((item, index) => {

const updatedRows = getUpdatedRow(
currPipelineData,
visibleCurrPipelines[dragIndex].orderId - 1,
visibleCurrPipelines[hoverIndex].orderId - 1,
);

updatedRows.forEach((item, index) => {
const obj = item;
obj.orderId = index + 1;
});
handleAlert({
title: t('reorder_pipeline'),
descrition: t('reorder_pipeline_description'),
buttontext: t('reorder'),
onOk: updatePipelineSequence(updatedRow),
onOk: updatePipelineSequence(updatedRows),
onCancel: onCancelPipelineSequence(rawData),
});
}
},
[
currPipelineData,
isEditingActionMode,
visibleCurrPipelines,
handleAlert,
t,
updatePipelineSequence,
Expand All @@ -268,7 +291,7 @@ function PipelineListsView({
setActionType={setActionType}
processorEditAction={processorEditAction}
setShowSaveButton={setShowSaveButton}
expandedPipelineData={expandedPipelineData}
expandedPipelineData={expandedPipelineData()}
setExpandedPipelineData={setExpandedPipelineData}
prevPipelineData={prevPipelineData}
/>
Expand All @@ -280,6 +303,7 @@ function PipelineListsView({
expandedPipelineData,
setActionType,
prevPipelineData,
setExpandedPipelineData,
],
);

Expand All @@ -290,7 +314,7 @@ function PipelineListsView({
keys.push(record?.id);
}
setExpandedRowKeys(keys);
setExpandedPipelineData(record);
setExpandedPipelineId(record.id);
},
[],
);
Expand Down Expand Up @@ -324,18 +348,7 @@ function PipelineListsView({

const onSaveConfigurationHandler = useCallback(async () => {
const modifiedPipelineData = currPipelineData.map((item: PipelineData) => {
const pipelineData = item;
if (
expandedPipelineData !== undefined &&
item.id === expandedPipelineData?.id
) {
pipelineData.config = expandedPipelineData?.config;
}
pipelineData.config = item.config;
return pipelineData;
});
modifiedPipelineData.forEach((item: PipelineData) => {
const pipelineData = item;
const pipelineData = { ...item };
delete pipelineData?.id;
return pipelineData;
});
Expand Down Expand Up @@ -363,14 +376,7 @@ function PipelineListsView({
setCurrPipelineData(modifiedPipelineData);
setPrevPipelineData(modifiedPipelineData);
}
}, [
currPipelineData,
expandedPipelineData,
notifications,
refetchPipelineLists,
setActionMode,
t,
]);
}, [currPipelineData, notifications, refetchPipelineLists, setActionMode, t]);

const onCancelConfigurationHandler = useCallback((): void => {
setActionMode(ActionMode.Viewing);
Expand Down Expand Up @@ -424,7 +430,7 @@ function PipelineListsView({
setActionType={setActionType}
selectedProcessorData={selectedProcessorData}
setShowSaveButton={setShowSaveButton}
expandedPipelineData={expandedPipelineData}
expandedPipelineData={expandedPipelineData()}
setExpandedPipelineData={setExpandedPipelineData}
/>
<Container>
Expand All @@ -439,7 +445,7 @@ function PipelineListsView({
expandedRowRender={expandedRowView}
expandable={expandableConfig}
components={tableComponents}
dataSource={currPipelineData}
dataSource={visibleCurrPipelines}
onRow={onRowHandler}
footer={footer}
pagination={false}
Expand Down

0 comments on commit 2c2775c

Please sign in to comment.