123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- import { useEffect, useState, useContext } from 'react';
- import { useTranslation } from 'react-i18next';
- import { useParams } from 'react-router-dom';
- import { SegementService } from '@/http';
- import { usePaginationHook } from '@/hooks';
- import { rootContext } from '@/context';
- import AttuGrid from '@/components/grid/Grid';
- import { ColDefinitionsType } from '@/components/grid/Types';
- import { ToolBarConfig } from '@/components/grid/Types';
- import CustomToolBar from '@/components/grid/ToolBar';
- import CompactDialog from '@/pages/dialogs/CompactDialog';
- import FlushDialog from '@/pages/dialogs/FlushDialog';
- import { getQueryStyles } from '../query/Styles';
- import { Segment } from './Types';
- const Segments = () => {
- const { collectionName = '' } = useParams<{ collectionName: string }>();
- const classes = getQueryStyles();
- const { setDialog } = useContext(rootContext);
- const [segments, setSegments] = useState<Segment[]>([]);
- const { t: collectionTrans } = useTranslation('collection');
- const { t: btnTrans } = useTranslation('btn');
- const [loading, setLoading] = useState<boolean>(true);
- const fetchSegments = async () => {
- setLoading(true);
- const psegments =
- (await SegementService.getPSegments(collectionName)) || {};
- const qsegments =
- (await SegementService.getQSegments(collectionName)) || {};
- const combinedArray = psegments.infos.map(p => {
- const q: any =
- qsegments.infos.find(q => q.segmentID === p.segmentID)! || {};
- return {
- ...p,
- ...Object.keys(q).reduce((acc, key) => {
- acc[`q_${key}`] = q[key];
- return acc;
- }, {} as any),
- };
- });
- setSegments(combinedArray);
- setLoading(false);
- };
- const onCompactExecuted = async () => {
- await fetchSegments();
- };
- const toolbarConfigs: ToolBarConfig[] = [
- {
- type: 'button',
- btnVariant: 'text',
- onClick: () => {
- setDialog({
- open: true,
- type: 'custom',
- params: {
- component: (
- <CompactDialog
- collectionName={collectionName}
- cb={onCompactExecuted}
- />
- ),
- },
- });
- },
- label: btnTrans('compact'),
- icon: 'compact',
- },
- {
- type: 'button',
- btnVariant: 'text',
- onClick: () => {
- setDialog({
- open: true,
- type: 'custom',
- params: {
- component: (
- <FlushDialog
- collectionName={collectionName}
- cb={onCompactExecuted}
- />
- ),
- },
- });
- },
- label: btnTrans('flush'),
- icon: 'saveAs',
- },
- {
- type: 'button',
- btnVariant: 'text',
- onClick: () => {
- fetchSegments();
- },
- label: btnTrans('refresh'),
- icon: 'refresh',
- },
- ];
- const colDefinitions: ColDefinitionsType[] = [
- {
- id: 'segmentID',
- align: 'left',
- disablePadding: false,
- label: collectionTrans('segmentID'),
- },
- {
- id: 'partitionID',
- align: 'left',
- disablePadding: false,
- label: collectionTrans('partitionID'),
- },
- {
- id: 'state',
- align: 'left',
- disablePadding: false,
- label: collectionTrans('segPState'),
- },
- {
- id: 'num_rows',
- align: 'left',
- disablePadding: false,
- label: collectionTrans('num_rows'),
- },
- {
- id: 'q_nodeIds',
- align: 'left',
- disablePadding: false,
- label: collectionTrans('q_nodeIds'),
- formatter(data, cellData, cellIndex) {
- return cellData.join(',');
- },
- },
- {
- id: 'q_state',
- align: 'left',
- disablePadding: false,
- label: collectionTrans('q_state'),
- },
- // {
- // id: 'q_index_name',
- // align: 'left',
- // disablePadding: false,
- // label: collectionTrans('q_index_name'),
- // },
- ];
- useEffect(() => {
- fetchSegments();
- }, []);
- const {
- pageSize,
- handlePageSize,
- currentPage,
- handleCurrentPage,
- total,
- data,
- order,
- orderBy,
- handleGridSort,
- } = usePaginationHook(segments);
- const handlePageChange = (e: any, page: number) => {
- handleCurrentPage(page);
- };
- return (
- <div className={classes.root}>
- <CustomToolBar toolbarConfigs={toolbarConfigs} />
- <AttuGrid
- toolbarConfigs={[]}
- colDefinitions={colDefinitions}
- rows={data}
- rowCount={total}
- primaryKey="name"
- showPagination={true}
- openCheckBox={false}
- page={currentPage}
- onPageChange={handlePageChange}
- rowsPerPage={pageSize}
- setRowsPerPage={handlePageSize}
- isLoading={loading}
- order={order}
- orderBy={orderBy}
- handleSort={handleGridSort}
- />
- </div>
- );
- };
- export default Segments;
|