bucketweb: display block labels on each source row

CHANGELOG.md

@@ -23,6 +23,7 @@ It is recommend to upgrade the storage components first (Receive, Store, etc.) a
 - [#8720](https://github.com/thanos-io/thanos/issues/8720): Receive: Fix 503 errors during restarts in some cases.
 - [#8799](https://github.com/thanos-io/thanos/pull/8799): *: Set a `KeepaliveEnforcementPolicy` with `MinTime: 10s` on all gRPC servers, matching the client keepalive interval.
 - [#8806](https://github.com/thanos-io/thanos/pull/8806): Receive: Validate tenant IDs extracted from split-tenant labels to prevent path traversal.
+- [#8810](https://github.com/thanos-io/thanos/pull/8810): Ruler: correctly pass query partial response for gRPC.
 
 ### Added
 
@@ -33,6 +34,7 @@ It is recommend to upgrade the storage components first (Receive, Store, etc.) a
 - [#8770](https://github.com/thanos-io/thanos/pull/8770): Receive: add `--remote-write.server-tls-curves` to configure curves for the HTTP server.
 - [#8808](https://github.com/thanos-io/thanos/pull/8808): ruler, sidecar: Add TSDB stats endpoint to gRPC server.
 - [#8594](https://github.com/thanos-io/thanos/pull/8594): Query: Support per endpoint TLS configuration.
+- [#8816](https://github.com/thanos-io/thanos/pull/8816): Bucket Web: Display block labels on each source row so users can identify sources without clicking into individual blocks.
 
 ### Changed
 

cmd/thanos/rule.go

@@ -1011,7 +1011,9 @@ func queryFuncCreator(
 			if grpcEndpointSet != nil {
 				queryAPIClients := grpcEndpointSet.GetQueryAPIClients()
 				for _, i := range rand.Perm(len(queryAPIClients)) {
-					e := query.NewRemoteEngine(logger, queryAPIClients[i], query.Opts{})
+					e := query.NewRemoteEngine(logger, queryAPIClients[i], query.Opts{
+						PartialResponse: partialResponseStrategy == storepb.PartialResponseStrategy_WARN,
+					})
 					expr, err := extpromql.ParseExpr(qs)
 					if err != nil {
 						level.Error(logger).Log("err", err, "query", qs)

pkg/ui/react-app/src/thanos/pages/blocks/SourceView.test.tsx

@@ -22,12 +22,14 @@ describe('Blocks SourceView', () => {
 
   const sourceView = mount(<SourceView {...defaultProps} />);
 
-  it('renders a paragraph with title and size', () => {
-    const title = sourceView.find('div > span');
-    expect(title).toHaveLength(2);
+  it('renders a paragraph with title, size, and labels', () => {
+    const spans = sourceView.find('div > span');
+    expect(spans.length).toBeGreaterThanOrEqual(2);
 
-    expect(title.find('span').at(0).text()).toEqual(source);
-    expect(title.find('span').at(1).text()).toEqual('3.50 GiB');
+    expect(spans.at(0).text()).toEqual(source);
+    expect(spans.at(1).text()).toEqual('3.50 GiB');
+    // Labels should be visible on each source row
+    expect(sourceView.text()).toContain('monitor');
   });
 
   it('renders a row for each unique resolution and compaction level pair', () => {

pkg/ui/react-app/src/thanos/pages/blocks/SourceView.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { Block, BlocksPool } from './block';
+import React, { FC, useMemo } from 'react';
+import { Block, BlocksPool, LabelSet } from './block';
 import { BlockSpan } from './BlockSpan';
 import styles from './blocks.module.css';
 import { getBlockByUlid, getBlocksByCompactionLevel, humanizeBytes, sumBlockSizeStats } from './helpers';
@@ -34,6 +34,18 @@ export interface SourceViewProps {
   compactionLevel: number;
 }
 
+const getLabelsFromPool = (data: BlocksPool): LabelSet => {
+  for (const key of Object.keys(data)) {
+    const rows = data[key];
+    for (const row of rows) {
+      if (row.length > 0) {
+        return row[0].thanos.labels;
+      }
+    }
+  }
+  return {};
+};
+
 export const SourceView: FC<SourceViewProps> = ({
   data,
   title,
@@ -44,12 +56,22 @@ export const SourceView: FC<SourceViewProps> = ({
   compactionLevel,
 }) => {
   const blockSizeStats = sumBlockSizeStats(data, compactionLevel);
+  const labels = useMemo(() => getLabelsFromPool(data), [data]);
   return (
     <>
       <div className={styles.source}>
         <div className={styles.title} title={title}>
           <span>{title}</span>
           <span title={blockSizeStats.totalBytes + ' Bytes'}>{humanizeBytes(blockSizeStats.totalBytes)}</span>
+          {Object.keys(labels).length > 0 && (
+            <span className={styles.sourceLabels}>
+              {Object.entries(labels).map(([key, value]) => (
+                <span key={key} className={styles.labelBadge}>
+                  {key}=&quot;{value}&quot;
+                </span>
+              ))}
+            </span>
+          )}
         </div>
         <div className={styles.rowsContainer}>
           {Object.keys(data).map((k) => (

pkg/ui/react-app/src/thanos/pages/blocks/blocks.module.css

@@ -191,6 +191,21 @@
   background: var(--level-6);
 }
 
+.sourceLabels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  width: 8vw;
+}
+
+.labelBadge {
+  font-size: 0.7em;
+  color: #aaa;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .blockInput {
   margin-bottom: 12px;
 }

pkg/ui/static/react/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.css": "./static/css/main.17d667f4.css",
-    "main.js": "./static/js/main.ed1f5447.js",
+    "main.css": "./static/css/main.e74f9137.css",
+    "main.js": "./static/js/main.6d6a0616.js",
     "static/media/codicon.ttf": "./static/media/codicon.b3726f0165bf67ac6849.ttf",
     "index.html": "./index.html",
     "static/media/index.cjs": "./static/media/index.cd351d7c31d0d3fccf96.cjs",
-    "main.17d667f4.css.map": "./static/css/main.17d667f4.css.map",
-    "main.ed1f5447.js.map": "./static/js/main.ed1f5447.js.map"
+    "main.e74f9137.css.map": "./static/css/main.e74f9137.css.map",
+    "main.6d6a0616.js.map": "./static/js/main.6d6a0616.js.map"
   },
   "entrypoints": [
-    "static/css/main.17d667f4.css",
-    "static/js/main.ed1f5447.js"
+    "static/css/main.e74f9137.css",
+    "static/js/main.6d6a0616.js"
   ]
 }

pkg/ui/static/react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}",THANOS_DISPLAY_TENANT_BOX="{{ .displayTenantBox }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.ed1f5447.js"></script><link href="./static/css/main.17d667f4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}",THANOS_DISPLAY_TENANT_BOX="{{ .displayTenantBox }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.6d6a0616.js"></script><link href="./static/css/main.e74f9137.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>