adding null check to fix overlapping blocks

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

@@ -1,3 +1,5 @@
+import { debug } from 'console';
+import { BlocksPool, Block } from './block';
 import { sortBlocks, isOverlapping, getFilteredBlockPools } from './helpers';
 
 // Number of blocks in data: 8.
@@ -656,3 +658,37 @@ describe('Filtered block pools', () => {
     expect(filteredBlockPoolArray[0].thanos.labels).toEqual(filteredBlocks[0].thanos.labels);
   });
 });
+
+describe('handle null in blockPool', () => {
+  const newBlockPools = blockPools;
+  const poolArrayIndex: BlocksPool = newBlockPools['1'];
+  const poolArray: Block[][] = poolArrayIndex[Object.keys(poolArrayIndex)[0]];
+  const undefinedBlock: Block = {
+    compaction: {
+      level: null as unknown as number,
+      sources: [],
+      parents: [],
+    },
+    maxTime: null as unknown as number,
+    minTime: null as unknown as number,
+    stats: {
+      numChunks: null as unknown as number,
+      numSamples: null as unknown as number,
+      numSeries: null as unknown as number,
+    },
+    thanos: {
+      downsample: {
+        resolution: null as unknown as number,
+      },
+      labels: {},
+      source: null as unknown as string,
+    },
+    ulid: null as unknown as string,
+    version: null as unknown as number,
+  };
+
+  poolArray[0][0] = undefinedBlock;
+  it('should not crash UI', () => {
+    expect(Object.keys(newBlockPools)).toEqual(Object.keys(blockPools));
+  });
+});

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

@@ -156,7 +156,10 @@ export const getFilteredBlockPools = (
     const poolArrayIndex = blockPools[key];
     const poolArray = poolArrayIndex[Object.keys(poolArrayIndex)[0]];
     for (let i = 0; i < filteredBlocks.length; i++) {
-      if (JSON.stringify(filteredBlocks[i].thanos.labels) === JSON.stringify(poolArray[0][0].thanos.labels)) {
+      if (
+        poolArray[0][0] &&
+        JSON.stringify(filteredBlocks[i].thanos.labels) === JSON.stringify(poolArray[0][0].thanos.labels)
+      ) {
         Object.assign(newblockPools, { [key]: blockPools[key] });
         break;
       }