pages/eventCatalogs.tsx (187 lines of code) (raw):
/*
* 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;