Getting Started page (#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

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';