pages/eventCatalogs.tsx - eventmesh-dashboard - Git at Google

 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */

 import React, { useState, useEffect, useCallback } from 'react';
 import Head from 'next/head';
 import type { NextPage } from 'next';

 import {
   Divider,
   Button,
   Flex,
   Table,
   Thead,
   Tbody,
   Tr,
   Th,
   Td,
   TableContainer,
   Box,
   Spinner,
   Text,
 } from '@chakra-ui/react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import axios from 'axios';
 import moment from 'moment';
 import Details from '../components/eventCatalogs/Details';
 import CreateCatalog from '../components/eventCatalogs/Create';
 import { EventCatalogType } from '../components/eventCatalogs/types';
 import { WorkflowStatusMap } from '../components/eventCatalogs/constant';

 const ApiRoot = process.env.NEXT_PUBLIC_EVENTCATALOG_API_ROOT;

 const EventCatalogs: NextPage = () => {
   const [isShowCreate, setIsShowCreate] = useState(false);
   const [curCatalog, setCurCatalog] = useState<EventCatalogType>();

   const [catalogs, setCatalogs] = useState<EventCatalogType[]>([]);
   const [total, setTotal] = useState(0);

   const pageSize = 10;
   const [isLoading, setIsLoading] = useState(true);
   const [pageIndex, setPageIndex] = useState(1);

   const [refreshFlag, setRefreshFlag] = useState<number>(+new Date());

   const getEventCatalogs = useCallback(async () => {
     setIsLoading(true);
     try {
       const { data } = await axios.get<{
         total: number;
         events: EventCatalogType[];
       }>(`${ApiRoot}/catalog`, {
         params: { page: pageIndex, size: pageSize },
       });
       setCatalogs(data.events);
       setTotal(data.total);
       setIsLoading(false);
     } catch (error) {
       setIsLoading(false);
     }
   }, []);

   useEffect(() => {
     const controller = new AbortController();
     getEventCatalogs();
     return () => {
       controller.abort();
     };
   }, [pageIndex, pageSize, refreshFlag]);

   return (
     <>
       <Head>
         <title>Event Catalogs | Apache EventMesh Dashboard</title>
       </Head>
       <Box
         w="full"
         h="full"
         bg="white"
         flexDirection="column"
         borderWidth="1px"
         borderRadius="md"
         overflow="hidden"
         p="6"
       >
         <Flex w="full" justifyContent="space-between" mt="2" mb="2">
           <Button
             size="md"
             backgroundColor="#2a62ad"
             color="white"
             _hover={{ bg: '#dce5fe', color: '#2a62ad' }}
             onClick={() => setIsShowCreate(true)}
           >
             Create Catalog
           </Button>
           <Button
             size="md"
             colorScheme="blue"
             variant="ghost"
             onClick={() => setRefreshFlag(+new Date())}
           >
             Refresh
           </Button>
         </Flex>
         <Divider mt="15" mb="15" orientation="horizontal" />
         <TableContainer>
           <Table variant="simple">
             <Thead>
               <Tr>
                 {/* <Th>Catalog ID</Th> */}
                 <Th>Title</Th>
                 <Th>File Name</Th>
                 <Th>Version</Th>
                 <Th>Status</Th>
                 <Th>Created At</Th>
                 <Th>Updated At</Th>
               </Tr>
             </Thead>
             <Tbody>
               {catalogs.map((catalog) => (
                 <Tr key={catalog.id}>
                   {/* <Td>
                     <Button
                       colorScheme="blue"
                       variant="ghost"
                       onClick={() => setCurCatalog(catalog)}
                     >
                       {catalog.id}
                     </Button>
                   </Td> */}
                   <Td>
                     <Button
                       colorScheme="blue"
                       variant="ghost"
                       onClick={() => setCurCatalog(catalog)}
                     >
                       {catalog.title}
                     </Button>
                   </Td>
                   <Td>{catalog.file_name}</Td>
                   <Td>{catalog.version}</Td>
                   <Td>{WorkflowStatusMap.get(catalog.status)}</Td>
                   <Td>
                     {moment(catalog.create_time).format('YYYY-MM-DD HH:mm:ss')}
                   </Td>
                   <Td>
                     {moment(catalog.update_time).format('YYYY-MM-DD HH:mm:ss')}
                   </Td>
                 </Tr>
               ))}
             </Tbody>
           </Table>
         </TableContainer>
         <Flex mt={4} alignItems="center">
           {isLoading ? (
             <Spinner colorScheme="blue" size="sm" />
           ) : (
             <Text fontSize="sm" color="#909090">
               {total}
               {` catalog${total > 1 ? 's' : ''} in total, `}
               {`page ${pageIndex} of ${Math.ceil(total / pageSize)}`}
             </Text>
           )}
           <Flex flex={1} justifyContent="flex-end" align="center">
             <Button
               mr={2}
               size="sm"
               leftIcon={<ChevronLeftIcon />}
               colorScheme="blue"
               variant="outline"
               disabled={pageIndex < 2}
               onClick={() => setPageIndex(pageIndex - 1)}
             >
               Prev
             </Button>
             <Button
               size="sm"
               rightIcon={<ChevronRightIcon />}
               colorScheme="blue"
               variant="outline"
               disabled={pageIndex >= Math.ceil(total / pageSize)}
               onClick={() => setPageIndex(pageIndex + 1)}
             >
               Next
             </Button>
           </Flex>
         </Flex>
       </Box>
       <Details
         visible={Boolean(curCatalog)}
         data={curCatalog}
         onClose={() => setCurCatalog(undefined)}
       />
       <CreateCatalog
         visible={isShowCreate}
         onSucceed={() => {
           setIsShowCreate(false);
           setPageIndex(1);
           setRefreshFlag(+new Date());
         }}
         onClose={() => setIsShowCreate(false)}
       />
     </>
   );
 };

 export default EventCatalogs;
	/*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on an
	* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/

	import React, { useState, useEffect, useCallback } from 'react';
	import Head from 'next/head';
	import type { NextPage } from 'next';

	import {
	Divider,
	Button,
	Flex,
	Table,
	Thead,
	Tbody,
	Tr,
	Th,
	Td,
	TableContainer,
	Box,
	Spinner,
	Text,
	} from '@chakra-ui/react';
	import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
	import axios from 'axios';
	import moment from 'moment';
	import Details from '../components/eventCatalogs/Details';
	import CreateCatalog from '../components/eventCatalogs/Create';
	import { EventCatalogType } from '../components/eventCatalogs/types';
	import { WorkflowStatusMap } from '../components/eventCatalogs/constant';

	const ApiRoot = process.env.NEXT_PUBLIC_EVENTCATALOG_API_ROOT;

	const EventCatalogs: NextPage = () => {
	const [isShowCreate, setIsShowCreate] = useState(false);
	const [curCatalog, setCurCatalog] = useState<EventCatalogType>();

	const [catalogs, setCatalogs] = useState<EventCatalogType[]>([]);
	const [total, setTotal] = useState(0);

	const pageSize = 10;
	const [isLoading, setIsLoading] = useState(true);
	const [pageIndex, setPageIndex] = useState(1);

	const [refreshFlag, setRefreshFlag] = useState<number>(+new Date());

	const getEventCatalogs = useCallback(async () => {
	setIsLoading(true);
	try {
	const { data } = await axios.get<{
	total: number;
	events: EventCatalogType[];
	}>(`${ApiRoot}/catalog`, {
	params: { page: pageIndex, size: pageSize },
	});
	setCatalogs(data.events);
	setTotal(data.total);
	setIsLoading(false);
	} catch (error) {
	setIsLoading(false);
	}
	}, []);

	useEffect(() => {
	const controller = new AbortController();
	getEventCatalogs();
	return () => {
	controller.abort();
	};
	}, [pageIndex, pageSize, refreshFlag]);

	return (
	<>
	<Head>
	<title>Event Catalogs \| Apache EventMesh Dashboard</title>
	</Head>
	<Box
	w="full"
	h="full"
	bg="white"
	flexDirection="column"
	borderWidth="1px"
	borderRadius="md"
	overflow="hidden"
	p="6"
	>
	<Flex w="full" justifyContent="space-between" mt="2" mb="2">
	<Button
	size="md"
	backgroundColor="#2a62ad"
	color="white"
	_hover={{ bg: '#dce5fe', color: '#2a62ad' }}
	onClick={() => setIsShowCreate(true)}
	>
	Create Catalog
	</Button>
	<Button
	size="md"
	colorScheme="blue"
	variant="ghost"
	onClick={() => setRefreshFlag(+new Date())}
	>
	Refresh
	</Button>
	</Flex>
	<Divider mt="15" mb="15" orientation="horizontal" />
	<TableContainer>
	<Table variant="simple">
	<Thead>
	<Tr>
	{/* <Th>Catalog ID</Th> */}
	<Th>Title</Th>
	<Th>File Name</Th>
	<Th>Version</Th>
	<Th>Status</Th>
	<Th>Created At</Th>
	<Th>Updated At</Th>
	</Tr>
	</Thead>
	<Tbody>
	{catalogs.map((catalog) => (
	<Tr key={catalog.id}>
	{/* <Td>
	<Button
	colorScheme="blue"
	variant="ghost"
	onClick={() => setCurCatalog(catalog)}
	>
	{catalog.id}
	</Button>
	</Td> */}
	<Td>
	<Button
	colorScheme="blue"
	variant="ghost"
	onClick={() => setCurCatalog(catalog)}
	>
	{catalog.title}
	</Button>
	</Td>
	<Td>{catalog.file_name}</Td>
	<Td>{catalog.version}</Td>
	<Td>{WorkflowStatusMap.get(catalog.status)}</Td>
	<Td>
	{moment(catalog.create_time).format('YYYY-MM-DD HH:mm:ss')}
	</Td>
	<Td>
	{moment(catalog.update_time).format('YYYY-MM-DD HH:mm:ss')}
	</Td>
	</Tr>
	))}
	</Tbody>
	</Table>
	</TableContainer>
	<Flex mt={4} alignItems="center">
	{isLoading ? (
	<Spinner colorScheme="blue" size="sm" />
	) : (
	<Text fontSize="sm" color="#909090">
	{total}
	{` catalog${total > 1 ? 's' : ''} in total, `}
	{`page ${pageIndex} of ${Math.ceil(total / pageSize)}`}
	</Text>
	)}
	<Flex flex={1} justifyContent="flex-end" align="center">
	<Button
	mr={2}
	size="sm"
	leftIcon={<ChevronLeftIcon />}
	colorScheme="blue"
	variant="outline"
	disabled={pageIndex < 2}
	onClick={() => setPageIndex(pageIndex - 1)}
	>
	Prev
	</Button>
	<Button
	size="sm"
	rightIcon={<ChevronRightIcon />}
	colorScheme="blue"
	variant="outline"
	disabled={pageIndex >= Math.ceil(total / pageSize)}
	onClick={() => setPageIndex(pageIndex + 1)}
	>
	Next
	</Button>
	</Flex>
	</Flex>
	</Box>
	<Details
	visible={Boolean(curCatalog)}
	data={curCatalog}
	onClose={() => setCurCatalog(undefined)}
	/>
	<CreateCatalog
	visible={isShowCreate}
	onSucceed={() => {
	setIsShowCreate(false);
	setPageIndex(1);
	setRefreshFlag(+new Date());
	}}
	onClose={() => setIsShowCreate(false)}
	/>
	</>
	);
	};

	export default EventCatalogs;