feat: add NM toolbar to Kibana

config/kibana.yml

@@ -4,21 +4,21 @@ server.port: 5601
 # Specifies the address to which the Kibana server will bind. IP addresses and host names are both valid values.
 # The default is 'localhost', which usually means remote machines will not be able to connect.
 # To allow connections from remote users, set this parameter to a non-loopback address.
-server.host: "localhost"
+server.host: 'localhost'
 
 # Enables you to specify a path to mount Kibana at if you are running behind a proxy.
 # Use the `server.rewriteBasePath` setting to tell Kibana if it should remove the basePath
 # from requests it receives, and to prevent a deprecation warning at startup.
 # This setting cannot end in a slash.
-#server.basePath: ""
-# FIXME - change to "/Analyze" for esk7 release
-server.basePath: "/kibana4"
+# server.basePath: ""
+server.basePath: '/analyze'
 
 # Specifies whether Kibana should rewrite requests that are prefixed with
 # `server.basePath` or require that they are rewritten by your reverse proxy.
 # This setting was effectively always `false` before Kibana 6.3 and will
 # default to `true` starting in Kibana 7.0.
 #server.rewriteBasePath: false
+server.rewriteBasePath: true
 
 # The maximum payload size in bytes for incoming server requests.
 #server.maxPayloadBytes: 1048576
@@ -28,7 +28,7 @@ server.basePath: "/kibana4"
 
 # The URLs of the Elasticsearch instances to use for all your queries.
 #elasticsearch.hosts: ["http://localhost:9200"]
-elasticsearch.hosts: ["http://localhost:9200"]
+elasticsearch.hosts: ['http://localhost:9200']
 
 # When this setting's value is true Kibana uses the hostname specified in the server.host
 # setting. When the value of this setting is false, Kibana uses the hostname of the host
@@ -37,10 +37,10 @@ elasticsearch.preserveHost: true
 
 # Kibana uses an index in Elasticsearch to store saved searches, visualizations and
 # dashboards. Kibana creates a new index if the index doesn't already exist.
-kibana.index: ".kibana"
+kibana.index: '.kibana'
 
 # The default application to load.
-kibana.defaultAppId: "dashboard"
+kibana.defaultAppId: 'dashboard'
 
 # If your Elasticsearch is protected with basic authentication, these settings provide
 # the username and password that the Kibana server uses to perform maintenance on the Kibana
@@ -85,7 +85,6 @@ elasticsearch.requestTimeout: 300000
 
 # Time in milliseconds for Elasticsearch to wait for responses from shards. Set to 0 to disable.
 elasticsearch.shardTimeout: 0
-
 # Time in milliseconds to wait for Elasticsearch at Kibana startup before retrying.
 #elasticsearch.startupTimeout: 5000
 

package.json

@@ -119,9 +119,13 @@
     "@kbn/pm": "1.0.0",
     "@kbn/test-subj-selector": "0.2.1",
     "@kbn/ui-framework": "1.0.0",
+    "@logrhythm/icons": "^1.19.0",
+    "@logrhythm/nm-web-shared": "^1.2.2",
+    "@logrhythm/webui": "^5.9.13",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/lodash.clonedeep": "^4.5.4",
     "@types/recompose": "^0.30.5",
+    "@types/tether": "^1.4.4",
     "JSONStream": "1.1.1",
     "abortcontroller-polyfill": "^1.1.9",
     "angular": "1.6.9",
@@ -135,6 +139,7 @@
     "babel-loader": "8.0.5",
     "bluebird": "3.5.3",
     "boom": "^7.2.0",
+    "bootstrap": "4.0.0-alpha.5",
     "brace": "0.11.1",
     "cache-loader": "1.2.2",
     "chalk": "^2.4.1",
@@ -180,10 +185,11 @@
     "leaflet-responsive-popup": "0.2.0",
     "leaflet-vega": "^0.8.6",
     "leaflet.heat": "0.2.0",
-    "less": "^2.7.3",
+    "less": "^3.9.0",
     "less-loader": "4.1.0",
     "lodash": "npm:@elastic/lodash@3.10.1-kibana1",
     "lodash.clonedeep": "^4.5.0",
+    "lr-style": "^6.10.3",
     "lru-cache": "4.1.1",
     "markdown-it": "^8.4.1",
     "mini-css-extract-plugin": "0.4.4",
@@ -210,6 +216,7 @@
     "react-dom": "^16.8.0",
     "react-grid-layout": "^0.16.2",
     "react-input-range": "^1.3.0",
+    "react-jss": "^8.6.1",
     "react-markdown": "^3.4.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
@@ -231,6 +238,7 @@
     "style-loader": "0.23.1",
     "tar": "4.4.8",
     "terser-webpack-plugin": "^1.1.0",
+    "tether": "^1.4.6",
     "thread-loader": "^2.1.2",
     "tinygradient": "0.3.0",
     "tinymath": "1.1.1",
@@ -241,7 +249,7 @@
     "type-detect": "^4.0.8",
     "ui-select": "0.19.6",
     "url-loader": "1.1.2",
-    "uuid": "3.0.1",
+    "uuid": "^3.3.2",
     "val-loader": "^1.1.1",
     "validate-npm-package-name": "2.2.2",
     "vega-lib": "4.3.0",
@@ -317,6 +325,7 @@
     "@types/puppeteer-core": "^1.9.0",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
+    "@types/react-jss": "8.6.1",
     "@types/react-redux": "^6.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-virtualized": "^9.18.7",
@@ -331,7 +340,7 @@
     "@types/styled-components": "^3.0.1",
     "@types/supertest": "^2.0.5",
     "@types/type-detect": "^4.0.1",
-    "@types/uuid": "^3.4.4",
+    "@types/uuid": "^3.4.5",
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^1.6.0",
     "@typescript-eslint/parser": "^1.6.0",

src/legacy/ui/public/_index.scss

@@ -26,7 +26,6 @@
 @import './style_compile/index';
 
 // The following are prefixed with "vis"
-
 // Can't import vis folder here because of cascading issues, it's imported in core_plugins/kibana
 // @import './vis/index';
 @import './vislib/index';

src/legacy/ui/public/chrome/directives/header_global_nav/components/header.tsx

@@ -58,14 +58,13 @@ import { RecentlyAccessedHistoryItem } from 'ui/persisted_log';
 import { ChromeHeaderNavControlsRegistry } from 'ui/registry/chrome_header_nav_controls';
 import { relativeToAbsolute } from 'ui/url/relative_to_absolute';
 
-import { HeaderBadge } from './header_badge';
-import { HeaderBreadcrumbs } from './header_breadcrumbs';
-import { HeaderHelpMenu } from './header_help_menu';
-import { HeaderNavControls } from './header_nav_controls';
+import { Navbar } from '@logrhythm/nm-web-shared';
 
-import { NavControlSide } from '../';
 import { ChromeBadge, ChromeBreadcrumb, ChromeNavLink } from '../../../../../../../core/public';
 
+import 'tether';
+import 'bootstrap';
+
 interface Props {
   appTitle?: string;
   badge$: Rx.Observable<ChromeBadge | undefined>;
@@ -214,24 +213,13 @@ class HeaderUI extends Component<Props, State> {
   }
 
   public render() {
-    const {
-      appTitle,
-      badge$,
-      breadcrumbs$,
-      isVisible,
-      navControls,
-      helpExtension$,
-      intl,
-    } = this.props;
+    const { isVisible, intl } = this.props;
     const { navLinks, recentlyAccessed } = this.state;
 
     if (!isVisible) {
       return null;
     }
 
-    const leftNavControls = navControls.bySide[NavControlSide.Left];
-    const rightNavControls = navControls.bySide[NavControlSide.Right];
-
     const navLinksArray = navLinks
       .filter(navLink => !navLink.hidden)
       .map(navLink => ({
@@ -281,29 +269,7 @@ class HeaderUI extends Component<Props, State> {
 
     return (
       <Fragment>
-        <EuiHeader>
-          <EuiHeaderSection grow={false}>
-            <EuiShowFor sizes={['xs', 's']}>
-              <EuiHeaderSectionItem border="right">{this.renderMenuTrigger()}</EuiHeaderSectionItem>
-            </EuiShowFor>
-
-            <EuiHeaderSectionItem border="right">{this.renderLogo()}</EuiHeaderSectionItem>
-
-            <HeaderNavControls navControls={leftNavControls} />
-          </EuiHeaderSection>
-
-          <HeaderBreadcrumbs appTitle={appTitle} breadcrumbs$={breadcrumbs$} />
-
-          <HeaderBadge badge$={badge$} />
-
-          <EuiHeaderSection side="right">
-            <EuiHeaderSectionItem>
-              <HeaderHelpMenu helpExtension$={helpExtension$} />
-            </EuiHeaderSectionItem>
-
-            <HeaderNavControls navControls={rightNavControls} />
-          </EuiHeaderSection>
-        </EuiHeader>
+        <Navbar />
 
         <EuiNavDrawer ref={this.navDrawerRef} data-test-subj="navDrawer">
           <EuiNavDrawerGroup listItems={recentLinksArray} />

src/legacy/ui/public/styles/bootstrap_light.less

@@ -1,7 +1,7 @@
 //
 // COMPILER FOR BOOTSTRAP
 
-@import "~ui/styles/bootstrap/bootstrap_light";
+@import '~ui/styles/bootstrap/bootstrap_light';
 
 // Components -- waiting on EUI conversion
-@import "~ui/filter_bar/filter_bar";
+@import '~ui/filter_bar/filter_bar';

src/legacy/ui/public/styles/netmon.less

@@ -0,0 +1,17 @@
+@import '~@logrhythm/icons/icons.css';
+
+html {
+  font-size: 14px;
+}
+
+.nm-section,
+.ui-mask-wrapper {
+  font-family: Ubuntu, Tahoma, sans-serif;
+  line-height: 1.4;
+
+  .modal-footer .btn {
+    margin-left: 3px;
+  }
+
+  @import (less) '~lr-style/dist/lr-style.min.css';
+}

src/legacy/ui/ui_render/views/ui_app.pug

@@ -119,8 +119,8 @@ block content
       .kibanaLoader
       .kibanaWelcomeLogoCircle
         .kibanaWelcomeLogo
-    .kibanaWelcomeText(data-error-message=i18n('common.ui.welcomeErrorMessage', { defaultMessage: 'Kibana did not load properly. Check the server output for more information.' }))
-      | #{i18n('common.ui.welcomeMessage', { defaultMessage: 'Loading Kibana' })}
+    .kibanaWelcomeText(data-error-message=i18n('common.ui.welcomeErrorMessage', { defaultMessage: 'Netmon did not load properly. Check the server output for more information.' }))
+      | #{i18n('common.ui.welcomeMessage', { defaultMessage: 'Loading Netmon' })}
 
   .kibanaWelcomeView(id="kbn_legacy_browser_error", style="display: none;")
     .kibanaLoaderWrap
@@ -129,7 +129,7 @@ block content
     h2.kibanaWelcomeTitle
       | #{i18n('common.ui.legacyBrowserTitle', { defaultMessage: 'Please upgrade your browser' })}
     .kibanaWelcomeText
-      | #{i18n('common.ui.legacyBrowserMessage', { defaultMessage: 'This Kibana installation has strict security requirements enabled that your current browser does not meet.' })}
+      | #{i18n('common.ui.legacyBrowserMessage', { defaultMessage: 'This Netmon installation has strict security requirements enabled that your current browser does not meet.' })}
 
   script.
     // Since this script tag does not contain a nonce, this code will not run

webpackShims/bootstrap.js

@@ -0,0 +1 @@
+module.exports = require('../node_modules/bootstrap/dist/js/bootstrap.min');

webpackShims/tether.js

@@ -0,0 +1 @@
+window.Tether = module.exports = require('../node_modules/tether/dist/js/tether');