Segments.tsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. import { useEffect, useState, useContext } from 'react';
  2. import { useTranslation } from 'react-i18next';
  3. import { useParams } from 'react-router-dom';
  4. import { SegementService } from '@/http';
  5. import { usePaginationHook } from '@/hooks';
  6. import { rootContext } from '@/context';
  7. import AttuGrid from '@/components/grid/Grid';
  8. import { ColDefinitionsType } from '@/components/grid/Types';
  9. import { ToolBarConfig } from '@/components/grid/Types';
  10. import CustomToolBar from '@/components/grid/ToolBar';
  11. import CompactDialog from '@/pages/dialogs/CompactDialog';
  12. import FlushDialog from '@/pages/dialogs/FlushDialog';
  13. import { getQueryStyles } from '../query/Styles';
  14. import { Segment } from './Types';
  15. const Segments = () => {
  16. const { collectionName = '' } = useParams<{ collectionName: string }>();
  17. const classes = getQueryStyles();
  18. const { setDialog } = useContext(rootContext);
  19. const [segments, setSegments] = useState<Segment[]>([]);
  20. const { t: collectionTrans } = useTranslation('collection');
  21. const { t: btnTrans } = useTranslation('btn');
  22. const [loading, setLoading] = useState<boolean>(true);
  23. const fetchSegments = async () => {
  24. setLoading(true);
  25. const psegments =
  26. (await SegementService.getPSegments(collectionName)) || {};
  27. const qsegments =
  28. (await SegementService.getQSegments(collectionName)) || {};
  29. const combinedArray = psegments.infos.map(p => {
  30. const q: any =
  31. qsegments.infos.find(q => q.segmentID === p.segmentID)! || {};
  32. return {
  33. ...p,
  34. ...Object.keys(q).reduce((acc, key) => {
  35. acc[`q_${key}`] = q[key];
  36. return acc;
  37. }, {} as any),
  38. };
  39. });
  40. setSegments(combinedArray);
  41. setLoading(false);
  42. };
  43. const onCompactExecuted = async () => {
  44. await fetchSegments();
  45. };
  46. const toolbarConfigs: ToolBarConfig[] = [
  47. {
  48. type: 'button',
  49. btnVariant: 'text',
  50. onClick: () => {
  51. setDialog({
  52. open: true,
  53. type: 'custom',
  54. params: {
  55. component: (
  56. <CompactDialog
  57. collectionName={collectionName}
  58. cb={onCompactExecuted}
  59. />
  60. ),
  61. },
  62. });
  63. },
  64. label: btnTrans('compact'),
  65. icon: 'compact',
  66. },
  67. {
  68. type: 'button',
  69. btnVariant: 'text',
  70. onClick: () => {
  71. setDialog({
  72. open: true,
  73. type: 'custom',
  74. params: {
  75. component: (
  76. <FlushDialog
  77. collectionName={collectionName}
  78. cb={onCompactExecuted}
  79. />
  80. ),
  81. },
  82. });
  83. },
  84. label: btnTrans('flush'),
  85. icon: 'saveAs',
  86. },
  87. {
  88. type: 'button',
  89. btnVariant: 'text',
  90. onClick: () => {
  91. fetchSegments();
  92. },
  93. label: btnTrans('refresh'),
  94. icon: 'refresh',
  95. },
  96. ];
  97. const colDefinitions: ColDefinitionsType[] = [
  98. {
  99. id: 'segmentID',
  100. align: 'left',
  101. disablePadding: false,
  102. label: collectionTrans('segmentID'),
  103. },
  104. {
  105. id: 'partitionID',
  106. align: 'left',
  107. disablePadding: false,
  108. label: collectionTrans('partitionID'),
  109. },
  110. {
  111. id: 'state',
  112. align: 'left',
  113. disablePadding: false,
  114. label: collectionTrans('segPState'),
  115. },
  116. {
  117. id: 'num_rows',
  118. align: 'left',
  119. disablePadding: false,
  120. label: collectionTrans('num_rows'),
  121. },
  122. {
  123. id: 'q_nodeIds',
  124. align: 'left',
  125. disablePadding: false,
  126. label: collectionTrans('q_nodeIds'),
  127. formatter(data, cellData, cellIndex) {
  128. return cellData.join(',');
  129. },
  130. },
  131. {
  132. id: 'q_state',
  133. align: 'left',
  134. disablePadding: false,
  135. label: collectionTrans('q_state'),
  136. },
  137. // {
  138. // id: 'q_index_name',
  139. // align: 'left',
  140. // disablePadding: false,
  141. // label: collectionTrans('q_index_name'),
  142. // },
  143. ];
  144. useEffect(() => {
  145. fetchSegments();
  146. }, []);
  147. const {
  148. pageSize,
  149. handlePageSize,
  150. currentPage,
  151. handleCurrentPage,
  152. total,
  153. data,
  154. order,
  155. orderBy,
  156. handleGridSort,
  157. } = usePaginationHook(segments);
  158. const handlePageChange = (e: any, page: number) => {
  159. handleCurrentPage(page);
  160. };
  161. return (
  162. <div className={classes.root}>
  163. <CustomToolBar toolbarConfigs={toolbarConfigs} />
  164. <AttuGrid
  165. toolbarConfigs={[]}
  166. colDefinitions={colDefinitions}
  167. rows={data}
  168. rowCount={total}
  169. primaryKey="name"
  170. showPagination={true}
  171. openCheckBox={false}
  172. page={currentPage}
  173. onPageChange={handlePageChange}
  174. rowsPerPage={pageSize}
  175. setRowsPerPage={handlePageSize}
  176. isLoading={loading}
  177. order={order}
  178. orderBy={orderBy}
  179. handleSort={handleGridSort}
  180. />
  181. </div>
  182. );
  183. };
  184. export default Segments;