[backport] PR #8171 to 5.0 - Dev tools app

src/core_plugins/console/index.js

@@ -9,19 +9,7 @@ module.exports = function (kibana) {
   let { existsSync } = require('fs');
   const { startsWith, endsWith } = require('lodash');
 
-  const apps = [
-    {
-      title: 'Console',
-      description: 'JSON aware developer\'s interface to ElasticSearch',
-      main: 'plugins/console/console',
-      icon: 'plugins/console/logo.svg',
-      injectVars: function (server, options) {
-        const varsToInject = options;
-        varsToInject.elasticsearchUrl = server.config().get('elasticsearch.url');
-        return varsToInject;
-      }
-    }
-  ];
+  const apps = [];
 
   if (existsSync(resolve(__dirname, 'public/tests'))) {
     apps.push({
@@ -146,7 +134,7 @@ module.exports = function (kibana) {
           payload: {
             output: 'stream',
             parse: false
-          },
+          }
         }
       });
 
@@ -156,7 +144,7 @@ module.exports = function (kibana) {
         config: {
           ...proxyRouteConfig
         }
-      })
+      });
 
       server.route({
         path: '/api/console/api_server',
@@ -188,6 +176,14 @@ module.exports = function (kibana) {
     uiExports: {
       apps: apps,
 
+      devTools: ['plugins/console/console'],
+
+      injectDefaultVars(server, options) {
+        const varsToInject = options;
+        varsToInject.elasticsearchUrl = server.config().get('elasticsearch.url');
+        return varsToInject;
+      },
+
       noParse: [
         join(modules, 'ace' + sep),
         join(modules, 'moment_src/moment' + sep),

src/core_plugins/console/public/console.js

@@ -1,3 +1,7 @@
+import devTools from 'ui/registry/dev_tools';
+import uiRoutes from 'ui/routes';
+import template from './index.html';
+
 require('ace');
 require('ui-bootstrap-custom');
 
@@ -13,6 +17,14 @@ require('./src/directives/sense_help');
 require('./src/directives/sense_welcome');
 require('./src/directives/sense_navbar');
 
-require('ui/chrome')
-.setRootTemplate(require('./index.html'))
-.setRootController('sense', 'SenseController');
+devTools.register(() => ({
+  order: 1,
+  name: 'console',
+  display: 'Console',
+  url: '#/dev_tools/console'
+}));
+
+uiRoutes.when('/dev_tools/console', {
+  controller: 'SenseController',
+  template
+});

src/core_plugins/console/public/index.html

@@ -1,38 +1,40 @@
-<sense-navbar></sense-navbar>
+<kbn-dev-tools-app>
+  <sense-navbar></sense-navbar>
 
-<div id="editor_output_container">
-  <div id="editor_container">
-    <ul id="autocomplete"></ul>
-    <div id="editor_actions">
-      <kbn-tooltip text="click to send request">
-        <a class="editor_action" ng-click="sense.sendSelected()">
-          <i class="fa fa-play"></i>
-        </a>
-      </kbn-tooltip>
-      <span dropdown>
-        <a class="editor_action" dropdown-toggle href="#">
-          <i class="fa fa-wrench"></i>
-        </a>
+  <div id="editor_output_container">
+    <div id="editor_container">
+      <ul id="autocomplete"></ul>
+      <div id="editor_actions">
+        <kbn-tooltip text="click to send request">
+          <a class="editor_action" ng-click="sendSelected()">
+            <i class="fa fa-play"></i>
+          </a>
+        </kbn-tooltip>
+        <span dropdown>
+          <a class="editor_action" dropdown-toggle href="#">
+            <i class="fa fa-wrench"></i>
+          </a>
 
-        <ul class="dropdown-menu" role="menu" aria-labelledby="split-button">
-          <li role="menuitem">
-            <a href="#" id="copy_as_curl">Copy as cURL</a>
-          </li>
-          <li role="menuitem">
-            <a ng-click="sense.autoIndent($event)">Auto indent</a>
-          </li>
-        </ul>
-      </span>
-    </div>
+          <ul class="dropdown-menu" role="menu" aria-labelledby="split-button">
+            <li role="menuitem">
+              <a href="#" id="copy_as_curl">Copy as cURL</a>
+            </li>
+            <li role="menuitem">
+              <a ng-click="autoIndent($event)">Auto indent</a>
+            </li>
+          </ul>
+        </span>
+      </div>
 
-    <div id="editor">GET _search
-{
-  "query": { "match_all": {} }
-}</div>
+      <div id="editor">GET _search
+  {
+    "query": { "match_all": {} }
+  }</div>
 
+    </div>
+    <div id="editor_resizer">&#xFE19;</div>
+    <div id="output_container">
+      <div id="output">{}</div>
+    </div>
   </div>
-  <div id="editor_resizer">&#xFE19;</div>
-  <div id="output_container">
-    <div id="output">{}</div>
-  </div>
-</div>
+</kbn-dev-tools-app>

src/core_plugins/console/public/src/app.js

@@ -2,114 +2,113 @@ var $ = require('jquery');
 
 let curl = require('./curl');
 let history = require('./history');
-let input = require('./input');
 let mappings = require('./mappings');
-let output = require('./output');
 let es = require('./es');
 let utils = require('./utils');
 let _ = require('lodash');
-const chrome = require('ui/chrome');
 
-$(document.body).removeClass('fouc');
+export default function init(input, output) {
+  $(document.body).removeClass('fouc');
 
-// set the value of the input and clear the output
-function resetToValues(content) {
-  if (content != null) {
-    input.update(content);
+  // set the value of the input and clear the output
+  function resetToValues(content) {
+    if (content != null) {
+      input.update(content);
+    }
+    output.update("");
   }
-  output.update("");
-}
 
-function loadSavedState() {
-  var sourceLocation = utils.getUrlParam('load_from') || "stored";
-  var previousSaveState = history.getSavedEditorState();
+  function loadSavedState() {
+    var sourceLocation = utils.getUrlParam('load_from') || "stored";
+    var previousSaveState = history.getSavedEditorState();
 
-  if (sourceLocation == "stored") {
-    if (previousSaveState) {
-      resetToValues(previousSaveState.content);
+    if (sourceLocation == "stored") {
+      if (previousSaveState) {
+        resetToValues(previousSaveState.content);
+      }
+      else {
+        resetToValues();
+        input.autoIndent();
+      }
+    }
+    else if (/^https?:\/\//.test(sourceLocation)) {
+      var loadFrom = {url: sourceLocation, dataType: "text", kbnXsrfToken: false};
+      if (/https?:\/\/api.github.com/.test(sourceLocation)) {
+        loadFrom.headers = {Accept: "application/vnd.github.v3.raw"};
+      }
+      $.ajax(loadFrom).done(function (data) {
+        resetToValues(data);
+        input.moveToNextRequestEdge(true);
+        input.highlightCurrentRequestsAndUpdateActionBar();
+        input.updateActionsBar();
+      });
     }
     else {
       resetToValues();
-      input.autoIndent();
     }
+    input.moveToNextRequestEdge(true);
   }
-  else if (/^https?:\/\//.test(sourceLocation)) {
-    var loadFrom = {url: sourceLocation, dataType: "text", kbnXsrfToken: false};
-    if (/https?:\/\/api.github.com/.test(sourceLocation)) {
-      loadFrom.headers = {Accept: "application/vnd.github.v3.raw"};
-    }
-    $.ajax(loadFrom).done(function (data) {
-      resetToValues(data);
-      input.moveToNextRequestEdge(true);
-      input.highlightCurrentRequestsAndUpdateActionBar();
-      input.updateActionsBar();
+
+  function setupAutosave() {
+    var timer;
+    var saveDelay = 500;
+
+    input.getSession().on("change", function onChange(e) {
+      if (timer) {
+        timer = clearTimeout(timer);
+      }
+      timer = setTimeout(saveCurrentState, saveDelay);
     });
   }
-  else {
-    resetToValues();
-  }
-  input.moveToNextRequestEdge(true);
-}
 
-function setupAutosave() {
-  var timer;
-  var saveDelay = 500;
-
-  input.getSession().on("change", function onChange(e) {
-    if (timer) {
-      timer = clearTimeout(timer);
+  function saveCurrentState() {
+    try {
+      var content = input.getValue();
+      history.updateCurrentState(content);
+    }
+    catch (e) {
+      console.log("Ignoring saving error: " + e);
     }
-    timer = setTimeout(saveCurrentState, saveDelay);
-  });
-}
-
-function saveCurrentState() {
-  try {
-    var content = input.getValue();
-    history.updateCurrentState(content);
-  }
-  catch (e) {
-    console.log("Ignoring saving error: " + e);
   }
-}
 
-// stupid simple restore function, called when the user
-// chooses to restore a request from the history
-// PREVENTS history from needing to know about the input
-history.restoreFromHistory = function applyHistoryElem(req) {
-  var session = input.getSession();
-  var pos = input.getCursorPosition();
-  var prefix = "";
-  var suffix = "\n";
-  if (input.parser.isStartRequestRow(pos.row)) {
-    pos.column = 0;
-    suffix += "\n";
-  }
-  else if (input.parser.isEndRequestRow(pos.row)) {
-    var line = session.getLine(pos.row);
-    pos.column = line.length;
-    prefix = "\n\n";
-  }
-  else if (input.parser.isInBetweenRequestsRow(pos.row)) {
-    pos.column = 0;
-  }
-  else {
-    pos = input.nextRequestEnd(pos);
-    prefix = "\n\n";
-  }
+  // stupid simple restore function, called when the user
+  // chooses to restore a request from the history
+  // PREVENTS history from needing to know about the input
+  history.restoreFromHistory = function applyHistoryElem(req) {
+    var session = input.getSession();
+    var pos = input.getCursorPosition();
+    var prefix = "";
+    var suffix = "\n";
+    if (input.parser.isStartRequestRow(pos.row)) {
+      pos.column = 0;
+      suffix += "\n";
+    }
+    else if (input.parser.isEndRequestRow(pos.row)) {
+      var line = session.getLine(pos.row);
+      pos.column = line.length;
+      prefix = "\n\n";
+    }
+    else if (input.parser.isInBetweenRequestsRow(pos.row)) {
+      pos.column = 0;
+    }
+    else {
+      pos = input.nextRequestEnd(pos);
+      prefix = "\n\n";
+    }
 
-  var s = prefix + req.method + " " + req.endpoint;
-  if (req.data) {
-    s += "\n" + req.data;
-  }
+    var s = prefix + req.method + " " + req.endpoint;
+    if (req.data) {
+      s += "\n" + req.data;
+    }
 
-  s += suffix;
+    s += suffix;
 
-  session.insert(pos, s);
-  input.clearSelection();
-  input.moveCursorTo(pos.row + prefix.length, 0);
-  input.focus();
-};
+    session.insert(pos, s);
+    input.clearSelection();
+    input.moveCursorTo(pos.row + prefix.length, 0);
+    input.focus();
+  };
 
-loadSavedState();
-setupAutosave();
+  loadSavedState();
+  setupAutosave();
+};

src/core_plugins/console/public/src/autocomplete.js

@@ -6,7 +6,6 @@ let utils = require('./utils');
 let autocomplete_engine = require('./autocomplete/engine');
 let url_pattern_matcher = require('./autocomplete/url_pattern_matcher');
 let _ = require('lodash');
-let $ = require('jquery');
 let ext_lang_tools = require('ace/ext-language_tools');