diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js index a2edd1bc68..414894c46a 100644 --- a/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js +++ b/components/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; + } `} - {name} {agentIdElement} + {name} {agentIdElement}{' '} + {rowData.count > 1 ? ( + + {rowData.count}{' '} + + ) : null} :global(*) { margin-left: 0.25rem; } + .p-toolbar-warning { margin-top: 0.3rem; margin-left: 0.7rem; @@ -46,15 +62,32 @@ class StatusToolbar extends React.Component { 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; + } `} @@ -76,6 +109,19 @@ class StatusToolbar extends React.Component { Use Regex + + Combine duplicate services + + + ? + + + { + 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} /> - + - +