feat 1395: Enable grouping of same agents in the status overview from…

… the Configuration UI
inspectIT · May 31, 2022 · 8811953 · 8811953
1 parent 9acc353
commit 8811953
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 19 deletions.
diff --git a/...onents/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js b/...onents/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js
@@ -132,8 +132,22 @@ class StatusTable extends React.Component {
             background: #ddd;
             border-color: #ddd;
           }
+          .this :global(.badge) {
+            width: 1.2rem;
+            height: 1.2rem;
+            background: #007ad9;
+            border-radius: 25%;
+            display: inline-flex;
+            justify-content: center;
+            color: white;
+          }
         `}</style>
-        {name} {agentIdElement}
+        {name} {agentIdElement}{' '}
+        {rowData.count > 1 ? (
+          <span className="badge">
+            <b>{rowData.count}</b>{' '}
+          </span>
+        ) : null}
         <Button
           className="config-info-button"
           icon="pi pi-cog"

diff --git a/...ents/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusToolbar.js b/...ents/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusToolbar.js
@@ -6,6 +6,7 @@ import ClearDialog from './dialogs/ClearDialog';
 import { connect } from 'react-redux';
 import { agentStatusActions } from '../../../redux/ducks/agent-status';
 import { Checkbox } from 'primereact/checkbox';
+import ReactTooltip from 'react-tooltip';
 
 /**
  * Toolbar in the status view. Allows filtering of statuses, refreshing and clearing all statuses.
@@ -16,7 +17,19 @@ class StatusToolbar extends React.Component {
   };
 
   render() {
-    const { clearing, refreshing, fetchStatus, filter, onFilterChange, disableClear, onModeChange, useRegexFilter, error } = this.props;
+    const {
+      clearing,
+      refreshing,
+      fetchStatus,
+      filter,
+      onFilterChange,
+      disableClear,
+      onModeChange,
+      useRegexFilter,
+      useServiceMerge,
+      onServiceMergeChange,
+      error,
+    } = this.props;
 
     const tooltipOptions = {
       showDelay: 500,
@@ -32,29 +45,49 @@ class StatusToolbar extends React.Component {
             background-color: #eee;
             border-bottom: 1px solid #ddd;
           }
+
           .p-toolbar-group-left {
             align-items: center;
             display: flex;
           }
+
           .p-toolbar-group-right > :global(*) {
             margin-left: 0.25rem;
           }
+
           .p-toolbar-warning {
             margin-top: 0.3rem;
             margin-left: 0.7rem;
             font-size: 1.1rem;
             font-weight: 900;
             color: red;
           }
+
           .checkbox-group {
             margin-left: 1rem;
           }
+
           .checkbox-group label {
             margin-right: 0.5rem;
           }
+
           .regex-error {
             color: red !important;
           }
+
+          .hint-badge {
+            display: inline-flex;
+            height: 1.2rem;
+            width: 1.2rem;
+            margin-left: 0.5rem;
+            border-radius: 50%;
+            background-color: #a4a3a3;
+            justify-content: center;
+            color: white;
+          }
+          &.__react_component_tooltip.show :global(*) {
+            opacity: 1 !important;
+          }
         `}</style>
         <Toolbar>
           <div className="p-toolbar-group-left">
@@ -76,6 +109,19 @@ class StatusToolbar extends React.Component {
               <label>Use Regex</label>
               <Checkbox onChange={onModeChange} checked={useRegexFilter} />
             </div>
+            <div className="p-inputgroup checkbox-group">
+              <label>Combine duplicate services</label>
+              <Checkbox onChange={onServiceMergeChange} checked={useServiceMerge} />
+              <span
+                data-tip="Combine agents with the same name into a single entry.<br>
+                Only the most recently started agent will be displayed.<br>
+                A badge behind the agents name will indicate the number of combined agents."
+                className="hint-badge"
+              >
+                ?
+              </span>
+              <ReactTooltip place="bottom" effect="solid" type="info" html="true" />
+            </div>
           </div>
           <div className="p-toolbar-group-right">
             <Button

diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusView.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusView.js
@@ -19,8 +19,9 @@ class StatusView extends React.Component {
     this.state = {
       filter: '',
       useRegexFilter: false,
+      useServiceMerge: true,
       error: false,
-      filteredAgents: props.agents,
+      agentsToShow: props.agents,
       isAgentConfigurationShown: false,
       attributes: '',
       configurationValue: '',
@@ -39,6 +40,10 @@ class StatusView extends React.Component {
     this.setState({ useRegexFilter: checked }, this.filterAgents);
   };
 
+  onServiceMergeChange = ({ checked }) => {
+    this.setState({ useServiceMerge: checked }, this.filterAgents);
+  };
+
   updateFilter = (filter) => {
     this.setState({ filter }, this.filterAgents);
   };
@@ -48,10 +53,13 @@ class StatusView extends React.Component {
     const { filter, useRegexFilter } = this.state;
 
     if (filter === '') {
-      this.setState({
-        error: false,
-        filteredAgents: agents,
-      });
+      this.setState(
+        {
+          error: false,
+          agentsToShow: agents,
+        },
+        this.mergeAgents
+      );
     } else {
       try {
         let filterValue;
@@ -63,24 +71,77 @@ class StatusView extends React.Component {
 
         const regex = RegExp(filterValue, 'i');
 
-        const filteredAgents = agents.filter((agent) => {
+        const agentsToShow = agents.filter((agent) => {
           const agentFilter = this.getAgentFilter(agent);
           return this.checkRegex(agentFilter, regex);
         });
 
-        this.setState({
-          error: false,
-          filteredAgents,
-        });
+        this.setState(
+          {
+            error: false,
+            agentsToShow,
+          },
+          this.mergeAgents
+        );
       } catch (error) {
-        this.setState({
-          error: true,
-          filteredAgents: agents,
-        });
+        this.setState(
+          {
+            error: true,
+            agentsToShow: agents,
+          },
+          this.mergeAgents
+        );
       }
     }
   };
 
+  getServiceName = ({ metaInformation, attributes }) => {
+    if (metaInformation) {
+      return attributes.service;
+    } else {
+      return null;
+    }
+  };
+
+  getStartTime = ({ metaInformation }) => {
+    if (metaInformation) {
+      return metaInformation.startTime;
+    } else {
+      return null;
+    }
+  };
+
+  mergeAgents = () => {
+    const { agentsToShow, useServiceMerge } = this.state;
+
+    if (useServiceMerge) {
+      const mergedMap = agentsToShow.reduce((result, agent) => {
+        const name = this.getServiceName(agent);
+        if (result[name]) {
+          if (this.getStartTime(result[name]) < this.getStartTime(agent)) {
+            result[name] = {
+              ...agent,
+              count: result[name].count + 1,
+            };
+          } else {
+            result[name].count += 1;
+          }
+        } else {
+          result[name] = {
+            ...agent,
+            count: 1,
+          };
+        }
+        return result;
+      }, {});
+
+      this.setState({
+        error: false,
+        agentsToShow: mergedMap,
+      });
+    }
+  };
+
   getAgentFilter = (agent) => {
     return {
       ...agent,
@@ -132,8 +193,9 @@ class StatusView extends React.Component {
     const { agents } = this.props;
     const {
       filter,
-      filteredAgents,
+      agentsToShow,
       useRegexFilter,
+      useServiceMerge,
       error,
       readOnly,
       isAgentConfigurationShown,
@@ -163,16 +225,18 @@ class StatusView extends React.Component {
               filter={filter}
               onFilterChange={this.updateFilter}
               onModeChange={this.onFilterModeChange}
+              onServiceMergeChange={this.onServiceMergeChange}
               useRegexFilter={useRegexFilter}
+              useServiceMerge={useServiceMerge}
               error={error}
               disableClear={readOnly}
             />
           </div>
           <div className="data-table">
-            <StatusTable data={filteredAgents} filter={filter} onShowConfiguration={this.showAgentConfigurationForAttributes} />
+            <StatusTable data={agentsToShow} filter={filter} onShowConfiguration={this.showAgentConfigurationForAttributes} />
           </div>
           <div>
-            <StatusFooterToolbar fullData={agents} filteredData={filteredAgents} />
+            <StatusFooterToolbar fullData={agents} filteredData={agentsToShow} />
           </div>
           <ShowConfigurationDialog
             visible={isAgentConfigurationShown}