Skip to content

Commit

Permalink
fix: separate and sort Connections and Plugins lists on UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@KEGustafsson
KEGustafsson committed Feb 3, 2024
1 parent 4dd31cc commit 63d0101
Showing 1 changed file with 174 additions and 72 deletions.
246 changes: 174 additions & 72 deletions packages/server-admin-ui/src/views/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@ const Dashboard = (props) => {
</div>
</Col>
<Col xs="12" md="6">
<div className="text-muted">Connection activity</div>
<div className="text-muted">Connections activity</div>
<ul className="horizontal-bars type-2">
{Object.keys(providerStatistics || {}).map((providerId) => {
{Object.keys(providerStatistics || {}).sort().map((providerId) => {
const providerStats = providerStatistics[providerId]
let linkType = 'provider'
try {
Expand All @@ -97,81 +97,183 @@ const Dashboard = (props) => {
: providerStats.writeRate > 0
? ' text-primary fa-pulse'
: '')
return (
<li
key={providerId}
onClick={() =>
props.history.push(
`/serverConfiguration/connections/${providerId}`
)
}
>
<i
className={inputPulseIconClass}
style={{
color: providerStats.deltaCount
? '#039'
: 'lightblue',
}}
/>
<i
className={outputPulseIconClass}
style={{
transform: 'scaleX(-1)',
color: providerStats.writeCount
? '#039'
: 'lightblue',
}}
/>
<span className="title">
{linkType === 'plugin'
? pluginNameLink(providerId)
: providerIdLink(providerId)}
</span>
{providerStats.writeRate > 0 && (
<span className="value">
{' '}
{providerStats.writeRate}{' '}
<span className="text-muted small">
{'msg/s'}
</span>{' '}
if (linkType === 'provider') {
return (
<li
key={providerId}
onClick={() =>
props.history.push(
`/serverConfiguration/providers/${providerId}`
)
}
>
<i
className={inputPulseIconClass}
style={{
color: providerStats.deltaCount
? '#039'
: 'lightblue',
}}
/>
<i
className={outputPulseIconClass}
style={{
transform: 'scaleX(-1)',
color: providerStats.writeCount
? '#039'
: 'lightblue',
}}
/>
<span className="title">
{providerIdLink(providerId)}
</span>
)}
{providerStats.deltaRate > 0 &&
providerStats.writeRate > 0 && (
{providerStats.writeRate > 0 && (
<span className="value">
<span className="text-muted small">{','}</span>
&#160;
{' '}
{providerStats.writeRate}{' '}
<span className="text-muted small">
{'msg/s'}
</span>{' '}
</span>
)}
{providerStats.deltaRate > 0 && (
<span className="value">
{' '}
{providerStats.deltaRate}{' '}
<span className="text-muted small">
(
{(
(providerStats.deltaRate / deltaRate) *
100
).toFixed(0)}
%)
</span>{' '}
<span className="text-muted small">
{'deltas/s'}
</span>{' '}
</span>
)}
<div className="bars">
<Progress
className="progress-xs"
color="warning"
value={
(providerStats.deltaRate / deltaRate) * 100
}
{providerStats.deltaRate > 0 &&
providerStats.writeRate > 0 && (
<span className="value">
<span className="text-muted small">{','}</span>
&#160;
</span>
)}
{providerStats.deltaRate > 0 && (
<span className="value">
{' '}
{providerStats.deltaRate}{' '}
<span className="text-muted small">
(
{(
(providerStats.deltaRate / deltaRate) *
100
).toFixed(0)}
%)
</span>{' '}
<span className="text-muted small">
{'deltas/s'}
</span>{' '}
</span>
)}
<div className="bars">
<Progress
className="progress-xs"
color="warning"
value={
(providerStats.deltaRate / deltaRate) * 100
}
/>
</div>
</li>
)
}
})}
</ul>
<br></br>
<div className="text-muted">Plugins activity</div>
<ul className="horizontal-bars type-2">
{Object.keys(providerStatistics || {}).sort().map((providerId) => {
const providerStats = providerStatistics[providerId]
let linkType = 'provider'
try {
linkType = providerStatus.find(
(item) => item.id === providerId
).statusType
} catch (error) {}
const inputPulseIconClass =
'icon-login' +
(providerStats.deltaRate > 50
? ' text-primary fa-pulse-fast'
: providerStats.deltaRate > 0
? ' text-primary fa-pulse'
: '')
const outputPulseIconClass =
'icon-logout' +
(providerStats.writeRate > 50
? ' text-primary fa-pulse-fast'
: providerStats.writeRate > 0
? ' text-primary fa-pulse'
: '')
if (linkType === 'plugin') {
return (
<li
key={providerId}
onClick={() =>
props.history.push(
`/serverConfiguration/providers/${providerId}`
)
}
>
<i
className={inputPulseIconClass}
style={{
color: providerStats.deltaCount
? '#039'
: 'lightblue',
}}
/>
</div>
</li>
)
<i
className={outputPulseIconClass}
style={{
transform: 'scaleX(-1)',
color: providerStats.writeCount
? '#039'
: 'lightblue',
}}
/>
<span className="title">
{pluginNameLink(providerId)}
</span>
{providerStats.writeRate > 0 && (
<span className="value">
{' '}
{providerStats.writeRate}{' '}
<span className="text-muted small">
{'msg/s'}
</span>{' '}
</span>
)}
{providerStats.deltaRate > 0 &&
providerStats.writeRate > 0 && (
<span className="value">
<span className="text-muted small">{','}</span>
&#160;
</span>
)}
{providerStats.deltaRate > 0 && (
<span className="value">
{' '}
{providerStats.deltaRate}{' '}
<span className="text-muted small">
(
{(
(providerStats.deltaRate / deltaRate) *
100
).toFixed(0)}
%)
</span>{' '}
<span className="text-muted small">
{'deltas/s'}
</span>{' '}
</span>
)}
<div className="bars">
<Progress
className="progress-xs"
color="warning"
value={
(providerStats.deltaRate / deltaRate) * 100
}
/>
</div>
</li>
)
}
})}
</ul>
</Col>
Expand Down

0 comments on commit 63d0101

Please sign in to comment.