Loki: Label browser UI updates (#31737)

* UI updates for Label Browser

* Revert "UI updates for Label Browser"

This reverts commit 3d34112762.

* UI updates for Label Browser

* Remove unused style

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};

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}