비즈니스 로그 위치 변경
This commit is contained in:
224
src/pages/DataManage/BusinessLogView.js
Normal file
224
src/pages/DataManage/BusinessLogView.js
Normal file
@@ -0,0 +1,224 @@
|
||||
import React, { Fragment, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Title,
|
||||
TableStyle,
|
||||
FormWrapper,
|
||||
TableWrapper,
|
||||
TableActionButton,
|
||||
TableDetailRow,
|
||||
TableDetailContainer,
|
||||
TableDetailFlex,
|
||||
TableDetailColumn,
|
||||
DetailTableInfo,
|
||||
} from '../../styles/Components';
|
||||
|
||||
import { withAuth } from '../../utils/hook';
|
||||
import {
|
||||
authType,
|
||||
modalTypes,
|
||||
} from '../../assets/data';
|
||||
import { INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DynamicModal, ExcelDownButton, Pagination, TopButton, ViewTableInfo } from '../../components/common';
|
||||
import { TableSkeleton } from '../../components/Skeleton/TableSkeleton';
|
||||
import BusinessLogSearchBar, { useBusinessLogSearch } from '../../components/ServiceManage/searchBar/BusinessLogSearchBar';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const BusinessLogView = () => {
|
||||
const token = sessionStorage.getItem('token');
|
||||
const { t } = useTranslation();
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const [alertMsg, setAlertMsg] = useState('');
|
||||
|
||||
const [expandedRows, setExpandedRows] = useState({});
|
||||
|
||||
const {
|
||||
searchParams,
|
||||
loading,
|
||||
data: dataList,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handlePageSizeChange,
|
||||
handleOrderByChange,
|
||||
updateSearchParams
|
||||
} = useBusinessLogSearch(token, 500, setAlertMsg);
|
||||
|
||||
const toggleRowExpand = (index) => {
|
||||
setExpandedRows(prev => ({
|
||||
...prev,
|
||||
[index]: !prev[index]
|
||||
}));
|
||||
};
|
||||
|
||||
// 테이블 헤더 컬럼 구성
|
||||
const tableHeaders = useMemo(() => {
|
||||
return [
|
||||
{ id: 'logTime', label: '일시', width: '120px' },
|
||||
{ id: 'userGuid', label: 'GUID', width: '200px' },
|
||||
{ id: 'accountId', label: 'account ID', width: '100px' },
|
||||
{ id: 'userNickname', label: '아바타명', width: '150px' },
|
||||
{ id: 'tranId', label: '트랜잭션 ID', width: '200px' },
|
||||
{ id: 'action', label: '액션', width: '150px' },
|
||||
{ id: 'domain', label: '도메인', width: '120px' },
|
||||
{ id: 'details', label: '상세 정보', width: '100px' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
|
||||
// Actor 데이터 렌더링 함수
|
||||
const renderActorData = (actor) => {
|
||||
if (!actor || typeof actor !== 'object') return <></>;
|
||||
|
||||
return (
|
||||
<DetailTableInfo>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2">Actor 정보</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.entries(actor).map(([key, value]) => (
|
||||
<tr key={`actor-${key}`}>
|
||||
<td>{key}</td>
|
||||
<td>
|
||||
{typeof value === 'object' && value !== null
|
||||
? JSON.stringify(value)
|
||||
: String(value)
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</DetailTableInfo>
|
||||
);
|
||||
};
|
||||
|
||||
// Infos 데이터 렌더링 함수
|
||||
const renderInfosData = (infos) => {
|
||||
if (!infos || !Array.isArray(infos) || infos.length === 0) return <></>;
|
||||
|
||||
return (
|
||||
<DetailTableInfo>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2">Infos 정보</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{infos.map((info, infoIndex) => (
|
||||
<Fragment key={`info-${infoIndex}`}>
|
||||
{Object.entries(info).map(([key, value]) => (
|
||||
<tr key={`info-${infoIndex}-${key}`}>
|
||||
<td>{key}</td>
|
||||
<td>
|
||||
{typeof value === 'object' && value !== null
|
||||
? JSON.stringify(value)
|
||||
: Array.isArray(value)
|
||||
? value.join(', ')
|
||||
: String(value)
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</DetailTableInfo>
|
||||
);
|
||||
};
|
||||
|
||||
const handleModalSubmit = async (type, param = null) => {
|
||||
switch (type) {
|
||||
case "warning":
|
||||
setAlertMsg('')
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>비즈니스 로그 조회</Title>
|
||||
<FormWrapper>
|
||||
<BusinessLogSearchBar
|
||||
searchParams={searchParams}
|
||||
onSearch={(newParams, executeSearch = true) => {
|
||||
if (executeSearch) {
|
||||
handleSearch(newParams);
|
||||
} else {
|
||||
updateSearchParams(newParams);
|
||||
}
|
||||
}}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</FormWrapper>
|
||||
<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange}>
|
||||
<ExcelDownButton data={dataList?.generic_list} fileName={t('FILE_BUSINESS_LOG')} />
|
||||
</ViewTableInfo>
|
||||
{loading ? <TableSkeleton width='100%' count={15} /> :
|
||||
<>
|
||||
<TableWrapper>
|
||||
<TableStyle ref={tableRef}>
|
||||
<thead>
|
||||
<tr>
|
||||
{tableHeaders.map(header => (
|
||||
<th key={header.id} width={header.width}>{header.label}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList?.generic_list?.map((item, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{item.logTime}</td>
|
||||
<td>{item.userGuid}</td>
|
||||
<td>{item.accountId}</td>
|
||||
<td>{item.userNickname}</td>
|
||||
<td>{item.tranId}</td>
|
||||
<td>{item.action}</td>
|
||||
<td>{item.domain === 'None' ? '-' : item.domain}</td>
|
||||
<td>
|
||||
<TableActionButton onClick={() => toggleRowExpand(index)}>
|
||||
{expandedRows[index] ? '접기' : '상세보기'}
|
||||
</TableActionButton>
|
||||
</td>
|
||||
</tr>
|
||||
{expandedRows[index] && (
|
||||
<TableDetailRow>
|
||||
<td colSpan={tableHeaders.length}>
|
||||
<TableDetailContainer>
|
||||
<TableDetailFlex>
|
||||
<TableDetailColumn>
|
||||
{renderActorData(item.header?.Actor)}
|
||||
</TableDetailColumn>
|
||||
<TableDetailColumn>
|
||||
{renderInfosData(item.body?.Infos)}
|
||||
</TableDetailColumn>
|
||||
</TableDetailFlex>
|
||||
</TableDetailContainer>
|
||||
</td>
|
||||
</TableDetailRow>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
|
||||
<TopButton />
|
||||
</>
|
||||
}
|
||||
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={alertMsg ? 'view' : 'hidden'}
|
||||
modalText={alertMsg}
|
||||
handleSubmit={() => handleModalSubmit('warning')}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default withAuth(authType.businessLogRead)(BusinessLogView);
|
||||
Reference in New Issue
Block a user