create download button to download metadata in blocks (thanos-io#3259)

* create download button for download metadata file in blocks Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * add URL.createObjectURl to global jest config Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * adding changelog for this PR Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * adding changelog for this PR Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * fixing react linting issue Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * fix file not downloading but probable broke the linter Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * updated the changelog content and made it more descriptive Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * fix the issue with the jest not recognizing url createObject Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * modify code corrected typo and used reactstrap Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * fix linting issue Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * update page based on review given Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com> * add full stop at the end of changelog sentence Signed-off-by: Oghenebrume50 <raphlbrume@gmail.com>
OGKevin · Oct 15, 2020 · 29b4d72 · 29b4d72
1 parent 232e95e
commit 29b4d72
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/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);

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.test.tsx b/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 meta.json');
+  });
+
   it('renders a list of the labels', () => {
     const div = blockDetails.find({ 'data-testid': 'labels' });
     const list = div.find('ul');

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/BlockDetails.tsx
@@ -2,6 +2,8 @@ import React, { FC } from 'react';
 import { Block } from './block';
 import styles from './blocks.module.css';
 import moment from 'moment';
+import { Button } from 'reactstrap';
+import { download } from './helpers';
 
 export interface BlockDetailsProps {
   block: Block | undefined;
@@ -63,6 +65,12 @@ export const BlockDetails: FC<BlockDetailsProps> = ({ block, selectBlock }) => {
               ))}
             </ul>
           </div>
+          <hr />
+          <div data-testid="download">
+            <a href={download(block)} download="meta.json">
+              <Button>Download meta.json</Button>
+            </a>
+          </div>
         </>
       )}
     </div>

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts b/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, null, 2)], { type: 'application/json' }));
+
+  return url;
+};