refactor: tried to simplify and also minimize scope a bit for #10323

public/app/core/constants.ts

@@ -6,3 +6,5 @@ export const REPEAT_DIR_VERTICAL = 'v';
 export const DEFAULT_PANEL_SPAN = 4;
 export const DEFAULT_ROW_HEIGHT = 250;
 export const MIN_PANEL_HEIGHT = GRID_CELL_HEIGHT * 3;
+
+export const LS_PANEL_COPY_KEY = 'panel-copy';

public/app/features/dashboard/all.ts

@@ -27,7 +27,6 @@ import './acl/acl';
 import './folder_picker/folder_picker';
 import './move_to_folder_modal/move_to_folder';
 import './settings/settings';
-import './panel_clipboard_srv';
 
 import coreModule from 'app/core/core_module';
 import { DashboardListCtrl } from './dashboard_list_ctrl';

public/app/features/dashboard/dashboard_ctrl.ts

@@ -22,8 +22,7 @@ export class DashboardCtrl implements PanelContainer {
     private unsavedChangesSrv,
     private dashboardViewStateSrv,
     public playlistSrv,
-    private panelLoader,
-    private panelClipboardSrv
+    private panelLoader
   ) {
     // temp hack due to way dashboards are loaded
     // can't use controllerAs on route yet
@@ -123,10 +122,6 @@ export class DashboardCtrl implements PanelContainer {
     return this.panelLoader;
   }
 
-  getClipboardPanel() {
-    return this.panelClipboardSrv.getPanel();
-  }
-
   timezoneChanged() {
     this.$rootScope.$broadcast('refresh');
   }

public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -5,6 +5,8 @@ import config from 'app/core/config';
 import { PanelModel } from '../panel_model';
 import { PanelContainer } from './PanelContainer';
 import ScrollBar from 'app/core/components/ScrollBar/ScrollBar';
+import store from 'app/core/store';
+import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 
 export interface AddPanelPanelProps {
   panel: PanelModel;
@@ -14,7 +16,6 @@ export interface AddPanelPanelProps {
 export interface AddPanelPanelState {
   filter: string;
   panelPlugins: any[];
-  clipboardPanel: any;
 }
 
 export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
@@ -23,12 +24,8 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
 
     this.state = {
       panelPlugins: this.getPanelPlugins(),
-      clipboardPanel: this.getClipboardPanel(),
       filter: '',
     };
-
-    this.onPanelSelected = this.onPanelSelected.bind(this);
-    this.onClipboardPanelSelected = this.onClipboardPanelSelected.bind(this);
   }
 
   getPanelPlugins() {
@@ -40,15 +37,24 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     // add special row type
     panels.push({ id: 'row', name: 'Row', sort: 8, info: { logos: { small: 'public/img/icn-row.svg' } } });
 
+    let copiedPanelJson = store.get(LS_PANEL_COPY_KEY);
+    if (copiedPanelJson) {
+      let copiedPanel = JSON.parse(copiedPanelJson);
+      let pluginInfo = _.find(panels, { id: copiedPanel.type });
+      if (pluginInfo) {
+        let pluginCopy = _.cloneDeep(pluginInfo);
+        pluginCopy.name = copiedPanel.title;
+        pluginCopy.sort = -1;
+        pluginCopy.defaults = copiedPanel;
+        panels.push(pluginCopy);
+      }
+    }
+
     // add sort by sort property
     return _.sortBy(panels, 'sort');
   }
 
-  getClipboardPanel() {
-    return this.props.getPanelContainer().getClipboardPanel();
-  }
-
-  onPanelSelected(panelPluginInfo) {
+  onAddPanel = panelPluginInfo => {
     const panelContainer = this.props.getPanelContainer();
     const dashboard = panelContainer.getDashboard();
     const { gridPos } = this.props.panel;
@@ -64,39 +70,23 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
       newPanel.gridPos = { x: 0, y: 0 };
     }
 
-    dashboard.addPanel(newPanel);
-    dashboard.removePanel(this.props.panel);
-  }
-
-  onClipboardPanelSelected(panel) {
-    const panelContainer = this.props.getPanelContainer();
-    const dashboard = panelContainer.getDashboard();
-
-    const { gridPos } = this.props.panel;
-    panel.gridPos.x = gridPos.x;
-    panel.gridPos.y = gridPos.y;
+    // apply panel template / defaults
+    if (panelPluginInfo.defaults) {
+      _.defaults(newPanel, panelPluginInfo.defaults);
+      newPanel.gridPos.w = panelPluginInfo.defaults.gridPos.w;
+      newPanel.gridPos.h = panelPluginInfo.defaults.gridPos.h;
+      newPanel.title = panelPluginInfo.defaults.title;
+      store.delete(LS_PANEL_COPY_KEY);
+    }
 
-    dashboard.addPanel(panel);
+    dashboard.addPanel(newPanel);
     dashboard.removePanel(this.props.panel);
-  }
-
-  renderClipboardPanel(copiedPanel) {
-    const panel = copiedPanel.panel;
-    const title = `Paste copied panel '${panel.title}' from '${copiedPanel.dashboard}'`;
-
-    return (
-      <div className="add-panel__item" onClick={() => this.onClipboardPanelSelected(panel)} title={title}>
-        <div className="add-panel__item-icon">
-          <i className="fa fa-paste fa-2x fa-fw" />
-        </div>
-        <div className="add-panel__item-name">Paste copied panel</div>
-      </div>
-    );
-  }
+  };
 
-  renderPanelItem(panel) {
+  renderPanelItem(panel, index) {
+    console.log('render panel', index);
     return (
-      <div key={panel.id} className="add-panel__item" onClick={() => this.onPanelSelected(panel)} title={panel.name}>
+      <div key={index} className="add-panel__item" onClick={() => this.onAddPanel(panel)} title={panel.name}>
         <img className="add-panel__item-img" src={panel.info.logos.small} />
         <div className="add-panel__item-name">{panel.name}</div>
       </div>
@@ -113,7 +103,6 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
             <span className="add-panel__sub-title">Select a visualization</span>
           </div>
           <ScrollBar className="add-panel__items">
-            {this.state.clipboardPanel && this.renderClipboardPanel(this.state.clipboardPanel)}
             {this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
           </ScrollBar>
         </div>

public/app/features/dashboard/dashgrid/PanelContainer.ts

@@ -4,5 +4,4 @@ import { PanelLoader } from './PanelLoader';
 export interface PanelContainer {
   getPanelLoader(): PanelLoader;
   getDashboard(): DashboardModel;
-  getClipboardPanel(): any;
 }

public/app/features/dashboard/panel_clipboard_srv.ts

@@ -1,21 +0,0 @@
-import coreModule from 'app/core/core_module';
-import { appEvents } from 'app/core/core';
-
-class PanelClipboardSrv {
-  key = 'GrafanaDashboardClipboardPanel';
-
-  /** @ngInject **/
-  constructor(private $window) {
-    appEvents.on('copy-dashboard-panel', this.copyDashboardPanel.bind(this));
-  }
-
-  getPanel() {
-    return this.$window[this.key];
-  }
-
-  private copyDashboardPanel(payload) {
-    this.$window[this.key] = payload;
-  }
-}
-
-coreModule.service('panelClipboardSrv', PanelClipboardSrv);

public/app/features/panel/panel_ctrl.ts

@@ -4,7 +4,8 @@ import $ from 'jquery';
 import { appEvents, profiler } from 'app/core/core';
 import { PanelModel } from 'app/features/dashboard/panel_model';
 import Remarkable from 'remarkable';
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, LS_PANEL_COPY_KEY } from 'app/core/constants';
+import store from 'app/core/store';
 
 const TITLE_HEIGHT = 27;
 const PANEL_BORDER = 2;
@@ -190,19 +191,19 @@ export class PanelCtrl {
         click: 'ctrl.duplicate()',
         role: 'Editor',
       });
+
+      menu.push({
+        text: 'Add to Panel List',
+        click: 'ctrl.addToPanelList()',
+        role: 'Editor',
+      });
     }
+
     menu.push({
       text: 'Panel JSON',
       click: 'ctrl.editPanelJson(); dismiss();',
     });
 
-    menu.push({
-      text: 'Copy to Clipboard',
-      click: 'ctrl.copyPanelToClipboard()',
-      role: 'Editor',
-      directives: ['clipboard-button="ctrl.getPanelJson()"'],
-    });
-
     this.events.emit('init-panel-actions', menu);
     return menu;
   }
@@ -278,15 +279,9 @@ export class PanelCtrl {
     });
   }
 
-  copyPanelToClipboard() {
-    appEvents.emit('copy-dashboard-panel', {
-      dashboard: this.dashboard.title,
-      panel: this.panel.getSaveModel(),
-    });
-  }
-
-  getPanelJson() {
-    return JSON.stringify(this.panel.getSaveModel(), null, 2);
+  addToPanelList() {
+    store.set(LS_PANEL_COPY_KEY, JSON.stringify(this.panel.getSaveModel()));
+    appEvents.emit('alert-success', ['Panel temporarily added to panel list']);
   }
 
   replacePanel(newPanel, oldPanel) {

public/app/features/panel/panel_header.ts

@@ -51,12 +51,6 @@ function renderMenuItem(item, ctrl) {
     html += ` href="${item.href}"`;
   }
 
-  if (item.directives) {
-    for (let directive of item.directives) {
-      html += ` ${directive}`;
-    }
-  }
-
   html += `><i class="${item.icon}"></i>`;
   html += `<span class="dropdown-item-text">${item.text}</span>`;