Extending the configuration server and its UI to view existing configuration versions and their contents

.github/workflows/configurationserver_test.yml

@@ -5,8 +5,6 @@ on:
     branches:
       - master
   pull_request:
-    branches:
-      - master
     paths:
       - '.github/workflows/configurationserver_test.yml'
       - 'components/inspectit-ocelot-configurationserver/**'

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

@@ -45,6 +45,11 @@ class AceEditor extends React.Component {
     this.editor.session.on('change', this.onChange);
     this.editor.commands.addCommand(saveCommand(this.doSave));
     this.editor.setReadOnly(readOnly);
+    // the following deactivates the cursor and line selection in read only mode.
+    // See: https://stackoverflow.com/questions/32806060/is-there-a-programmatic-way-to-hide-the-cursor-in-ace-editor
+    this.editor.setHighlightGutterLine(!readOnly);
+    this.editor.setHighlightActiveLine(!readOnly);
+    this.editor.renderer.$cursorLayer.element.style.display = readOnly ? 'none' : '';
 
     if (options) {
       this.editor.setOptions(options);

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

@@ -1,11 +1,13 @@
 import dynamic from 'next/dynamic';
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import editorConfig from '../../data/yaml-editor-config.json';
 import EditorToolbar from './EditorToolbar';
 import Notificationbar from './Notificationbar';
 import YamlParser from './YamlParser';
 import SelectionInformation from './SelectionInformation';
+import { configurationSelectors, configurationActions } from '../../redux/ducks/configuration';
 
 const AceEditor = dynamic(() => import('./AceEditor'), { ssr: false });
 const TreeTableEditor = dynamic(() => import('./TreeTableEditor'), { ssr: false });
@@ -34,16 +36,31 @@ const EditorView = ({
   readOnly,
   showVisualConfigurationView,
   onToggleVisualConfigurationView,
+  sidebar,
 }) => {
-  // refs
+  const dispatch = useDispatch();
+
   const editorRef = useRef(null);
 
+  // global state variables
+  const currentVersion = useSelector((state) => state.configuration.selectedVersion);
+  const isLatest = useSelector(configurationSelectors.isLatestVersion);
+
+  // derived variables
+  const isLiveSelected = currentVersion === 'live';
+
+  const selectlatestVersion = () => {
+    dispatch(configurationActions.selectVersion(null));
+  };
+
   return (
-    <div className="this p-grid p-dir-col p-nogutter">
+    <div className="this">
       <style jsx>{`
         .this {
           flex: 1;
-          flex-wrap: nowrap;
+          display: flex;
+          flex-direction: column;
+          overflow-y: hidden;
         }
         .selection-information {
           display: flex;
@@ -52,11 +69,20 @@ const EditorView = ({
           justify-content: center;
           color: #bbb;
         }
+        .editor-menu {
+        }
+        .editor-content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
         .editor-container {
           position: relative;
+          flex-grow: 1;
         }
         .visual-editor-container {
-          display: flex;
+          position: relative;
+          flex-grow: 1;
         }
         .loading-overlay {
           position: absolute;
@@ -67,12 +93,37 @@ const EditorView = ({
           background-color: #00000080;
           color: white;
           z-index: 100;
-          display: flex;
           justify-content: center;
           align-items: center;
+          display: flex;
+        }
+        .editor-row {
+          display: flex;
+          flex: 1 1 auto;
+          overflow: hidden;
+          position: relative;
+        }
+        .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="p-col-fixed">
+      <div className="editor-menu">
         <EditorToolbar
           enableButtons={enableButtons}
           canSave={canSave}
@@ -87,42 +138,68 @@ const EditorView = ({
           {children}
         </EditorToolbar>
       </div>
-      {showEditor && !showVisualConfigurationView && (
-        <div className="p-col editor-container">
-          <AceEditor
-            editorRef={(editor) => (editorRef.current = editor)}
-            onCreate={onCreate}
-            mode="yaml"
-            theme="cobalt"
-            options={editorConfig}
-            value={value}
-            onChange={onChange}
-            canSave={canSave}
-            onSave={onSave}
-            readOnly={readOnly}
-          />
-        </div>
-      )}
-      {showEditor && showVisualConfigurationView && (
-        <div className="p-col visual-editor-container">
-          <YamlParser yamlConfig={value} onUpdate={onChange}>
-            {(onUpdate, config) => (
-              <TreeTableEditor config={config} schema={schema} loading={loading} readOnly={readOnly} onUpdate={onUpdate} />
-            )}
-          </YamlParser>
+
+      <div className="editor-row">
+        <div className="editor-content">
+          {!isLatest && (
+            <div className="version-notice">
+              <i className="pi pi-info-circle" />
+              {isLiveSelected ? (
+                <div>
+                  You are viewing the latest <b>live</b> configuration. Modifications are only possible on the <b>latest workspace</b>{' '}
+                  configuration.
+                </div>
+              ) : (
+                <div>
+                  You are viewing not the latest workspace configuration. Modifications are only possible on the <b>latest workspace</b>{' '}
+                  configuration.
+                </div>
+              )}
+              <div className="gotoLatest" onClick={selectlatestVersion}>
+                Go to latest workspace
+              </div>
+            </div>
+          )}
+
+          {showEditor && !showVisualConfigurationView && (
+            <div className="editor-container">
+              <AceEditor
+                editorRef={(editor) => (editorRef.current = editor)}
+                onCreate={onCreate}
+                mode="yaml"
+                theme="cobalt"
+                options={editorConfig}
+                value={value}
+                onChange={onChange}
+                history-view
+                canSave={canSave}
+                onSave={onSave}
+                readOnly={readOnly}
+              />
+            </div>
+          )}
+          {showEditor && showVisualConfigurationView && (
+            <div className="visual-editor-container">
+              <YamlParser yamlConfig={value} onUpdate={onChange}>
+                {(onUpdate, config) => (
+                  <TreeTableEditor config={config} schema={schema} loading={loading} readOnly={readOnly} onUpdate={onUpdate} />
+                )}
+              </YamlParser>
+            </div>
+          )}
+          {!showEditor && <SelectionInformation hint={hint} />}
         </div>
-      )}
-      {!showEditor && <SelectionInformation hint={hint} />}
-      {loading && (
-        <div className="p-col">
+
+        {sidebar}
+
+        {loading && (
           <div className="loading-overlay">
             <i className="pi pi-spin pi-spinner" style={{ fontSize: '2em' }}></i>
           </div>
-        </div>
-      )}
-      <div className="p-col-fixed">
-        {notificationText ? <Notificationbar text={notificationText} isError={isErrorNotification} icon={notificationIcon} /> : null}
+        )}
       </div>
+
+      {notificationText ? <Notificationbar text={notificationText} isError={isErrorNotification} icon={notificationIcon} /> : null}
     </div>
   );
 };

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  */
 const SelectionInformation = ({ hint }) => {
   return (
-    <div className="p-col">
+    <>
       <style jsx>{`
         .selection-information {
           display: flex;
@@ -19,7 +19,7 @@ const SelectionInformation = ({ hint }) => {
       <div className="selection-information">
         <div>{hint}</div>
       </div>
-    </div>
+    </>
   );
 };
 

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import HistoryView from './history/HistoryView';
+import { configurationActions } from '../../../redux/ducks/configuration';
+
+/**
+ * The sidebar of the configuration view.
+ */
+const ConfigurationSidebar = () => {
+  const dispatch = useDispatch();
+
+  // global state variables
+  const showHistoryView = useSelector((state) => state.configuration.showHistoryView);
+
+  const toggleHistoryView = () => {
+    dispatch(configurationActions.toggleHistoryView());
+  };
+
+  return (
+    <>
+      <style jsx>
+        {`
+          .sidebar {
+            border: 0;
+            border-radius: 0;
+            background-color: #eee;
+            border-left: 1px solid #ddd;
+            flex: 0;
+            display: flex;
+            background-color: #eeeeee;
+          }
+          .content-container {
+          }
+          .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">{showHistoryView && <HistoryView />}</div>
+
+        <div>
+          <button className={'vert-button p-button p-togglebutton' + (showHistoryView ? 'p-highlight' : '')} onClick={toggleHistoryView}>
+            <i className={'pi pi-chevron-' + (showHistoryView ? 'right' : 'left')} />
+            <span>Versioning</span>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+ConfigurationSidebar.propTypes = {};
+
+export default ConfigurationSidebar;