From 44298a3761cd4c3301b893e30d83bb2a1670bb7e Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 18 Mar 2021 15:54:56 +0000
Subject: [PATCH] Loki: Label browser UI updates (#31737) (#32119)

* UI updates for Label Browser

* Revert "UI updates for Label Browser"

This reverts commit 3d34112762c2a2f8028ddcdfdeee672a00d4a25a.

* UI updates for Label Browser

* Remove unused style

(cherry picked from commit dfd4eccc7caf57214091c0a1589948836ff70dbc)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
---
 .../datasource/loki/components/LokiLabel.tsx    |  4 +---
 .../loki/components/LokiLabelBrowser.tsx        | 17 +++++++----------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiLabel.tsx b/public/app/plugins/datasource/loki/components/LokiLabel.tsx
index bce2302a93c..8acb986d56a 100644
--- a/public/app/plugins/datasource/loki/components/LokiLabel.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiLabel.tsx
@@ -68,7 +68,7 @@ const getLabelStyles = (theme: GrafanaTheme) => ({
     cursor: pointer;
     font-size: ${theme.typography.size.sm};
     line-height: ${theme.typography.lineHeight.xs};
-    border: 1px solid ${theme.colors.border2};
+    background-color: ${theme.colors.bg3};
     vertical-align: baseline;
     color: ${theme.colors.text};
     white-space: nowrap;
@@ -77,8 +77,6 @@ const getLabelStyles = (theme: GrafanaTheme) => ({
     border-radius: ${theme.border.radius.md};
     margin-right: ${theme.spacing.sm};
     margin-bottom: ${theme.spacing.xs};
-    text-overflow: ellipsis;
-    overflow: hidden;
   `,
   loading: css`
     font-weight: ${theme.typography.weight.semibold};
diff --git a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
index 82471502333..f37e992bf65 100644
--- a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
@@ -92,6 +92,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   wrapper: css`
     background-color: ${theme.colors.bg2};
     padding: ${theme.spacing.md};
+    width: 100%;
   `,
   list: css`
     margin-top: ${theme.spacing.sm};
@@ -130,18 +131,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   error: css`
     color: ${theme.palette.brandDanger};
   `,
-  valueCell: css`
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
   valueList: css`
     margin-right: ${theme.spacing.sm};
   `,
   valueListWrapper: css`
-    padding: ${theme.spacing.sm};
-    & + & {
-      border-left: 1px solid ${theme.colors.border2};
-    }
+    border-left: 1px solid ${theme.colors.border2};
+    margin: ${theme.spacing.sm} 0;
+    padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm};
   `,
   valueListArea: css`
     display: flex;
@@ -418,7 +414,8 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
                     loading={label.loading}
                     active={label.selected}
                     hidden={label.hidden}
-                    facets={label.facets}
+                    //If no facets, we want to show number of all label values
+                    facets={label.facets || label.values?.length}
                     onClick={this.onClickLabel}
                   />
                 </div>
@@ -436,7 +433,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
                       return null;
                     }
                     return (
-                      <div style={style} className={styles.valueCell}>
+                      <div style={style}>
                         <LokiLabel
                           name={label.name}
                           value={value?.name}