Working with multiple Kibana source codes in parallel

[timroes]

This issue is an informational issue.

When working with Kibana I often need to switch between tasks (e.g. reviewing a PR and continue working on my own changes). To prevent needing to stash everything, switch branches, yarn kbn bootstrap, yarn start for every of these context switches. I usually have multiple instances of the Kibana source code in parallel, so I can use one for my coding, while using another for testing/reviewing a PR, etc. So I wanted to share my setup here in case it's useful for other people too.

Running Kibanas in parallel

To run another instance in parallel you need to change a couple of settings in the copies kibana.yml. For dev purposes it's best to create a kibana.dev.yml in the config folder, which is already ignored by Git and will be used automatically when running yarn start. To switch ports for an instance, so it can run in parallel, you just have to place the following three settings in the kibana.dev.yml (I usually use 5701 for the first copy, 5801 for the second, and so on):

server.port: 5701
optimize.watchPort: 5702 # Not needed from 7.10 onwards
dev.basePathProxyTarget: 5703

Note: optimize.watchPort is no longer needed from 7.10 onwards (PR).

Now you can easily start all instances in parallel. They will still all connect to the same Elasticsearch, which is for me the desired behavior so I don't need to run multiple instances and all have the same saved objects.

VSCode Workspace Styling

Since it often happened to me, that I am confused around which instance I have opened in which editor window and sometimes happen to make changes in a different instance then I expected, I am now using VSCode's workspace settings to give my different Kibana instances different titlebar styling.

I just place the following code in the workspace settings (.vscode/settings.json) of the respective folder:

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#017D73",
    "titleBar.activeForeground": "#111",
    "titleBar.inactiveBackground": "#02544e",
    "titleBar.inactiveForeground": "#111"
  },
  "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName} [:5801]"
}

That way I add the Port to the window title, so I can see it directly and also have either a regular window titlebar color, a pink one (I actually named that folder kibanaPink) or a green one (kibanaGreen). That makes mistaking the different editor instances way harder:

Please feel free to leave your comments or add useful scripts/snippets for your multi Kibana instance setup.

[mbondyra]

Kibanas styling

(thanks Joe!)
This is a script that you can execute with some browser extension that allows to run the scripts on specified pages, eg tampermonkey or Custom JavaScript for Websites. Custom JavaScript for Websites has the option to execute the script on targeted sites defined by regex. I define mine by http://localhost:5.* and paste in the content:

(function() {
  'use strict';
  const colors = {
    "5601": "#215732",
    "5701": "#1857a4",
    "5901": "#d14a29",
    "5101": "#028a15"
  };
  const style = document.createElement("style");
  const color = colors[location.port] || 'white';
  style.innerText = `.euiHeader:first-child { background-color: ${color}; }`
  style.type = "text/css"
  document.head.appendChild(style);

  /*
   * Copyright 2011 Twitter, Inc.
   *
   * Licensed under the Apache License, Version 2.0 (the "License"); you may
   * not use this file except in compliance with the License. You may obtain
   * a copy of the License at
   *
   *     http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  var link = document.querySelector("link[rel~='icon']");
  var allLinks = document.querySelectorAll("link[rel~='icon']");
  if (!link) {
    link = document.createElement("link");
    link.setAttribute("rel", "shortcut icon");
    document.head.appendChild(link);
  }
  allLinks.forEach(currentLink => {
    if (currentLink !== link) {
      currentLink.remove();
    }
  })
  var faviconUrl = link.href || window.location.origin + "/favicon.ico";

  function onImageLoaded() {
    var canvas = document.createElement("canvas");
    canvas.width = 180;
    canvas.height = 180;
    var context = canvas.getContext("2d");
    context.drawImage(img, 0, 0);
    context.globalCompositeOperation = "source-in";
    context.fillStyle = color;
    context.fillRect(0, 0, 180, 180);
    context.fill();
    link.type = "image/x-icon";
    link.href = canvas.toDataURL();
  };
  var img = document.createElement("img");
  img.addEventListener("load", onImageLoaded);
  img.src = faviconUrl;
})();

This styles the header and the favicon:

VS Code

Here are my settings that look nice and the colors are the same as for Kibanas:

{
	"folders": [
		{
			"path": "./kibana"
		}
	],
	"settings": {
		"workbench.colorCustomizations": {
			"activityBar.activeBackground": "#2f7c47",
			"activityBar.activeBorder": "#422c74",
			"activityBar.background": "#2f7c47",
			"activityBar.foreground": "#e7e7e7",
			"activityBar.inactiveForeground": "#e7e7e799",
			"activityBarBadge.background": "#422c74",
			"activityBarBadge.foreground": "#e7e7e7",
			"sash.hoverBorder": "#2f7c47",
			"statusBar.background": "#215732",
			"statusBar.foreground": "#e7e7e7",
			"statusBarItem.hoverBackground": "#2f7c47",
			"statusBarItem.remoteBackground": "#215732",
			"statusBarItem.remoteForeground": "#e7e7e7",
			"titleBar.activeBackground": "#215732",
			"titleBar.activeForeground": "#e7e7e7",
			"titleBar.inactiveBackground": "#21573299",
			"titleBar.inactiveForeground": "#e7e7e799"
		},
		"window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName} [:5601]",
		"peacock.color": "#215732"
	}
}

{
	"folders": [
		{
			"path": "./kibana2"
		}
	],
	"settings": {
		"workbench.colorCustomizations": {
			"activityBar.activeBackground": "#3399ff",
			"activityBar.activeBorder": "#bf0060",
			"activityBar.background": "#3399ff",
			"activityBar.foreground": "#15202b",
			"activityBar.inactiveForeground": "#15202b99",
			"activityBarBadge.background": "#bf0060",
			"activityBarBadge.foreground": "#e7e7e7",
			"sash.hoverBorder": "#3399ff",
			"statusBar.background": "#007fff",
			"statusBar.foreground": "#e7e7e7",
			"statusBarItem.hoverBackground": "#3399ff",
			"statusBarItem.remoteBackground": "#007fff",
			"statusBarItem.remoteForeground": "#e7e7e7",
			"titleBar.activeBackground": "#007fff",
			"titleBar.activeForeground": "#e7e7e7",
			"titleBar.inactiveBackground": "#007fff99",
			"titleBar.inactiveForeground": "#e7e7e799"
		},
		"window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName} [:5701]",
		"peacock.color": "#007fff"
	}
}