Merge "Web Client context menu item display"

[ccsdk/features.git] / sdnr / wt / odlux / apps / eventLogApp / src / views / eventLog.tsx

diff --git a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx
index 3d81e4e..1fc53f2 100644 (file)
--- a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx
+++ b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx
@@ -19,10 +19,12 @@ import * as React from "react";
 
 import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import Refresh from '@mui/icons-material/Refresh';
 
 import { EventLogType } from '../models/eventLogType';
 import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
 import { createEventLogProperties, createEventLogActions } from "../handlers/eventLogHandler";
+import RefreshEventLogDialog, { RefreshEventLogDialogMode } from '../components/refreshEventLogDialog';
 
 const EventLogTable = MaterialTable as MaterialTableCtorType<EventLogType & { _id: string }>;
 
@@ -35,22 +37,56 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
   eventLogActions: createEventLogActions(dispatcher.dispatch)
 });
 
+type EventLogComponentProps = Connect<typeof mapProps, typeof mapDispatch>;
+type EventLogComponentState = {
+  refreshEventLogEditorMode: RefreshEventLogDialogMode
+}
 let initalSorted = false;
 
-class EventLogComponent extends React.Component<Connect<typeof mapProps, typeof mapDispatch>> {
-  render() {
-    return <EventLogTable stickyHeader title="Event Log" tableId="event-log-table" idProperty="_id" columns={[
-      { property: "nodeId", title: "Node Name" },
-      { property: "counter", title: "Counter" },
-      { property: "timestamp", title: "Timestamp" },
-      { property: "objectId", title: "Object ID" },
-      { property: "attributeName", title: "Attribute Name" },
-      { property: "newValue", title: "Message" },
-      { property: "sourceType", title: "Source" }
-    ]}  {...this.props.eventLogActions} {...this.props.eventLogProperties} >
-    </EventLogTable>
+class EventLogComponent extends React.Component<EventLogComponentProps, EventLogComponentState> {
+  constructor(props: EventLogComponentProps) {
+    super(props);
+
+    this.state = {
+      refreshEventLogEditorMode: RefreshEventLogDialogMode.None
+    };
+  }
+
+  render(): JSX.Element {
+
+    const refreshEventLogAction = {
+      icon: Refresh, tooltip: 'Refresh Event log', ariaLabel:'refresh', onClick: () => {
+        this.setState({
+          refreshEventLogEditorMode: RefreshEventLogDialogMode.RefreshEventLogTable
+        });
+      }
+    };
+    return (
+      <>
+        <EventLogTable stickyHeader title="Event Log" tableId="event-log-table" idProperty="_id" customActionButtons={[refreshEventLogAction]}
+          columns={[
+            { property: "nodeId", title: "Node Name" },
+            { property: "counter", title: "Counter" },
+            { property: "timestamp", title: "Timestamp" },
+            { property: "objectId", title: "Object ID" },
+            { property: "attributeName", title: "Attribute Name" },
+            { property: "newValue", title: "Message" },
+            { property: "sourceType", title: "Source" }
+          ]}  {...this.props.eventLogActions} {...this.props.eventLogProperties} >
+        </EventLogTable>
+        <RefreshEventLogDialog
+          mode={this.state.refreshEventLogEditorMode}
+          onClose={this.onCloseRefreshEventLogDialog}
+        />
+      </>
+    )
   }
 
+  private onCloseRefreshEventLogDialog = () => {
+    this.setState({
+      refreshEventLogEditorMode: RefreshEventLogDialogMode.None
+    });
+  }
   componentDidMount() {
 
     if (!initalSorted) {