create download button to download metadata in blocks

CHANGELOG.md

@@ -10,6 +10,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 We use *breaking :warning:* to mark changes that are not backward compatible (relates only to v0.y.z releases.)
 
 ## Unreleased
+- [#3259](https://github.com/thanos-io/thanos/pull/3259) Thanos BlockViewer: Added a button in the blockviewer that allows users to download the metadata of a block
 
 ### Fixed
 

pkg/ui/react-app/src/pages/graph/PanelList.tsx

@@ -41,8 +41,8 @@ export const PanelListContent: FC<PanelListProps> = ({
 
   useEffect(() => {
     // Convert stores data to a unified stores array.
-    let storeList: Store[] = [];
-    for (let type in stores) {
+    const storeList: Store[] = [];
+    for (const type in stores) {
       storeList.push(...stores[type]);
     }
     setStoreData(storeList);

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

@@ -16,7 +16,7 @@ describe('BlockDetails', () => {
       // do nothing
     },
   };
-
+  window.URL.createObjectURL = jest.fn();
   const blockDetails = mount(<BlockDetails {...defaultProps} />);
 
   it('renders a heading with block ulid', () => {
@@ -79,6 +79,13 @@ describe('BlockDetails', () => {
     expect(div.find('span').text()).toBe(sampleBlock.thanos.source);
   });
 
+  it('renders the download button', () => {
+    const div = blockDetails.find({ 'data-testid': 'download' });
+    window.URL.createObjectURL = jest.fn(() => 'details');
+    expect(div).toHaveLength(1);
+    expect(div.find('a').text()).toBe('download data');
+  });
+
   it('renders a list of the labels', () => {
     const div = blockDetails.find({ 'data-testid': 'labels' });
     const list = div.find('ul');

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

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { Block } from './block';
 import styles from './blocks.module.css';
 import moment from 'moment';
+import { download } from './helpers';
 
 export interface BlockDetailsProps {
   block: Block | undefined;
@@ -53,7 +54,7 @@ export const BlockDetails: FC<BlockDetailsProps> = ({ block, selectBlock }) => {
           </div>
           <hr />
           <div data-testid="labels">
-            <b>Labels:</b>
+            <b>Labs:</b>
             <ul>
               {Object.entries(block.thanos.labels).map(([key, value]) => (
                 <li key={key}>
@@ -63,6 +64,11 @@ export const BlockDetails: FC<BlockDetailsProps> = ({ block, selectBlock }) => {
               ))}
             </ul>
           </div>
+          <div data-testid="download">
+            <a className={styles.downloadBtn} href={download(block)} download="meta.json">
+              download data
+            </a>
+          </div>
         </>
       )}
     </div>

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

@@ -139,6 +139,22 @@
   box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.3) inset;
 }
 
+.downloadBtn {
+  font: bold 14px;
+  text-decoration: none;
+  background-color: #EEEEEE;
+  color: #000;
+  padding: 2px 6px 2px 6px;
+  border-top: 1px solid #CCCCCC;
+  border-right: 1px solid #333333;
+  border-bottom: 1px solid #333333;
+  border-left: 1px solid #CCCCCC;
+}
+
+.downloadBtn:hover, .downloadBtn:visited {
+  color: #000;
+  text-decoration: none;
+}
 /*
 * block colors
 * https://coolors.co/9b5de5-f15bb5-fee440-00bbf9-00f5d4

pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts

@@ -54,3 +54,9 @@ export const sortBlocks = (blocks: Block[], label: string): { [source: string]:
   });
   return sortedPool;
 };
+
+export const download = (blob: Block): string => {
+  const url = window.URL.createObjectURL(new Blob([JSON.stringify(blob)], { type: 'application/json' }));
+
+  return url;
+};