Merge pull request #815 from prymitive/fix-warning

fix(ui): fix warning progress bar in overview modal
prymitive · Jul 11, 2019 · f990ed7 · f990ed7
2 parents bc01955 + 7d7d6d5
commit f990ed7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
@@ -20,7 +20,7 @@ exports[`<MountedLabelWithPercent /> matches snapshot 1`] = `
     </span>
   </span>
   <div class=\\"progress silence-progress bg-white pr-1\\">
-    <div class=\\"progress-bar bg-success\\"
+    <div class=\\"progress-bar bg-warning\\"
          role=\\"progressbar\\"
          style=\\"width: 50%;\\"
          aria-valuenow=\\"50\\"

diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js
@@ -32,7 +32,7 @@ const LabelWithPercent = inject("alertStore")(
         const progressBarBg =
           percent > 66
             ? "bg-danger"
-            : percent > 66
+            : percent > 33
             ? "bg-warning"
             : "bg-success";
 

diff --git a/ui/src/Components/Labels/LabelWithPercent/index.test.js b/ui/src/Components/Labels/LabelWithPercent/index.test.js
@@ -60,4 +60,43 @@ describe("<MountedLabelWithPercent />", () => {
       NewUnappliedFilter("foo!=bar")
     );
   });
+
+  it("uses bg-danger when percent is >66", () => {
+    const tree = mount(
+      <LabelWithPercent
+        alertStore={alertStore}
+        name={"foo"}
+        value={"bar"}
+        hits={25}
+        percent={67}
+      />
+    );
+    expect(tree.html()).toMatch(/progress-bar bg-danger/);
+  });
+
+  it("uses bg-warning when percent is >33", () => {
+    const tree = mount(
+      <LabelWithPercent
+        alertStore={alertStore}
+        name={"foo"}
+        value={"bar"}
+        hits={25}
+        percent={66}
+      />
+    );
+    expect(tree.html()).toMatch(/progress-bar bg-warning/);
+  });
+
+  it("uses bg-success when percent is <=33", () => {
+    const tree = mount(
+      <LabelWithPercent
+        alertStore={alertStore}
+        name={"foo"}
+        value={"bar"}
+        hits={25}
+        percent={33}
+      />
+    );
+    expect(tree.html()).toMatch(/progress-bar bg-success/);
+  });
 });
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
@@ -52,7 +52,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress silence-progress bg-white pr-1\\">
-                <div class=\\"progress-bar bg-success\\"
+                <div class=\\"progress-bar bg-warning\\"
                      role=\\"progressbar\\"
                      style=\\"width: 50%;\\"
                      aria-valuenow=\\"50\\"