transfer dashboard from parent
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c87e042
--- /dev/null
+++ b/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/components/client/GrpcClientTable.tsx b/components/client/GrpcClientTable.tsx
new file mode 100644
index 0000000..1ffdfea
--- /dev/null
+++ b/components/client/GrpcClientTable.tsx
@@ -0,0 +1,217 @@
+/*
+ * 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 {
+ HStack,
+ Select,
+ Input,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ useToast,
+ Box,
+ Button,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface GrpcClient {
+ env: string,
+ subsystem: string,
+ url: string,
+ pid: number,
+ host: string,
+ port: number,
+ version: string,
+ idc: string,
+ group: string,
+ purpose: string,
+ protocol: string,
+}
+
+interface GrpcClientProps {
+ url: string,
+ group: string,
+}
+
+interface RemoveGrpcClientRequest {
+ url: string,
+}
+
+const GrpcClientRow = ({
+ url, group,
+}: GrpcClientProps) => {
+ const { state } = useContext(AppContext);
+
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const onRemoveClick = async () => {
+ try {
+ setLoading(true);
+ await axios.delete<RemoveGrpcClientRequest>(`${state.endpoint}/client/grpc`, {
+ data: {
+ url,
+ },
+ });
+ setLoading(false);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to remove the gRPC Client',
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ }
+ };
+
+ return (
+ <Tr>
+ <Td>{url}</Td>
+ <Td>{group}</Td>
+ <Td>
+ <HStack>
+ <Button
+ colorScheme="red"
+ isLoading={loading}
+ onClick={onRemoveClick}
+ >
+ Remove
+ </Button>
+ </HStack>
+ </Td>
+ </Tr>
+ );
+};
+
+const GrpcClientTable = () => {
+ const { state } = useContext(AppContext);
+
+ const [searchInput, setSearchInput] = useState<string>('');
+ const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSearchInput(event.currentTarget.value);
+ };
+
+ const [groupSet, setGroupSet] = useState<Set<string>>(new Set());
+ const [groupFilter, setGroupFilter] = useState<string>('');
+ const handleGroupSelectChange = (event: React.FormEvent<HTMLSelectElement>) => {
+ setGroupFilter(event.currentTarget.value);
+ };
+
+ const [GrpcClientList, setGrpcClientList] = useState<GrpcClient[]>([]);
+ const toast = useToast();
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<GrpcClient[]>(`${state.endpoint}/client/grpc`);
+ setGrpcClientList(data);
+
+ const nextGroupSet = new Set<string>();
+ data.forEach(({ group }) => {
+ nextGroupSet.add(group);
+ });
+ setGroupSet(nextGroupSet);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch the list of gRPC Clients',
+ description: 'Unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setGrpcClientList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, []);
+
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <HStack
+ spacing="2"
+ >
+ <Input
+ w="200%"
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchInputChange}
+ />
+ <Select
+ placeholder="Select Group"
+ onChange={handleGroupSelectChange}
+ >
+ {Array.from(groupSet).map((group) => (
+ <option value={group} key={group}>{group}</option>
+ ))}
+ </Select>
+ </HStack>
+
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>URL</Th>
+ <Th>Group</Th>
+ <Th>Action</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {GrpcClientList && GrpcClientList.filter(({
+ url, group,
+ }) => {
+ if (searchInput && !url.includes(searchInput)) {
+ return false;
+ }
+ if (groupFilter && groupFilter !== group) {
+ return false;
+ }
+ return true;
+ }).map(({
+ url, group,
+ }) => (
+ <GrpcClientRow
+ url={url}
+ group={group}
+ />
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ );
+};
+
+export default GrpcClientTable;
diff --git a/components/client/HTTPClientTable.tsx b/components/client/HTTPClientTable.tsx
new file mode 100644
index 0000000..832ea91
--- /dev/null
+++ b/components/client/HTTPClientTable.tsx
@@ -0,0 +1,217 @@
+/*
+ * 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 {
+ HStack,
+ Select,
+ Input,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ useToast,
+ Box,
+ Button,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface HTTPClient {
+ env: string,
+ subsystem: string,
+ url: string,
+ pid: number,
+ host: string,
+ port: number,
+ version: string,
+ idc: string,
+ group: string,
+ purpose: string,
+ protocol: string,
+}
+
+interface HTTPClientProps {
+ url: string,
+ group: string,
+}
+
+interface RemoveHTTPClientRequest {
+ url: string,
+}
+
+const HTTPClientRow = ({
+ url, group,
+}: HTTPClientProps) => {
+ const { state } = useContext(AppContext);
+
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const onRemoveClick = async () => {
+ try {
+ setLoading(true);
+ await axios.delete<RemoveHTTPClientRequest>(`${state.endpoint}/client/http`, {
+ data: {
+ url,
+ },
+ });
+ setLoading(false);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to remove the HTTP Client',
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ }
+ };
+
+ return (
+ <Tr>
+ <Td>{url}</Td>
+ <Td>{group}</Td>
+ <Td>
+ <HStack>
+ <Button
+ colorScheme="red"
+ isLoading={loading}
+ onClick={onRemoveClick}
+ >
+ Remove
+ </Button>
+ </HStack>
+ </Td>
+ </Tr>
+ );
+};
+
+const HTTPClientTable = () => {
+ const { state } = useContext(AppContext);
+
+ const [searchInput, setSearchInput] = useState<string>('');
+ const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSearchInput(event.currentTarget.value);
+ };
+
+ const [groupSet, setGroupSet] = useState<Set<string>>(new Set());
+ const [groupFilter, setGroupFilter] = useState<string>('');
+ const handleGroupSelectChange = (event: React.FormEvent<HTMLSelectElement>) => {
+ setGroupFilter(event.currentTarget.value);
+ };
+
+ const [HTTPClientList, setHTTPClientList] = useState<HTTPClient[]>([]);
+ const toast = useToast();
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<HTTPClient[]>(`${state.endpoint}/client/http`);
+ setHTTPClientList(data);
+
+ const nextGroupSet = new Set<string>();
+ data.forEach(({ group }) => {
+ nextGroupSet.add(group);
+ });
+ setGroupSet(nextGroupSet);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch the list of HTTP Clients',
+ description: 'Unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setHTTPClientList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, []);
+
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <HStack
+ spacing="2"
+ >
+ <Input
+ w="200%"
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchInputChange}
+ />
+ <Select
+ placeholder="Select Group"
+ onChange={handleGroupSelectChange}
+ >
+ {Array.from(groupSet).map((group) => (
+ <option value={group} key={group}>{group}</option>
+ ))}
+ </Select>
+ </HStack>
+
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>URL</Th>
+ <Th>Group</Th>
+ <Th>Action</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {HTTPClientList && HTTPClientList.filter(({
+ url, group,
+ }) => {
+ if (searchInput && !url.includes(searchInput)) {
+ return false;
+ }
+ if (groupFilter && groupFilter !== group) {
+ return false;
+ }
+ return true;
+ }).map(({
+ url, group,
+ }) => (
+ <HTTPClientRow
+ url={url}
+ group={group}
+ />
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ );
+};
+
+export default HTTPClientTable;
diff --git a/components/client/TCPClientTable.tsx b/components/client/TCPClientTable.tsx
new file mode 100644
index 0000000..dc24589
--- /dev/null
+++ b/components/client/TCPClientTable.tsx
@@ -0,0 +1,223 @@
+/*
+ * 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 {
+ HStack,
+ Select,
+ Input,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ useToast,
+ Box,
+ Button,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface TCPClient {
+ env: string,
+ subsystem: string,
+ url: string,
+ pid: number,
+ host: string,
+ port: number,
+ version: string,
+ idc: string,
+ group: string,
+ purpose: string,
+ protocol: string,
+}
+
+interface TCPClientProps {
+ host: string,
+ port: number,
+ group: string,
+}
+
+interface RemoveTCPClientRequest {
+ host: string,
+ port: number,
+}
+
+const TCPClientRow = ({
+ host, port, group,
+}: TCPClientProps) => {
+ const { state } = useContext(AppContext);
+
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const onRemoveClick = async () => {
+ try {
+ setLoading(true);
+ await axios.delete<RemoveTCPClientRequest>(`${state.endpoint}/client/tcp`, {
+ data: {
+ host,
+ port,
+ },
+ });
+ setLoading(false);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to remove the TCP Client',
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ }
+ };
+
+ return (
+ <Tr>
+ <Td>{`${host}:${port}`}</Td>
+ <Td>{group}</Td>
+ <Td>
+ <HStack>
+ <Button
+ colorScheme="red"
+ isLoading={loading}
+ onClick={onRemoveClick}
+ >
+ Remove
+ </Button>
+ </HStack>
+ </Td>
+ </Tr>
+ );
+};
+
+const TCPClientTable = () => {
+ const { state } = useContext(AppContext);
+
+ const [searchInput, setSearchInput] = useState<string>('');
+ const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSearchInput(event.currentTarget.value);
+ };
+
+ const [groupSet, setGroupSet] = useState<Set<string>>(new Set());
+ const [groupFilter, setGroupFilter] = useState<string>('');
+ const handleGroupSelectChange = (event: React.FormEvent<HTMLSelectElement>) => {
+ setGroupFilter(event.currentTarget.value);
+ };
+
+ const [TCPClientList, setTCPClientList] = useState<TCPClient[]>([]);
+ const toast = useToast();
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<TCPClient[]>(`${state.endpoint}/client/tcp`);
+ setTCPClientList(data);
+
+ const nextGroupSet = new Set<string>();
+ data.forEach(({ group }) => {
+ nextGroupSet.add(group);
+ });
+ setGroupSet(nextGroupSet);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch the list of TCP Clients',
+ description: 'Unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setTCPClientList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, []);
+
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <HStack
+ spacing="2"
+ >
+ <Input
+ w="200%"
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchInputChange}
+ />
+ <Select
+ placeholder="Select Group"
+ onChange={handleGroupSelectChange}
+ >
+ {Array.from(groupSet).map((group) => (
+ <option value={group} key={group}>{group}</option>
+ ))}
+ </Select>
+ </HStack>
+
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Host</Th>
+ <Th>Host</Th>
+ <Th>Group</Th>
+ <Th>Action</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {TCPClientList && TCPClientList.filter(({
+ host, port, group,
+ }) => {
+ const address = `${host}:${port}`;
+ if (searchInput && !address.includes(searchInput)) {
+ return false;
+ }
+ if (groupFilter && groupFilter !== group) {
+ return false;
+ }
+ return true;
+ }).map(({
+ host, port, group,
+ }) => (
+ <TCPClientRow
+ host={host}
+ port={port}
+ group={group}
+ />
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ );
+};
+
+export default TCPClientTable;
diff --git a/components/event/EventTable.tsx b/components/event/EventTable.tsx
new file mode 100644
index 0000000..b0d0a13
--- /dev/null
+++ b/components/event/EventTable.tsx
@@ -0,0 +1,371 @@
+/*
+ * 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 {
+ HStack,
+ Input,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ useToast,
+ Box,
+ Button,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ useDisclosure,
+ Select,
+ VStack,
+ Textarea,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { useContext, useEffect, useState } from 'react';
+import { CloudEvent } from 'cloudevents';
+import { AppContext } from '../../context/context';
+
+interface Topic {
+ name: string,
+ messageCount: number,
+}
+
+interface EventProps {
+ event: CloudEvent<string>,
+}
+
+interface CreateEventRequest {
+ event: CloudEvent<string>,
+}
+
+const CreateEventModal = () => {
+ const { state } = useContext(AppContext);
+
+ const { isOpen, onOpen, onClose } = useDisclosure();
+
+ const [id, setId] = useState('');
+ const handleIdChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setId(event.currentTarget.value);
+ };
+
+ const [source, setSource] = useState('');
+ const handleSourceChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSource(event.currentTarget.value);
+ };
+
+ const [subject, setSubject] = useState('');
+ const handleSubjectChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSubject(event.currentTarget.value);
+ };
+
+ const [type, setType] = useState('');
+ const handleTypeChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setType(event.currentTarget.value);
+ };
+
+ const [data, setData] = useState('');
+ const handleDataChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setData(event.currentTarget.value);
+ };
+
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const onCreateClick = async () => {
+ try {
+ setLoading(true);
+ await axios.post<CreateEventRequest>(`${state.endpoint}/event`, new CloudEvent({
+ source,
+ subject,
+ type,
+ data,
+ specversion: '1.0',
+ }));
+ onClose();
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to publish the event',
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <>
+ <Button
+ w="25%"
+ colorScheme="blue"
+ onClick={onOpen}
+ >
+ Create Event
+ </Button>
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Create Event</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ <VStack>
+ <Input
+ placeholder="Event ID"
+ value={id}
+ onChange={handleIdChange}
+ />
+ <Input
+ placeholder="Event Source"
+ value={source}
+ onChange={handleSourceChange}
+ />
+ <Input
+ placeholder="Event Subject"
+ value={subject}
+ onChange={handleSubjectChange}
+ />
+ <Input
+ placeholder="Event Type"
+ value={type}
+ onChange={handleTypeChange}
+ />
+ <Input
+ placeholder="Event Data"
+ value={data}
+ onChange={handleDataChange}
+ />
+ </VStack>
+ </ModalBody>
+
+ <ModalFooter>
+ <Button
+ mr={2}
+ onClick={onClose}
+ >
+ Close
+ </Button>
+ <Button
+ colorScheme="blue"
+ onClick={onCreateClick}
+ isLoading={loading}
+ isDisabled={
+ id.length === 0 || subject.length === 0 || source.length === 0 || type.length === 0
+ }
+ >
+ Create
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+ </>
+ );
+};
+
+const EventRow = ({
+ event,
+}: EventProps) => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const eventDataBase64 = event.data_base64 || '';
+ const eventData = Buffer.from(eventDataBase64, 'base64').toString('utf-8');
+
+ return (
+ <>
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Event Data</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ <Box>
+ <Textarea isDisabled value={eventData} />
+ </Box>
+ </ModalBody>
+
+ <ModalFooter>
+ <Button
+ mr={2}
+ onClick={onClose}
+ >
+ Close
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+
+ <Tr>
+ <Td>{event.id}</Td>
+ <Td>{event.subject}</Td>
+ <Td>{new Date(Number(event.reqc2eventmeshtimestamp)).toLocaleString()}</Td>
+ <Td>
+ <HStack>
+ <Button
+ colorScheme="blue"
+ onClick={onOpen}
+ >
+ View Data
+ </Button>
+ </HStack>
+
+ </Td>
+ </Tr>
+ </>
+ );
+};
+
+const EventTable = () => {
+ const { state } = useContext(AppContext);
+
+ const [searchInput, setSearchInput] = useState<string>('');
+ const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSearchInput(event.currentTarget.value);
+ };
+
+ const [eventList, setEventList] = useState<CloudEvent<string>[]>([]);
+ const [topicList, setTopicList] = useState<Topic[]>([]);
+ const [topic, setTopic] = useState<Topic>({
+ name: '',
+ messageCount: 0,
+ });
+ const handleTopicChange = (event: React.FormEvent<HTMLSelectElement>) => {
+ setTopic({
+ name: event.currentTarget.value,
+ messageCount: 0,
+ });
+ };
+
+ const toast = useToast();
+
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<Topic[]>(`${state.endpoint}/topic`);
+ setTopicList(data);
+ if (data.length !== 0) {
+ setTopic(data[0]);
+ }
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch the list of events',
+ description: 'unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setEventList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, []);
+
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ if (topic.name !== '') {
+ const eventResponse = await axios.get<string[]>(`${state.endpoint}/event`, {
+ params: {
+ topicName: topic.name,
+ offset: 0,
+ length: 15,
+ },
+ });
+ setEventList(eventResponse.data.map((rawEvent) => JSON.parse(rawEvent)));
+ }
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch the list of events',
+ description: 'Unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setEventList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, [topic]);
+
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <HStack
+ spacing="2"
+ >
+ <Input
+ w="100%"
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchInputChange}
+ />
+ <Select
+ w="100%"
+ onChange={handleTopicChange}
+ >
+ {topicList.map(({ name }) => (
+ <option value={name} key={name} selected={topic.name === name}>{name}</option>
+ ))}
+ </Select>
+ <CreateEventModal />
+ </HStack>
+
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Event Id</Th>
+ <Th>Event Subject</Th>
+ <Th>Event Time</Th>
+ <Th>Action</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {eventList.filter(() => true).map((event) => (
+ <EventRow
+ key={event.id}
+ event={event}
+ />
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ );
+};
+
+export default EventTable;
diff --git a/components/eventCatalogs/Create.tsx b/components/eventCatalogs/Create.tsx
new file mode 100644
index 0000000..7d75f4b
--- /dev/null
+++ b/components/eventCatalogs/Create.tsx
@@ -0,0 +1,137 @@
+/*
+ * 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, { FC, useRef, useState } from 'react';
+
+import {
+ Drawer,
+ DrawerContent,
+ DrawerCloseButton,
+ DrawerOverlay,
+ DrawerHeader,
+ DrawerBody,
+ DrawerFooter,
+ Button,
+ Box,
+ useToast,
+ Spinner,
+} from '@chakra-ui/react';
+import Editor, { Monaco } from '@monaco-editor/react';
+import axios from 'axios';
+
+const ApiRoot = process.env.NEXT_PUBLIC_EVENTCATALOG_API_ROOT;
+
+const Create: FC<{ visible: boolean; onClose: () => void; onSucceed:()=>void
+}> = ({ visible = false, onClose, onSucceed }) => {
+ const toast = useToast();
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const editorRef = useRef<Monaco | null>(null);
+ const defaultEditorValue = '# Your code goes here';
+
+ const handleEditorDidMount = (editor: any) => {
+ // here is the editor instance
+ // you can store it in `useRef` for further usage
+ editorRef.current = editor;
+ };
+
+ const onSubmit = () => {
+ setIsSubmitting(true);
+
+ try {
+ const value = editorRef.current.getValue();
+ if (value === defaultEditorValue) {
+ toast({
+ title: 'Invalid definition',
+ description: 'Please input your workflow definition properly',
+ status: 'warning',
+ position: 'top-right',
+ });
+ setIsSubmitting(false);
+ return;
+ }
+ axios
+ .post(
+ `${ApiRoot}/catalog`,
+ { event: { definition: value } },
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ .then(() => {
+ toast({
+ title: 'Succeeded',
+ status: 'success',
+ position: 'top-right',
+ });
+ onSucceed();
+ setIsSubmitting(false);
+ })
+ .catch((error) => {
+ toast({
+ title: 'Failed',
+ description: error.response.data,
+ status: 'error',
+ position: 'top-right',
+ });
+ setIsSubmitting(false);
+ });
+ } catch (error) {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+ <Drawer
+ isOpen={visible}
+ size="xl"
+ placement="right"
+ onClose={() => onClose()}
+ >
+ <DrawerOverlay />
+ <DrawerContent>
+ <DrawerCloseButton />
+ <DrawerHeader>Create Catalog</DrawerHeader>
+ <DrawerBody>
+ <Box height="full">
+ <Editor
+ height="100%"
+ defaultLanguage="yaml"
+ defaultValue="# Your code goes here"
+ onMount={handleEditorDidMount}
+ theme="vs-dark"
+ />
+ </Box>
+ </DrawerBody>
+ <DrawerFooter justifyContent="flex-start">
+ <Button colorScheme="blue" mr={3} onClick={onSubmit}>
+ {isSubmitting ? <Spinner colorScheme="white" size="sm" /> : 'Submit'}
+ </Button>
+ <Button variant="ghost" colorScheme="blue" onClick={onClose}>
+ Cancel
+ </Button>
+ </DrawerFooter>
+ </DrawerContent>
+
+ </Drawer>
+ );
+};
+
+export default Create;
diff --git a/components/eventCatalogs/Details.tsx b/components/eventCatalogs/Details.tsx
new file mode 100644
index 0000000..b4d33ee
--- /dev/null
+++ b/components/eventCatalogs/Details.tsx
@@ -0,0 +1,121 @@
+/*
+ * 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, { FC, useRef } from 'react';
+
+import {
+ Drawer,
+ DrawerContent,
+ DrawerCloseButton,
+ DrawerOverlay,
+ DrawerHeader,
+ DrawerBody,
+ FormLabel,
+ Box,
+ Flex,
+ Text,
+ Stack,
+ Badge,
+} from '@chakra-ui/react';
+import moment from 'moment';
+import Editor, { Monaco } from '@monaco-editor/react';
+import { EventCatalogType } from './types';
+// import { WorkflowStatusMap } from './constant';
+
+const Details: FC<{
+ visible: boolean;
+ data?: EventCatalogType | undefined;
+ onClose: () => void;
+}> = ({ visible = false, data, onClose = () => {} }) => {
+ const editorRef = useRef(null);
+ const handleEditorDidMount = (editor: Monaco) => {
+ editorRef.current = editor;
+ editor.setValue(data?.definition ?? '');
+ };
+
+ return (
+ <Drawer
+ isOpen={visible}
+ size="xl"
+ placement="right"
+ onClose={() => onClose()}
+ >
+ <DrawerOverlay />
+ <DrawerContent>
+ <DrawerCloseButton />
+ <DrawerHeader>
+ {data?.title}
+ <Badge ml={2}>
+ Version
+ {' '}
+ {data?.version}
+ </Badge>
+ </DrawerHeader>
+ <DrawerBody>
+ <Flex flexDirection="column" h="full">
+ <Stack direction="row">
+ <Flex width="240px" flexDirection="column">
+ <Box mb="1">
+ <FormLabel opacity={0.5}>Catalog ID</FormLabel>
+ <Text>{data?.id}</Text>
+ </Box>
+ <Box mt="1" mb="3">
+ <FormLabel opacity={0.5}>Title</FormLabel>
+ <Text>{data?.title}</Text>
+ </Box>
+ <Box mt="1" mb="3">
+ <FormLabel opacity={0.5}>File Name</FormLabel>
+ <Text>{data?.file_name}</Text>
+ </Box>
+ </Flex>
+ <Flex flexDirection="column">
+ <Box mb="1">
+ <FormLabel opacity={0.5}>Created At</FormLabel>
+ <Text>
+ {moment(data?.create_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Text>
+ </Box>
+ <Box mt="1" mb="3">
+ <FormLabel opacity={0.5}>Updated At</FormLabel>
+ <Text>
+ {moment(data?.update_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Text>
+ </Box>
+ </Flex>
+ </Stack>
+ <Box flex={1}>
+ <Editor
+ height="100%"
+ defaultLanguage="yaml"
+ defaultValue="# Your code goes here"
+ onMount={handleEditorDidMount}
+ theme="vs-dark"
+ options={{ readOnly: true }}
+ />
+ </Box>
+ </Flex>
+ </DrawerBody>
+ </DrawerContent>
+ </Drawer>
+ );
+};
+Details.defaultProps = {
+ data: undefined,
+};
+export default Details;
diff --git a/components/eventCatalogs/constant.ts b/components/eventCatalogs/constant.ts
new file mode 100644
index 0000000..df9cfab
--- /dev/null
+++ b/components/eventCatalogs/constant.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 { CatalogStatusEnum } from './types';
+
+export const WorkflowStatusMap = new Map([
+ [CatalogStatusEnum.Normal, 'Normal'],
+ [CatalogStatusEnum.Deleted, 'Deleted'],
+]);
+
+export default WorkflowStatusMap;
diff --git a/components/eventCatalogs/types.ts b/components/eventCatalogs/types.ts
new file mode 100644
index 0000000..8ab7004
--- /dev/null
+++ b/components/eventCatalogs/types.ts
@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+export type SchemaTypes = {
+ schemaId: string;
+ lastVersion: string;
+ description: string;
+};
+
+export type EventCatalogType = {
+ create_time: string,
+ definition: string,
+ file_name: string,
+ id: 0,
+ status: 0,
+ title: string,
+ update_time: string,
+ version: string
+};
+
+export enum CatalogStatusEnum {
+ 'Normal' = 1,
+ 'Deleted' = -1,
+}
diff --git a/components/index/Configuration.tsx b/components/index/Configuration.tsx
new file mode 100755
index 0000000..8258db2
--- /dev/null
+++ b/components/index/Configuration.tsx
@@ -0,0 +1,249 @@
+/*
+ * 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 {
+ Text,
+ Table,
+ TableContainer,
+ Tbody,
+ Th,
+ Thead,
+ Tr,
+ Td,
+ Box,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import React, { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface EventMeshConfiguration {
+ sysID: string;
+ namesrvAddr: string;
+ eventMeshEnv: string;
+ eventMeshIDC: string;
+ eventMeshCluster: string;
+ eventMeshServerIp: string;
+ eventMeshName: string;
+ eventMeshWebhookOrigin: string;
+ eventMeshServerSecurityEnable: boolean;
+ eventMeshServerRegistryEnable: boolean;
+
+ eventMeshTcpServerPort: number;
+ eventMeshTcpServerEnabled: boolean;
+
+ eventMeshHttpServerPort: number;
+ eventMeshHttpServerUseTls: boolean;
+
+ eventMeshGrpcServerPort: number;
+ eventMeshGrpcServerUseTls: boolean;
+}
+
+const Configuration = () => {
+ const { state } = useContext(AppContext);
+ const [configuration, setConfiguration] = useState<
+ Partial<EventMeshConfiguration>
+ >({});
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<EventMeshConfiguration>(
+ `${state.endpoint}/configuration`,
+ {
+ signal: controller.signal,
+ },
+ );
+ setConfiguration(data);
+ } catch (error) {
+ setConfiguration({});
+ }
+ };
+
+ fetch();
+
+ return () => {
+ controller.abort();
+ };
+ }, [state.endpoint]);
+
+ type ConfigurationRecord = Record<
+ string,
+ string | number | boolean | undefined
+ >;
+ const commonConfiguration: ConfigurationRecord = {
+ 'System ID': configuration.sysID,
+ 'NameServer Address': configuration.namesrvAddr,
+ 'EventMesh Environment': configuration.eventMeshEnv,
+ 'EventMesh IDC': configuration.eventMeshIDC,
+ 'EventMesh Cluster': configuration.eventMeshCluster,
+ 'EventMesh Server IP': configuration.eventMeshServerIp,
+ 'EventMEsh Name': configuration.eventMeshName,
+ 'EventMesh Webhook Origin': configuration.eventMeshWebhookOrigin,
+ 'EventMesh Server Security Enable':
+ configuration.eventMeshServerSecurityEnable,
+ 'EventMesh Server Registry Enable':
+ configuration.eventMeshServerRegistryEnable,
+ };
+
+ const tcpConfiguration: ConfigurationRecord = {
+ 'TCP Server Port': configuration.eventMeshTcpServerPort,
+ 'TCP Server Enabled': configuration.eventMeshTcpServerEnabled,
+ };
+
+ const httpConfiguration: ConfigurationRecord = {
+ 'HTTP Server Port': configuration.eventMeshHttpServerPort,
+ 'HTTP Server TLS Enabled': configuration.eventMeshHttpServerUseTls,
+ };
+
+ const grpcConfiguration: ConfigurationRecord = {
+ 'gRPC Server Port': configuration.eventMeshGrpcServerPort,
+ 'gRPC Server TLS Enabled': configuration.eventMeshGrpcServerUseTls,
+ };
+
+ const convertConfigurationToTable = (
+ configurationRecord: Record<string, string | number | boolean | undefined>,
+ ) => Object.entries(configurationRecord).map(([key, value]) => {
+ if (value === undefined) {
+ return (
+ <Tr>
+ <Td>{key}</Td>
+ <Td>Undefined</Td>
+ </Tr>
+ );
+ }
+
+ return (
+ <Tr>
+ <Td>{key}</Td>
+ <Td>{value.toString()}</Td>
+ </Tr>
+ );
+ });
+
+ if (Object.keys(configuration).length === 0) {
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="2px"
+ borderRadius="md"
+ borderColor="rgb(211,85,25)"
+ overflow="hidden"
+ p="4"
+ mt="4"
+ opacity="0.8"
+ >
+ <Text
+ fontSize="l"
+ fontWeight="semibold"
+ color="rgb(211,85,25)"
+ textAlign={['left', 'center']}
+ >
+ EventMesh Daemon Not Connected
+ </Text>
+ </Box>
+ );
+ }
+
+ return (
+ <>
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ mt="4"
+ >
+ <Text w="full">EventMesh Configuration</Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Configuration Field</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>{convertConfigurationToTable(commonConfiguration)}</Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ mt="4"
+ >
+ <Text w="full">TCP Configuration</Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Configuration Field</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>{convertConfigurationToTable(tcpConfiguration)}</Tbody>
+ </Table>
+ </TableContainer>
+
+ <Text w="full" mt="4">
+ HTTP Configuration
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Configuration Field</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>{convertConfigurationToTable(httpConfiguration)}</Tbody>
+ </Table>
+ </TableContainer>
+
+ <Text w="full" mt="4">
+ gRPC Configuration
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Configuration Field</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>{convertConfigurationToTable(grpcConfiguration)}</Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ </>
+ );
+};
+
+export default Configuration;
diff --git a/components/index/Endpoint.tsx b/components/index/Endpoint.tsx
new file mode 100755
index 0000000..9e550fa
--- /dev/null
+++ b/components/index/Endpoint.tsx
@@ -0,0 +1,105 @@
+/*
+ * 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 {
+ HStack,
+ Input,
+ VStack,
+ Button,
+ Text,
+ useToast,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import React, { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+const Endpoint = () => {
+ const { state, dispatch } = useContext(AppContext);
+ const toast = useToast();
+ const [endpointInput, setEndpointInput] = useState('http://localhost:10106');
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ setEndpointInput(state.endpoint);
+ }, [state.endpoint]);
+
+ const handleEndpointInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setEndpointInput(event.currentTarget.value);
+ };
+
+ const handleSaveButtonClick = async () => {
+ try {
+ setLoading(true);
+ await axios.get(`${endpointInput}/client`);
+ dispatch({
+ type: 'SetEndPointAction',
+ payload: {
+ endpoint: endpointInput,
+ },
+ });
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: `Failed to connect to ${endpointInput}`,
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <VStack
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <Text
+ w="full"
+ >
+ EventMesh Admin Endpoint
+ </Text>
+ <HStack
+ w="full"
+ >
+ <Input
+ placeholder="Apache EventMesh Backend Endpoint"
+ value={endpointInput}
+ onChange={handleEndpointInputChange}
+ />
+ <Button
+ colorScheme="blue"
+ isLoading={loading}
+ onClick={handleSaveButtonClick}
+ >
+ Save
+ </Button>
+ </HStack>
+ </VStack>
+ );
+};
+
+export default Endpoint;
diff --git a/components/metrics/MetricsTable.tsx b/components/metrics/MetricsTable.tsx
new file mode 100755
index 0000000..9b80d49
--- /dev/null
+++ b/components/metrics/MetricsTable.tsx
@@ -0,0 +1,313 @@
+/*
+ * 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 {
+ Text,
+ Table,
+ TableContainer,
+ Tbody,
+ Th,
+ Thead,
+ Tr,
+ Td,
+ Box,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import React, { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface EventMeshMetrics {
+ maxHTTPTPS: number,
+ avgHTTPTPS: number,
+ maxHTTPCost: number,
+ avgHTTPCost: number,
+ avgHTTPBodyDecodeCost: number,
+ httpDiscard: number,
+ maxBatchSendMsgTPS: number,
+ avgBatchSendMsgTPS: number,
+ sendBatchMsgNumSum: number,
+ sendBatchMsgFailNumSum: number,
+ sendBatchMsgFailRate: number,
+ sendBatchMsgDiscardNumSum: number,
+ maxSendMsgTPS: number,
+ avgSendMsgTPS: number,
+ sendMsgNumSum: number,
+ sendMsgFailNumSum: number,
+ sendMsgFailRate: number,
+ replyMsgNumSum: number,
+ replyMsgFailNumSum: number,
+ maxPushMsgTPS: number,
+ avgPushMsgTPS: number,
+ pushHTTPMsgNumSum: number,
+ pushHTTPMsgFailNumSum: number,
+ pushHTTPMsgFailRate: number,
+ maxHTTPPushLatency : number,
+ avgHTTPPushLatency : number,
+ batchMsgQueueSize : number,
+ sendMsgQueueSize : number,
+ pushMsgQueueSize : number,
+ retryHTTPQueueSize : number,
+ avgBatchSendMsgCost : number,
+ avgSendMsgCost : number,
+ avgReplyMsgCost : number,
+
+ // TCP Metrics
+ retryTCPQueueSize: number,
+ client2eventMeshTCPTPS : number,
+ eventMesh2mqTCPTPS : number,
+ mq2eventMeshTCPTPS : number,
+ eventMesh2clientTCPTPS : number,
+ allTCPTPS : number,
+ allTCPConnections : number,
+ subTopicTCPNum : number
+}
+
+const MetricsTable = () => {
+ const { state } = useContext(AppContext);
+ const [metrics, setMetrics] = useState<Partial<EventMeshMetrics>>({});
+
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<EventMeshMetrics>(`${state.endpoint}/metrics`);
+ setMetrics(data);
+ } catch (error) {
+ setMetrics({});
+ }
+ };
+
+ fetch();
+ }, []);
+
+ type MetricRecord = Record<string, number | undefined>;
+ const httpMetrics: MetricRecord = {
+ 'Max HTTP TPS': metrics.maxHTTPTPS,
+ 'Avg HTTP TPS': metrics.avgHTTPTPS,
+ 'Max HTTP Cost': metrics.maxHTTPCost,
+ 'Avg HTTP Cost': metrics.avgHTTPCost,
+ 'Avg HTTP Body Decode Cost': metrics.avgHTTPBodyDecodeCost,
+ 'HTTP Discard': metrics.httpDiscard,
+ };
+ const batchMetrics: MetricRecord = {
+ 'Max Batch Send Msg TPS': metrics.maxBatchSendMsgTPS,
+ 'Avg Batch Send Msg TPS': metrics.avgBatchSendMsgTPS,
+ 'Send Batch Msg Num Sum': metrics.sendBatchMsgNumSum,
+ 'Send Batch Msg Fail Num Sum': metrics.sendBatchMsgFailNumSum,
+ 'Send Batch Msg Fail Rate': metrics.sendBatchMsgFailRate,
+ 'Send Batch Msg Discard Num Sum': metrics.sendBatchMsgDiscardNumSum,
+ };
+ const sendMetrics: MetricRecord = {
+ 'Max Send Msg TPS': metrics.maxSendMsgTPS,
+ 'Avg Send Msg TPS': metrics.avgSendMsgTPS,
+ 'Send Msg Num Sum': metrics.sendMsgNumSum,
+ 'Send Msg Fail Num Sum': metrics.sendMsgFailNumSum,
+ 'Send Msg Fail Rate': metrics.sendMsgFailRate,
+ 'Reply Msg Num Sum': metrics.replyMsgNumSum,
+ 'Reply Msg Fail Num Sum': metrics.replyMsgFailNumSum,
+ };
+ const pushMetrics: MetricRecord = {
+ 'Max Push Msg TPS': metrics.maxPushMsgTPS,
+ 'Avg Push Msg TPS': metrics.avgPushMsgTPS,
+ 'Push HTTP Msg Num Sum': metrics.pushHTTPMsgNumSum,
+ 'Push HTTP Msg Fail Num Sum': metrics.pushHTTPMsgFailNumSum,
+ 'Push HTTP Msg Fail Rate': metrics.pushHTTPMsgFailRate,
+ 'Max HTTP Push Latency': metrics.maxHTTPPushLatency,
+ 'Avg HTTP Push Latency': metrics.avgHTTPPushLatency,
+ };
+ const tcpMetrics: MetricRecord = {
+ 'Retry TCP Queue Size': metrics.retryTCPQueueSize,
+ 'Client2eventMesh TCP TPS': metrics.client2eventMeshTCPTPS,
+ 'EventMesh2mq TCP TPS': metrics.eventMesh2mqTCPTPS,
+ 'MQ2eventMesh TCP TPS': metrics.mq2eventMeshTCPTPS,
+ 'EventMesh2client TCP TPS': metrics.eventMesh2clientTCPTPS,
+ 'All TCP TPS': metrics.allTCPTPS,
+ 'All TCP Connections': metrics.allTCPConnections,
+ 'Sub Topic TCP Num': metrics.subTopicTCPNum,
+ };
+
+ const convertConfigurationToTable = (
+ metricRecord: Record<string, string | number | boolean | undefined>,
+ ) => Object.entries(metricRecord).map(([key, value]) => {
+ if (value === undefined) {
+ return (
+ <Tr>
+ <Td>{key}</Td>
+ <Td>Undefined</Td>
+ </Tr>
+ );
+ }
+
+ return (
+ <Tr>
+ <Td>{key}</Td>
+ <Td>{value.toString()}</Td>
+ </Tr>
+ );
+ });
+
+ if (Object.keys(metrics).length === 0) {
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="2px"
+ borderRadius="md"
+ borderColor="rgb(211,85,25)"
+ overflow="hidden"
+ p="4"
+ mt="4"
+ opacity="0.8"
+ >
+ <Text fontSize="l" fontWeight="semibold" color="rgb(211,85,25)" textAlign={['left', 'center']}>
+ EventMesh Daemon Not Connected
+ </Text>
+ </Box>
+ );
+ }
+ return (
+ <>
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ mt="4"
+ >
+ <Text
+ w="full"
+ >
+ EventMesh HTTP Metrics
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Metric</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {convertConfigurationToTable(httpMetrics)}
+ </Tbody>
+ </Table>
+ </TableContainer>
+
+ <Text
+ w="full"
+ mt="4"
+ >
+ HTTP Batch Metrics
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Metric</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {convertConfigurationToTable(batchMetrics)}
+ </Tbody>
+ </Table>
+ </TableContainer>
+
+ <Text
+ w="full"
+ mt="4"
+ >
+ HTTP Send Metrics
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Metric</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {convertConfigurationToTable(sendMetrics)}
+ </Tbody>
+ </Table>
+ </TableContainer>
+
+ <Text
+ w="full"
+ mt="4"
+ >
+ HTTP Push Metrics
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Metric</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {convertConfigurationToTable(pushMetrics)}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ mt="4"
+ >
+
+ <Text
+ w="full"
+ mt="4"
+ >
+ TCP Metrics
+ </Text>
+
+ <TableContainer mt="4">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Metric</Th>
+ <Th>Value</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {convertConfigurationToTable(tcpMetrics)}
+ </Tbody>
+ </Table>
+ </TableContainer>
+
+ </Box>
+ </>
+ );
+};
+
+export default MetricsTable;
diff --git a/components/navigation/MenuItem.tsx b/components/navigation/MenuItem.tsx
new file mode 100644
index 0000000..31f119b
--- /dev/null
+++ b/components/navigation/MenuItem.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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, { FC, ReactNode } from 'react';
+import {
+ Flex, FlexProps, Link, Text,
+} from '@chakra-ui/react';
+
+interface MenuItemProps extends FlexProps {
+ selected: boolean;
+ active: boolean;
+ href: string;
+ children: string | number;
+ setActiveName: (name: string) => void;
+}
+
+export const MenuItem = ({
+ selected,
+ active,
+ href,
+ children,
+ setActiveName,
+}: MenuItemProps) => (
+ <Link
+ position="relative"
+ href={href}
+ h="8"
+ mt={1.5}
+ mb={1.5}
+ ml={3}
+ mr={3}
+ boxSizing="border-box"
+ style={{ textDecoration: 'none' }}
+ _focus={{ boxShadow: 'none' }}
+ onMouseOver={() => setActiveName(children.toString())}
+ onMouseOut={() => setActiveName('')}
+ >
+ <Flex
+ position="absolute"
+ zIndex={2}
+ w="full"
+ h="full"
+ p="6"
+ borderRadius="lg"
+ align="center"
+ role="group"
+ cursor="pointer"
+ fontSize="md"
+ transition="color 0.15s, background-color 0.15s"
+ color={selected || active ? '#2a62ad' : 'current'}
+ fontWeight={selected ? 'bolder' : 'none'}
+ bgColor={selected || active ? '#dce5fe' : 'none'}
+ wordBreak="break-word"
+ overflowWrap="normal"
+ >
+ {children}
+ </Flex>
+ {/* <Box
+ position="absolute"
+ zIndex={1}
+ p={selected || active ? '4' : 0}
+ borderRadius="lg"
+ role="group"
+ cursor="pointer"
+ transition="width 0.3s, opacity 0.4s"
+ bgGradient="linear(28deg,#2a4cad, #2a6bad, #28c9ff)"
+ h="100%"
+ w={selected || active ? '100%' : '0'}
+ opacity={selected || active ? 1 : 0}
+ /> */}
+ </Link>
+);
+
+export const MenuGroupItem: FC<{ name: string; children: ReactNode }> = (
+ props,
+) => {
+ const { name, children } = props;
+ return (
+ <Flex
+ flexDirection="column"
+ w="full"
+ justifyContent="center"
+ alignContent="center"
+ >
+ {name && (
+ <Text
+ mt={5}
+ mb="2"
+ pl="6"
+ fontSize="xs"
+ color="#a2b5d8"
+ fontWeight="bold"
+ >
+ {name.toUpperCase()}
+ </Text>
+ )}
+ {children}
+ </Flex>
+ );
+};
diff --git a/components/navigation/Menus.tsx b/components/navigation/Menus.tsx
new file mode 100644
index 0000000..72be935
--- /dev/null
+++ b/components/navigation/Menus.tsx
@@ -0,0 +1,179 @@
+/*
+ * 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, { FC, ReactNode, useState } from 'react';
+import {
+ Box,
+ BoxProps,
+ Button,
+ Flex,
+ useColorModeValue,
+ Image,
+} from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+import { ArrowBackIcon } from '@chakra-ui/icons';
+
+import { useRouter } from 'next/router';
+
+import {
+ FiList, FiGrid, FiServer, FiDatabase, FiMenu,
+} from 'react-icons/fi';
+import LogoImg from '../../static/images/logo.png';
+import { MenuItem, MenuGroupItem } from './MenuItem';
+
+const Menus: Array<{
+ group?: string;
+ name: string;
+ icon: IconType;
+ href: string;
+ subPath?:string[]
+}> = [
+ { name: 'Overview', icon: FiList, href: '/' },
+ { name: 'Metrics', icon: FiMenu, href: '/metrics' },
+ { name: 'Registry', icon: FiDatabase, href: '/registry' },
+ { name: 'Topic', icon: FiGrid, href: '/topic' },
+ { name: 'Event', icon: FiDatabase, href: '/event' },
+ {
+ group: 'Workflow',
+ name: 'Workflows',
+ icon: FiServer,
+ href: '/workflows',
+ subPath: ['/workflows/create'],
+ },
+ {
+ group: 'Workflow',
+ name: 'Event Catalogs',
+ icon: FiServer,
+ href: '/eventCatalogs',
+ },
+ {
+ group: 'Clients',
+ name: 'TCP',
+ icon: FiServer,
+ href: '/tcp',
+ },
+ {
+ group: 'Clients',
+ name: 'HTTP',
+ icon: FiServer,
+ href: '/http',
+ },
+ {
+ group: 'Clients',
+ name: 'gRPC',
+ icon: FiServer,
+ href: '/grpc',
+ },
+];
+
+interface MenuProps extends BoxProps {
+ onClose: () => void;
+}
+interface IGroupItem {
+ name?: string;
+ children: ReactNode[];
+}
+
+const NavMenu: FC<MenuProps> = ({ display = {}, onClose }) => {
+ const router = useRouter();
+ const [curMenu, setCurMenu] = useState('');
+ const curRoute = router.pathname;
+
+ const MenuByGroup = Menus.reduce<{
+ [groupName: string]: IGroupItem;
+ }>(
+ (groupItems, item) => {
+ const {
+ group, name, href, subPath,
+ } = item;
+ const menuItem = (
+ <MenuItem
+ key={`menu_item_${name}`}
+ selected={curRoute === href || (subPath?.includes(curRoute) ?? false)}
+ active={curMenu === group}
+ href={href}
+ setActiveName={(selectedName:string) => setCurMenu(selectedName)}
+ >
+ {name}
+ </MenuItem>
+ );
+
+ if (!group) {
+ groupItems.topMenu.children.push(menuItem);
+ return groupItems;
+ }
+
+ if (!groupItems[group]) {
+ groupItems[group] = { name: group, children: [] };
+ }
+ groupItems[group].children.push(menuItem);
+
+ return groupItems;
+ },
+ { topMenu: { children: [] } },
+ );
+
+ return (
+ <Box
+ display={display}
+ pos="fixed"
+ w={{ base: 'full', md: 60 }}
+ borderRight="1px"
+ borderRightColor={useColorModeValue('gray.200', 'gray.700')}
+ h="full"
+ bg={useColorModeValue('white', 'gray.900')}
+ boxShadow="base"
+ >
+ <Flex
+ mt={{ base: 5, md: 10 }}
+ mb={{ base: 5, md: 10 }}
+ alignItems={{ base: 'space-between', md: 'center' }}
+ justifyContent={{ base: 'space-between', md: 'center' }}
+ w={{ base: 'full' }}
+ >
+ <Image
+ display={{ base: 'none', md: 'block' }}
+ w={100}
+ src={LogoImg.src}
+ alt="Dan Abramov"
+ />
+ <Button
+ display={{ base: 'block', md: 'none' }}
+ w={{ base: 'full' }}
+ size="lg"
+ textAlign="left"
+ onClick={onClose}
+ >
+ <ArrowBackIcon mr={2} />
+ Back
+ </Button>
+ </Flex>
+
+ <Flex flexDirection="column" alignItems="center">
+ {Object.entries(MenuByGroup).map((groupItem) => (
+ <MenuGroupItem key={`group_item_${groupItem[1].name}`} name={groupItem[1].name ?? ''}>
+ {groupItem[1].children}
+ </MenuGroupItem>
+ ))}
+ </Flex>
+ </Box>
+ );
+};
+
+export default NavMenu;
diff --git a/components/navigation/MenusMobile.tsx b/components/navigation/MenusMobile.tsx
new file mode 100644
index 0000000..8885f14
--- /dev/null
+++ b/components/navigation/MenusMobile.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 {
+ IconButton,
+ Flex,
+ useColorModeValue,
+ Text,
+ FlexProps,
+} from '@chakra-ui/react';
+import { FiMenu } from 'react-icons/fi';
+
+interface MobileProps extends FlexProps {
+ onOpen: () => void;
+}
+
+const MobileNav = ({ onOpen }: MobileProps) => (
+ <Flex
+ ml={{ base: 0, md: 60 }}
+ px={{ base: 4, md: 24 }}
+ height="20"
+ alignItems="center"
+ bg={useColorModeValue('white', 'gray.900')}
+ borderBottomWidth="1px"
+ borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
+ justifyContent="flex-start"
+ display={{ base: 'flex', md: 'none' }}
+ >
+ <IconButton
+ variant="outline"
+ onClick={onOpen}
+ aria-label="open menu"
+ icon={<FiMenu />}
+ />
+
+ <Text fontSize="2xl" ml="8" fontWeight="bold">
+ EventMesh
+ </Text>
+ </Flex>
+);
+
+export default MobileNav;
diff --git a/components/navigation/Sidebar.tsx b/components/navigation/Sidebar.tsx
new file mode 100644
index 0000000..e8e349b
--- /dev/null
+++ b/components/navigation/Sidebar.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, ReactNode } from 'react';
+import {
+ Box,
+ useColorModeValue,
+ Drawer,
+ DrawerContent,
+ useDisclosure,
+} from '@chakra-ui/react';
+import Menus from './Menus';
+import MenusMobile from './MenusMobile';
+
+const Sidebar: FC<{ children: ReactNode }> = ({ children }) => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ return (
+ <>
+ <Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}>
+ <Menus
+ display={{ base: 'none', md: 'block' }}
+ onClose={() => onClose}
+ />
+ <MenusMobile onOpen={onOpen} />
+ <Box ml={{ base: 0, md: 60 }} p="4">
+ {children}
+ </Box>
+ </Box>
+ <Drawer
+ autoFocus={false}
+ isOpen={isOpen}
+ placement="left"
+ onClose={onClose}
+ returnFocusOnClose={false}
+ onOverlayClick={onClose}
+ size="full"
+ >
+ <DrawerContent>
+ <Menus onClose={onClose} />
+ </DrawerContent>
+ </Drawer>
+ </>
+ );
+};
+
+export default Sidebar;
diff --git a/components/registry/RegistryTable.tsx b/components/registry/RegistryTable.tsx
new file mode 100644
index 0000000..719fde6
--- /dev/null
+++ b/components/registry/RegistryTable.tsx
@@ -0,0 +1,170 @@
+/*
+ * 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 {
+ HStack,
+ Select,
+ Input,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ useToast,
+ Box,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface EventMeshInstance {
+ eventMeshClusterName: string,
+ eventMeshName: string,
+ endpoint: string,
+ lastUpdateTimestamp: number,
+ metadata: string
+}
+
+const EventMeshInstanceRow = ({
+ eventMeshClusterName, eventMeshName, endpoint, lastUpdateTimestamp, metadata,
+}: EventMeshInstance) => (
+ <Tr>
+ <Td>{eventMeshClusterName}</Td>
+ <Td>{eventMeshName}</Td>
+ <Td>{endpoint}</Td>
+ <Td>{lastUpdateTimestamp}</Td>
+ <Td>{metadata}</Td>
+ </Tr>
+);
+
+const RegistryTable = () => {
+ const { state } = useContext(AppContext);
+
+ const [searchInput, setSearchInput] = useState<string>('');
+ const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSearchInput(event.currentTarget.value);
+ };
+
+ const [groupSet, setGroupSet] = useState<Set<string>>(new Set());
+ const [groupFilter, setGroupFilter] = useState<string>('');
+ const handleGroupSelectChange = (event: React.FormEvent<HTMLSelectElement>) => {
+ setGroupFilter(event.currentTarget.value);
+ };
+
+ const [EventMeshInstanceList, setEventMeshInstanceList] = useState<EventMeshInstance[]>([]);
+ const toast = useToast();
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<EventMeshInstance[]>(`${state.endpoint}/registry`);
+ setEventMeshInstanceList(data);
+
+ const nextGroupSet = new Set<string>();
+ data.forEach(({ eventMeshClusterName }) => {
+ nextGroupSet.add(eventMeshClusterName);
+ });
+ setGroupSet(nextGroupSet);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch registry list',
+ description: 'unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setEventMeshInstanceList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, []);
+
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <HStack
+ spacing="2"
+ >
+ <Input
+ w="200%"
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchInputChange}
+ />
+ <Select
+ placeholder="Select Group"
+ onChange={handleGroupSelectChange}
+ >
+ {Array.from(groupSet).map((group) => (
+ <option value={group} key={group}>{group}</option>
+ ))}
+ </Select>
+ </HStack>
+
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Event Mesh Cluster Name</Th>
+ <Th>Event Mesh Name</Th>
+ <Th>Endpoint</Th>
+ <Th>Last Update Timestamp</Th>
+ <Th>Metadata</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {EventMeshInstanceList && EventMeshInstanceList.filter(({
+ eventMeshClusterName, eventMeshName,
+ }) => {
+ if (searchInput && !eventMeshName.includes(searchInput)) {
+ return false;
+ }
+ if (groupFilter && groupFilter !== eventMeshClusterName) {
+ return false;
+ }
+ return true;
+ }).map(({
+ eventMeshClusterName, eventMeshName, endpoint, lastUpdateTimestamp, metadata,
+ }) => (
+ <EventMeshInstanceRow
+ eventMeshClusterName={eventMeshClusterName}
+ eventMeshName={eventMeshName}
+ endpoint={endpoint}
+ lastUpdateTimestamp={lastUpdateTimestamp}
+ metadata={metadata}
+ />
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ );
+};
+
+export default RegistryTable;
diff --git a/components/topic/TopicTable.tsx b/components/topic/TopicTable.tsx
new file mode 100644
index 0000000..f3a1369
--- /dev/null
+++ b/components/topic/TopicTable.tsx
@@ -0,0 +1,275 @@
+/*
+ * 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 {
+ HStack,
+ Input,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ useToast,
+ Box,
+ Button,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ useDisclosure,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface Topic {
+ name: string,
+ messageCount: number,
+}
+
+interface TopicProps {
+ name: string,
+ messageCount: number,
+}
+
+interface CreateTopicRequest {
+ name: string,
+}
+
+interface RemoveTopicRequest {
+ name: string,
+}
+
+const CreateTopicModal = () => {
+ const { state } = useContext(AppContext);
+
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const [topicName, setTopicName] = useState('');
+ const handleTopicNameChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setTopicName(event.currentTarget.value);
+ };
+
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const onCreateClick = async () => {
+ try {
+ setLoading(true);
+ await axios.post<CreateTopicRequest>(`${state.endpoint}/topic`, {
+ name: topicName,
+ });
+ onClose();
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to create the topic',
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <>
+ <Button
+ colorScheme="blue"
+ onClick={onOpen}
+ >
+ Create Topic
+ </Button>
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Create Topic</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ <Input
+ placeholder="Topic Name"
+ value={topicName}
+ onChange={handleTopicNameChange}
+ />
+ </ModalBody>
+
+ <ModalFooter>
+ <Button
+ mr={2}
+ onClick={onClose}
+ >
+ Close
+ </Button>
+ <Button
+ colorScheme="blue"
+ onClick={onCreateClick}
+ isLoading={loading}
+ isDisabled={topicName.length === 0}
+ >
+ Create
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+ </>
+ );
+};
+
+const TopicRow = ({
+ name,
+ messageCount,
+}: TopicProps) => {
+ const { state } = useContext(AppContext);
+
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const onRemoveClick = async () => {
+ try {
+ setLoading(true);
+ await axios.delete<RemoveTopicRequest>(`${state.endpoint}/topic`, {
+ data: {
+ name,
+ },
+ });
+ setLoading(false);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to remove the topic',
+ description: error.message,
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ }
+ };
+
+ return (
+ <Tr>
+ <Td>{name}</Td>
+ <Td>{messageCount}</Td>
+ <Td>
+ <HStack>
+ <Button
+ colorScheme="red"
+ isLoading={loading}
+ onClick={onRemoveClick}
+ >
+ Remove
+ </Button>
+ </HStack>
+ </Td>
+ </Tr>
+ );
+};
+
+const TopicTable = () => {
+ const { state } = useContext(AppContext);
+
+ const [searchInput, setSearchInput] = useState<string>('');
+ const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+ setSearchInput(event.currentTarget.value);
+ };
+
+ const [topicList, setTopicList] = useState<Topic[]>([]);
+ const toast = useToast();
+ useEffect(() => {
+ const fetch = async () => {
+ try {
+ const { data } = await axios.get<Topic[]>(`${state.endpoint}/topic`);
+ setTopicList(data);
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ toast({
+ title: 'Failed to fetch the list of topics',
+ description: 'Unable to connect to the EventMesh daemon',
+ status: 'error',
+ duration: 3000,
+ isClosable: true,
+ });
+ setTopicList([]);
+ }
+ }
+ };
+
+ fetch();
+ }, []);
+
+ return (
+ <Box
+ maxW="full"
+ bg="white"
+ borderWidth="1px"
+ borderRadius="md"
+ overflow="hidden"
+ p="4"
+ >
+ <HStack
+ spacing="2"
+ >
+ <Input
+ w="100%"
+ placeholder="Search"
+ value={searchInput}
+ onChange={handleSearchInputChange}
+ />
+ <CreateTopicModal />
+ </HStack>
+
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Topic Name</Th>
+ <Th>Message Count</Th>
+ <Th>Action</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {topicList.filter(({
+ name,
+ }) => {
+ if (searchInput && !name.includes(searchInput)) {
+ return false;
+ }
+ return true;
+ }).map(({
+ name,
+ messageCount,
+ }) => (
+ <TopicRow
+ name={name}
+ messageCount={messageCount}
+ />
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </Box>
+ );
+};
+
+export default TopicTable;
diff --git a/components/workflow/Create.tsx b/components/workflow/Create.tsx
new file mode 100644
index 0000000..d15d5a4
--- /dev/null
+++ b/components/workflow/Create.tsx
@@ -0,0 +1,136 @@
+/*
+ * 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, { FC, useRef, useState } from 'react';
+
+import {
+ Drawer,
+ DrawerContent,
+ DrawerOverlay,
+ DrawerHeader,
+ DrawerBody,
+ DrawerFooter,
+ DrawerCloseButton,
+ Button,
+ useToast,
+ Spinner,
+} from '@chakra-ui/react';
+import axios from 'axios';
+
+import Editor, { Monaco } from '@monaco-editor/react';
+
+const ApiRoot = process.env.NEXT_PUBLIC_WORKFLOW_API_ROOT;
+
+const Create: FC<{
+ visible: boolean;
+ onClose: () => void;
+ onSucceed: () => void;
+}> = ({ visible = false, onClose = () => {}, onSucceed = () => {} }) => {
+ const toast = useToast();
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const editorRef = useRef<Monaco | null>(null);
+ const defaultEditorValue = '# Your code goes here';
+
+ const onSubmit = () => {
+ setIsSubmitting(true);
+
+ try {
+ const value = editorRef.current.getValue();
+ if (value === defaultEditorValue) {
+ toast({
+ title: 'Invalid definition',
+ description: 'Please input your workflow definition properly',
+ status: 'warning',
+ position: 'top-right',
+ });
+ setIsSubmitting(false);
+ return;
+ }
+ axios
+ .post(
+ `${ApiRoot}/workflow`,
+ { workflow: { definition: value } },
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ .then(() => {
+ toast({
+ title: 'Succeeded',
+ status: 'success',
+ position: 'top-right',
+ });
+ onSucceed();
+ setIsSubmitting(false);
+ })
+ .catch((error) => {
+ toast({
+ title: 'Failed',
+ description: error.response.data,
+ status: 'error',
+ position: 'top-right',
+ });
+ setIsSubmitting(false);
+ });
+ } catch (error) {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleEditorDidMount = (editor: Monaco) => {
+ editorRef.current = editor;
+ };
+
+ return (
+ <Drawer
+ isOpen={visible}
+ size="xl"
+ placement="right"
+ closeOnEsc={false}
+ onClose={() => onClose()}
+ >
+ <DrawerOverlay />
+ <DrawerContent>
+ <DrawerCloseButton />
+ <DrawerHeader>Create New Workflow</DrawerHeader>
+ <DrawerBody>
+ <Editor
+ height="1000px"
+ defaultLanguage="yaml"
+ defaultValue={defaultEditorValue}
+ onMount={handleEditorDidMount}
+ theme="vs-dark"
+ />
+ </DrawerBody>
+ <DrawerFooter justifyContent="flex-start">
+ <Button colorScheme="blue" mr={3} onClick={onSubmit}>
+ {isSubmitting ? <Spinner colorScheme="white" size="sm" /> : 'Submit'}
+ </Button>
+ <Button variant="ghost" colorScheme="blue" onClick={onClose}>
+ Cancel
+ </Button>
+ </DrawerFooter>
+ </DrawerContent>
+ </Drawer>
+ );
+};
+
+export default React.memo(Create);
diff --git a/components/workflow/Details/Details.tsx b/components/workflow/Details/Details.tsx
new file mode 100644
index 0000000..601cee9
--- /dev/null
+++ b/components/workflow/Details/Details.tsx
@@ -0,0 +1,285 @@
+/*
+ * 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, {
+ FC, useEffect, useRef, useState,
+} from 'react';
+
+import {
+ Drawer,
+ DrawerContent,
+ DrawerOverlay,
+ DrawerHeader,
+ DrawerBody,
+ DrawerFooter,
+ DrawerCloseButton,
+ Box,
+ FormLabel,
+ Flex,
+ Text,
+ Button,
+ Stack,
+ Tabs,
+ TabList,
+ TabPanels,
+ Tab,
+ TabPanel,
+ useToast,
+ AlertDialog,
+ AlertDialogOverlay,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogBody,
+ AlertDialogFooter,
+ Alert,
+ Badge,
+} from '@chakra-ui/react';
+
+import { WarningIcon, InfoIcon } from '@chakra-ui/icons';
+import moment from 'moment';
+
+import Editor, { Monaco } from '@monaco-editor/react';
+import axios from 'axios';
+import { WorkflowType, WorkflowStatusEnum } from '../types';
+// import { WorkflowStatusMap } from '../constant';
+import Intances from './Instances';
+
+const ApiRoot = process.env.NEXT_PUBLIC_WORKFLOW_API_ROOT;
+
+const Details: FC<{
+ visible: boolean;
+ data?: WorkflowType | null;
+ onClose: () => void;
+ onSaved: () => void;
+}> = ({
+ visible = false, data, onClose = () => {}, onSaved = () => {},
+}) => {
+ const toast = useToast();
+ const editorRef = useRef<Monaco | null>(null);
+ const [isShowConfirm, setIsShowComfirm] = useState(false);
+ const cancelRef = useRef(null);
+ const handleEditorDidMount = (editor: Monaco) => {
+ editorRef.current = editor;
+ editor.setValue(data?.definition ?? '');
+ };
+
+ const onSubmit = () => {
+ const value = editorRef.current.getValue();
+
+ axios
+ .post(
+ `${ApiRoot}/workflow`,
+ {
+ workflow: {
+ workflow_id: data?.workflow_id,
+ definition: value,
+ },
+ },
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ .then(() => {
+ toast({
+ title: 'Workflow saved',
+ status: 'success',
+ position: 'top-right',
+ });
+ setIsShowComfirm(false);
+ onSaved();
+ onClose();
+ })
+ .catch((error) => {
+ setIsShowComfirm(false);
+ toast({
+ title: 'Failed to save',
+ description: error.response.data,
+ status: 'error',
+ position: 'top-right',
+ });
+ });
+ };
+
+ const onConfirm = () => {
+ const value = editorRef.current.getValue();
+ if (data?.definition === value) {
+ onClose();
+ return;
+ }
+ setIsShowComfirm(true);
+ };
+
+ useEffect(() => {
+ if (editorRef.current) {
+ editorRef.current.setValue(data?.definition ?? '');
+ }
+ }, [data, editorRef]);
+
+ return (
+ <>
+ <AlertDialog
+ leastDestructiveRef={cancelRef}
+ isOpen={isShowConfirm}
+ onClose={onClose}
+ >
+ <AlertDialogOverlay>
+ <AlertDialogContent>
+ <AlertDialogHeader
+ fontSize="lg"
+ fontWeight="bold"
+ alignItems="center"
+ >
+ <WarningIcon boxSize="6" mr={2} color="orange" />
+ <Text fontSize="xl" as="b">
+ Confirm
+ </Text>
+ </AlertDialogHeader>
+ <AlertDialogBody>
+ Are you sure to save the changes to
+ {' '}
+ <Text as="b">{data?.workflow_id}</Text>
+ ?
+ </AlertDialogBody>
+ <AlertDialogFooter>
+ <Button ref={cancelRef} onClick={() => setIsShowComfirm(false)}>
+ No
+ </Button>
+ <Button colorScheme="blue" onClick={onSubmit} ml={3}>
+ Save
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialogOverlay>
+ </AlertDialog>
+
+ <Drawer
+ isOpen={visible}
+ size="xl"
+ placement="right"
+ onClose={() => onClose()}
+ >
+ <DrawerOverlay />
+ <DrawerContent>
+ <DrawerCloseButton />
+ <DrawerHeader>
+ {data?.workflow_id}
+ {/* <Badge
+ ml={2}
+ colorScheme={
+ data?.status === WorkflowStatusEnum.Normal ? 'blue' : 'red'
+ }
+ >
+ {WorkflowStatusMap.get(data?.status ?? 0) ?? '-'}
+ </Badge> */}
+ <Badge ml={2}>
+ Version
+ {' '}
+ {data?.version}
+ </Badge>
+ </DrawerHeader>
+ <DrawerBody>
+ <Stack mb="15px" direction="row" spacing={10}>
+ <Flex flexDirection="column" h="full">
+ <Box mb={2}>
+ <FormLabel opacity={0.5}>Workflow Name</FormLabel>
+ <Text>{data?.workflow_name}</Text>
+ </Box>
+ <Box mb={2}>
+ <FormLabel opacity={0.5}>Created At</FormLabel>
+ <Text>
+ {moment(data?.update_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Text>
+ </Box>
+ <Box>
+ <FormLabel opacity={0.5}>Updated At</FormLabel>
+ <Text>
+ {moment(data?.update_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Text>
+ </Box>
+ </Flex>
+
+ <Flex flexDirection="column" h="full">
+ <Box mb={2}>
+ <FormLabel opacity={0.5}>Total Instance</FormLabel>
+ <Text>{data?.total_instances}</Text>
+ </Box>
+ <Box mb={2}>
+ <FormLabel opacity={0.5}>Running</FormLabel>
+ <Text>{data?.total_running_instances}</Text>
+ </Box>
+ <Box>
+ <FormLabel opacity={0.5}>Failed</FormLabel>
+ <Text>{data?.total_failed_instances}</Text>
+ </Box>
+ </Flex>
+ </Stack>
+
+ <Tabs>
+ <TabList>
+ <Tab>Definition</Tab>
+ <Tab>Instances</Tab>
+ </TabList>
+ <TabPanels>
+ <TabPanel>
+ <Alert status="info" mb={2}>
+ <InfoIcon color="#3182ce" mr={2} />
+ <Text fontSize="sm" color="#3182ce">
+ You can edit the workflow directly and click "OK" to save
+ it
+ </Text>
+ </Alert>
+ <Editor
+ height="1000px"
+ defaultLanguage="yaml"
+ defaultValue="# Your code goes here"
+ onMount={handleEditorDidMount}
+ theme="vs-dark"
+ />
+ </TabPanel>
+ <TabPanel>
+ <Intances workflowId={data?.workflow_id ?? ''} />
+ </TabPanel>
+ </TabPanels>
+ </Tabs>
+ </DrawerBody>
+ <DrawerFooter justifyContent="flex-start">
+ <Button colorScheme="blue" mr={3} onClick={onConfirm}>
+ OK
+ </Button>
+ <Button
+ colorScheme="blue"
+ mr={3}
+ variant="ghost"
+ onClick={onClose}
+ >
+ Cancel
+ </Button>
+ </DrawerFooter>
+ </DrawerContent>
+ </Drawer>
+ </>
+ );
+};
+
+Details.defaultProps = {
+ data: null,
+};
+export default Details;
diff --git a/components/workflow/Details/Instances.tsx b/components/workflow/Details/Instances.tsx
new file mode 100644
index 0000000..3c46ebd
--- /dev/null
+++ b/components/workflow/Details/Instances.tsx
@@ -0,0 +1,164 @@
+/*
+ * 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, {
+ FC, useCallback, useEffect, useState,
+} from 'react';
+import axios from 'axios';
+import {
+ Flex,
+ Text,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ TableCaption,
+ Tag,
+ Spinner,
+} from '@chakra-ui/react';
+import moment from 'moment';
+import { WorkflowInstanceType } from '../types';
+import {
+ WorkflowIntanceStatusMap,
+ WorkflowIntanceStatusColorMap,
+} from '../constant';
+
+const ApiRoot = process.env.NEXT_PUBLIC_WORKFLOW_API_ROOT;
+
+const Instances: FC<{ workflowId: string }> = ({ workflowId }) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [instances, setInstances] = useState<WorkflowInstanceType[]>([]);
+ const [total, setTotal] = useState(0);
+ const [pageIndex, setPageIndex] = useState(1);
+ const pageSize = 10;
+
+ const getWorkflows = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const reqParams: {
+ page: number;
+ size: number;
+ workflow_id?: string;
+ } = {
+ page: pageIndex,
+ size: pageSize,
+ workflow_id: workflowId,
+ };
+
+ const { data } = await axios.get<{
+ total: number;
+ workflow_instances: WorkflowInstanceType[];
+ }>(`${ApiRoot}/workflow/instances`, {
+ params: reqParams,
+ });
+ setInstances([...instances, ...(data?.workflow_instances ?? [])]);
+ setTotal(data.total);
+ setIsLoading(false);
+ } catch (error) {
+ setIsLoading(false);
+ }
+ }, [workflowId, pageIndex, pageSize]);
+
+ useEffect(() => {
+ const controller = new AbortController();
+ getWorkflows();
+ return () => {
+ controller.abort();
+ };
+ }, [workflowId, pageIndex, pageSize]);
+
+ return (
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Instance ID</Th>
+ <Th>Status</Th>
+ <Th>Updated at</Th>
+ <Th>Created At</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {instances.map((workflow) => (
+ <Tr key={workflow.workflow_instance_id}>
+ <Td>{workflow.workflow_instance_id}</Td>
+ <Td>
+ <Tag
+ size="sm"
+ colorScheme={WorkflowIntanceStatusColorMap.get(
+ workflow.workflow_status,
+ )}
+ variant="outline"
+ >
+ {WorkflowIntanceStatusMap.get(workflow.workflow_status)}
+ </Tag>
+ </Td>
+ <Td>
+ {moment(workflow.update_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Td>
+ <Td>
+ {moment(workflow.create_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+
+ {instances.length === 0 && (
+ <TableCaption>
+ <Text variant="xs" color="#909090">
+ empty
+ </Text>
+ </TableCaption>
+ )}
+
+ {instances.length > 0 && (
+ <TableCaption>
+ <Flex alignItems="center">
+ <Text fontSize="sx">
+ {`${instances.length} of ${total} intance${
+ total > 1 ? 's' : ''
+ } in list `}
+ </Text>
+ {isLoading ? (
+ <Spinner ml={2} size="sm" colorScheme="blue" />
+ ) : (
+ instances.length < total && (
+ <Text
+ color={instances.length < total ? '#3182ce' : ''}
+ ml="2"
+ cursor="pointer"
+ as="u"
+ onClick={() => setPageIndex(pageIndex + 1)}
+ >
+ Load More
+ </Text>
+ )
+ )}
+ </Flex>
+ </TableCaption>
+ )}
+ </Table>
+ </TableContainer>
+ );
+};
+
+export default Instances;
diff --git a/components/workflow/Details/index.ts b/components/workflow/Details/index.ts
new file mode 100644
index 0000000..11a5b7d
--- /dev/null
+++ b/components/workflow/Details/index.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 Details from './Details';
+
+export default Details;
diff --git a/components/workflow/constant.ts b/components/workflow/constant.ts
new file mode 100644
index 0000000..f39a0c0
--- /dev/null
+++ b/components/workflow/constant.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 { WorkflowStatusEnum, WorkflowInstanceStatusEnum } from './types';
+
+export const WorkflowStatusMap = new Map([
+ [WorkflowStatusEnum.Normal, 'Normal'],
+ [WorkflowStatusEnum.Deleted, 'Deleted'],
+]);
+
+export const WorkflowIntanceStatusMap = new Map([
+ [WorkflowInstanceStatusEnum.Sleep, 'Sleeping'],
+ [WorkflowInstanceStatusEnum.Wait, 'Waiting'],
+ [WorkflowInstanceStatusEnum.Process, 'Processing'],
+ [WorkflowInstanceStatusEnum.Succeed, 'Succeeded'],
+ [WorkflowInstanceStatusEnum.Fail, 'Failed'],
+]);
+
+export const WorkflowIntanceStatusColorMap = new Map([
+ [WorkflowInstanceStatusEnum.Sleep, 'gray'],
+ [WorkflowInstanceStatusEnum.Wait, 'orange'],
+ [WorkflowInstanceStatusEnum.Process, 'blue'],
+ [WorkflowInstanceStatusEnum.Succeed, 'green'],
+ [WorkflowInstanceStatusEnum.Fail, 'red'],
+]);
diff --git a/components/workflow/types.ts b/components/workflow/types.ts
new file mode 100644
index 0000000..45fe58a
--- /dev/null
+++ b/components/workflow/types.ts
@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+export type WorkflowType = {
+ create_time: string;
+ definition: string;
+ id: number;
+ status: number;
+ total_failed_instances: number;
+ total_instances: number;
+ total_running_instances: number;
+ update_time: string;
+ version: string;
+ workflow_id: string;
+ workflow_name: string;
+};
+
+export type WorkflowInstanceType = {
+ create_time: string,
+ id: number,
+ update_time: string,
+ workflow_id : string,
+ workflow_instance_id : string,
+ workflow_status : number
+};
+
+export enum WorkflowStatusEnum {
+ 'Normal' = 1,
+ 'Deleted' = -1,
+}
+
+export enum WorkflowInstanceStatusEnum {
+ Sleep = 1,
+ Wait = 2,
+ Process = 3,
+ Succeed = 4,
+ Fail = 5,
+}
diff --git a/context/context.tsx b/context/context.tsx
new file mode 100644
index 0000000..19b074f
--- /dev/null
+++ b/context/context.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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 {
+ useMemo,
+ useEffect,
+ useState,
+ createContext,
+ Dispatch,
+} from 'react';
+import { useImmerReducer } from 'use-immer';
+import { State, Action } from './type';
+import reducer from './reducer';
+
+const initialState: State = {
+ endpoint: 'http://localhost:10106',
+};
+
+const AppContext = createContext<{
+ state: State;
+ dispatch: Dispatch<Action>;
+}>({
+ state: initialState,
+ dispatch: () => null,
+});
+
+interface AppProviderProps {
+ children: React.ReactNode;
+}
+
+const AppProvider = ({ children }: AppProviderProps) => {
+ const [state, dispatch] = useImmerReducer(
+ reducer,
+ initialState,
+ );
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ const localState = localStorage.getItem('state');
+ if (localState === null) {
+ return;
+ }
+ const parsedState: State = JSON.parse(localState);
+ dispatch({
+ type: 'SetState',
+ payload: {
+ endpoint: parsedState.endpoint,
+ },
+ });
+ }, []);
+
+ useEffect(() => {
+ if (!isLoading) localStorage.setItem('state', JSON.stringify(state));
+ setIsLoading(false);
+ }, [state]);
+
+ const context = useMemo(() => ({
+ state,
+ dispatch,
+ }), [state]);
+
+ return (
+ <AppContext.Provider
+ value={context}
+ >
+ {children}
+ </AppContext.Provider>
+ );
+};
+
+export { AppContext, AppProvider };
diff --git a/context/reducer.ts b/context/reducer.ts
new file mode 100644
index 0000000..6e4eed7
--- /dev/null
+++ b/context/reducer.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { Action, State } from './type';
+
+const reducer = (
+ state: State,
+ action: Action,
+) => {
+ switch (action.type) {
+ case 'SetState':
+ state.endpoint = action.payload.endpoint;
+ break;
+
+ case 'SetEndPointAction':
+ state.endpoint = action.payload.endpoint;
+ break;
+
+ default:
+ break;
+ }
+};
+
+export default reducer;
diff --git a/context/type.ts b/context/type.ts
new file mode 100644
index 0000000..5deb2ba
--- /dev/null
+++ b/context/type.ts
@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+export interface State {
+ endpoint: string;
+}
+
+interface SetState {
+ type: 'SetState';
+ payload: {
+ endpoint: string;
+ };
+}
+
+interface SetEndPointAction {
+ type: 'SetEndPointAction';
+ payload: {
+ endpoint: string;
+ };
+}
+
+export type Action =
+ | SetState
+ | SetEndPointAction;
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..b0f480c
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..22d8dc8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "eventmesh-dashboard",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "eslint . --cache --fix --ext .ts,.tsx"
+ },
+ "dependencies": {
+ "@chakra-ui/icons": "^2.0.15",
+ "@chakra-ui/react": "^2.1.2",
+ "@emotion/react": "^11.9.0",
+ "@emotion/styled": "^11.8.1",
+ "@fontsource/inter": "^4.5.10",
+ "@monaco-editor/react": "^4.4.6",
+ "axios": "^0.27.2",
+ "cloudevents": "^6.0.2",
+ "framer-motion": "^6.3.6",
+ "immer": "^9.0.15",
+ "moment": "^2.29.4",
+ "next": "12.1.6",
+ "react": "18.1.0",
+ "react-dom": "18.1.0",
+ "react-icons": "^4.4.0",
+ "swr": "^1.3.0",
+ "use-immer": "^0.7.0"
+ },
+ "devDependencies": {
+ "@types/node": "17.0.38",
+ "@types/react": "18.0.10",
+ "@types/react-dom": "18.0.5",
+ "@typescript-eslint/eslint-plugin": "^5.4.0",
+ "@typescript-eslint/parser": "^5.4.0",
+ "eslint": "8.16.0",
+ "eslint-config-airbnb": "^19.0.1",
+ "eslint-config-airbnb-typescript": "^17.0.0",
+ "eslint-plugin-import": "^2.25.3",
+ "eslint-plugin-jsx-a11y": "^6.5.1",
+ "eslint-plugin-react": "^7.27.1",
+ "eslint-plugin-react-hooks": "^4.3.0",
+ "typescript": "4.7.2"
+ }
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 0000000..6095173
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/jsx-props-no-spreading */
+import '@fontsource/inter';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import type { AppProps } from 'next/app';
+import Sidebar from '../components/navigation/Sidebar';
+import { AppProvider } from '../context/context';
+
+const theme = extendTheme({
+ initialColorMode: 'light',
+ useSystemColorMode: true,
+ fonts: {
+ heading: 'Inter, sans-serif',
+ body: 'Inter, sans-serif',
+ },
+});
+
+const Application = ({ Component, pageProps }: AppProps) => (
+ <ChakraProvider theme={theme}>
+ <AppProvider>
+ <Sidebar>
+ <Component {...pageProps} />
+ </Sidebar>
+ </AppProvider>
+ </ChakraProvider>
+);
+
+export default Application;
diff --git a/pages/_document.tsx b/pages/_document.tsx
new file mode 100644
index 0000000..dd32fc0
--- /dev/null
+++ b/pages/_document.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { ColorModeScript } from '@chakra-ui/react';
+import NextDocument, {
+ Html, Head, Main, NextScript,
+} from 'next/document';
+
+export default class Document extends NextDocument {
+ render() {
+ return (
+ <Html lang="en">
+ <Head />
+ <body>
+ <ColorModeScript />
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ );
+ }
+}
diff --git a/pages/event.tsx b/pages/event.tsx
new file mode 100644
index 0000000..8214d74
--- /dev/null
+++ b/pages/event.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import EventTable from '../components/event/EventTable';
+
+const Event: NextPage = () => (
+ <>
+ <Head>
+ <title>Event | Apache EventMesh Dashboard</title>
+ </Head>
+ <EventTable />
+ </>
+);
+
+export default Event;
diff --git a/pages/eventCatalogs.tsx b/pages/eventCatalogs.tsx
new file mode 100644
index 0000000..f33d57e
--- /dev/null
+++ b/pages/eventCatalogs.tsx
@@ -0,0 +1,223 @@
+/*
+ * 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;
diff --git a/pages/grpc.tsx b/pages/grpc.tsx
new file mode 100644
index 0000000..8d68014
--- /dev/null
+++ b/pages/grpc.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import GrpcClientTable from '../components/client/GrpcClientTable';
+
+const GrpcClient: NextPage = () => (
+ <>
+ <Head>
+ <title>Grpc Client | Apache EventMesh Dashboard</title>
+ </Head>
+ <GrpcClientTable />
+ </>
+);
+
+export default GrpcClient;
diff --git a/pages/http.tsx b/pages/http.tsx
new file mode 100644
index 0000000..2d692d9
--- /dev/null
+++ b/pages/http.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import HTTPClientTable from '../components/client/HTTPClientTable';
+
+const HTTPClient: NextPage = () => (
+ <>
+ <Head>
+ <title>HTTP Client | Apache EventMesh Dashboard</title>
+ </Head>
+ <HTTPClientTable />
+ </>
+);
+
+export default HTTPClient;
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100755
index 0000000..7077600
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import Endpoint from '../components/index/Endpoint';
+import Configuration from '../components/index/Configuration';
+
+const Index: NextPage = () => (
+ <>
+ <Head>
+ <title>Apache EventMesh Dashboard</title>
+ </Head>
+ <Endpoint />
+ <Configuration />
+ </>
+);
+
+export default Index;
diff --git a/pages/metrics.tsx b/pages/metrics.tsx
new file mode 100644
index 0000000..3793b64
--- /dev/null
+++ b/pages/metrics.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import MetricsTable from '../components/metrics/MetricsTable';
+
+const Metrics: NextPage = () => (
+ <>
+ <Head>
+ <title>Metrics | Apache EventMesh Dashboard</title>
+ </Head>
+ <MetricsTable />
+ </>
+);
+
+export default Metrics;
diff --git a/pages/registry.tsx b/pages/registry.tsx
new file mode 100644
index 0000000..b2dd367
--- /dev/null
+++ b/pages/registry.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import RegistryTable from '../components/registry/RegistryTable';
+
+const Registry: NextPage = () => (
+ <>
+ <Head>
+ <title>Registry | Apache EventMesh Dashboard</title>
+ </Head>
+ <RegistryTable />
+ </>
+);
+
+export default Registry;
diff --git a/pages/tcp.tsx b/pages/tcp.tsx
new file mode 100644
index 0000000..93a4028
--- /dev/null
+++ b/pages/tcp.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import TCPClientTable from '../components/client/TCPClientTable';
+
+const TCPClient: NextPage = () => (
+ <>
+ <Head>
+ <title>TCP Client | Apache EventMesh Dashboard</title>
+ </Head>
+ <TCPClientTable />
+ </>
+);
+
+export default TCPClient;
diff --git a/pages/topic.tsx b/pages/topic.tsx
new file mode 100644
index 0000000..9023151
--- /dev/null
+++ b/pages/topic.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 Head from 'next/head';
+import type { NextPage } from 'next';
+import TopicTable from '../components/topic/TopicTable';
+
+const Topic: NextPage = () => (
+ <>
+ <Head>
+ <title>Topic | Apache EventMesh Dashboard</title>
+ </Head>
+ <TopicTable />
+ </>
+);
+
+export default Topic;
diff --git a/pages/workflows.tsx b/pages/workflows.tsx
new file mode 100644
index 0000000..29fd982
--- /dev/null
+++ b/pages/workflows.tsx
@@ -0,0 +1,375 @@
+/*
+ * 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, {
+ useCallback, useEffect, useState, useRef,
+} from 'react';
+import Head from 'next/head';
+import type { NextPage } from 'next';
+import moment from 'moment';
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ WarningTwoIcon,
+} from '@chakra-ui/icons';
+
+import {
+ Divider,
+ Button,
+ Flex,
+ Input,
+ Stack,
+ // Select,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ Text,
+ AlertDialog,
+ AlertDialogOverlay,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogBody,
+ AlertDialogFooter,
+ useToast,
+ Box,
+ Spinner,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import Details from '../components/workflow/Details';
+import Create from '../components/workflow/Create';
+import { WorkflowType } from '../components/workflow/types';
+// import { WorkflowStatusMap } from '../components/workflow/constant';
+
+const ApiRoot = process.env.NEXT_PUBLIC_WORKFLOW_API_ROOT;
+
+const Workflows: NextPage = () => {
+ const toast = useToast();
+
+ const [isLoading, setIsLoading] = useState(true);
+ const [workflows, setWorkflows] = useState<WorkflowType[]>([]);
+ const [total, setTotal] = useState(0);
+ const [keywordFilter, setKeywordFilter] = useState('');
+ const [statusFilter, setStatusFilter] = useState('any');
+ const [pageIndex, setPageIndex] = useState(1);
+ const pageSize = 10;
+ const [refreshFlag, setRefreshFlag] = useState<number>(+new Date());
+ const [isShowCreate, setIsShowCreate] = useState(false);
+ const [isShowDetails, setIsShowDetails] = useState(false);
+ const [isShowCancelConfirm, setIsShowCancelComfirm] = useState(false);
+ const cancelRef = useRef(null);
+
+ const [selectedWorkflow, setSelectedWorkflow] = useState<WorkflowType | null>(
+ null,
+ );
+
+ const onDelete = () => {
+ axios
+ .delete(`${ApiRoot}/workflow/${selectedWorkflow?.workflow_id}`)
+ .then(() => {
+ toast({
+ title: 'Workflow has been deleted',
+ description: (
+ <Box>
+ <Text>{`Workflow ID: ${selectedWorkflow?.workflow_id}`}</Text>
+ <Text>{`Workflow Name: ${selectedWorkflow?.workflow_name}`}</Text>
+ </Box>
+ ),
+ status: 'success',
+ position: 'top-right',
+ });
+ setIsShowCancelComfirm(false);
+ setSelectedWorkflow(null);
+ setRefreshFlag(+new Date());
+ })
+ .catch((error) => {
+ setIsShowCancelComfirm(false);
+ toast({
+ title: 'Failed to delete',
+ description: error.response.data,
+ status: 'error',
+ position: 'top-right',
+ });
+ });
+ };
+
+ const getWorkflows = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const reqParams: {
+ page: number;
+ size: number;
+ workflow_id?: string;
+ status?: string;
+ } = {
+ page: pageIndex,
+ size: pageSize,
+ };
+ // if (statusFilter) {
+ // reqParams.status = statusFilter;
+ // }
+ if (keywordFilter) {
+ reqParams.workflow_id = keywordFilter;
+ }
+ const { data } = await axios.get<{
+ total: number;
+ workflows: WorkflowType[];
+ }>(`${ApiRoot}/workflow`, {
+ params: reqParams,
+ });
+ setWorkflows(data.workflows);
+ setTotal(data.total);
+ setIsLoading(false);
+ } catch (error) {
+ setIsLoading(false);
+ }
+ }, [pageIndex, pageSize, keywordFilter, statusFilter, refreshFlag]);
+
+ useEffect(() => {
+ const controller = new AbortController();
+ getWorkflows();
+ return () => {
+ controller.abort();
+ };
+ }, [pageIndex, pageSize, keywordFilter, statusFilter, refreshFlag]);
+
+ return (
+ <>
+ <Head>
+ <title>Workflows | Apache EventMesh Dashboard</title>
+ </Head>
+ <Flex
+ 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 Workflow
+ </Button>
+ <Stack direction="row" spacing="2">
+ <Input
+ size="md"
+ placeholder="Workflow ID"
+ value={keywordFilter}
+ onChange={(evt) => setKeywordFilter(evt.target.value)}
+ />
+ {/* <Select
+ size="md"
+ placeholder="Status"
+ value={statusFilter}
+ onChange={(event) => setStatusFilter(event.target.value)}
+ >
+ <option value="1">Running</option>
+ <option value="-1">Deleted</option>
+ </Select> */}
+ <Box>
+ <Button
+ colorScheme="blue"
+ variant="ghost"
+ onClick={() => setRefreshFlag(+new Date())}
+ >
+ Refresh
+ </Button>
+ </Box>
+ </Stack>
+ </Flex>
+ <Divider mt="15" mb="15" orientation="horizontal" />
+ <TableContainer>
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th>Workflow ID</Th>
+ <Th>Workflow Name</Th>
+ {/* <Th>Status</Th> */}
+ <Th isNumeric>Total Instance</Th>
+ <Th isNumeric>Running</Th>
+ <Th isNumeric>Failed</Th>
+ <Th>Updated at</Th>
+ <Th>Created At</Th>
+ <Th>Actions</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {workflows.map((workflow) => (
+ <Tr key={workflow.workflow_id}>
+ <Td>
+ <Button
+ size="sm"
+ colorScheme="blue"
+ variant="ghost"
+ onClick={() => {
+ setIsShowDetails(true);
+ setSelectedWorkflow(workflow);
+ }}
+ >
+ {workflow.workflow_id}
+ </Button>
+ </Td>
+ <Td>{workflow.workflow_name}</Td>
+
+ {/* <Td>{WorkflowStatusMap.get(workflow.status)}</Td> */}
+ <Td isNumeric>{workflow.total_instances}</Td>
+ <Td isNumeric>{workflow.total_running_instances}</Td>
+ <Td isNumeric>{workflow.total_failed_instances}</Td>
+ <Td>
+ {moment(workflow.update_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Td>
+ <Td>
+ {moment(workflow.create_time).format('YYYY-MM-DD HH:mm:ss')}
+ </Td>
+ <Td>
+ <Button
+ size="sm"
+ colorScheme="blue"
+ variant="ghost"
+ onClick={() => {
+ setSelectedWorkflow(workflow);
+ setIsShowCancelComfirm(true);
+ }}
+ >
+ Delete
+ </Button>
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ <Flex mt={4} alignItems="center">
+ {isLoading ? (
+ <Spinner colorScheme="blue" size="sm" />
+ ) : (
+ <Text fontSize="sm" color="#909090">
+ {total}
+ {` workflow${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>
+ </Flex>
+
+ <AlertDialog
+ leastDestructiveRef={cancelRef}
+ isOpen={isShowCancelConfirm}
+ onClose={() => setIsShowCancelComfirm(false)}
+ >
+ <AlertDialogOverlay>
+ <AlertDialogContent>
+ <AlertDialogHeader fontSize="lg" fontWeight="bold">
+ <Flex alignItems="center">
+ <WarningTwoIcon mr={2} boxSize={6} color="orange" />
+ <Text fontSize="xl" as="b">
+ Confirm
+ </Text>
+ </Flex>
+ </AlertDialogHeader>
+
+ <AlertDialogBody>
+ Are you sure to delete
+ {' '}
+ <Text fontSize="sm" as="b">
+ {selectedWorkflow?.workflow_name}
+ </Text>
+ ?
+ <Box />
+ </AlertDialogBody>
+
+ <AlertDialogFooter>
+ <Button
+ ref={cancelRef}
+ onClick={() => {
+ setIsShowCancelComfirm(false);
+ setSelectedWorkflow(null);
+ }}
+ >
+ No
+ </Button>
+ <Button colorScheme="blue" onClick={() => onDelete()} ml={3}>
+ Delete
+ </Button>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialogOverlay>
+ </AlertDialog>
+
+ <Details
+ visible={isShowDetails}
+ data={selectedWorkflow}
+ onSaved={() => {
+ setIsShowDetails(false);
+ setRefreshFlag(+new Date());
+ }}
+ onClose={() => {
+ setIsShowDetails(false);
+ setSelectedWorkflow(null);
+ }}
+ />
+
+ <Create
+ visible={isShowCreate}
+ onSucceed={() => {
+ setIsShowCreate(false);
+ setPageIndex(1);
+ setRefreshFlag(+new Date());
+ }}
+ onClose={() => setIsShowCreate(false)}
+ />
+ </>
+ );
+};
+
+export default Workflows;
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..718d6fe
--- /dev/null
+++ b/public/favicon.ico
Binary files differ
diff --git a/static/images/logo.png b/static/images/logo.png
new file mode 100644
index 0000000..e854551
--- /dev/null
+++ b/static/images/logo.png
Binary files differ
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..99710e8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
