IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-20 11:48:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(gettingstarted): progress on getting started panel, #6466

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-11-18 16:31:19 +01:00
parent 18a37a9eef
commit 0c9001c7ae
4 changed files with 102 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/plugins/ds_edit_ctrl.ts
View File

@ -28,6 +28,7 @@ export class DataSourceEditCtrl {
tabIndex: number;
hasDashboards: boolean;
editForm: any;
gettingStarted: boolean;
/** @ngInject */
constructor(
@ -46,12 +47,23 @@ export class DataSourceEditCtrl {
if (this.$routeParams.id) {
this.getDatasourceById(this.$routeParams.id);
} else {
this.current = angular.copy(defaults);
this.typeChanged();
this.initNewDatasourceModel();
}
});
}
initNewDatasourceModel() {
this.current = angular.copy(defaults);
// We are coming from getting started
if (this.$location.search().gettingstarted) {
this.gettingStarted = true;
this.current.isDefault = true;
}
this.typeChanged();
}
loadDatasourceTypes() {
if (datasourceTypes.length > 0) {
this.types = datasourceTypes;

44
public/app/plugins/panel/gettingstarted/module.html
View File

@ -1,4 +1,4 @@
<div class="dashlist">
<div class="dashlist" ng-if="ctrl.checksDone">
<div class="dashlist-section">
<h6 class="dashlist-section-header">
Getting Started with Grafana
@ -6,38 +6,30 @@
<i class="fa fa-remove"></i>
</button>
</h6>
<ul class="progress-tracker" ng-if="ctrl.checksDone">
<ul class="progress-tracker">
<li class="progress-step completed">
<span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span>
<span class="progress-text"><span class="gettingstarted-blurb-success">Install Grafana</span></span>
<span class="progress-marker"><i class="icon-gf icon-gf-check"></i></span>
<span class="progress-text">Install Grafana</span>
</li>
<li class="progress-step active" ng-if="!ctrl.hasDatasources">
<span class="progress-marker"><i class="icon-gf icon-gf-datasources gettingstarted-icon-active"></i></span>
<span class="progress-text">
<a href="#" class="gettingstarted-blurb">Create your first data source.</a>
<button class="btn btn-success btn-small">Add Data Source</button>
</span>
<li class="progress-step" ng-class="ctrl.getStateClass(2)">
<span class="progress-marker"><i class="icon-gf icon-gf-datasources"></i></span>
<span class="progress-text">Create your first data source</span>
<a class="btn progress-step-cta" href="datasources/new?gettingstarted">Add Data Source</a>
</li>
<li class="progress-step completed" ng-if="ctrl.hasDatasources">
<span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span>
<span class="progress-text">
<span class="gettingstarted-blurb-success">Create your first data source.</span>
</span>
</li>
<li class="progress-step active" ng-if="ctrl.hasDatasources">
<span class="progress-marker"><i class="icon-gf icon-gf-dashboard gettingstarted-icon-upcoming"></i></span>
<span class="progress-text">
<a href="#" class="gettingstarted-blurb-upcoming">Create your first dashboard.</a>
<button class="btn btn-success btn-small">Add Data Source</button>
</span>
<li class="progress-step" ng-class="ctrl.getStateClass(3)">
<span class="progress-marker"><i class="icon-gf icon-gf-dashboard"></i></span>
<span class="progress-text">Create your first dashboard.</span>
<a class="btn progress-step-cta" href="dashboard/new?gettingstarted">New Dashboard</a>
</li>
<li class="progress-step">
<span class="progress-marker"><i class="icon-gf icon-gf-users gettingstarted-icon-upcoming"></i></span>
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Invite your team.</a></span>
<span class="progress-marker"><i class="icon-gf icon-gf-users"></i></span>
<span class="progress-text">Invite your team.</span>
<a class="btn progress-step-cta" href="org/users?gettingstarted">Invite Users</a>
</li>
<li class="progress-step">
<span class="progress-marker"><i class="icon-gf icon-gf-apps gettingstarted-icon-upcoming"></i></span>
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Install apps & plugins</a></span>
<span class="progress-marker"><i class="icon-gf icon-gf-apps"></i></span>
<span class="progress-text">Install apps &amp; plugins</span>
<a class="btn progress-step-cta" href="https://grafana.net/plugins?utm_source=grafana_getting_started">Explore Plugins</a>
</li>
</ul>
</div>

26
public/app/plugins/panel/gettingstarted/module.ts
View File

@ -6,8 +6,8 @@ import {contextSrv} from 'app/core/core';
class GettingStartedPanelCtrl extends PanelCtrl {
static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html';
hasDatasources: boolean;
checksDone: boolean;
step: number;
/** @ngInject **/
constructor($scope, $injector, private backendSrv, private datasourceSrv) {
@ -24,8 +24,28 @@ class GettingStartedPanelCtrl extends PanelCtrl {
return item.meta.builtIn === false;
});
this.hasDatasources = datasources.length > 0;
this.checksDone = true;
this.step = 2;
if (datasources.length === 0) {
this.checksDone = true;
return;
}
this.step = 3;
this.backendSrv.search({limit: 1}).then(result => {
if (result.length === 0) {
this.checksDone = true;
return;
}
this.step = 4;
this.checksDone = true;
});
}
getStateClass(step) {
if (step === this.step) { return 'active'; }
if (step < this.step) { return 'completed'; }
return '';
}
dismiss() {

122
public/sass/components/_panel_gettingstarted.scss
View File

@ -32,7 +32,6 @@ $path-position: $marker-size-half - ($path-height / 2);
.gettingstarted-blurb-success {
@extend .gettingstarted-blurb-copy;
color: $text-color-weak;
text-decoration: line-through;
}
.gettingstarted-blurb-upcoming {
@ -40,19 +39,6 @@ $path-position: $marker-size-half - ($path-height / 2);
color: $text-color-weak;
}
.gettingstarted-icon-upcoming {
color: $text-color-weak;
text-decoration:none;
font-size: 35px;
vertical-align: sub;
}
.gettingstarted-icon-success {
color: $online;
font-size: 35px;
text-decoration:none;
vertical-align: sub;
}
.dashlist-cta-close-btn {
color: $text-color-weak;
@ -81,20 +67,18 @@ $path-position: $marker-size-half - ($path-height / 2);
// Step container that creates lines between steps
.progress-step {
display: block;
text-align: center;
position: relative;
flex: 1 1 0%;
margin: 0;
padding: 0;
min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text
color: $text-color-weak;
// Stops the last step growing
&:last-child {
flex-grow: 0;
}
// For a flexbox bug in firefox that wont allow the text overflow on the text
min-width: $marker-size;
// Path between markers, this is not created for the last step
&:not(:last-child)::after {
&::after {
right: -50%;
content: '';
display: block;
position: absolute;
@ -104,19 +88,48 @@ $path-position: $marker-size-half - ($path-height / 2);
right: - $marker-size-half;
width: 100%;
height: $path-height;
background: $progress-color-grey-light;
}
&:last-child {
&::after {
right: 50%;
}
}
// Active state
&.active {
.progress-step-cta {
display: inline-block;
}
.progress-title {
font-weight: 400;
}
}
> a {
display: block;
}
&.completed {
.progress-marker {
color: $online;
// change icon to check
.icon-gf::before {
content: "\e604";
}
}
.progress-text {
text-decoration: line-through;
}
&::after {
background: $progress-color-grey;
}
}
}
.progress-step-cta {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
display: none;
}
// Progress marker
@ -130,9 +143,13 @@ $path-position: $marker-size-half - ($path-height / 2);
padding-bottom: 2px; // To align text within the marker
z-index: 20;
background-color: $panel-bg;
margin-left: auto;
margin-right: auto;
color: $text-color-weak;
font-size: 35px;
vertical-align: sub;
}
// Progress text
.progress-text {
display: block;
@ -141,56 +158,11 @@ $path-position: $marker-size-half - ($path-height / 2);
text-overflow: ellipsis;
}
.progress-title {
margin-top: 0;
}
@mixin progress-state($marker-color-bg, $marker-color-border: null, $marker-color-text: null, $path-color: null, $text-color: null) {
.progress-marker {
color: $marker-color-text;
background-color: $marker-color-bg;
border-color: $marker-color-border;
}
&::after {
background-color: $path-color;
}
.progress-text,
.progress-text a {
color: $text-color;
}
}
// States
.progress-step {
text-align: center;
// Active state
&.active {
@include progress-state($progress-color);
}
&.completed {
@include progress-state($progress-color-dark, $path-color: $progress-color-grey);
}
&:hover {
@include progress-state($progress-color-light);
}
&:last-child {
flex-grow: 1;
}
&::after {
right: -50%;
}
}
.progress-marker {
margin-left: auto;
margin-right: auto;
color: $text-color-weak;
text-decoration:none;
font-size: 35px;
vertical-align: sub;
}