Getting Started page (elastic#11805)

* Getting Started page (elastic#11673)

* Initial code

* Renaming files/folders

* Notes and changes from HTML/CSS review

* CSS changes

* Fixing transform units

* Fleshing out logo circle

* Adding logos

* Un-nesting styles

* Adding kuiText class on <p> elements

* Making shield icon 404 go away

* Using trustAsHtml filter; using registry

* Adding code for registry

* Adding images

* Hooking up the opt-out link

* Fixing linter issues

* Fix issue with refresh bringing back nav

* Removing load_default module

* Use GETTING_STARTED_ROUTE constant

* Allow topMessage to be a directive

* Adding kuiLink CSS class to anchor elements

* Adding alt text to images

* Replace getters with regular methods

* Remove leftover comment

* Removing unnecessary comment

* Fixing typo in comment

* Adding comments for message properties

* Fixing typo in method name

* Defining custom CSS class

* Fixing method call

* Creating custom CSS classes

* Adding documentation links

* Use a instead of button for demo link

* Allow directives in manage and monitor messages

* Refactoring shared code into single ui/public/getting_started folder

* Adding README

* Fixing whitespace in/around links

* Trim messages before setting them

* Decorate in-app links with opt-out attribute

* Opt out of the Getting Started page if the user already has index patterns

* Adding more commentary around expectations of setTopMessage use

* Using ng-src and ng-href attributes where attr values are angular expressions

* Importing the directive before using it

* Using ui/registry for message registries

* Renaming service => helpers to clarify intent

* Adding explanatory comment

* Adding "or"

* Fixing div id

* Breaks out the inject logic into another directive

* Adding Getting Started page object for functional tests

* Consolidate into one registry

* Fixes incorrect classes

* Changes how styles are applied to injected-items items

* Modifying class name per CSS style guide

* Adding getting started doc link

* Removing unused import

* Attempting to fix breaking build

Apparently the Getting Started page is preventing access to Console (Dev Tools, really) so the functional tests for Console are failing. This commit opts the user out of the Getting Started page before attempting to navigate to Console.

* Cleanup on aisle testbed! (elastic#11765)

* Navigate to getting started page so we can opt out of it

src/core_plugins/getting_started/index.js

@@ -0,0 +1,8 @@
+export default function (kibana) {
+
+  return new kibana.Plugin({
+    uiExports: {
+      managementSections: ['plugins/getting_started']
+    }
+  });
+}

src/core_plugins/getting_started/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "getting_started",
+  "version": "kibana"
+}

src/core_plugins/getting_started/public/components/getting_started/getting_started.html

@@ -0,0 +1,179 @@
+<div class="kuiViewContent gettingStartedContent">
+
+  <div
+    ng-if="!gettingStarted.hasOptedOut()"
+    class="kuiBar gettingStartedOptOutContent"
+  >
+    <div class="kuiBarSection">
+      <p class="kuiText kuiSubduedText">
+        <a
+          kbn-href="#/management"
+          class="kuiLink"
+          kbn-getting-started-opt-out
+          data-test-subj="lnkGettingStartedOptOut"
+        >I'm a pro, skip this stuff &gt;</a>
+      </p>
+    </div>
+  </div>
+
+  <div class="kuiViewContentItem kuiVerticalRhythm gettingStartedWelcome">
+    <h1 class="kuiTitle gettingStartedTitle">
+      Welcome to Kibana
+    </h1>
+  </div>
+
+  <div class="kuiViewContentItem kuiVerticalRhythm gettingStartedLogo">
+    <img
+      ng-src="{{ gettingStarted.imageUrls.kibanaLogo }}"
+      alt="Kibana logo"
+    />
+  </div>
+
+  <div class="kuiViewContentItem kuiVerticalRhythm">
+    <injected-items items="gettingStarted.topMessages"></injected-items>
+  </div>
+
+  <div class="kuiViewContentItem kuiVerticalRhythm">
+    <div class="kuiCardGroup kuiCardGroup">
+      <div class="kuiCard kuiCardGroup__card gettingStartedCard">
+        <div class="kuiCard__description">
+          <div class="kuiCard__descriptionTitle">
+            <h2 class="kuiSubTitle">
+              First, add your data
+            </h2>
+          </div>
+
+          <div class="kuiCard__descriptionText gettingStartedCard__descriptionText">
+            <div class="gettingStartedLogoRow">
+              <img
+                class="gettingStartedLogoRow__logo"
+                ng-src="{{ gettingStarted.imageUrls.beatsLogo }}"
+                alt="Beats logo"
+              />
+              <img
+                class="gettingStartedLogoRow__logo"
+                ng-src="{{ gettingStarted.imageUrls.logstashLogo }}"
+                alt="Logstash logo"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="kuiCard__footer">
+          <p class="kuiText">
+            Pull in data from the
+            <a
+              ng-href="{{ gettingStarted.documentationLinks.elasticsearch.docs }}"
+              class="kuiLink"
+              target="_blank"
+            >Elasticsearch API</a>,
+            <a
+              ng-href="{{ gettingStarted.documentationLinks.beats.docs }}"
+              class="kuiLink"
+              target="_blank"
+            >Beats</a>, or
+            <a
+              ng-href="{{ gettingStarted.documentationLinks.logstash.docs }}"
+              class="kuiLink"
+              target="_blank"
+            >Logstash</a>.
+            Not sure how to do that?
+            <a
+              ng-href="{{ gettingStarted.documentationLinks.gettingStarted }}"
+              class="kuiLink"
+              target="_blank"
+            >Read this introduction.</a>
+          </p>
+        </div>
+      </div>
+
+      <div class="kuiCard kuiCardGroup__card gettingStartedCard">
+        <div class="kuiCard__description">
+          <div class="kuiCard__descriptionTitle">
+            <h2 class="kuiSubTitle">
+              Visualize and explore
+            </h2>
+          </div>
+
+          <div class="kuiCard__descriptionText gettingStartedCard__descriptionText">
+            <div class="gettingStartedLogoRow">
+              <img
+                class="gettingStartedLogoRow__logo"
+                ng-src="{{ gettingStarted.imageUrls.dashboardIcon }}"
+                alt="Dashboard icon"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="kuiCard__footer">
+          <p class="kuiText">Once you've added data, you'll need to
+          <a
+            href="#/management/kibana/index"
+            class="kuiLink"
+            kbn-getting-started-opt-out
+          >configure an index pattern</a>
+          for your data before using our Discover and Visualize applications.</p>
+        </div>
+      </div>
+
+      <div
+        class="kuiCard kuiCardGroup__card gettingStartedCard"
+        ng-show="gettingStarted.hasManageAndMonitorMessages()"
+      >
+        <div class="kuiCard__description">
+          <div class="kuiCard__descriptionTitle">
+            <h2 class="kuiSubTitle">
+              Manage and monitor
+            </h2>
+          </div>
+
+          <div class="kuiCard__descriptionText gettingStartedCard__descriptionText">
+            <div class="gettingStartedLogoRow">
+              <img
+                class="gettingStartedLogoRow__logo"
+                ng-src="{{ gettingStarted.imageUrls.shieldIcon }}"
+                alt="Shield icon"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="kuiCard__footer">
+          <injected-items items="gettingStarted.manageAndMonitorMessages"></injected-items>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiViewContentItem kuiVerticalRhythm">
+    <div class="kuiFieldGroup">
+      <div class="kuiFieldGroupSection">
+        <p class="kuiText">Just want to see what Kibana is capable of doing?</p>
+      </div>
+
+      <div class="kuiFieldGroupSection">
+        <a
+          class="kuiButton kuiButton--primary"
+          ng-href="{{ gettingStarted.documentationLinks.demoSite }}"
+          target="_blank"
+        >
+          <span class="kuiButton__inner">
+            <span>View the demo site</span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiViewContentItem kuiVerticalRhythm">
+    <p class="kuiText">
+      <a
+        ng-href="{{ gettingStarted.documentationLinks.kibana.docs }}"
+        class="kuiLink"
+        target="_blank"
+      >Kibana documentation</a>
+      is always available to help.
+    </p>
+  </div>
+</div>

src/core_plugins/getting_started/public/components/getting_started/getting_started.js

@@ -0,0 +1,65 @@
+import { uiModules } from 'ui/modules';
+import uiChrome from 'ui/chrome';
+import 'ui/getting_started/opt_out_directive';
+import { GettingStartedRegistryProvider } from 'ui/getting_started/registry';
+import { GETTING_STARTED_REGISTRY_TYPES } from 'ui/getting_started/constants';
+import { hasOptedOutOfGettingStarted } from 'ui/getting_started/opt_out_helpers';
+import { documentationLinks } from 'ui/documentation_links';
+
+import kibanaLogo from 'ui/images/logo-kibana-small.svg';
+import beatsLogo from 'ui/images/logo-beats-small.svg';
+import logstashLogo from 'ui/images/logo-logstash-small.svg';
+import dashboardIcon from 'ui/images/icon-dashboard.svg';
+import shieldIcon from 'ui/images/icon-shield.svg';
+
+import template from './getting_started.html';
+import './getting_started.less';
+import '../injected_items';
+
+const app = uiModules.get('kibana');
+
+app.directive('gettingStarted', function ($injector) {
+  const Private = $injector.get('Private');
+
+  const registry = Private(GettingStartedRegistryProvider);
+
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {
+    },
+    bindToController: true,
+    controllerAs: 'gettingStarted',
+    controller: class GettingStartedController {
+      constructor() {
+        if (this.hasOptedOut()) {
+          uiChrome.setVisible(true);
+        } else {
+          uiChrome.setVisible(false);
+        }
+
+        const registeredTopMessages = registry.byType[GETTING_STARTED_REGISTRY_TYPES.TOP_MESSAGE] || [];
+        this.topMessages = registeredTopMessages.map(item => item.template);
+
+        const registeredManageAndMonitorMessages = registry.byType[GETTING_STARTED_REGISTRY_TYPES.MANAGE_AND_MONITOR_MESSAGE] || [];
+        this.manageAndMonitorMessages = registeredManageAndMonitorMessages.map(item => item.template);
+
+        this.imageUrls = {
+          kibanaLogo,
+          beatsLogo,
+          logstashLogo,
+          dashboardIcon,
+          shieldIcon
+        };
+
+        this.documentationLinks = documentationLinks;
+      }
+
+      hasManageAndMonitorMessages = () => {
+        return this.manageAndMonitorMessages.length > 0;
+      }
+
+      hasOptedOut = hasOptedOutOfGettingStarted;
+    }
+  };
+});

src/core_plugins/getting_started/public/components/getting_started/getting_started.less

@@ -0,0 +1,65 @@
+.gettingStartedContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 0;
+}
+
+.gettingStartedOptOutContent {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+}
+
+.gettingStartedWelcome {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  width: 100%;
+  background-color: #f7f7f7;
+}
+
+.gettingStartedTitle {
+  transform: translateY(10px);
+}
+
+.gettingStartedLogo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid #D7DBDD;
+  width: 100px;
+  height: 100px;
+  border-radius: 100%;
+
+  background-color: #ffffff;
+
+  transform: translateY(-60px);
+}
+
+.gettingStartedLogoRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.gettingStartedLogoRow__logo {
+  height: 80px;
+
+  & + & {
+    margin-left: 40px;
+  }
+}
+
+.gettingStartedCard__descriptionText {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.gettingStartedCard {
+  width: 340px;  
+}

src/core_plugins/getting_started/public/components/getting_started/index.js

@@ -0,0 +1 @@
+import './getting_started';

src/core_plugins/getting_started/public/components/injected_items/index.js

@@ -0,0 +1 @@
+import './injected_items';

src/core_plugins/getting_started/public/components/injected_items/injected_items.html

@@ -0,0 +1 @@
+<div></div>

src/core_plugins/getting_started/public/components/injected_items/injected_items.js

@@ -0,0 +1,38 @@
+import { isArray } from 'lodash';
+import { uiModules } from 'ui/modules';
+import angular from 'angular';
+
+import template from './injected_items.html';
+import './injected_items.less';
+
+function makeAngularParseableExpression(item) {
+  return `<div class="injectedItems__item">${item}&nbsp;</div>`;
+}
+
+const app = uiModules.get('kibana');
+
+app.directive('injectedItems', function ($injector) {
+  const $compile = $injector.get('$compile');
+
+  return {
+    restrict: 'E',
+    replace: true,
+    template: template,
+    scope: {
+      items: '='
+    },
+    link: ($scope, $el) => {
+      const items = $scope.items;
+
+      if (isArray(items) && items.length > 0) {
+        items.forEach(item => {
+          // Compile itemHtml with current $scope and append it into the container DOM element.
+          // We do this because we want to dynamically inject content (strings) into the DOM. This content
+          // may contain Angular directives so it must first be $compiled with the current $scope.
+          const itemHtml = $compile(makeAngularParseableExpression(item))($scope);
+          angular.element($el).append(itemHtml);
+        });
+      }
+    }
+  };
+});

src/core_plugins/getting_started/public/components/injected_items/injected_items.less

@@ -0,0 +1,3 @@
+.injectedItems__item {
+  display: inline;
+}

src/core_plugins/getting_started/public/getting_started_route.html

@@ -0,0 +1 @@
+<getting-started></getting-started>

src/core_plugins/getting_started/public/getting_started_route.js

@@ -0,0 +1,14 @@
+import routes from 'ui/routes';
+import template from './getting_started_route.html';
+import './components/getting_started';
+import { GETTING_STARTED_ROUTE } from './lib/constants';
+
+routes
+.when(GETTING_STARTED_ROUTE, {
+  template: template,
+  controllerAs: 'gettingStartedRoute',
+  controller: class GettingStartedRouteController {
+    constructor() {
+    }
+  }
+});

src/core_plugins/getting_started/public/index.js

@@ -0,0 +1,3 @@
+import './lib/add_setup_work';
+import './lib/register_management_section';
+import './getting_started_route';