Add a keybinding that toggles all legends in a dashboard

public/app/core/components/help/help.ts

@@ -27,6 +27,7 @@ export class HelpCtrl {
         { keys: ['d', 'C'], description: 'Collapse all rows' },
         { keys: ['d', 'C'], description: 'Collapse all rows' },
         { keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' },
         { keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' },
         { keys: ['mod+o'], description: 'Toggle shared graph crosshair' },
         { keys: ['mod+o'], description: 'Toggle shared graph crosshair' },
+        { keys: ['d', 'l'], description: 'Toggle all panel legends' },
       ],
       ],
       'Focused Panel': [
       'Focused Panel': [
         { keys: ['e'], description: 'Toggle panel edit view' },
         { keys: ['e'], description: 'Toggle panel edit view' },

public/app/core/services/keybindingSrv.ts

@@ -256,6 +256,11 @@ export class KeybindingSrv {
       }
       }
     });
     });
 
 
+    // toggle all panel legends
+    this.bind('d l', () => {
+      dashboard.toggleLegendsForAll();
+    });
+
     // collapse all rows
     // collapse all rows
     this.bind('d shift+c', () => {
     this.bind('d shift+c', () => {
       dashboard.collapseRows();
       dashboard.collapseRows();

public/app/features/dashboard/state/DashboardModel.test.ts

@@ -635,4 +635,32 @@ describe('DashboardModel', () => {
       expect(saveModel.templating.list[0].filters[0].value).toBe('server 1');
       expect(saveModel.templating.list[0].filters[0].value).toBe('server 1');
     });
     });
   });
   });
+
+  describe('Given a dashboard with one panel legend on and two off', () => {
+    let model;
+
+    beforeEach(() => {
+      const data = {
+        panels: [
+          { id: 1, type: 'graph', gridPos: { x: 0, y: 0, w: 24, h: 2 }, legend: { show: true } },
+          { id: 3, type: 'graph', gridPos: { x: 0, y: 4, w: 12, h: 2 }, legend: { show: false } },
+          { id: 4, type: 'graph', gridPos: { x: 12, y: 4, w: 12, h: 2 }, legend: { show: false } },
+        ],
+      };
+      model = new DashboardModel(data);
+    });
+
+    it('toggleLegendsForAll should toggle all legends on on first execution', () => {
+      model.toggleLegendsForAll();
+      const legendsOn = model.panels.filter(panel => panel.legend.show === true);
+      expect(legendsOn.length).toBe(3);
+    });
+
+    it('toggleLegendsForAll should toggle all legends off on second execution', () => {
+      model.toggleLegendsForAll();
+      model.toggleLegendsForAll();
+      const legendsOn = model.panels.filter(panel => panel.legend.show === true);
+      expect(legendsOn.length).toBe(0);
+    });
+  });
 });
 });

public/app/features/dashboard/state/DashboardModel.ts

@@ -917,4 +917,18 @@ export class DashboardModel {
       }
       }
     }
     }
   }
   }
+
+  toggleLegendsForAll() {
+    const panels = this.panels.filter(panel => {
+      return panel.legend !== undefined && panel.legend !== null;
+    });
+    // determine if more panels are displaying legends or not
+    const onCount = panels.filter(panel => panel.legend.show).length;
+    const offCount = panels.length - onCount;
+    const panelLegendsOn = onCount >= offCount;
+    panels.forEach(panel => {
+      panel.legend.show = !panelLegendsOn;
+      panel.render();
+    });
+  }
 }
 }

public/app/features/dashboard/state/PanelModel.ts

@@ -106,6 +106,7 @@ export class PanelModel {
   events: Emitter;
   events: Emitter;
   cacheTimeout?: any;
   cacheTimeout?: any;
   cachedPluginOptions?: any;
   cachedPluginOptions?: any;
+  legend?: { show: boolean };
 
 
   constructor(model) {
   constructor(model) {
     this.events = new Emitter();
     this.events = new Emitter();