forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "Revert the Getting Started page (elastic#12154)"
This reverts commit 72292b2.
- Loading branch information
1 parent
c7c52be
commit 77ce80f
Showing
37 changed files
with
951 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'] | ||
} | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"name": "getting_started", | ||
"version": "kibana" | ||
} |
176 changes: 176 additions & 0 deletions
176
src/core_plugins/getting_started/public/components/getting_started/getting_started.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
58 changes: 58 additions & 0 deletions
58
src/core_plugins/getting_started/public/components/getting_started/getting_started.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
}; | ||
}); |
59 changes: 59 additions & 0 deletions
59
src/core_plugins/getting_started/public/components/getting_started/getting_started.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
1 change: 1 addition & 0 deletions
1
src/core_plugins/getting_started/public/components/getting_started/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import './getting_started'; |
1 change: 1 addition & 0 deletions
1
src/core_plugins/getting_started/public/components/injected_items/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import './injected_items'; |
1 change: 1 addition & 0 deletions
1
src/core_plugins/getting_started/public/components/injected_items/injected_items.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<div></div> |
38 changes: 38 additions & 0 deletions
38
src/core_plugins/getting_started/public/components/injected_items/injected_items.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} </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); | ||
}); | ||
} | ||
} | ||
}; | ||
}); |
3 changes: 3 additions & 0 deletions
3
src/core_plugins/getting_started/public/components/injected_items/injected_items.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.injectedItems__item { | ||
display: inline; | ||
} |
1 change: 1 addition & 0 deletions
1
src/core_plugins/getting_started/public/getting_started_route.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<getting-started></getting-started> |
14 changes: 14 additions & 0 deletions
14
src/core_plugins/getting_started/public/getting_started_route.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() { | ||
} | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
Oops, something went wrong.