Alerting Tab and minor bug fixes

components/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/AlertingView.js

@@ -113,7 +113,7 @@ const AlertingView = () => {
         }
       `}</style>
       <div className="this">
-        <TabMenu className="menu" model={items} activeItem={activeTab} onTabChange={(e) => setActiveTab(e.value)} />
+        <TabMenu className="menu" model={items} activeitem={activeTab} onTabChange={(e) => setActiveTab(e.value)} />
 
         {activeTab === items[0] && (
           <AlertingRulesView

components/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/rules/tree/AlertingRulesTree.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import _, { uniq } from 'lodash';
@@ -16,7 +16,7 @@ const AlertingRulesTree = ({ rules, templates, unsavedRules, onSelectionChanged,
   const dispatch = useDispatch();
 
   // state variables
-  const [contextMenu, setContextMenu] = useState(null);
+  const contextMenuRef = useRef(null);
   const [treeIndex, setTreeIndex] = useState({});
   const [treeData, setTreeData] = useState(null);
 
@@ -69,6 +69,11 @@ const AlertingRulesTree = ({ rules, templates, unsavedRules, onSelectionChanged,
     onSelectionChanged(newSelection);
   };
 
+  const showContextMenu = (event) => {
+    event.originalEvent.persist()
+    contextMenuRef.current.show(event.originalEvent)
+  }
+
   return (
     <>
       <style jsx>{`
@@ -102,10 +107,10 @@ const AlertingRulesTree = ({ rules, templates, unsavedRules, onSelectionChanged,
       `}</style>
 
       <div className="this">
-        <ContextMenu className="context-menu" model={contextMenuItems} ref={(el) => setContextMenu(el)} />
+        <ContextMenu className="p-contextmenu" model={contextMenuItems} ref={contextMenuRef} />
 
         <Tree
-          onContextMenu={(event) => contextMenu.show(event.originalEvent)}
+          onContextMenu={showContextMenu}
           filter={true}
           filterBy="label"
           value={treeData}

components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/FileTree.js

@@ -88,7 +88,7 @@ class FileTree extends React.Component {
       event.originalEvent.stopPropagation();
       return;
     }
-
+    event.originalEvent.persist();
     this.setState({ contextMenuModel: this.getContextMenuModel(newSelection) });
     this.contextMenuRef.current.show(event.originalEvent || event);
   };