feat(WarningArea): add clear events button & add empty status

packages/editor/src/components/WarningArea/ErrorLogs.tsx

@@ -40,6 +40,7 @@ export const ErrorLogs: React.FC<Props> = ({ services }) => {
       data={validateResult}
       pagination={{ hideOnSinglePage: true }}
       columns={errorColumns}
+      emptyMessage="No Errors"
     />
   );
 };

packages/editor/src/components/WarningArea/EventLogs.tsx

@@ -1,13 +1,18 @@
 import { Props, EventLog } from './type';
 import React from 'react';
 import { DebugTable } from './Table';
-import { Box } from '@chakra-ui/react';
+import { Box, Button } from '@chakra-ui/react';
 
 type EventLogsProps = Props & {
   events: EventLog[];
+  setEventLogs: React.Dispatch<React.SetStateAction<EventLog[]>>;
 };
 
-export const EventLogs: React.FC<EventLogsProps> = ({ services, events }) => {
+export const EventLogs: React.FC<EventLogsProps> = ({
+  services,
+  events,
+  setEventLogs,
+}) => {
   const { setSelectedComponentId } = services.editorStore;
 
   const eventColumns = [
@@ -60,6 +65,19 @@ export const EventLogs: React.FC<EventLogsProps> = ({ services, events }) => {
       columns={eventColumns}
       data={events}
       pagination={{ hideOnSinglePage: true }}
+      emptyMessage="No Event Logs"
+      footer={
+        !!events.length && (
+          <Button
+            onClick={() => {
+              setEventLogs([]);
+            }}
+            size="sm"
+          >
+            clear
+          </Button>
+        )
+      }
     />
   );
 };

packages/editor/src/components/WarningArea/Table.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Table, Tbody, Td, Th, Thead, Tr, VStack } from '@chakra-ui/react';
+import React, { ReactNode, useEffect } from 'react';
+import { Box, HStack, Table, Tbody, Td, Th, Thead, Tr, VStack } from '@chakra-ui/react';
 import { Pagination } from './Pagination';
 import { defaultPageSize } from './const';
 
@@ -17,48 +17,69 @@ type TableProps = {
     hideOnSinglePage?: boolean;
   };
   data: any[];
+  footer?: ReactNode;
+  emptyMessage?: string;
 };
 
 export const DebugTable: React.FC<TableProps> = ({
   columns = [],
   pagination = {},
   data,
+  footer,
+  emptyMessage = 'No Data',
 }) => {
   const { pageSize = defaultPageSize, hideOnSinglePage = false, lastPage } = pagination;
   const [currPage, setCurrPage] = React.useState(0);
   const currentData = data.slice(currPage * pageSize, currPage * pageSize + pageSize);
 
+  useEffect(() => {
+    if (data.length <= Number(pageSize) * (currPage - 1)) {
+      setCurrPage(0);
+    }
+  }, [currPage, data.length, pageSize]);
+
   return (
     <VStack width="full" justifyContent="start">
       <Table size="sm" width="full" maxHeight="200px" overflow="auto">
         <Thead>
           <Tr>
             {columns.map(c => {
-              return <Th key={c.title}>{c.title}</Th>;
+              return <Th key={c.title + c.dataIndex}>{c.title}</Th>;
             })}
           </Tr>
         </Thead>
         <Tbody>
-          {currentData.map((d, i) => {
-            return (
-              <Tr key={i}>
-                {columns.map(c => {
-                  if (c.render) {
-                    return <Td key={c.dataIndex}>{c.render(c, d, i)}</Td>;
-                  }
-                  return <Td key={c.dataIndex}>{d[c.dataIndex]}</Td>;
-                })}
-              </Tr>
-            );
-          })}
+          {!data.length ? (
+            <Tr>
+              <Td colSpan={columns.length}>
+                <Box textAlign="center">{emptyMessage}</Box>
+              </Td>
+            </Tr>
+          ) : (
+            currentData.map((d, i) => {
+              return (
+                <Tr key={i}>
+                  {columns.map(c => {
+                    if (c.render) {
+                      return <Td key={c.dataIndex}>{c.render(c, d, i)}</Td>;
+                    }
+                    return <Td key={c.dataIndex}>{d[c.dataIndex]}</Td>;
+                  })}
+                </Tr>
+              );
+            })
+          )}
         </Tbody>
       </Table>
-      <Pagination
-        currentPage={currPage}
-        lastPage={lastPage || Math.ceil(data.length / pageSize)}
-        handlePageClick={page => setCurrPage(page)}
-        hideOnSinglePage={hideOnSinglePage}
-      />
+      <HStack w="full" justify="end">
+        <Box flex="1">{footer}</Box>
+        <Pagination
+          currentPage={currPage}
+          lastPage={lastPage || Math.ceil(data.length / pageSize)}
+          handlePageClick={page => setCurrPage(page)}
+          hideOnSinglePage={hideOnSinglePage}
+        />
+      </HStack>
     </VStack>
   );
 };

packages/editor/src/components/WarningArea/WarningArea.tsx

@@ -31,7 +31,7 @@ export const WarningArea: React.FC<Props> = observer(({ services }) => {
           draft.unshift({
             type,
             methodName: (event as Event).name,
-            triggered: (event as Event).triggerId,
+            triggered: (event as Event).triggerId || '',
             time: new Date().toLocaleTimeString(),
             target: (event as Event).componentId,
           });
@@ -76,21 +76,21 @@ export const WarningArea: React.FC<Props> = observer(({ services }) => {
     >
       <HStack width="full" justifyContent="space-between">
         <Tabs
-          h={isCollapsed ? '' : '300px'}
+          minH={isCollapsed ? '' : '300px'}
           w="full"
           variant="soft-rounded"
           colorScheme="gray"
         >
           <TabList>
-            <Tab w="130px">
+            <Tab alignItems="baseline">
               <Text fontSize="md" fontWeight="bold">
                 Errors
-                <Badge ml="1" fontSize="0.8em" colorScheme="red">
-                  {editorStore.validateResult.length}
-                </Badge>
               </Text>
+              <Badge ml="1" fontSize="0.8em" colorScheme="red">
+                {editorStore.validateResult.length}
+              </Badge>
             </Tab>
-            <Tab w="130px">Logs</Tab>
+            <Tab>Logs</Tab>
             <HStack w="full" justify="end">
               {editorStore.isSaved ? savedBadge : unsaveBadge}
               <IconButton
@@ -108,7 +108,11 @@ export const WarningArea: React.FC<Props> = observer(({ services }) => {
                 <ErrorLogs services={services} />
               </TabPanel>
               <TabPanel>
-                <EventLogs services={services} events={eventLogs} />
+                <EventLogs
+                  setEventLogs={setEventLogs}
+                  services={services}
+                  events={eventLogs}
+                />
               </TabPanel>
             </TabPanels>
           )}

packages/runtime/src/components/_internal/ModuleRenderer.tsx

@@ -134,6 +134,7 @@ const ModuleRendererContent = React.forwardRef<
             componentId: evaledHandler.componentId,
             name: evaledHandler.method.name,
             parameters: evaledHandler.method.parameters,
+            triggerId: moduleId,
           });
         }
       };

packages/runtime/src/services/apiService.ts

@@ -11,7 +11,7 @@ export function initApiService() {
       componentId: string;
       name: string;
       parameters?: any;
-      triggerId: string;
+      triggerId?: string;
     };
     moduleEvent: {
       fromId: string;