From 8c30d9d171d66a882329c4f7b3a88e64f6a56544 Mon Sep 17 00:00:00 2001
From: Suman Maity <sumanm@thoughtworks.com>
Date: Sun, 11 Aug 2024 20:44:48 +0530
Subject: [PATCH] feat: Introduce individual view preference for user without
 build monitor

---
 .../components/FailureGridCell.test.js        |  11 +-
 .../__tests__/components/GridCell.test.js     |  19 +-
 frontend/__tests__/components/Job.test.js     |  85 ++++-----
 .../components/WorkflowDashboard.test.js      |  41 +++--
 .../__snapshots__/GridCell.test.js.snap       | 142 +++++++++++----
 .../WorkflowDashboard.test.js.snap            | 164 +++++++++++++++---
 frontend/src/components/Dashboard.vue         |  19 +-
 frontend/src/components/FailureGridCell.vue   |   5 +
 frontend/src/components/GridCell.vue          |  16 +-
 frontend/src/components/Job.vue               |   5 +
 frontend/src/components/Preferences.vue       |  12 ++
 frontend/src/services/preferences.js          |   9 +
 12 files changed, 405 insertions(+), 123 deletions(-)

diff --git a/frontend/__tests__/components/FailureGridCell.test.js b/frontend/__tests__/components/FailureGridCell.test.js
index 33b9b0bc..46997d1e 100644
--- a/frontend/__tests__/components/FailureGridCell.test.js
+++ b/frontend/__tests__/components/FailureGridCell.test.js
@@ -10,7 +10,10 @@ describe('<FailureGridCell />', () => {
     };
   });
 
-  it('should render grid cell', () => {
+  it.each([
+    [false],
+    [true]
+  ])('should render grid cell when buildMonitorViewEnabled = %s', (buildMonitorViewEnabled) => {
     const createdAt = '2022-08-15T02:20:34Z';
 
     const name = 'test name';
@@ -22,7 +25,8 @@ describe('<FailureGridCell />', () => {
           name,
           url,
           createdAt
-        }
+        },
+        buildMonitorViewEnabled
       }
     });
 
@@ -37,7 +41,8 @@ describe('<FailureGridCell />', () => {
       name,
       showRelativeTime: true,
       status: 'failure',
-      url
+      url,
+      buildMonitorViewEnabled
     });
   });
 });
diff --git a/frontend/__tests__/components/GridCell.test.js b/frontend/__tests__/components/GridCell.test.js
index 4abb3b86..871de156 100644
--- a/frontend/__tests__/components/GridCell.test.js
+++ b/frontend/__tests__/components/GridCell.test.js
@@ -6,7 +6,8 @@ describe('<GridCell />', () => {
   const defaultProps = {
     name: 'webpack-cli :: webpack-cli :: Lint Commit Messages',
     url: 'https://github.com/webpack/webpack-cli/runs/7858502725',
-    lastExecutedTime: '2022-08-16T03:45:02.000Z'
+    lastExecutedTime: '2022-08-16T03:45:02.000Z',
+    buildMonitorViewEnabled: true
   };
 
   const rootId = `${defaultProps.name.replaceAll(/[\\:\s]/g, '-')}`;
@@ -41,6 +42,20 @@ describe('<GridCell />', () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
 
+  it('should render grid cell when build monitor view is disabled', () => {
+    const wrapper = mount(GridCell, {
+      props: { ...defaultProps, buildMonitorViewEnabled: false }
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render in progress grid cell when build monitor view is disabled', () => {
+    const wrapper = mount(GridCell, {
+      props: { ...defaultProps, inProgress: true, buildMonitorViewEnabled: false }
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
   it.each([
     [true, true, true],
     [false, true, true],
@@ -59,7 +74,7 @@ describe('<GridCell />', () => {
         await requestAnimationFrameAsPromise();
         expect(wrapper.find(`[test-id="${rootId}-toolbar"]`).exists()).toBeTruthy();
       });
-        expect(wrapper.html()).toMatchSnapshot();
+      expect(wrapper.html()).toMatchSnapshot();
     });
 
   it.each([
diff --git a/frontend/__tests__/components/Job.test.js b/frontend/__tests__/components/Job.test.js
index bb48fad6..3ff8dfdc 100644
--- a/frontend/__tests__/components/Job.test.js
+++ b/frontend/__tests__/components/Job.test.js
@@ -13,47 +13,54 @@ describe('<Job />', () => {
     lastBuildTime: '2022-08-15T02:20:34Z'
   };
 
-  it.each([
-    ['Sleeping', 'Success', false, false, false],
-    ['Sleeping', 'Success', true, false, false],
-    ['Sleeping', 'Failure', false, true, false],
-    ['Sleeping', 'Unknown', false, true, false],
-    ['Sleeping', 'Exception', false, true, false],
-    ['Building', 'Success', false, false, true],
-    ['Building', 'Failure', false, false, true],
-    ['Building', 'Unknown', false, false, true],
-    ['Building', 'Exception', false, false, true],
-    ['CheckingModifications', 'Success', false, false, false],
-    ['CheckingModifications', 'Failure', false, true, false],
-    ['CheckingModifications', 'Unknown', false, true, false],
-    ['CheckingModifications', 'Exception', false, true, false]
-  ])('should render job grid when activity is %s and last build status is %s and hidden is %s',
-    async (activity, lastBuildStatus, hidden, showRelativeTime, inProgress) => {
-      const wrapper = shallowMount(Job, {
-        props: {
-          content: { ...jobDetails, activity, lastBuildStatus },
-          hidden
-        }
-      });
+  describe.each([
+    [true],
+    [false]
+  ])('when build monitor view enabled = %s', (buildMonitorViewEnabled) => {
+    it.each([
+      ['Sleeping', 'Success', false, false, false],
+      ['Sleeping', 'Success', true, false, false],
+      ['Sleeping', 'Failure', false, true, false],
+      ['Sleeping', 'Unknown', false, true, false],
+      ['Sleeping', 'Exception', false, true, false],
+      ['Building', 'Success', false, false, true],
+      ['Building', 'Failure', false, false, true],
+      ['Building', 'Unknown', false, false, true],
+      ['Building', 'Exception', false, false, true],
+      ['CheckingModifications', 'Success', false, false, false],
+      ['CheckingModifications', 'Failure', false, true, false],
+      ['CheckingModifications', 'Unknown', false, true, false],
+      ['CheckingModifications', 'Exception', false, true, false]
+    ])('should render job grid when activity is %s and last build status is %s and hidden is %s',
+      async (activity, lastBuildStatus, hidden, showRelativeTime, inProgress) => {
+        const wrapper = shallowMount(Job, {
+          props: {
+            content: { ...jobDetails, activity, lastBuildStatus },
+            hidden,
+            buildMonitorViewEnabled
+          }
+        });
 
-      const gridCellComponent = wrapper.findComponent(GridCell);
+        const gridCellComponent = wrapper.findComponent(GridCell);
 
-      expect(gridCellComponent.exists()).toBeTruthy();
+        expect(gridCellComponent.exists()).toBeTruthy();
 
-      expect(gridCellComponent.props()).toEqual({
-        lastExecutedTime: jobDetails.lastBuildTime,
-        url: jobDetails.webUrl,
-        name: jobDetails.name,
-        hidden,
-        displayToggleVisibility: true,
-        showRelativeTime,
-        status: lastBuildStatus,
-        inProgress
-      });
+        expect(gridCellComponent.props()).toEqual({
+          lastExecutedTime: jobDetails.lastBuildTime,
+          url: jobDetails.webUrl,
+          name: jobDetails.name,
+          hidden,
+          displayToggleVisibility: true,
+          showRelativeTime,
+          status: lastBuildStatus,
+          inProgress,
+          buildMonitorViewEnabled
+        });
 
-      await gridCellComponent.vm.$emit('toggle-visibility', jobDetails.name);
-      const emitted = wrapper.emitted();
-      expect(emitted).toHaveProperty('toggleVisibility');
-      expect(emitted.toggleVisibility).toEqual([[jobDetails.name]]);
-    });
+        await gridCellComponent.vm.$emit('toggle-visibility', jobDetails.name);
+        const emitted = wrapper.emitted();
+        expect(emitted).toHaveProperty('toggleVisibility');
+        expect(emitted.toggleVisibility).toEqual([[jobDetails.name]]);
+      });
+  });
 });
diff --git a/frontend/__tests__/components/WorkflowDashboard.test.js b/frontend/__tests__/components/WorkflowDashboard.test.js
index b6a87594..0dc121d3 100644
--- a/frontend/__tests__/components/WorkflowDashboard.test.js
+++ b/frontend/__tests__/components/WorkflowDashboard.test.js
@@ -58,6 +58,7 @@ describe('<WorkflowDashboard />', () => {
 
   beforeEach(() => {
     getVersion.mockReturnValueOnce('3.3.0');
+    vi.spyOn(preferences, 'enableBuildMonitorView', 'get').mockReturnValueOnce(true);
   });
 
   afterEach(() => {
@@ -106,24 +107,30 @@ describe('<WorkflowDashboard />', () => {
     });
   });
 
-  it('should render dashboard with all job details', async () => {
-    vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(true);
-    vi.spyOn(preferences, 'enableMaxIdleTimeOptimization', 'get').mockReturnValueOnce(true);
-    vi.spyOn(preferences, 'maxIdleTime', 'get').mockReturnValueOnce(10);
-    vi.spyOn(preferences, 'showBuildsDueToTriggeredEvents', 'get').mockReturnValueOnce([]);
-    vi.spyOn(preferences, 'hiddenElements', 'get').mockReturnValueOnce({});
+  it.each([
+    [true],
+    [false]
+  ])('should render dashboard with all job details when build monitor view enabled = %s',
+    async (buildMonitorViewEnabled) => {
+      vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(true);
+      vi.spyOn(preferences, 'enableMaxIdleTimeOptimization', 'get').mockReturnValueOnce(true);
+      vi.spyOn(preferences, 'maxIdleTime', 'get').mockReturnValueOnce(10);
+      vi.spyOn(preferences, 'showBuildsDueToTriggeredEvents', 'get').mockReturnValueOnce([]);
+      vi.spyOn(preferences, 'hiddenElements', 'get').mockReturnValueOnce({});
+      vi.spyOn(preferences, 'enableBuildMonitorView', 'get').mockReturnValueOnce(buildMonitorViewEnabled);
 
-    fetchCctrayJson.mockResolvedValueOnce([jobDetails1, jobDetails2]);
+      fetchCctrayJson.mockResolvedValueOnce([jobDetails1, jobDetails2]);
 
-    const workflowDashboardWrapper = mountWithWrapper(WorkflowDashboard);
+      const workflowDashboardWrapper = mountWithWrapper(WorkflowDashboard);
 
-    await flushPromises();
+      await flushPromises();
 
-    const jobComponents = workflowDashboardWrapper.findAllComponents(Job);
+      const jobComponents = workflowDashboardWrapper.findAllComponents(Job);
 
-    expect(jobComponents).length(2);
-    expect(workflowDashboardWrapper.html()).toMatchSnapshot();
-  });
+      expect(jobComponents).length(2);
+      await workflowDashboardWrapper.vm.$nextTick();
+      expect(workflowDashboardWrapper.html()).toMatchSnapshot();
+    });
 
   it('should hide success job details', async () => {
     vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(false);
@@ -379,9 +386,13 @@ describe('<WorkflowDashboard />', () => {
   });
 
   describe('Timers', () => {
-    beforeEach(vi.useFakeTimers);
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
 
-    afterEach(vi.useRealTimers);
+    afterEach(() => {
+      vi.useRealTimers();
+    });
 
     it('should fetch data after every certain interval', async () => {
       vi.spyOn(preferences, 'showHealthyBuilds', 'get').mockReturnValueOnce(true);
diff --git a/frontend/__tests__/components/__snapshots__/GridCell.test.js.snap b/frontend/__tests__/components/__snapshots__/GridCell.test.js.snap
index 3e738ff1..e9f61138 100644
--- a/frontend/__tests__/components/__snapshots__/GridCell.test.js.snap
+++ b/frontend/__tests__/components/__snapshots__/GridCell.test.js.snap
@@ -19,7 +19,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=fa
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -50,7 +50,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=fa
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -92,7 +92,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=fa
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -123,7 +123,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=fa
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -165,7 +165,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=tr
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -196,7 +196,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=tr
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -238,7 +238,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=tr
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -269,7 +269,7 @@ exports[`<GridCell /> > should flip back once mouse is moved away when hidden=tr
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -311,7 +311,7 @@ exports[`<GridCell /> > should flip on hover when hidden=false, displayToggleVis
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -367,7 +367,7 @@ exports[`<GridCell /> > should flip on hover when hidden=false, displayToggleVis
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -434,7 +434,7 @@ exports[`<GridCell /> > should flip on hover when hidden=false, displayToggleVis
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -501,7 +501,7 @@ exports[`<GridCell /> > should flip on hover when hidden=false, displayToggleVis
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -579,7 +579,7 @@ exports[`<GridCell /> > should flip on hover when hidden=true, displayToggleVisi
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -635,7 +635,7 @@ exports[`<GridCell /> > should flip on hover when hidden=true, displayToggleVisi
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -702,7 +702,7 @@ exports[`<GridCell /> > should flip on hover when hidden=true, displayToggleVisi
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -769,7 +769,7 @@ exports[`<GridCell /> > should flip on hover when hidden=true, displayToggleVisi
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <header class="v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr" test-id="webpack-cli----webpack-cli----Lint-Commit-Messages-toolbar">
       <!---->
@@ -828,6 +828,37 @@ exports[`<GridCell /> > should flip on hover when hidden=true, displayToggleVisi
 </div>
 `;
 
+exports[`<GridCell /> > should render grid cell when build monitor view is disabled 1`] = `
+<div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 120px;">
+  <!---->
+  <div class="v-card__loader">
+    <div aria-hidden="true" aria-valuemax="100" aria-valuemin="0" class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;">
+      <!---->
+      <div class="v-progress-linear__background"></div>
+      <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+      <transition-stub appear="false" css="true" name="fade-transition" persisted="false">
+        <div class="v-progress-linear__indeterminate">
+          <div class="v-progress-linear__indeterminate long"></div>
+          <div class="v-progress-linear__indeterminate short"></div>
+        </div>
+      </transition-stub>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <!---->
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
+    <!--v-if-->
+  </transition-stub>
+  <!--v-if-->
+  <!--v-if-->
+  <!---->
+  <!---->
+  <span class="v-card__underlay"></span>
+</div>
+`;
+
 exports[`<GridCell /> > should render grid cell when inProgress=false, status=FAILURE, hidden=undefined, displayToggleVisibility=undefined, showRelativeTime=undefined 1`] = `
 <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 90px;">
   <!---->
@@ -847,7 +878,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=FA
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -878,7 +909,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=SU
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -909,7 +940,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=fa
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -951,7 +982,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=fa
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -993,7 +1024,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=ra
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1024,7 +1055,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=su
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1066,7 +1097,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=su
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1097,7 +1128,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=un
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1128,7 +1159,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=false, status=un
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1159,7 +1190,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=FAI
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1198,7 +1229,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=SUC
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1237,7 +1268,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=fai
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1276,7 +1307,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=fai
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1326,7 +1357,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=ran
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1365,7 +1396,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=suc
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1404,7 +1435,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=suc
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1454,7 +1485,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=suc
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1493,7 +1524,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=und
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1532,7 +1563,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=true, status=unk
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1571,7 +1602,7 @@ exports[`<GridCell /> > should render grid cell when inProgress=undefined, statu
   </div>
   <!---->
   <!---->
-  <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
   <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
     <!--v-if-->
   </transition-stub>
@@ -1582,3 +1613,42 @@ exports[`<GridCell /> > should render grid cell when inProgress=undefined, statu
   <span class="v-card__underlay"></span>
 </div>
 `;
+
+exports[`<GridCell /> > should render in progress grid cell when build monitor view is disabled 1`] = `
+<div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 120px;">
+  <!---->
+  <div class="v-card__loader">
+    <div aria-hidden="true" aria-valuemax="100" aria-valuemin="0" class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;">
+      <!---->
+      <div class="v-progress-linear__background"></div>
+      <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+      <transition-stub appear="false" css="true" name="fade-transition" persisted="false">
+        <div class="v-progress-linear__indeterminate">
+          <div class="v-progress-linear__indeterminate long"></div>
+          <div class="v-progress-linear__indeterminate short"></div>
+        </div>
+      </transition-stub>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <!---->
+  <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+  <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
+    <!--v-if-->
+  </transition-stub>
+  <!--v-if-->
+  <div aria-hidden="false" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="v-progress-linear v-progress-linear--striped v-theme--light v-locale--is-ltr" role="progressbar" style="top: 0px; height: 10px; --v-progress-linear-height: 10px;">
+    <!---->
+    <div class="v-progress-linear__background bg-orange-darken-4"></div>
+    <div class="v-progress-linear__buffer bg-orange-darken-4" style="width: 0%;"></div>
+    <transition-stub appear="false" css="true" name="slide-x-transition" persisted="false">
+      <div class="v-progress-linear__determinate bg-orange-darken-4" style="width: 100%;"></div>
+    </transition-stub>
+    <!---->
+  </div>
+  <!---->
+  <!---->
+  <span class="v-card__underlay"></span>
+</div>
+`;
diff --git a/frontend/__tests__/components/__snapshots__/WorkflowDashboard.test.js.snap b/frontend/__tests__/components/__snapshots__/WorkflowDashboard.test.js.snap
index c7ae2e54..9082ebb3 100644
--- a/frontend/__tests__/components/__snapshots__/WorkflowDashboard.test.js.snap
+++ b/frontend/__tests__/components/__snapshots__/WorkflowDashboard.test.js.snap
@@ -4,7 +4,7 @@ exports[`<WorkflowDashboard /> > No contents > should show no contents when ther
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="v-container v-container--fluid v-locale--is-ltr" id="workflows-dashboard">
-      <header class="v-toolbar v-toolbar--density-default elevation-5 v-theme--light v-locale--is-ltr v-app-bar" style="top: 0px; z-index: 1004; transform: translateY(0px); position: fixed; left: 0px; width: calc(100% - 0px - 0px); transition: none;">
+      <header class="v-toolbar v-toolbar--density-default elevation-5 v-theme--light v-locale--is-ltr v-app-bar" style="top: 0px; z-index: 1004; transform: translateY(0px); position: fixed; left: 0px; width: calc(100% - 0px - 0px);">
         <!---->
         <div class="v-toolbar__content" style="height: 64px;">
           <!---->
@@ -124,7 +124,7 @@ exports[`<WorkflowDashboard /> > should display hidden jobs when user clicks on
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell success" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 90px;">
               <!---->
@@ -144,7 +144,7 @@ exports[`<WorkflowDashboard /> > should display hidden jobs when user clicks on
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -189,7 +189,7 @@ exports[`<WorkflowDashboard /> > should display hidden jobs when user clicks on
           </transition-stub>
         </header>
         <div class="v-container v-container--fluid v-locale--is-ltr px-0">
-          <div class="v-row v-row--dense grid-cells">
+          <div class="v-row v-row--dense grid-cells build-monitor">
             <div class="v-col">
               <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----Cancel----Cancel-Previous-Runs" style="height: 90px;">
                 <!---->
@@ -209,7 +209,7 @@ exports[`<WorkflowDashboard /> > should display hidden jobs when user clicks on
                 </div>
                 <!---->
                 <!---->
-                <div class="v-card-text grid-cell-name pa-1">webpack-cli :: Cancel :: Cancel Previous Runs</div>
+                <div class="v-card-text grid-cell-name pa-2">webpack-cli :: Cancel :: Cancel Previous Runs</div>
                 <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                   <!--v-if-->
                 </transition-stub>
@@ -277,7 +277,7 @@ exports[`<WorkflowDashboard /> > should hide job details depends previous config
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell success" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 90px;">
               <!---->
@@ -297,7 +297,7 @@ exports[`<WorkflowDashboard /> > should hide job details depends previous config
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -386,7 +386,7 @@ exports[`<WorkflowDashboard /> > should hide job details when user clicks on hid
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----Cancel----Cancel-Previous-Runs" style="height: 90px;">
               <!---->
@@ -406,7 +406,7 @@ exports[`<WorkflowDashboard /> > should hide job details when user clicks on hid
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: Cancel :: Cancel Previous Runs</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: Cancel :: Cancel Previous Runs</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -447,7 +447,7 @@ exports[`<WorkflowDashboard /> > should hide job details when user clicks on hid
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -504,7 +504,7 @@ exports[`<WorkflowDashboard /> > should hide job details when user clicks on hid
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell success" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 90px;">
               <!---->
@@ -524,7 +524,7 @@ exports[`<WorkflowDashboard /> > should hide job details when user clicks on hid
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -613,7 +613,7 @@ exports[`<WorkflowDashboard /> > should not remove hidden jobs toolbar when hidd
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----Cancel----Cancel-Previous-Runs" style="height: 90px;">
               <!---->
@@ -633,7 +633,7 @@ exports[`<WorkflowDashboard /> > should not remove hidden jobs toolbar when hidd
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: Cancel :: Cancel Previous Runs</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: Cancel :: Cancel Previous Runs</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -689,7 +689,7 @@ exports[`<WorkflowDashboard /> > should not remove hidden jobs toolbar when hidd
           </transition-stub>
         </header>
         <div class="v-container v-container--fluid v-locale--is-ltr px-0">
-          <div class="v-row v-row--dense grid-cells">
+          <div class="v-row v-row--dense grid-cells build-monitor">
             <div class="v-col">
               <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell success" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 90px;">
                 <!---->
@@ -709,7 +709,7 @@ exports[`<WorkflowDashboard /> > should not remove hidden jobs toolbar when hidd
                 </div>
                 <!---->
                 <!---->
-                <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+                <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
                 <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                   <!--v-if-->
                 </transition-stub>
@@ -766,7 +766,7 @@ exports[`<WorkflowDashboard /> > should put hidden jobs to normal job list when
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----Cancel----Cancel-Previous-Runs" style="height: 90px;">
               <!---->
@@ -786,7 +786,7 @@ exports[`<WorkflowDashboard /> > should put hidden jobs to normal job list when
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: Cancel :: Cancel Previous Runs</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: Cancel :: Cancel Previous Runs</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -827,7 +827,125 @@ exports[`<WorkflowDashboard /> > should put hidden jobs to normal job list when
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
+                <!--v-if-->
+              </transition-stub>
+              <!--v-if-->
+              <!--v-if-->
+              <!---->
+              <!---->
+              <span class="v-card__underlay"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<WorkflowDashboard /> > should render dashboard with all job details when build monitor view enabled = false 1`] = `
+<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+  <div class="v-application__wrap">
+    <div class="v-container v-container--fluid v-locale--is-ltr" id="workflows-dashboard">
+      <header class="v-toolbar v-toolbar--density-default elevation-5 v-theme--light v-locale--is-ltr v-app-bar" style="top: 0px; z-index: 1004; transform: translateY(0px); position: fixed; left: 0px; width: calc(100% - 0px - 0px);">
+        <!---->
+        <div class="v-toolbar__content" style="height: 64px;">
+          <!---->
+          <!---->
+          <div class="v-row v-row--no-gutters">
+            <div class="v-col v-col-10">
+              <div class="v-toolbar-title header-title text-center font-weight-bold pl-10 v-app-bar-title">
+                <div class="v-toolbar-title__placeholder">
+                  <!---->
+                  <span>Gitaction Board</span>
+                  <span class="version">(v3.3.0)</span>
+                </div>
+              </div>
+            </div>
+            <div class="v-col v-col-2 d-inline-flex">
+              <div class="v-toolbar-title pr-4 text-right font-weight-bold align-center fill-height d-inline-flex flex-row-reverse mt-3 v-app-bar-title" id="sub-header">
+                <div class="v-toolbar-title__placeholder">
+                  <!---->
+                  Workflow Jobs
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+        </div>
+        <transition-stub appear="false" css="true" name="expand-transition" persisted="false">
+          <!---->
+        </transition-stub>
+      </header>
+      <!--v-if-->
+      <div class="v-container v-container--fluid v-locale--is-ltr">
+        <div class="v-row v-row--dense grid-cells individual">
+          <div class="v-col">
+            <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----Cancel----Cancel-Previous-Runs" style="height: 120px;">
+              <!---->
+              <div class="v-card__loader">
+                <div aria-hidden="true" aria-valuemax="100" aria-valuemin="0" class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;">
+                  <!---->
+                  <div class="v-progress-linear__background"></div>
+                  <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                  <transition-stub appear="false" css="true" name="fade-transition" persisted="false">
+                    <div class="v-progress-linear__indeterminate">
+                      <div class="v-progress-linear__indeterminate long"></div>
+                      <div class="v-progress-linear__indeterminate short"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <!---->
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: Cancel :: Cancel Previous Runs</div>
+              <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
+                <!--v-if-->
+              </transition-stub>
+              <span class="v-chip v-theme--light v-chip--density-default rounded-0 v-chip--size-small v-chip--variant-tonal" draggable="false">
+                <!---->
+                <span class="v-chip__underlay"></span>
+                <!---->
+                <div class="v-chip__prepend">
+                  <i aria-hidden="true" class="mdi-clock-time-four-outline mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--start"></i>
+                  <!---->
+                </div>
+                <div class="v-chip__content" data-no-activator></div>
+                <!---->
+                <!---->
+              </span>
+              <!--v-if-->
+              <!---->
+              <!---->
+              <span class="v-card__underlay"></span>
+            </div>
+          </div>
+          <div class="v-col">
+            <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell success" id="webpack-cli----webpack-cli----Lint-Commit-Messages" style="height: 120px;">
+              <!---->
+              <div class="v-card__loader">
+                <div aria-hidden="true" aria-valuemax="100" aria-valuemin="0" class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;">
+                  <!---->
+                  <div class="v-progress-linear__background"></div>
+                  <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                  <transition-stub appear="false" css="true" name="fade-transition" persisted="false">
+                    <div class="v-progress-linear__indeterminate">
+                      <div class="v-progress-linear__indeterminate long"></div>
+                      <div class="v-progress-linear__indeterminate short"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <!---->
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -848,7 +966,7 @@ exports[`<WorkflowDashboard /> > should put hidden jobs to normal job list when
 </div>
 `;
 
-exports[`<WorkflowDashboard /> > should render dashboard with all job details 1`] = `
+exports[`<WorkflowDashboard /> > should render dashboard with all job details when build monitor view enabled = true 1`] = `
 <div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="v-container v-container--fluid v-locale--is-ltr" id="workflows-dashboard">
@@ -884,7 +1002,7 @@ exports[`<WorkflowDashboard /> > should render dashboard with all job details 1`
       </header>
       <!--v-if-->
       <div class="v-container v-container--fluid v-locale--is-ltr">
-        <div class="v-row v-row--dense grid-cells">
+        <div class="v-row v-row--dense grid-cells build-monitor">
           <div class="v-col">
             <div class="v-card v-theme--light v-card--density-default rounded-6 v-card--variant-flat grid-cell failure" id="webpack-cli----Cancel----Cancel-Previous-Runs" style="height: 90px;">
               <!---->
@@ -904,7 +1022,7 @@ exports[`<WorkflowDashboard /> > should render dashboard with all job details 1`
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: Cancel :: Cancel Previous Runs</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: Cancel :: Cancel Previous Runs</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
@@ -945,7 +1063,7 @@ exports[`<WorkflowDashboard /> > should render dashboard with all job details 1`
               </div>
               <!---->
               <!---->
-              <div class="v-card-text grid-cell-name pa-1">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
+              <div class="v-card-text grid-cell-name pa-2">webpack-cli :: webpack-cli :: Lint Commit Messages</div>
               <transition-stub appear="false" class="bg-transparent" css="true" name="expand-transition" persisted="false">
                 <!--v-if-->
               </transition-stub>
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index e7c26b74..f1a2d689 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -14,7 +14,7 @@
     >
       <v-row
         dense
-        class="grid-cells"
+        :class="`grid-cells ${viewPreferenceClass}`"
       >
         <v-col
           v-for="content in visibleContents"
@@ -24,6 +24,7 @@
             :is="contentDisplayer"
             :content="content"
             :hidden="isHidden(content)"
+            :build-monitor-view-enabled="buildMonitorViewEnabled"
             @toggle-visibility="toggleVisibility"
           />
         </v-col>
@@ -58,7 +59,7 @@
       >
         <v-row
           dense
-          class="grid-cells"
+          :class="`grid-cells ${viewPreferenceClass}`"
         >
           <v-col
             v-for="content in hiddenContents"
@@ -68,6 +69,7 @@
               :is="contentDisplayer"
               :content="content"
               :hidden="isHidden(content)"
+              :build-monitor-view-enabled="buildMonitorViewEnabled"
               @toggle-visibility="toggleVisibility"
             />
           </v-col>
@@ -138,6 +140,12 @@ export default {
     },
     hiddenContents() {
       return this.contents.filter(this.isHidden);
+    },
+    buildMonitorViewEnabled() {
+      return preferences.enableBuildMonitorView;
+    },
+    viewPreferenceClass() {
+      return this.buildMonitorViewEnabled ? 'build-monitor' : 'individual';
     }
   },
   mounted() {
@@ -219,6 +227,13 @@ export default {
 
 .grid-cells {
     display: grid;
+
+  &.build-monitor {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  &.individual {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
 }
 </style>
diff --git a/frontend/src/components/FailureGridCell.vue b/frontend/src/components/FailureGridCell.vue
index 5a2c67e7..69a03c44 100644
--- a/frontend/src/components/FailureGridCell.vue
+++ b/frontend/src/components/FailureGridCell.vue
@@ -5,6 +5,7 @@
     :name="content.name"
     status="failure"
     show-relative-time
+    :build-monitor-view-enabled="buildMonitorViewEnabled"
   />
 </template>
 
@@ -18,6 +19,10 @@ export default {
     content: {
       type: Object,
       required: true
+    },
+    buildMonitorViewEnabled: {
+      type: Boolean,
+      required: true
     }
   }
 };
diff --git a/frontend/src/components/GridCell.vue b/frontend/src/components/GridCell.vue
index b3a6041c..094c658c 100644
--- a/frontend/src/components/GridCell.vue
+++ b/frontend/src/components/GridCell.vue
@@ -3,13 +3,13 @@
     <v-card
       :id="rootId"
       :key="name"
-      height="90px"
+      :height="`${gridHeight}px`"
       :class="`grid-cell ${statusIndicator}`"
       rounded="6"
       variant="flat"
       v-bind="hoverProps"
     >
-      <v-card-text class="grid-cell-name pa-1">
+      <v-card-text class="grid-cell-name pa-2">
         {{ name }}
       </v-card-text>
       <v-expand-transition class="bg-transparent">
@@ -69,7 +69,7 @@
       <v-progress-linear
         v-if="inProgress"
         color="orange-darken-4"
-        height="15"
+        :height="inProgressIndicatorHeight"
         model-value="100"
         striped
       />
@@ -114,6 +114,10 @@ export default {
     showRelativeTime: {
       type: Boolean,
       default: false
+    },
+    buildMonitorViewEnabled: {
+      type: Boolean,
+      required: true
     }
   },
   emits: ['toggleVisibility'],
@@ -136,6 +140,12 @@ export default {
         default:
           return 'failure';
       }
+    },
+    gridHeight() {
+      return this.buildMonitorViewEnabled ? 90 : 120;
+    },
+    inProgressIndicatorHeight() {
+      return this.buildMonitorViewEnabled ? 15 : 10;
     }
   }
 };
diff --git a/frontend/src/components/Job.vue b/frontend/src/components/Job.vue
index cdbe98f3..ec7dc1c9 100644
--- a/frontend/src/components/Job.vue
+++ b/frontend/src/components/Job.vue
@@ -8,6 +8,7 @@
     :hidden="hidden"
     :in-progress="isInProgress"
     :status="content.lastBuildStatus"
+    :build-monitor-view-enabled="buildMonitorViewEnabled"
     @toggle-visibility="toggleVisibility"
   />
 </template>
@@ -27,6 +28,10 @@ export default {
     hidden: {
       type: Boolean,
       required: true
+    },
+    buildMonitorViewEnabled: {
+      type: Boolean,
+      required: true
     }
   },
   emits: ['toggleVisibility'],
diff --git a/frontend/src/components/Preferences.vue b/frontend/src/components/Preferences.vue
index 0784bd64..77cd2a3f 100644
--- a/frontend/src/components/Preferences.vue
+++ b/frontend/src/components/Preferences.vue
@@ -18,6 +18,15 @@
             @update:model-value="modelValueUpdated"
           />
         </v-card-item>
+        <v-card-item class="pt-0 pb-0">
+          <v-switch
+            v-model="enableBuildMonitorView"
+            label="Enable build monitor view"
+            color="success"
+            hide-details
+            @update:model-value="modelValueUpdated"
+          />
+        </v-card-item>
         <v-card-item class="pt-0 pb-0">
           <v-switch
             v-model="enableMaxIdleTimeOptimization"
@@ -95,6 +104,7 @@ export default {
     const themeInstance = useTheme();
     return {
       showHealthyBuilds: preferences.showHealthyBuilds,
+      enableBuildMonitorView: preferences.enableBuildMonitorView,
       maxIdleTime: preferences.maxIdleTime,
       enableMaxIdleTimeOptimization: preferences.enableMaxIdleTimeOptimization,
       themeInstance,
@@ -126,6 +136,7 @@ export default {
     },
     savePreferences() {
       preferences.enableMaxIdleTimeOptimization = this.enableMaxIdleTimeOptimization;
+      preferences.enableBuildMonitorView = this.enableBuildMonitorView;
       preferences.showHealthyBuilds = this.showHealthyBuilds;
       preferences.maxIdleTime = this.maxIdleTime;
       preferences.theme = this.themeInstance.global.name;
@@ -136,6 +147,7 @@ export default {
     modelValueUpdated() {
       this.isDirty = !(this.themeInstance.global.name === preferences.theme &&
           this.showHealthyBuilds === preferences.showHealthyBuilds &&
+          this.enableBuildMonitorView === preferences.enableBuildMonitorView &&
             this.maxIdleTime === preferences.maxIdleTime &&
             this.enableMaxIdleTimeOptimization === preferences.enableMaxIdleTimeOptimization &&
           this.hasSameShowBuildsDueToTriggeredEvents());
diff --git a/frontend/src/services/preferences.js b/frontend/src/services/preferences.js
index 8c0846b3..8de841dd 100644
--- a/frontend/src/services/preferences.js
+++ b/frontend/src/services/preferences.js
@@ -22,6 +22,15 @@ class Preferences {
     this.__set__('show-healthy-builds', value);
   }
 
+  get enableBuildMonitorView() {
+    const enabledBuildMonitorViewConfig = this.__get__('enable-build-monitor-view');
+    return !(enabledBuildMonitorViewConfig && enabledBuildMonitorViewConfig === 'false');
+  }
+
+  set enableBuildMonitorView(value) {
+    this.__set__('enable-build-monitor-view', value);
+  }
+
   disableIdleOptimization() {
     return this.__get__('disable-max-idle-time') === 'true';
   }