forked from apache/eventmesh
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Dashboard] Feature - Added Workflows
- Loading branch information
SUN
committed
Jan 4, 2023
1 parent
3e4c7b2
commit f39f729
Showing
7 changed files
with
309 additions
and
3,315 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -126,4 +126,7 @@ yarn-error.log* | |
| .vercel | ||
|
|
||
| # VS code settings | ||
| .vscode | ||
| .vscode | ||
|
|
||
| # Yarn lock | ||
| yarn.lock | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { useRef } from 'react'; | ||
| import Head from 'next/head'; | ||
| import type { NextPage } from 'next'; | ||
|
|
||
| import { | ||
| Stack, | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| Grid, | ||
| GridItem, | ||
| FormControl, | ||
| FormLabel, | ||
| Input, | ||
| Button, | ||
| Textarea, | ||
| } from '@chakra-ui/react'; | ||
|
|
||
| import Editor from '@monaco-editor/react'; | ||
| import { useRouter } from 'next/router'; | ||
|
|
||
| const Workflows: NextPage = () => { | ||
| const editorRef = useRef(null); | ||
| const router = useRouter(); | ||
|
|
||
| const handleEditorDidMount = (editor: any) => { | ||
| // here is the editor instance | ||
| // you can store it in `useRef` for further usage | ||
| console.log('hhh'); | ||
| editorRef.current = editor; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>Create Workflow | Apache EventMesh Dashboard</title> | ||
| </Head> | ||
| <Breadcrumb mb={2}> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/workflows">Workflows</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
|
|
||
| <BreadcrumbItem> | ||
| <BreadcrumbLink>Create</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| </Breadcrumb> | ||
| <Grid | ||
| w="full" | ||
| h="calc(100vh - 56px)" | ||
| bg="white" | ||
| borderWidth="1px" | ||
| borderRadius="md" | ||
| p="6" | ||
| templateColumns="320px 1fr" | ||
| gap={6} | ||
| > | ||
| <GridItem h="full" display="flex"> | ||
| <Stack w="full" direction="column"> | ||
| <FormControl isRequired> | ||
| <FormLabel>Workflow name</FormLabel> | ||
| <Input placeholder="Please input" /> | ||
| </FormControl> | ||
|
|
||
| <FormControl mt={5}> | ||
| <FormLabel>Description</FormLabel> | ||
| <Textarea minH={240} placeholder="Optional" /> | ||
| </FormControl> | ||
| <Stack | ||
| direction="row" | ||
| spacing={2} | ||
| h="full" | ||
| pb="2" | ||
| alignItems="flex-end" | ||
| > | ||
| <Button colorScheme="blue">Save</Button> | ||
| <Button variant="outline" onClick={() => router.push('/workflows')}>Cancel</Button> | ||
| </Stack> | ||
| </Stack> | ||
| </GridItem> | ||
| <GridItem h="full" bgColor="blackAlpha.50"> | ||
| <Editor | ||
| height="100%" | ||
| defaultLanguage="yaml" | ||
| defaultValue="# Compose your workflow here" | ||
| onMount={handleEditorDidMount} | ||
| theme="vs-dark" | ||
| /> | ||
| </GridItem> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; | ||
| export default Workflows; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { useRef } from 'react'; | ||
| import Head from 'next/head'; | ||
| import type { NextPage } from 'next'; | ||
|
|
||
| import { | ||
| Stack, | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| Grid, | ||
| GridItem, | ||
| FormControl, | ||
| FormLabel, | ||
| Input, | ||
| Button, | ||
| Textarea, | ||
| } from '@chakra-ui/react'; | ||
|
|
||
| import Editor from '@monaco-editor/react'; | ||
| import { useRouter } from 'next/router'; | ||
|
|
||
| const Workflows: NextPage = () => { | ||
| const router = useRouter(); | ||
| const editorRef = useRef(null); | ||
|
|
||
| const handleEditorDidMount = (editor: any) => { | ||
| // here is the editor instance | ||
| // you can store it in `useRef` for further usage | ||
| console.log('hhh'); | ||
| editorRef.current = editor; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>Create Workflow | Apache EventMesh Dashboard</title> | ||
| </Head> | ||
| <Breadcrumb mb={2}> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/workflows">Workflows</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
|
|
||
| <BreadcrumbItem> | ||
| <BreadcrumbLink>Create</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| </Breadcrumb> | ||
| <Grid | ||
| w="full" | ||
| h="calc(100vh - 56px)" | ||
| bg="white" | ||
| borderWidth="1px" | ||
| borderRadius="md" | ||
| p="6" | ||
| templateColumns="320px 1fr" | ||
| gap={6} | ||
| > | ||
| <GridItem h="full" display="flex"> | ||
| <Stack w="full" direction="column"> | ||
| <FormControl isRequired> | ||
| <FormLabel>Workflow name</FormLabel> | ||
| <Input placeholder="Please input" /> | ||
| </FormControl> | ||
|
|
||
| <FormControl mt={5}> | ||
| <FormLabel>Description</FormLabel> | ||
| <Textarea minH={240} placeholder="Optional" /> | ||
| </FormControl> | ||
| <Stack | ||
| direction="row" | ||
| spacing={2} | ||
| h="full" | ||
| pb="2" | ||
| alignItems="flex-end" | ||
| > | ||
| <Button colorScheme="blue">Save</Button> | ||
| <Button variant="outline">Cancel</Button> | ||
| </Stack> | ||
| </Stack> | ||
| </GridItem> | ||
| <GridItem h="full" bgColor="blackAlpha.50"> | ||
| <Editor | ||
| height="100%" | ||
| defaultLanguage="yaml" | ||
| defaultValue="# Compose your workflow here" | ||
| onMount={handleEditorDidMount} | ||
| theme="vs-dark" | ||
| /> | ||
| </GridItem> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; | ||
| export default Workflows; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import Workflow from './workflows'; | ||
|
|
||
| export default Workflow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React from 'react'; | ||
| import Head from 'next/head'; | ||
| import type { NextPage } from 'next'; | ||
| import { useRouter } from 'next/router'; | ||
|
|
||
| import { | ||
| Divider, | ||
| Button, | ||
| Flex, | ||
| Input, | ||
| Stack, | ||
| Select, | ||
| Table, | ||
| Thead, | ||
| Tbody, | ||
| Tr, | ||
| Th, | ||
| Td, | ||
| TableContainer, | ||
| } from '@chakra-ui/react'; | ||
|
|
||
| const Workflows: NextPage = () => { | ||
| const router = useRouter(); | ||
|
|
||
| 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={() => router.push('/workflows/create')} | ||
| > | ||
| Create Wokrflow | ||
| </Button> | ||
| <Stack direction="row" spacing="2"> | ||
| <Input size="md" placeholder="Workflow name" /> | ||
| <Select size="md" placeholder="Status"> | ||
| <option value="option1">Option 1</option> | ||
| <option value="option2">Option 2</option> | ||
| <option value="option3">Option 3</option> | ||
| <option value="option3">Option 3</option> | ||
| </Select> | ||
| <Button size="md" w="60" colorScheme="blue" variant="outline"> | ||
| Refresh | ||
| </Button> | ||
| </Stack> | ||
| </Flex> | ||
| <Divider mt="15" mb="15" orientation="horizontal" /> | ||
| <TableContainer> | ||
| <Table variant="simple" size="sm"> | ||
| <Thead> | ||
| <Tr> | ||
| <Th>Name</Th> | ||
| <Th>Created At</Th> | ||
| <Th>Status</Th> | ||
| <Th>Logs</Th> | ||
| <Th isNumeric>Total Instance</Th> | ||
| <Th isNumeric>Running</Th> | ||
| <Th isNumeric>Failed</Th> | ||
| <Th isNumeric>Timeout</Th> | ||
| <Th isNumeric>Aborted</Th> | ||
| <Th>Actions</Th> | ||
| </Tr> | ||
| </Thead> | ||
| <Tbody> | ||
| <Tr> | ||
| <Td> | ||
| <Button size="sm" colorScheme="blue" variant="ghost"> | ||
| HelloWorld | ||
| </Button> | ||
| </Td> | ||
| <Td>2022-12-1 12:10:12</Td> | ||
| <Td>Active</Td> | ||
| <Td>On</Td> | ||
| <Td isNumeric>3</Td> | ||
| <Td isNumeric>1</Td> | ||
| <Td isNumeric>1</Td> | ||
| <Td isNumeric>0</Td> | ||
| <Td isNumeric>1</Td> | ||
| <Td> | ||
| <Button size="sm" colorScheme="blue" variant="ghost"> | ||
| Execute | ||
| </Button> | ||
| <Button size="sm" colorScheme="blue" variant="ghost"> | ||
| Edit | ||
| </Button> | ||
| <Button size="sm" colorScheme="blue" variant="ghost"> | ||
| Delete | ||
| </Button> | ||
| </Td> | ||
| </Tr> | ||
| </Tbody> | ||
| </Table> | ||
| </TableContainer> | ||
| </Flex> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Workflows; |
Oops, something went wrong.