improve agent mappings page

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

@@ -67,6 +67,7 @@ const BaseDocsElement = ({ data, type, registerRef, scrollTo }) => {
           color: #4e4e4e;
         }
         .file-item {
+          padding-left: 0.25rem;
           cursor: pointer;
           color: #0070f3;
         }

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

@@ -12,6 +12,7 @@ import DeleteDialog from './dialogs/DeleteDialog';
 import ConfigurationDownload from './ConfigurationDownload';
 import { cloneDeep, find } from 'lodash';
 import classnames from 'classnames';
+import { ProgressSpinner } from 'primereact/progressspinner';
 
 /** Component including the menu button for each mapping */
 const ButtonCell = ({ readOnly, mapping, onEdit, onDelete, onDownload, onDuplicate, appendRef }) => {
@@ -205,7 +206,7 @@ class MappingsTable extends React.Component {
   hideDeleteMappingDialog = () => this.setState({ isDeleteDialogShown: false, selectedMappingName: null });
 
   render() {
-    const { readOnly, filterValue, maxHeight, mappings, putMappings, sidebar } = this.props;
+    const { readOnly, filterValue, maxHeight, mappings, putMappings, sidebar, isLoading } = this.props;
 
     const mappingValues = mappings.map((mapping) => {
       //build a dummy string to allow filtering
@@ -273,68 +274,91 @@ class MappingsTable extends React.Component {
           .buttons-col {
             width: 15rem;
           }
+          .selection-information {
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            color: #bbb;
+          }
+          .selection-information > span {
+            margin-bottom: 1rem;
+          }
         `}</style>
-        <div className="table-and-sidebar">
-          <div className="table" ref={(el) => (this.mappingsTable = el)}>
-            <DataTable
-              value={mappingValues}
-              reorderableRows={!readOnly}
-              scrollable={true}
-              scrollHeight={maxHeight ? maxHeight : '100%'}
-              onRowReorder={(e) => {
-                putMappings(e.value);
-              }}
-              globalFilter={filterValue}
-            >
-              {!readOnly && <Column className="drag-icon-col" rowReorder={!filterValue} />}
-              <Column className="mapping-name-col cell-text" columnKey="name" field="name" header="Mapping Name" />
-              <Column
-                className="source-branch-col cell-text"
-                columnKey="branch"
-                field="branch"
-                header="Source Branch"
-                body={(data) => <BranchCell branch={data.sourceBranch} />}
-              />
-              <Column
-                className="sources-col cell-text"
-                columnKey="sources"
-                field="sources"
-                body={(data) => <SourceCell sources={data.sources} appendRef={this.mappingsTable} />}
-                header="Sources"
-              />
-              <Column
-                className="attributes-col cell-text"
-                columnKey="attributes"
-                field="attributesSearchString"
-                body={(data) => <AttributesCell attributes={data.attributes} appendRef={this.mappingsTable} />}
-                header="Attributes"
-              />
-              <Column
-                className="buttons-col cell-text"
-                columnKey="buttons"
-                body={(data) => (
-                  <ButtonCell
-                    readOnly={readOnly}
-                    mapping={data}
-                    onEdit={this.props.onEditMapping}
-                    onDelete={this.showDeleteMappingDialog}
-                    onDownload={this.configDownload.download}
-                    onDuplicate={this.duplicateMapping}
-                    appendRef={this.mappingsTable}
-                  />
-                )}
+
+        {isLoading && (
+          <>
+            <div className="selection-information">
+              <span>Loading agent mappings...</span>
+              <ProgressSpinner />
+            </div>
+          </>
+        )}
+        {mappings.length > 0 && (
+          <div className="table-and-sidebar">
+            <div className="table" ref={(el) => (this.mappingsTable = el)}>
+              <DataTable
+                value={mappingValues}
+                reorderableRows={!readOnly}
+                scrollable={true}
+                scrollHeight={maxHeight ? maxHeight : '100%'}
+                onRowReorder={(e) => {
+                  putMappings(e.value);
+                }}
+                globalFilter={filterValue}
+              >
+                {!readOnly && <Column className="drag-icon-col" rowReorder={!filterValue} />}
+                <Column className="mapping-name-col cell-text" columnKey="name" field="name" header="Mapping Name" />
+                <Column
+                  className="source-branch-col cell-text"
+                  columnKey="branch"
+                  field="branch"
+                  header="Source Branch"
+                  body={(data) => <BranchCell branch={data.sourceBranch} />}
+                />
+                <Column
+                  className="sources-col cell-text"
+                  columnKey="sources"
+                  field="sources"
+                  body={(data) => <SourceCell sources={data.sources} appendRef={this.mappingsTable} />}
+                  header="Sources"
+                />
+                <Column
+                  className="attributes-col cell-text"
+                  columnKey="attributes"
+                  field="attributesSearchString"
+                  body={(data) => <AttributesCell attributes={data.attributes} appendRef={this.mappingsTable} />}
+                  header="Attributes"
+                />
+                <Column
+                  className="buttons-col cell-text"
+                  columnKey="buttons"
+                  body={(data) => (
+                    <ButtonCell
+                      readOnly={readOnly}
+                      mapping={data}
+                      onEdit={this.props.onEditMapping}
+                      onDelete={this.showDeleteMappingDialog}
+                      onDownload={this.configDownload.download}
+                      onDuplicate={this.duplicateMapping}
+                      appendRef={this.mappingsTable}
+                    />
+                  )}
+                />
+              </DataTable>
+              <DeleteDialog
+                visible={this.state.isDeleteDialogShown}
+                onHide={this.hideDeleteMappingDialog}
+                mappingName={this.state.selectedMappingName}
               />
-            </DataTable>
-            <DeleteDialog
-              visible={this.state.isDeleteDialogShown}
-              onHide={this.hideDeleteMappingDialog}
-              mappingName={this.state.selectedMappingName}
-            />
-            {/** reference is used for calling onDownload within ButtonCell component */}
-            <ConfigurationDownload onRef={(ref) => (this.configDownload = ref)} />
+              {/** reference is used for calling onDownload within ButtonCell component */}
+              <ConfigurationDownload onRef={(ref) => (this.configDownload = ref)} />
+            </div>
+            <div className="versioning-sidebar">{sidebar}</div>
           </div>
-          <div className="versioning-sidebar">{sidebar}</div>
-        </div>
+        )}
       </>
     );
   }
@@ -360,9 +384,10 @@ MappingsTable.propTypes = {
 };
 
 function mapStateToProps(state) {
-  const { mappings } = state.mappings;
+  const { mappings, isLoading } = state.mappings;
   return {
     mappings,
+    isLoading,
   };
 }
 

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

@@ -78,7 +78,9 @@ class DownloadDialog extends React.Component {
     if (!prevProps.visible && this.props.visible) {
       /**Timeout is needed for .focus() to be triggered correctly. */
       setTimeout(() => {
-        this.downloadButton.current.focus();
+        if (this.downloadButton?.current) {
+          this.downloadButton.current.focus();
+        }
       }, 0);
     }
   }

components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/PromotionView.js

@@ -36,7 +36,7 @@ const PromotionView = () => {
   const currentUser = useSelector((state) => state.authentication.username);
 
   // fetching promotion data
-  const [{ data, isLoading, lastUpdate }, refreshData] = useFetchData('/promotions', { 'include-content': 'true' });
+  const [{ data, isLoading, lastUpdate }, refreshData] = useFetchData('/configuration/promotions', { 'include-content': 'true' });
 
   // derived variables
   const canSelfApprove = _.get(data, 'canPromoteOwnChanges', false); // whether the user can approve self-made changes
@@ -90,7 +90,7 @@ const PromotionView = () => {
     setIsPromoting(true);
 
     try {
-      const { data } = await axios.post('/promote', payload);
+      const { data } = await axios.post('/configuration/promote', payload);
 
       if (data.result && data.result != 'OK') {
         setShowWarningDialog(true);

components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusView.js

@@ -38,8 +38,6 @@ class StatusView extends React.Component {
     };
   }
 
-  axiosAbortController = new AbortController();
-
   componentDidUpdate(prevProps) {
     if (!isEqual(prevProps.agents, this.props.agents)) {
       this.filterAgents();
@@ -265,7 +263,6 @@ class StatusView extends React.Component {
             isDownloadDialogFooterHidden={isDownloadDialogFooterHidden}
             onCancel={() => {
               this.setShowDownloadDialog(false);
-              this.axiosAbortController.abort();
             }}
           />
           <AgentHealthStateDialogue
@@ -376,7 +373,6 @@ class StatusView extends React.Component {
       () => {
         axios
           .get('/agent/supportArchive', {
-            signal: this.axiosAbortController.signal,
             params: { 'agent-id': agentId },
           })
           .then((res) => {
@@ -411,7 +407,6 @@ class StatusView extends React.Component {
       () => {
         axios
           .get('/configuration/agent-configuration', {
-            signal: this.axiosAbortController.signal,
             params: { ...requestParams },
           })
           .then((res) => {
@@ -440,7 +435,6 @@ class StatusView extends React.Component {
       () => {
         axios
           .get('/command/logs', {
-            signal: this.axiosAbortController.signal,
             params: { 'agent-id': agentId },
           })
           .then((res) => {

components/inspectit-ocelot-configurationserver-ui/src/components/views/status/dialogs/AgentHealthStateDialogue.js

@@ -111,8 +111,6 @@ AgentHealthStateDialogue.propTypes = {
   visible: PropTypes.bool,
   /** Callback on dialog hide */
   onHide: PropTypes.func,
-  /** The string value being displayed. E.g. the logs.*/
-  contentValue: PropTypes.string,
   /** The type of content. E.g. config or log.*/
   contentType: PropTypes.string,
   /** The name of the data's context. E.g. the agent whose logs are being shown.*/

components/inspectit-ocelot-configurationserver-ui/src/redux/ducks/initial-states.js

@@ -83,6 +83,8 @@ const mappings = {
   sourceBranch: '',
   /** Defines which sidebar is currently shown */
   currentSidebar: SidebarTypes.NONE,
+  /** Whether the agent mappings are loading or not */
+  isLoading: true,
 };
 
 const alerting = {

components/inspectit-ocelot-configurationserver-ui/src/redux/ducks/mappings/reducers.js

@@ -21,11 +21,13 @@ const mappingsReducer = createReducer(initialState)({
   [types.FETCH_MAPPINGS_STARTED]: (state) => {
     return {
       ...incrementPendingRequests(state),
+      isLoading: true,
     };
   },
   [types.FETCH_MAPPINGS_FAILURE]: (state) => {
     return {
       ...decrementPendingRequests(state),
+      isLoading: false,
     };
   },
   [types.FETCH_MAPPINGS_SUCCESS]: (state, action) => {
@@ -34,6 +36,7 @@ const mappingsReducer = createReducer(initialState)({
       ...decrementPendingRequests(state),
       mappings,
       updateDate: Date.now(),
+      isLoading: false,
     };
   },
   [types.PUT_MAPPINGS_STARTED]: (state) => {

components/inspectit-ocelot-configurationserver/src/main/java/rocks/inspectit/ocelot/mappings/AgentMappingManager.java

@@ -1,7 +1,6 @@
 package rocks.inspectit.ocelot.mappings;
 
 import com.google.common.annotations.VisibleForTesting;
-import jakarta.annotation.PostConstruct;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
@@ -52,18 +51,6 @@ public class AgentMappingManager {
         this.fileManager = fileManager;
     }
 
-    /**
-     * Post construct. Initially reading the agent mappings if the mappings file exists.
-     */
-    @PostConstruct
-    public void postConstruct() throws IOException {
-        if (!fileManager.getWorkspaceRevision().agentMappingsExist()) {
-            log.info("Generating default agent mappings for workspace branch");
-            List<AgentMapping> defaultMappings = Collections.singletonList(DEFAULT_MAPPING);
-            serializer.writeAgentMappings(defaultMappings, fileManager.getWorkingDirectory());
-        }
-    }
-
     /**
      * @return The current source branch for the agent mapping file itself.
      */
@@ -101,7 +88,7 @@ public synchronized Branch setSourceBranch(String sourceBranch) {
      */
     public synchronized List<AgentMapping> getAgentMappings(String version) {
         if (version == null) {
-            return serializer.readAgentMappings(fileManager.getWorkspaceRevision());
+            return serializer.readCachedAgentMappings();
         } else if (version.equals("live")) {
             return serializer.readAgentMappings(fileManager.getLiveRevision());
         } else {
@@ -110,7 +97,7 @@ public synchronized List<AgentMapping> getAgentMappings(String version) {
     }
 
     public synchronized List<AgentMapping> getAgentMappings() {
-        return getAgentMappings(null);
+        return serializer.readCachedAgentMappings();
     }
 
     /**
@@ -140,7 +127,7 @@ public synchronized void setAgentMappings(List<AgentMapping> newAgentMappings) t
 
         log.info("Overriding current agent mappings with {} new mappings.", newAgentMappings.size());
 
-        serializer.writeAgentMappings(newAgentMappings, fileManager.getWorkingDirectory());
+        serializer.writeAgentMappings(newAgentMappings);
     }
 
     /**