From 63d010182e88ba266305bec49c08f35ed08aa82d Mon Sep 17 00:00:00 2001
From: KEGustafsson <ke.gustafsson@gmail.com>
Date: Sat, 3 Feb 2024 21:06:23 +0200
Subject: [PATCH] fix: separate and sort Connections and Plugins lists on UI

---
 .../src/views/Dashboard/Dashboard.js          | 246 +++++++++++++-----
 1 file changed, 174 insertions(+), 72 deletions(-)

diff --git a/packages/server-admin-ui/src/views/Dashboard/Dashboard.js b/packages/server-admin-ui/src/views/Dashboard/Dashboard.js
index 345a4cd76..f1d6adb8d 100644
--- a/packages/server-admin-ui/src/views/Dashboard/Dashboard.js
+++ b/packages/server-admin-ui/src/views/Dashboard/Dashboard.js
@@ -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 {
@@ -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>