fix(ui): use label class for silence matchers to prevent overflow

prymitive · May 6, 2019 · 0f521c7 · 0f521c7
1 parent 52e3a76
commit 0f521c7
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 42 deletions.
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
@@ -250,7 +250,7 @@ const DeleteSilence = observer(
       return (
         <React.Fragment>
           <span
-            className={`badge badge-danger px-1 cursor-pointer components-label-with-hover`}
+            className={`badge badge-danger cursor-pointer components-label components-label-with-hover`}
             onClick={this.toggle.toggle}
           >
             <FontAwesomeIcon className="mr-1" icon={faTrash} />

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap
@@ -160,7 +160,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
       </a>
     </div>
     <div>
-      <span class=\\"badge px-1 mr-1\\">
+      <span class=\\"badge px-1 mr-1 components-label\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -180,7 +180,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
           5 hours ago
         </time>
       </span>
-      <span class=\\"badge  px-1 mr-1\\">
+      <span class=\\"badge  px-1 mr-1 components-label\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -200,7 +200,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
           in 5 hours
         </time>
       </span>
-      <span class=\\"badge badge-secondary px-1 cursor-pointer components-label-with-hover mr-1\\">
+      <span class=\\"badge badge-secondary cursor-pointer components-label components-label-with-hover mr-1\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -217,7 +217,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
         </svg>
         Edit
       </span>
-      <span class=\\"badge badge-danger px-1 cursor-pointer components-label-with-hover\\">
+      <span class=\\"badge badge-danger cursor-pointer components-label components-label-with-hover\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -235,30 +235,36 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
         Delete
       </span>
     </div>
-    <div>
-      <span class=\\"badge px-1 mr-1\\">
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"filter\\"
-             class=\\"svg-inline--fa fa-filter fa-w-16 text-muted mr-1\\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 512 512\\"
-        >
-          <path fill=\\"currentColor\\"
-                d=\\"M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z\\"
+    <div class=\\"d-flex flex-row\\">
+      <div class=\\"flex-shrink-0 flex-grow-0\\">
+        <span class=\\"badge px-1 mr-1 components-label\\">
+          <svg aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               data-prefix=\\"fas\\"
+               data-icon=\\"filter\\"
+               class=\\"svg-inline--fa fa-filter fa-w-16 text-muted mr-1\\"
+               role=\\"img\\"
+               xmlns=\\"http://www.w3.org/2000/svg\\"
+               viewbox=\\"0 0 512 512\\"
           >
-          </path>
-        </svg>
-        Matchers:
-      </span>
-      <span class=\\"badge badge-light px-1 mr-1\\">
-        alertname=MockAlert
-      </span>
-      <span class=\\"badge badge-light px-1 mr-1\\">
-        instance=~foo[0-9]+
-      </span>
+            <path fill=\\"currentColor\\"
+                  d=\\"M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z\\"
+            >
+            </path>
+          </svg>
+          Matchers:
+        </span>
+      </div>
+      <div class=\\"flex-shrink-1 flex-grow-1\\"
+           style=\\"min-width: 0px;\\"
+      >
+        <span class=\\"badge badge-light px-1 mr-1 components-label\\">
+          alertname=MockAlert
+        </span>
+        <span class=\\"badge badge-light px-1 mr-1 components-label\\">
+          instance=~foo[0-9]+
+        </span>
+      </div>
     </div>
   </div>
 </div>

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js
@@ -126,16 +126,16 @@ const SilenceDetails = ({
         />
       </div>
       <div>
-        <span className="badge px-1 mr-1">
+        <span className="badge px-1 mr-1 components-label">
           <FontAwesomeIcon className="text-muted mr-1" icon={faCalendarCheck} />
           Started <Moment fromNow>{silence.startsAt}</Moment>
         </span>
-        <span className={`badge ${expiresClass} px-1 mr-1`}>
+        <span className={`badge ${expiresClass} px-1 mr-1 components-label`}>
           <FontAwesomeIcon className="text-muted mr-1" icon={faCalendarTimes} />
           {expiresLabel} <Moment fromNow>{silence.endsAt}</Moment>
         </span>
         <span
-          className="badge badge-secondary px-1 cursor-pointer components-label-with-hover mr-1"
+          className="badge badge-secondary cursor-pointer components-label components-label-with-hover mr-1"
           onClick={onEditSilence}
         >
           <FontAwesomeIcon className="mr-1" icon={faEdit} />
@@ -147,18 +147,25 @@ const SilenceDetails = ({
           silenceID={silence.id}
         />
       </div>
-      <div>
-        <span className="badge px-1 mr-1">
-          <FontAwesomeIcon className="text-muted mr-1" icon={faFilter} />
-          Matchers:
-        </span>
-        {silence.matchers.map(matcher => (
-          <span key={hash(matcher)} className="badge badge-light px-1 mr-1">
-            {matcher.name}
-            {matcher.isRegex ? QueryOperators.Regex : QueryOperators.Equal}
-            {matcher.value}
+      <div className="d-flex flex-row">
+        <div className="flex-shrink-0 flex-grow-0">
+          <span className="badge px-1 mr-1 components-label">
+            <FontAwesomeIcon className="text-muted mr-1" icon={faFilter} />
+            Matchers:
           </span>
-        ))}
+        </div>
+        <div className="flex-shrink-1 flex-grow-1" style={{ minWidth: "0px" }}>
+          {silence.matchers.map(matcher => (
+            <span
+              key={hash(matcher)}
+              className="badge badge-light px-1 mr-1 components-label"
+            >
+              {matcher.name}
+              {matcher.isRegex ? QueryOperators.Regex : QueryOperators.Equal}
+              {matcher.value}
+            </span>
+          ))}
+        </div>
       </div>
     </div>
   );