Added stats for Blocks thanos-io#3112

.bingo/go.mod

@@ -1 +1,3 @@
-module _ // Fake go.mod auto-created by 'bingo' for go -moddir compatibility with non-Go projects. Commit this file, together with other .mod files.
+module _ // Fake go.mod auto-created by 'bingo' for go -moddir compatibility with non-Go projects. Commit this file, together with other .mod files.
+
+go 1.15

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

@@ -22,9 +22,18 @@ export interface BlockListProps {
 export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
   const [selectedBlock, selectBlock] = useState<Block>();
 
-  const { blocks, label, err } = data;
+  const { blocks, label, err, refreshedAt } = data;
 
   const blockPools = useMemo(() => sortBlocks(blocks, label), [blocks, label]);
+
+  const blockCount: { [key: string]: number } = {};
+
+  Object.keys(blockPools).forEach(key => {
+    Object.values(blockPools[key]).forEach(list => {
+      blockCount[key] = blockCount[key] ? blockCount[key] + list.length : list.length;
+    });
+  });
+
   const [gridMinTime, gridMaxTime] = useMemo(() => {
     if (!err && blocks.length > 0) {
       let gridMinTime = blocks[0].minTime;
@@ -55,38 +64,47 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
   };
 
   if (err) return <UncontrolledAlert color="danger">{err.toString()}</UncontrolledAlert>;
-
+  const date = new Date(refreshedAt).toLocaleString().split(',');
   return (
-    <>
+    <div>
       {blocks.length > 0 ? (
-        <div className={styles.container}>
-          <div className={styles.grid}>
-            <div className={styles.sources}>
-              {Object.keys(blockPools).map(pk => (
-                <SourceView
-                  key={pk}
-                  data={blockPools[pk]}
-                  title={pk}
-                  selectBlock={selectBlock}
-                  gridMinTime={viewMinTime}
-                  gridMaxTime={viewMaxTime}
-                />
-              ))}
+        <div>
+          <div className={styles.blockStats}>
+            <span>
+              Last Refresh on {date[0]} at {date[1]}
+            </span>
+            <span>Total Blocks: {blocks.length}</span>
+          </div>
+          <div className={styles.container}>
+            <div className={styles.grid}>
+              <div className={styles.sources}>
+                {Object.keys(blockPools).map(pk => (
+                  <SourceView
+                    key={pk}
+                    data={blockPools[pk]}
+                    title={pk}
+                    selectBlock={selectBlock}
+                    gridMinTime={viewMinTime}
+                    gridMaxTime={viewMaxTime}
+                    blockCount={blockCount}
+                  />
+                ))}
+              </div>
+              <TimeRange
+                gridMinTime={gridMinTime}
+                gridMaxTime={gridMaxTime}
+                viewMinTime={viewMinTime}
+                viewMaxTime={viewMaxTime}
+                onChange={setViewTime}
+              />
             </div>
-            <TimeRange
-              gridMinTime={gridMinTime}
-              gridMaxTime={gridMaxTime}
-              viewMinTime={viewMinTime}
-              viewMaxTime={viewMaxTime}
-              onChange={setViewTime}
-            />
+            <BlockDetails selectBlock={selectBlock} block={selectedBlock} />
           </div>
-          <BlockDetails selectBlock={selectBlock} block={selectedBlock} />
         </div>
       ) : (
         <UncontrolledAlert color="warning">No blocks found.</UncontrolledAlert>
       )}
-    </>
+    </div>
   );
 };
 

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

@@ -16,12 +16,13 @@ describe('Blocks SourceView', () => {
     },
     gridMinTime: 1596096000000,
     gridMaxTime: 1595108031471,
+    blockCount: {},
   };
 
   const sourceView = mount(<SourceView {...defaultProps} />);
 
   it('renders a paragraph with title', () => {
-    const title = sourceView.find('div > span');
+    const title = sourceView.find('div > span').first();
     expect(title).toHaveLength(1);
     expect(title.text()).toEqual(source);
   });

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

@@ -24,14 +24,16 @@ export interface SourceViewProps {
   gridMinTime: number;
   gridMaxTime: number;
   selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>;
+  blockCount: { [key: string]: number };
 }
 
-export const SourceView: FC<SourceViewProps> = ({ data, title, gridMaxTime, gridMinTime, selectBlock }) => {
+export const SourceView: FC<SourceViewProps> = ({ data, title, gridMaxTime, gridMinTime, selectBlock, blockCount }) => {
   return (
     <>
       <div className={styles.source}>
         <div className={styles.title} title={title}>
           <span>{title}</span>
+          <span>Blocks Count: {blockCount[title]}</span>
         </div>
         <div className={styles.rowsContainer}>
           {Object.keys(data).map(k => (

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

@@ -2,6 +2,8 @@
   display: flex;
   --top: 72px;
   min-height: calc(100vh - var(--top));
+  column-count: 20;
+  column-width: 1px;
 }
 
 .grid {
@@ -42,6 +44,18 @@
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
 
+.blockStats > span{
+  justify-content: space-evenly;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  font-weight: 700;
+  font-size: 1.1em;
+  border: 1px solid;
+  padding: 10px;
+  margin: 20px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
 .detailsTop {
   width: 100%;
   display: flex;
@@ -101,6 +115,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   box-sizing: border-box;
+  border: 1px solid;
 }
 
 .rowsContainer {
@@ -128,7 +143,6 @@
   min-width: 0.5%;
   padding: 0;
   margin: 0;
-  min-width: 0;
   box-sizing: border-box;
   mix-blend-mode: multiply;
 }