[ISSUE 2888] Complete EventCatalog features

eventmesh-dashboard/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;

eventmesh-dashboard/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;