Revert changing panelIndex to panelId

Because this is a variable stored in the state, changing it can have
subtle and adverse affects (like breaking reporting).

update comment

src/core_plugins/kibana/public/dashboard/components/panel/lib/panel_state.js

@@ -10,7 +10,10 @@ export const DEFAULT_PANEL_HEIGHT = 2;
  * @property {Element} $el - A reference to the gridster widget holding this panel. Used to
  * update the size and column attributes. TODO: move out of panel state as this couples state to ui.
  * @property {string} type - Type of the visualization in the panel.
- * @property {number} panelId - Unique id to represent this panel in the grid.
+ * @property {number} panelIndex - Unique id to represent this panel in the grid. Note that this is
+ * NOT the index in the panels array. While it may initially represent that, it is not
+ * updated with changes in a dashboard, and is simply used as a unique identifier.  The name
+ * remains as panelIndex for backward compatibility reasons - changing it can break reporting.
  * @property {number} size_x - Width of the panel.
  * @property {number} size_y - Height of the panel.
  * @property {number} col - Column index in the grid.
@@ -21,14 +24,14 @@ export const DEFAULT_PANEL_HEIGHT = 2;
  * Creates and initializes a basic panel state.
  * @param {number} id
  * @param {string} type
- * @param {number} panelId
+ * @param {number} panelIndex
  * @return {PanelState}
  */
-export function createPanelState(id, type, panelId) {
+export function createPanelState(id, type, panelIndex) {
   return {
     size_x: DEFAULT_PANEL_WIDTH,
     size_y: DEFAULT_PANEL_HEIGHT,
-    panelId: panelId,
+    panelIndex: panelIndex,
     type: type,
     id: id
   };

src/core_plugins/kibana/public/dashboard/directives/dashboard_panel.js

@@ -26,7 +26,7 @@ uiModules
    * @returns {string}
    */
   const getPersistedStateId = function (panel) {
-    return `P-${panel.panelId}`;
+    return `P-${panel.panelIndex}`;
   };
 
   return {

src/core_plugins/kibana/public/dashboard/directives/grid.js

@@ -34,21 +34,21 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
       // debounced layout function is safe to call as much as possible
       const safeLayout = _.debounce(layout, 200);
 
-      $scope.removePanelFromState = (panelId) => {
+      $scope.removePanelFromState = (panelIndex) => {
         _.remove($scope.state.panels, function (panel) {
-          return panel.panelId === panelId;
+          return panel.panelIndex === panelIndex;
         });
       };
 
       /**
-       * Removes the panel with the given id from the $scope.state.panels array. Does not
+       * Removes the panel with the given index from the $scope.state.panels array. Does not
        * remove the ui element from gridster - that is triggered by a watcher that is
        * triggered on changes made to $scope.state.panels.
-       * @param panelId {number}
+       * @param panelIndex {number}
        */
-      $scope.getPanelByPanelId = (panelId) => {
+      $scope.getPanelByPanelIndex = (panelIndex) => {
         return _.find($scope.state.panels, function (panel) {
-          return panel.panelId === panelId;
+          return panel.panelIndex === panelIndex;
         });
       };
 
@@ -162,8 +162,8 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
 
         const panelHtml = `
             <li>
-                <dashboard-panel remove="removePanelFromState(${panel.panelId})"
-                                 panel="getPanelByPanelId(${panel.panelId})"
+                <dashboard-panel remove="removePanelFromState(${panel.panelIndex})"
+                                 panel="getPanelByPanelIndex(${panel.panelIndex})"
                                  is-full-screen-mode="!chrome.getVisible()"
                                  parent-ui-state="uiState">
             </li>`;

src/core_plugins/kibana/public/dashboard/index.js

@@ -153,7 +153,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
           docTitle.change(dash.title);
         }
 
-        initPanelIds();
+        initPanelIndexes();
 
         // watch for state changes and update the appStatus.dirty value
         stateMonitor = stateMonitorFactory.create($state, stateDefaults);
@@ -172,21 +172,21 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         $scope.$emit('application.load');
       }
 
-      function initPanelIds() {
-        // find the largest panelId in all the panels
-        let maxIndex = getMaxPanelId();
+      function initPanelIndexes() {
+        // find the largest panelIndex in all the panels
+        let maxIndex = getMaxPanelIndex();
 
-        // ensure that all panels have a panelId
+        // ensure that all panels have a panelIndex
         $scope.state.panels.forEach(function (panel) {
-          if (!panel.panelId) {
-            panel.panelId = maxIndex++;
+          if (!panel.panelIndex) {
+            panel.panelIndex = maxIndex++;
           }
         });
       }
 
-      function getMaxPanelId() {
+      function getMaxPanelIndex() {
         let maxId = $scope.state.panels.reduce(function (id, panel) {
-          return Math.max(id, panel.panelId || id);
+          return Math.max(id, panel.panelIndex || id);
         }, 0);
         return ++maxId;
       }
@@ -272,12 +272,12 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       // called by the saved-object-finder when a user clicks a vis
       $scope.addVis = function (hit) {
         pendingVis++;
-        $state.panels.push(createPanelState(hit.id, 'visualization', getMaxPanelId()));
+        $state.panels.push(createPanelState(hit.id, 'visualization', getMaxPanelIndex()));
       };
 
       $scope.addSearch = function (hit) {
         pendingVis++;
-        $state.panels.push(createPanelState(hit.id, 'search', getMaxPanelId()));
+        $state.panels.push(createPanelState(hit.id, 'search', getMaxPanelIndex()));
       };
 
       // Setup configurable values for config directive, after objects are initialized