From 748cb79548db0c8afd7108f81709f3b35ac0e888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 2 Apr 2020 10:20:01 +0100
Subject: [PATCH] fix(ui): tweak the UI for grid swimlanes

---
 ui/src/Components/Grid/AlertGrid/Grid.js | 52 +++++++++++++-----------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js
index a64c06b6b..4b288e347 100644
--- a/ui/src/Components/Grid/AlertGrid/Grid.js
+++ b/ui/src/Components/Grid/AlertGrid/Grid.js
@@ -9,6 +9,7 @@ import debounce from "lodash/debounce";
 import MasonryInfiniteScroller from "react-masonry-infinite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTh } from "@fortawesome/free-solid-svg-icons/faTh";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faAngleDoubleDown } from "@fortawesome/free-solid-svg-icons/faAngleDoubleDown";
@@ -162,7 +163,23 @@ const Grid = observer(
         <React.Fragment>
           {grid.labelName !== "" && (
             <h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 mt-2 mb-0 border border-dark">
-              <span className="flex-shrink-0 flex-grow-0 ml-0 mr-2">
+              <span
+                className="flex-shrink-1 flex-grow-1"
+                style={{ minWidth: "0px" }}
+              >
+                <span className="badge components-label px-0 ml-0 mr-3">
+                  <FontAwesomeIcon icon={faTh} className="text-muted" />
+                </span>
+                {grid.labelName !== "" && grid.labelValue !== "" && (
+                  <FilteringLabel
+                    key={grid.labelValue}
+                    name={grid.labelName}
+                    value={grid.labelValue}
+                    alertStore={alertStore}
+                  />
+                )}
+              </span>
+              <span className="flex-shrink-0 flex-grow-0 ml-2 mr-0">
                 <FilteringCounterBadge
                   name="@state"
                   value="unprocessed"
@@ -184,29 +201,16 @@ const Grid = observer(
                   themed={true}
                   alertStore={alertStore}
                 />
-              </span>
-              <span
-                className="flex-shrink-1 flex-grow-1 text-center"
-                style={{ minWidth: "0px" }}
-              >
-                {grid.labelName !== "" && grid.labelValue !== "" && (
-                  <FilteringLabel
-                    key={grid.labelValue}
-                    name={grid.labelName}
-                    value={grid.labelValue}
-                    alertStore={alertStore}
-                  />
-                )}
-              </span>
-              <span
-                className="flex-shrink-0 flex-grow-0 text-muted cursor-pointer badge px-0 components-label ml-2 mr-0"
-                onClick={this.onCollapseClick}
-              >
-                <TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">
-                  <FontAwesomeIcon
-                    icon={this.gridToggle.show ? faChevronDown : faChevronUp}
-                  />
-                </TooltipWrapper>
+                <span
+                  className="text-muted cursor-pointer badge px-0 components-label ml-2 mr-0"
+                  onClick={this.onCollapseClick}
+                >
+                  <TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">
+                    <FontAwesomeIcon
+                      icon={this.gridToggle.show ? faChevronDown : faChevronUp}
+                    />
+                  </TooltipWrapper>
+                </span>
               </span>
             </h5>
           )}