feat: add flag to render only job name

Co-authored-by: Anna Kvashchuk <kvashchuk.anna@gmail.com>

Author: aronhoyer

frontend/__tests__/components/WorkflowDashboard.test.js

@@ -230,6 +230,17 @@ describe('<WorkflowDashboard />', () => {
     expect(workflowDashboardWrapper.html()).toMatchSnapshot();
   });
 
+  it('should render only job name', async () => {
+    vi.spyOn(preferences, 'showOnlyJobName', 'get').mockReturnValueOnce(true);
+
+    fetchCctrayJson.mockResolvedValueOnce([jobDetails1, jobDetails2]);
+    const workflowDashboardWrapper = mountWithWrapper(WorkflowDashboard);
+
+    await flushPromises();
+
+    expect(workflowDashboardWrapper.findComponent(Job).find('a').text()).toBe('Cancel Previous Runs');
+  });
+
   it.each([
     ['branch_protection_rule', [{ ...jobDetails1, triggeredEvent: 'branch_protection_rule' }, jobDetails2]],
     ['check_run', [{ ...jobDetails1, triggeredEvent: 'check_run' }, jobDetails2]],

frontend/src/components/Preferences.vue

@@ -39,6 +39,15 @@
             @update:model-value="modelValueUpdated"
           />
         </v-card-item>
+        <v-card-item class="pt-0 pb-0">
+          <v-switch
+            v-model="showOnlyJobName"
+            label="Show only job name"
+            color="success"
+            hide-details
+            @update:model-value="modelValueUpdated"
+          />
+        </v-card-item>
         <v-card-item class="pt-0 pb-0">
           <v-btn
             :icon="themeIcon"
@@ -99,7 +108,8 @@ export default {
       enableMaxIdleTimeOptimization: preferences.enableMaxIdleTimeOptimization,
       themeInstance,
       isDirty: false,
-      showBuildsDueToTriggeredEvents: getShowBuildsDueToTriggeredEvents()
+      showBuildsDueToTriggeredEvents: getShowBuildsDueToTriggeredEvents(),
+      showOnlyJobName: preferences.showOnlyJobName
     };
   },
   computed: {
@@ -130,6 +140,7 @@ export default {
       preferences.maxIdleTime = this.maxIdleTime;
       preferences.theme = this.themeInstance.global.name;
       preferences.showBuildsDueToTriggeredEvents = this.showBuildsDueToTriggeredEvents;
+      preferences.showOnlyJobName = this.showOnlyJobName;
 
       this.isDirty = false;
     },
@@ -138,6 +149,7 @@ export default {
           this.showHealthyBuilds === preferences.showHealthyBuilds &&
             this.maxIdleTime === preferences.maxIdleTime &&
             this.enableMaxIdleTimeOptimization === preferences.enableMaxIdleTimeOptimization &&
+            this.showOnlyJobName === preferences.showOnlyJobName &&
           this.hasSameShowBuildsDueToTriggeredEvents());
     },
     hasSameShowBuildsDueToTriggeredEvents() {

frontend/src/components/WorkflowDashboard.vue

@@ -50,13 +50,24 @@ export default {
     isIdleHealthyBuild(lastBuildStatus, activity) {
       return lastBuildStatus === 'Success' && activity === 'Sleeping';
     },
+    mapNameIfPreferred(data) {
+      const parts = data.name.split(' :: ');
+
+      return preferences.showOnlyJobName
+        ? {
+            ...data,
+            name: parts[parts.length - 1]
+          }
+        : data;
+    },
     marshalData(data) {
       return data
         .filter(({ lastBuildStatus, activity }) =>
           this.showHealthyBuilds ? true : !this.isIdleHealthyBuild(lastBuildStatus, activity))
         .filter(({ triggeredEvent }) =>
           !this.hasPreferredTriggeredEvents ||
-            preferences.showBuildsDueToTriggeredEvents.indexOf(triggeredEvent) !== -1);
+            preferences.showBuildsDueToTriggeredEvents.indexOf(triggeredEvent) !== -1)
+        .map(this.mapNameIfPreferred);
     }
   }
 };

frontend/src/services/preferences.js

@@ -70,6 +70,14 @@ class Preferences {
   set showBuildsDueToTriggeredEvents(events) {
     this.__set__('show-builds-due-to-triggered-events', JSON.stringify(events));
   }
+
+  set showOnlyJobName(value) {
+    this.__set__('show-only-job-name', JSON.stringify(value));
+  }
+
+  get showOnlyJobName() {
+    return JSON.parse(this.__get__('show-only-job-name'));
+  }
 }
 
 export default new Preferences();

frontend/vite.config.js

@@ -44,10 +44,10 @@ export default defineConfig({
     coverage: {
       reporter: ['text', 'html'],
       all: true,
-      statements: 80.58,
-      branches: 94.64,
-      functions: 43.65,
-      lines: 80.58,
+      statements: 80.62,
+      branches: 94.87,
+      functions: 44.18,
+      lines: 80.62,
       thresholdAutoUpdate: true
     },
     setupFiles: '__tests__/vitest.setup.js'