* -------------------------------------------------------------------------
* This file is part of the MindStudio project.
* Copyright (c) 2025 Huawei Technologies Co.,Ltd.
*
* MindStudio is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
* -------------------------------------------------------------------------
*/
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { runInAction } from 'mobx';
import { Spin, CollapsiblePanel } from '@insight/lib/components';
import { useTranslation } from 'react-i18next';
import { Session } from '../entity/session';
import { CurveSession } from '../entity/curveSession';
import { AntTableChart } from './AntTableChart';
import { TableInfo, TableCondition } from '../entity/curve';
import { tableDataGet } from '../utils/RequestUtils';
import { customConsole as console } from '@insight/lib/utils';
const buildDynamicSearchParam = (memorySession: CurveSession, tempCurrent: number): any => {
const param: TableCondition = {
rankId: memorySession.rankIdCondition.value,
type: memorySession.groupId,
currentPage: tempCurrent,
pageSize: memorySession.pageSize,
};
if (memorySession.selectedRange) {
param.startTime = memorySession.selectedRange.startTs;
param.endTime = memorySession.selectedRange.endTs;
}
return param;
};
const CurveDetailTable = observer(({ session, curveSession }:
{ session: Session; curveSession: CurveSession }) => {
const [memoryTableData, setMemoryTableData] = useState<any>([]);
const [memoryTableHead, setMemoryTableHead] = useState<any>([]);
const [tableSpin, setTableSpin] = useState<boolean>(false);
const [total, setTotal] = useState<number>(0);
const [orderBy, setOrderBy] = useState<string | undefined>(undefined);
const [order, setOrder] = useState<string | undefined>(undefined);
const { t } = useTranslation('statistic');
const onRowSelected = (record?: any, rowIndex?: number): void => {
curveSession.selectedRecord = record;
};
const handlePageChanged = (newCurrent: number, newPageSize: number): void => {
runInAction(() => {
curveSession.current = newCurrent;
curveSession.pageSize = newPageSize;
});
};
const preParamCheck = (): boolean => {
const isRankIdConditionInvalid = curveSession.rankIdCondition.value === undefined || curveSession.rankIdCondition.value === '';
if (isRankIdConditionInvalid) {
setMemoryTableData([]);
setTotal(0);
runInAction(() => {
curveSession.isBtnDisabled = true;
curveSession.current = 1;
curveSession.pageSize = 10;
});
return false;
};
return true;
};
const setTempCurrent = (resetCurrent = false): number => {
let tempCurrent = curveSession.current;
if (resetCurrent) {
tempCurrent = 1;
runInAction(() => {
curveSession.current = 1;
});
}
return tempCurrent;
};
const setParamOtherCondition = (param: any): any => {
let newParam = param;
if (order !== undefined) {
newParam = { order, orderBy, ...param };
};
setTableSpin(true);
runInAction(() => {
curveSession.isBtnDisabled = true;
});
return newParam;
};
const fetchDetailTableData = (param: any): void => {
tableDataGet(param).then((resp: TableInfo) => {
const tableDataDetails = resp.operatorDetail;
setTotal(resp.totalNum);
setMemoryTableData(tableDataDetails.map((item, idx) => ({ ...item, name: item.name ?? idx })));
if (JSON.stringify(memoryTableHead) !== JSON.stringify(resp.columnAttr)) {
setMemoryTableHead(resp.columnAttr);
}
}).catch((err: any) => {
console.error(err);
}).finally(() => {
setTableSpin(false);
runInAction(() => {
curveSession.isBtnDisabled = false;
});
});
};
const setDetailTableData = (resetCurrent = false): void => {
if (!preParamCheck()) {
return;
};
const tempCurrent = setTempCurrent(resetCurrent);
let param = buildDynamicSearchParam(curveSession, tempCurrent);
param = setParamOtherCondition(param);
fetchDetailTableData(param);
};
useEffect(() => {
setOrder(undefined);
setOrderBy(undefined);
setDetailTableData();
}, [curveSession.rankIdCondition.value, curveSession.groupId]);
useEffect(() => {
setDetailTableData();
}, [curveSession.selectedRange, curveSession.current, curveSession.pageSize, order, orderBy, curveSession.switchPage, t]);
return (
<CollapsiblePanel title={t('Table Data Details')} secondary>
{
<>
<Spin spinning={tableSpin} tip={t('Loading')}>
<AntTableChart
tableData={{
columns: memoryTableHead,
rows: memoryTableData,
}}
onRowSelected={onRowSelected}
current={curveSession.current}
pageSize={curveSession.pageSize}
onPageChange={handlePageChanged}
onOrderChange={setOrder}
onOrderByChange={setOrderBy}
total={total}
rankId={curveSession.rankIdCondition.value}
groupName={curveSession.groupId}
/>
</Spin>
</>}
</CollapsiblePanel>
);
});
export default CurveDetailTable;