Skip to content

Commit

Permalink
Revert "Revert the Getting Started page (elastic#12154)"
Browse files Browse the repository at this point in the history
This reverts commit 72292b2.
  • Loading branch information
PopradiArpad committed Jun 6, 2017
1 parent c7c52be commit 77ce80f
Show file tree
Hide file tree
Showing 37 changed files with 951 additions and 67 deletions.
8 changes: 8 additions & 0 deletions src/core_plugins/getting_started/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function (kibana) {

return new kibana.Plugin({
uiExports: {
managementSections: ['plugins/getting_started']
}
});
}
4 changes: 4 additions & 0 deletions src/core_plugins/getting_started/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "getting_started",
"version": "kibana"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<div
class="kuiViewContent gettingStartedContent"
data-test-subj="gettingStartedContainer"
>
<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
ng-if="!gettingStarted.hasOptedOut()"
class="kuiViewContentItem kuiVerticalRhythm"
>
<div class="kuiFieldGroup">
<div class="kuiFieldGroupSection">
<a
class="kuiButton kuiButton--primary"
kbn-href="#/management"
kbn-getting-started-opt-out
data-test-subj="lnkGettingStartedOptOut"
>
<span class="kuiButton__inner">
<span>Got it, take me to Kibana</span>
</span>
</a>
</div>
</div>
</div>

<div class="kuiViewContentItem kuiVerticalRhythm">
<p class="kuiText">
Just want to see what Kibana is capable of doing?
<a
ng-href="{{ gettingStarted.documentationLinks.demoSite }}"
class="kuiLink"
target="_blank"
>View the demo site</a>.
</p>
</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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { uiModules } from 'ui/modules';
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() {
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;
}
};
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
.gettingStartedContent {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0;
}

.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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './getting_started';
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './injected_items';
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div></div>
Original file line number Diff line number Diff line change
@@ -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);
});
}
}
};
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.injectedItems__item {
display: inline;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<getting-started></getting-started>
14 changes: 14 additions & 0 deletions src/core_plugins/getting_started/public/getting_started_route.js
Original file line number Diff line number Diff line change
@@ -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() {
}
}
});
3 changes: 3 additions & 0 deletions src/core_plugins/getting_started/public/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import './lib/add_setup_work';
import './lib/register_management_section';
import './getting_started_route';
Loading

0 comments on commit 77ce80f

Please sign in to comment.