Merge pull request #819 from prymitive/label-offset

feat(ui): add an offset to overview modal labels

ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<MountedLabelWithPercent /> matches snapshot 1`] = `
+exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
 "
 <div class
      style=\\"display: inline-block; max-width: 100%;\\"
@@ -32,3 +32,44 @@ exports[`<MountedLabelWithPercent /> matches snapshot 1`] = `
 </div>
 "
 `;
+
+exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
+"
+<div class
+     style=\\"display: inline-block; max-width: 100%;\\"
+     data-tooltipped
+     aria-describedby=\\"tippy-tooltip-2\\"
+     data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
+>
+  <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
+    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+      25
+    </span>
+    <span class=\\"components-label-name\\">
+      foo:
+    </span>
+    <span class=\\"components-label-value\\">
+      bar
+    </span>
+  </span>
+  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+    <div class=\\"progress-bar bg-transparent\\"
+         role=\\"progressbar\\"
+         style=\\"width: 25%;\\"
+         aria-valuenow=\\"25\\"
+         aria-valuemin=\\"0\\"
+         aria-valuemax=\\"100\\"
+    >
+    </div>
+    <div class=\\"progress-bar bg-warning\\"
+         role=\\"progressbar\\"
+         style=\\"width: 50%;\\"
+         aria-valuenow=\\"50\\"
+         aria-valuemin=\\"0\\"
+         aria-valuemax=\\"100\\"
+    >
+    </div>
+  </div>
+</div>
+"
+`;

ui/src/Components/Labels/LabelWithPercent/index.js

@@ -17,11 +17,12 @@ const LabelWithPercent = inject("alertStore")(
         name: PropTypes.string.isRequired,
         value: PropTypes.string.isRequired,
         hits: PropTypes.number.isRequired,
-        percent: PropTypes.number.isRequired
+        percent: PropTypes.number.isRequired,
+        offset: PropTypes.number.isRequired
       };
 
       render() {
-        const { name, value, hits, percent } = this.props;
+        const { name, value, hits, percent, offset } = this.props;
 
         let cs = this.getClassAndStyle(
           name,
@@ -50,6 +51,16 @@ const LabelWithPercent = inject("alertStore")(
               <span className="components-label-value">{value}</span>
             </span>
             <div className="progress components-labelWithPercent-progress mr-1">
+              {offset === 0 ? null : (
+                <div
+                  className="progress-bar bg-transparent"
+                  role="progressbar"
+                  style={{ width: offset + "%" }}
+                  aria-valuenow={offset}
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                />
+              )}
               <div
                 className={`progress-bar ${progressBarBg}`}
                 role="progressbar"

ui/src/Components/Labels/LabelWithPercent/index.test.js

@@ -14,34 +14,32 @@ beforeEach(() => {
   alertStore = new AlertStore([]);
 });
 
-const MountedLabelWithPercent = (name, value) => {
+const MountedLabelWithPercent = (name, value, hits, percent, offset) => {
   return mount(
     <LabelWithPercent
       alertStore={alertStore}
       name={name}
       value={value}
-      hits={25}
-      percent={50}
+      hits={hits}
+      percent={percent}
+      offset={offset}
     />
-  ).find(".components-label");
+  );
 };
 
 const RenderAndClick = (name, value, clickOptions) => {
-  const tree = MountedLabelWithPercent(name, value);
+  const tree = MountedLabelWithPercent(name, value, 25, 50, 0);
   tree.find(".components-label").simulate("click", clickOptions || {});
 };
 
-describe("<MountedLabelWithPercent />", () => {
-  it("matches snapshot", () => {
-    const tree = mount(
-      <LabelWithPercent
-        alertStore={alertStore}
-        name="foo"
-        value="bar"
-        hits={25}
-        percent={50}
-      />
-    );
+describe("<LabelWithPercent />", () => {
+  it("matches snapshot with offset=0", () => {
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 0);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("matches snapshot with offset=25", () => {
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 25);
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
@@ -62,41 +60,17 @@ describe("<MountedLabelWithPercent />", () => {
   });
 
   it("uses bg-danger when percent is >66", () => {
-    const tree = mount(
-      <LabelWithPercent
-        alertStore={alertStore}
-        name={"foo"}
-        value={"bar"}
-        hits={25}
-        percent={67}
-      />
-    );
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 67, 0);
     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}
-      />
-    );
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 66, 0);
     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}
-      />
-    );
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 33, 0);
     expect(tree.html()).toMatch(/progress-bar bg-success/);
   });
 });

ui/src/Components/OverviewModal/OverviewModalContent.js

@@ -23,13 +23,17 @@ const LabelsTable = observer(({ alertStore }) => (
             </span>
           </td>
           <td width="75%" className="mw-100 p-1">
-            {nameStats.values.slice(0, 9).map(valueStats => (
+            {nameStats.values.slice(0, 9).map((valueStats, i, array) => (
               <LabelWithPercent
                 key={valueStats.value}
                 name={nameStats.name}
                 value={valueStats.value}
                 hits={valueStats.hits}
                 percent={valueStats.percent}
+                offset={array
+                  .slice(0, i)
+                  .map(ns => ns.percent)
+                  .reduce((a, b) => a + b, 0)}
               />
             ))}
           </td>

ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap

@@ -80,6 +80,14 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+                <div class=\\"progress-bar bg-transparent\\"
+                     role=\\"progressbar\\"
+                     style=\\"width: 50%;\\"
+                     aria-valuenow=\\"50\\"
+                     aria-valuemin=\\"0\\"
+                     aria-valuemax=\\"100\\"
+                >
+                </div>
                 <div class=\\"progress-bar bg-success\\"
                      role=\\"progressbar\\"
                      style=\\"width: 25%;\\"
@@ -108,6 +116,14 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+                <div class=\\"progress-bar bg-transparent\\"
+                     role=\\"progressbar\\"
+                     style=\\"width: 75%;\\"
+                     aria-valuenow=\\"75\\"
+                     aria-valuemin=\\"0\\"
+                     aria-valuemax=\\"100\\"
+                >
+                </div>
                 <div class=\\"progress-bar bg-success\\"
                      role=\\"progressbar\\"
                      style=\\"width: 25%;\\"