Update git staging

components/inspectit-ocelot-configurationserver-ui/src/components/editor/EditorView.js

@@ -56,7 +56,7 @@ const EditorView = ({
   const configurationType = getConfigurationType(value);
 
   const selectlatestVersion = () => {
-    dispatch(configurationActions.selectVersion(null));
+    dispatch(configurationActions.selectConfigurationVersion(null));
   };
 
   let editorContent;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import HistoryView from './history/HistoryView';
+import ConfigurationHistoryView from './history/ConfigurationHistoryView';
 import { configurationActions } from '../../../redux/ducks/configuration';
 import DocumentationView from './documentation/DocumentationView';
 import SidebarTypes from './SidebarTypes';
@@ -53,7 +53,7 @@ const ConfigurationSidebar = () => {
 
       <div className="sidebar">
         <div className="content-container">
-          {currentSidebar == SidebarTypes.HISTORY && <HistoryView />}
+          {currentSidebar == SidebarTypes.HISTORY && <ConfigurationHistoryView />}
           {currentSidebar == SidebarTypes.CONFIGURATION_DOCS && <DocumentationView />}
         </div>
 

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

@@ -363,10 +363,10 @@ const mapDispatchToProps = {
   showWarning: notificationActions.showWarningMessage,
   writeFile: configurationActions.writeFile,
   selectedFileContentsChanged: configurationActions.selectedFileContentsChanged,
-  selectVersion: configurationActions.selectVersion,
+  selectVersion: configurationActions.selectConfigurationVersion,
   toggleVisualConfigurationView: configurationActions.toggleVisualConfigurationView,
   selectFile: configurationActions.selectFile,
-  fetchVersions: configurationActions.fetchVersions,
+  fetchVersions: configurationActions.fetchConfigurationVersions,
   toggleShowHiddenFiles: configurationActions.toggleShowHiddenFiles,
 };
 

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

@@ -30,7 +30,7 @@ const FileToolbar = ({
   const showHiddenFiles = useSelector((state) => state.configuration.showHiddenFiles) || '';
 
   const reloadFiles = () => {
-    dispatch(configurationActions.selectVersion(null));
+    dispatch(configurationActions.selectConfigurationVersion(null));
   };
 
   return (

components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/history/HistoryView.js → components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/history/ConfigurationHistoryView.js

@@ -7,7 +7,7 @@ import { VERSION_LIMIT } from '../../../../data/constants';
 /**
  * The sidebar panel for showing existing versions of the configuration files.
  */
-const HistoryView = () => {
+const ConfigurationHistoryView = () => {
   const dispatch = useDispatch();
 
   // global state variables
@@ -19,12 +19,12 @@ const HistoryView = () => {
 
   useEffect(() => {
     if (versions.length === 0) {
-      dispatch(configurationActions.fetchVersions());
+      dispatch(configurationActions.fetchConfigurationVersions());
     }
   }, []);
 
   const selectVersion = (versionId) => {
-    dispatch(configurationActions.selectVersion(versionId));
+    dispatch(configurationActions.selectConfigurationVersion(versionId));
   };
 
   const createVersionItem = (item, index) => {
@@ -91,4 +91,4 @@ const HistoryView = () => {
   );
 };
 
-export default HistoryView;
+export default ConfigurationHistoryView;

components/inspectit-ocelot-configurationserver-ui/src/components/views/mappings/AgentMappingsView.js

@@ -1,40 +1,74 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import MappingsToolbar from './MappingToolbar';
 import MappingsTable from './MappingsTable';
 
 import EditDialog from './dialogs/EditDialog';
 import DownloadDialog from './dialogs/DownloadDialog';
+import MappingSidebar from './MappingSidebar';
+import { mappingsActions, mappingsSelectors } from '../../../redux/ducks/mappings';
 
 /** View to display and change mappings */
 const AgentMappingView = () => {
-  const readOnly = useSelector((state) => !state.authentication.permissions.write);
+  const dispatch = useDispatch();
+  let isAdmin = useSelector((state) => state.authentication.permissions.admin);
+  let readOnly = useSelector((state) => !state.authentication.permissions.write && !isAdmin);
 
   const [mappingsFilter, setMappingsFilter] = useState('');
   const [mappingToEdit, setMappingToEdit] = useState(null);
   const [isEditDialogShown, setEditDialogShown] = useState(false);
   const [isDownloadDialogShown, setDownloadDialogShown] = useState(false);
 
+  // global state variables
+  const currentVersion = useSelector((state) => state.mappings.selectedVersion);
+  const isLatest = useSelector(mappingsSelectors.isLatestVersion);
+
+  // derived variables
+  const isLiveSelected = currentVersion === 'live';
+
+  const selectLatestVersion = () => {
+    dispatch(mappingsActions.selectMappingsVersion(null));
+  };
   const showEditMappingDialog = (selectedMapping = null) => {
     setMappingToEdit(selectedMapping);
     setEditDialogShown(true);
   };
 
-  const contentHeight = 'calc(100vh - 7rem)';
+  const contentHeight = 'calc(100vh - 10rem)';
+  // Disable editing, if not latest workspace is selected
+  readOnly = !isLatest ? true : readOnly;
   return (
     <div className="this">
       <style jsx>{`
         .fixed-toolbar {
-          position: fixed;
+          position: static;
           top: 4rem;
           width: calc(100vw - 4rem);
         }
         .content {
-          margin-top: 3rem;
           height: ${contentHeight};
           overflow: hidden;
         }
+        .version-notice {
+          background-color: #ffcc80;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0.5rem 1rem;
+          border-bottom: 1px solid #dddddd;
+        }
+        .version-notice i {
+          margin-right: 1rem;
+          color: #212121;
+        }
+        .gotoLatest {
+          margin-left: 1rem;
+          color: #007ad9;
+          text-decoration: underline;
+          cursor: pointer;
+          white-space: nowrap;
+        }
       `}</style>
       <div className="fixed-toolbar">
         <MappingsToolbar
@@ -43,15 +77,36 @@ const AgentMappingView = () => {
           onAddNewMapping={showEditMappingDialog}
           onDownload={() => setDownloadDialogShown(true)}
           readOnly={readOnly}
+          isAdmin={isAdmin}
         />
       </div>
+      {!isLatest && (
+        <div className="version-notice">
+          <i className="pi pi-info-circle" />
+          {isLiveSelected ? (
+            <div>
+              You are viewing the latest <b>live</b> agent mappings. Modifications are only possible on the <b>latest workspace</b> agent
+              mappings.
+            </div>
+          ) : (
+            <div>
+              You are viewing not the latest workspace agent mappings. Modifications are only possible on the <b>latest workspace</b> agent
+              mappings.
+            </div>
+          )}
+          <div className="gotoLatest" onClick={selectLatestVersion}>
+            Go to latest workspace
+          </div>
+        </div>
+      )}
       <div className="content">
         <MappingsTable
           filterValue={mappingsFilter}
           onEditMapping={showEditMappingDialog}
           onDuplicateMapping={showEditMappingDialog}
           maxHeight={`calc(${contentHeight} - 2.5em)`}
           readOnly={readOnly}
+          sidebar={<MappingSidebar />}
         />
       </div>
       <EditDialog visible={isEditDialogShown} onHide={() => setEditDialogShown(false)} mapping={mappingToEdit} />

components/inspectit-ocelot-configurationserver-ui/src/components/views/mappings/MappingSidebar.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import MappingsHistoryView from './history/MappingsHistoryView';
+import SidebarTypes from './SidebarTypes';
+import { mappingsActions } from '../../../redux/ducks/mappings';
+
+/**
+ * The sidebar of the configuration view.
+ */
+const MappingSidebar = () => {
+  const dispatch = useDispatch();
+
+  // global state variables
+  const currentSidebar = useSelector((state) => state.mappings.currentSidebar);
+
+  const toggleHistoryView = () => {
+    dispatch(mappingsActions.toggleHistoryView());
+  };
+
+  return (
+    <>
+      <style jsx>
+        {`
+          .sidebar {
+            display: flex;
+            border: 0;
+            border-radius: 0;
+            background-color: #eee;
+            border-left: 1px solid #ddd;
+            background-color: #eeeeee;
+          }
+          .vert-button {
+            display: flex;
+            flex-direction: column;
+            padding: 1rem 0.5rem;
+            border-radius: 0;
+          }
+          .vert-button i {
+            margin-bottom: 0.5rem;
+          }
+          .vert-button span {
+            writing-mode: vertical-rl;
+            font-size: 1rem;
+          }
+        `}
+      </style>
+
+      <div className="sidebar">
+        <div className="content-container">{currentSidebar == SidebarTypes.HISTORY && <MappingsHistoryView />}</div>
+        <div>
+          <button
+            className={'vert-button p-button p-togglebutton' + (currentSidebar == SidebarTypes.HISTORY ? 'p-highlight' : '')}
+            onClick={toggleHistoryView}
+          >
+            <i className={'pi pi-chevron-' + (currentSidebar == SidebarTypes.HISTORY ? 'right' : 'left')} />
+            <span>Versioning</span>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+MappingSidebar.propTypes = {};
+
+export default MappingSidebar;