From a9fa1d5e39458603e024e8133e79daa7810c5971 Mon Sep 17 00:00:00 2001
From: Mark Anthony Cianfrani <markacianf@gmail.com>
Date: Fri, 28 May 2021 10:14:55 -0400
Subject: [PATCH 1/3] fix: missing progress svg

---
 .../rux-monitoring-progress-icon.js           | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js b/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
index 7c804f5d..dc15c048 100644
--- a/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
+++ b/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
@@ -84,7 +84,12 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {
 
   get iconTemplate() {
     return html`
-      <rux-icon icon="progress" class="rux-status--${this.status}"></rux-icon>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" style="" class="rux-status--${this.status}">
+      <g id="progress">
+        <circle cx="60" cy="60" r="56" fill="transparent" stroke="rgba(40, 63, 88, 1)" stroke-width="10" transform="rotate(-90 61 60)"/>
+        <circle cx="60" cy="60" r="56" fill="transparent" stroke-dasharray="351.8583772 351.8583772" stroke-dashoffset="var(--monitoring-progress, 1)" stroke-linecap="round" stroke-width="10" class="progress-ring__circle" transform="rotate(-90 61 60)"/>
+      </g>
+    </svg>
       <div class="rux-advanced-status__progress">
         ${Math.ceil((this.progress / this.max) * 100)}%
       </div>
@@ -95,6 +100,41 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {
     return [
       super.styles,
       css`
+        svg {
+          margin: 0 auto;
+          width: 3rem;
+          height: rem;
+        }
+        svg.rux-status--off {
+          stroke: var(--colorOff, rgb(158, 167, 173));
+          fill: var(--colorOff, rgb(158, 167, 173));
+        }
+
+        svg.rux-status--standby {
+          stroke: var(--colorStandby, rgb(45, 204, 255));
+          fill: var(--colorStandby, rgb(45, 204, 255));
+        }
+
+        svg.rux-status--normal {
+          stroke: var(--colorNormal, rgb(86, 240, 0));
+          fill: var(--colorNormal, rgb(86, 240, 0));
+        }
+
+        svg.rux-status--caution {
+          stroke: var(--colorCaution, rgb(252, 232, 58));
+          fill: var(--colorCaution, rgb(252, 232, 58));
+        }
+
+        svg.rux-status--serious {
+          stroke: var(--colorSerious, rgb(255, 179, 0));
+          fill: var(--colorSerious, rgb(255, 179, 0));
+        }
+
+        svg.rux-status--critical {
+          stroke: var(--colorCritical, rgb(255, 56, 56));
+          fill: var(--colorCritical, rgb(255, 56, 56));
+        }
+
         [data-progress] rux-icon {
           transition: stroke-dashoffset 0.367s, stroke 0.367s;
           transform-origin: 50% 50%;

From 17d796a78b8422e11bf91599fae4b3f0323df0af Mon Sep 17 00:00:00 2001
From: Mark Anthony Cianfrani <markacianf@gmail.com>
Date: Fri, 28 May 2021 10:25:06 -0400
Subject: [PATCH 2/3] fix: bug when threshold is set to 100

---
 .../rux-monitoring-icon/rux-monitoring-progress-icon.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js b/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
index dc15c048..b4c42b80 100644
--- a/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
+++ b/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
@@ -57,7 +57,7 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {
             status: 'serious',
           },
           {
-            threshold: 100,
+            threshold: 101,
             status: 'critical',
           },
         ];

From fb092e07ced82f7fa22a032f1b11aa3267e9016e Mon Sep 17 00:00:00 2001
From: Mark Anthony Cianfrani <markacianf@gmail.com>
Date: Fri, 28 May 2021 11:09:04 -0400
Subject: [PATCH 3/3] Update rux-monitoring-progress-icon.js

fix typo
---
 .../rux-monitoring-icon/rux-monitoring-progress-icon.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js b/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
index b4c42b80..1f4fe1c7 100644
--- a/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
+++ b/src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
@@ -103,7 +103,7 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {
         svg {
           margin: 0 auto;
           width: 3rem;
-          height: rem;
+          height: 3rem;
         }
         svg.rux-status--off {
           stroke: var(--colorOff, rgb(158, 167, 173));