UI updates for Label Browser

go.mod

@@ -14,6 +14,7 @@ require (
 	cloud.google.com/go/storage v1.13.0
 	github.com/BurntSushi/toml v0.3.1
 	github.com/VividCortex/mysqlerr v0.0.0-20170204212430-6c6b55f8796f
+	github.com/afiskon/promtail-client v0.0.0-20190305142237-506f3f921e9c // indirect
 	github.com/aws/aws-sdk-go v1.37.20
 	github.com/beevik/etree v1.1.0
 	github.com/benbjohnson/clock v0.0.0-20161215174838-7dc76406b6d3

go.sum

@@ -129,6 +129,8 @@ github.com/VividCortex/gohistogram v1.0.0/go.mod h1:Pf5mBqqDxYaXu3hDrrU+w6nw50o/
 github.com/VividCortex/mysqlerr v0.0.0-20170204212430-6c6b55f8796f h1:HR5nRmUQgXrwqZOwZ2DAc/aCi3Bu3xENpspW935vxu0=
 github.com/VividCortex/mysqlerr v0.0.0-20170204212430-6c6b55f8796f/go.mod h1:f3HiCrHjHBdcm6E83vGaXh1KomZMA2P6aeo3hKx/wg0=
 github.com/afex/hystrix-go v0.0.0-20180502004556-fa1af6a1f4f5/go.mod h1:SkGFH1ia65gfNATL8TAiHDNxPzPdmEL5uirI2Uyuz6c=
+github.com/afiskon/promtail-client v0.0.0-20190305142237-506f3f921e9c h1:AMDVOKGaiqse4qiRXSzRgpC9DCNTHCx6zpzdtXXrKM4=
+github.com/afiskon/promtail-client v0.0.0-20190305142237-506f3f921e9c/go.mod h1:p/7Wos+jcfrnwLqqzJMZ0s323kfVtJPW+HUvAANklVQ=
 github.com/agnivade/levenshtein v1.0.1/go.mod h1:CURSv5d9Uaml+FovSIICkLbAUZ9S4RqaHDIsdSBg7lM=
 github.com/ajg/form v1.5.1/go.mod h1:uL1WgH+h2mgNtvBq0339dVnzXdBETtL2LeUXaIv25UY=
 github.com/ajstarks/svgo v0.0.0-20180226025133-644b8db467af/go.mod h1:K08gAheRH3/J6wwsYMMT4xOr94bZjxIelGM0+d/wbFw=

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,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   error: css`
     color: ${theme.palette.brandDanger};
   `,
-  valueCell: css`
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
+  valueCell: css``,
   valueList: css`
     margin-right: ${theme.spacing.sm};
   `,
   valueListWrapper: css`
-    padding: ${theme.spacing.sm};
-    & + & {
     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 +415,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>

script.go

@@ -0,0 +1,55 @@
+package main
+
+import (
+	"fmt"
+	"math/rand"
+	"os"
+	"os/signal"
+	"syscall"
+	"time"
+
+	"github.com/afiskon/promtail-client/promtail"
+)
+func main() {
+   message := []string{
+      "level=debug msg=\"[resolver] \\nreceived AAAA record \"::1\"",
+      "Line with ANSI \u001B[31mlorem \\n ipsum\u001B[0m et dolor",
+      "Line with newline before \n after",
+      "level=debug msg=\"[resolver] received AAAA record \"::1\" traceID=3b8496f91e044c34",
+      "level=debug msg=\"[resolver] received AAAA record \"::1\" for \"localhost.\" from udp:192.168.65.1\"",
+   }
+   quitChan := make(chan os.Signal, 1)
+   signal.Notify(quitChan, syscall.SIGINT, syscall.SIGUSR1, syscall.SIGUSR2)
+   clients := []promtail.Client{
+      getClient("test_application"),
+      getClient("test_application2"),
+   }
+   for {
+      select {
+      case <-quitChan:
+         os.Exit(1)
+      case <-time.After(1000 * time.Millisecond):
+         n := rand.Intn(2)
+         clients[n].Infof("n=\"%v\", message=\"%s\"", n, message[rand.Intn(len(message) - 1)])
+         //clients[0].Infof("message=\"%s\"", message[rand.Intn(len(message) - 1)])
+         //clients[1].Infof("message=\"%s\"", message[rand.Intn(len(message) - 1)])
+      }
+   }
+}
+func getClient(source string) promtail.Client {
+   labels := fmt.Sprintf(`{source="%s", job="log", job_name="run_log"}`, source)
+   conf := promtail.ClientConfig{
+      PushURL:            "http://localhost:3100/api/prom/push",
+      Labels:             labels,
+      BatchWait:          1 * time.Second,
+      BatchEntriesNumber: 1000,
+      SendLevel:          promtail.INFO,
+      PrintLevel:         promtail.INFO,
+   }
+   loki, err := promtail.NewClientJson(conf)
+   if err != nil {
+      fmt.Println(err)
+      os.Exit(1)
+   }
+   return loki
+}