IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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; tabIndex: number;
hasDashboards: boolean; hasDashboards: boolean;
editForm: any; editForm: any;
gettingStarted: boolean;
/** @ngInject */ /** @ngInject */
constructor( constructor(
@ -46,12 +47,23 @@ export class DataSourceEditCtrl {
if (this.$routeParams.id) { if (this.$routeParams.id) {
this.getDatasourceById(this.$routeParams.id); this.getDatasourceById(this.$routeParams.id);
} else { } else {
this.current = angular.copy(defaults); this.initNewDatasourceModel();
this.typeChanged();
} }
}); });
} }
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() { loadDatasourceTypes() {
if (datasourceTypes.length > 0) { if (datasourceTypes.length > 0) {
this.types = datasourceTypes; 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"> <div class="dashlist-section">
<h6 class="dashlist-section-header"> <h6 class="dashlist-section-header">
Getting Started with Grafana Getting Started with Grafana
@ -6,38 +6,30 @@
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</button> </button>
</h6> </h6>
<ul class="progress-tracker" ng-if="ctrl.checksDone"> <ul class="progress-tracker">
<li class="progress-step completed"> <li class="progress-step completed">
<span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span> <span class="progress-marker"><i class="icon-gf icon-gf-check"></i></span>
<span class="progress-text"><span class="gettingstarted-blurb-success">Install Grafana</span></span> <span class="progress-text">Install Grafana</span>
</li> </li>
<li class="progress-step active" ng-if="!ctrl.hasDatasources"> <li class="progress-step" ng-class="ctrl.getStateClass(2)">
<span class="progress-marker"><i class="icon-gf icon-gf-datasources gettingstarted-icon-active"></i></span> <span class="progress-marker"><i class="icon-gf icon-gf-datasources"></i></span>
<span class="progress-text"> <span class="progress-text">Create your first data source</span>
<a href="#" class="gettingstarted-blurb">Create your first data source.</a> <a class="btn progress-step-cta" href="datasources/new?gettingstarted">Add Data Source</a>
<button class="btn btn-success btn-small">Add Data Source</button>
</span>
</li> </li>
<li class="progress-step completed" ng-if="ctrl.hasDatasources"> <li class="progress-step" ng-class="ctrl.getStateClass(3)">
<span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span> <span class="progress-marker"><i class="icon-gf icon-gf-dashboard"></i></span>
<span class="progress-text"> <span class="progress-text">Create your first dashboard.</span>
<span class="gettingstarted-blurb-success">Create your first data source.</span> <a class="btn progress-step-cta" href="dashboard/new?gettingstarted">New Dashboard</a>
</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> </li>
<li class="progress-step"> <li class="progress-step">
<span class="progress-marker"><i class="icon-gf icon-gf-users gettingstarted-icon-upcoming"></i></span> <span class="progress-marker"><i class="icon-gf icon-gf-users"></i></span>
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Invite your team.</a></span> <span class="progress-text">Invite your team.</span>
<a class="btn progress-step-cta" href="org/users?gettingstarted">Invite Users</a>
</li> </li>
<li class="progress-step"> <li class="progress-step">
<span class="progress-marker"><i class="icon-gf icon-gf-apps gettingstarted-icon-upcoming"></i></span> <span class="progress-marker"><i class="icon-gf icon-gf-apps"></i></span>
<span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Install apps & plugins</a></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> </li>
</ul> </ul>
</div> </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 { class GettingStartedPanelCtrl extends PanelCtrl {
static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html'; static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html';
hasDatasources: boolean;
checksDone: boolean; checksDone: boolean;
step: number;
/** @ngInject **/ /** @ngInject **/
constructor($scope, $injector, private backendSrv, private datasourceSrv) { constructor($scope, $injector, private backendSrv, private datasourceSrv) {
@ -24,8 +24,28 @@ class GettingStartedPanelCtrl extends PanelCtrl {
return item.meta.builtIn === false; return item.meta.builtIn === false;
}); });
this.hasDatasources = datasources.length > 0; this.step = 2;
this.checksDone = true; 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() { 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 { .gettingstarted-blurb-success {
@extend .gettingstarted-blurb-copy; @extend .gettingstarted-blurb-copy;
color: $text-color-weak; color: $text-color-weak;
text-decoration: line-through;
} }
.gettingstarted-blurb-upcoming { .gettingstarted-blurb-upcoming {
@ -40,19 +39,6 @@ $path-position: $marker-size-half - ($path-height / 2);
color: $text-color-weak; 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 { .dashlist-cta-close-btn {
color: $text-color-weak; color: $text-color-weak;
@ -81,20 +67,18 @@ $path-position: $marker-size-half - ($path-height / 2);
// Step container that creates lines between steps // Step container that creates lines between steps
.progress-step { .progress-step {
display: block; text-align: center;
position: relative; position: relative;
flex: 1 1 0%; flex: 1 1 0%;
margin: 0; margin: 0;
padding: 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 // For a flexbox bug in firefox that wont allow the text overflow on the text
&:last-child { min-width: $marker-size;
flex-grow: 0;
}
// Path between markers, this is not created for the last step &::after {
&:not(:last-child)::after { right: -50%;
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -104,19 +88,48 @@ $path-position: $marker-size-half - ($path-height / 2);
right: - $marker-size-half; right: - $marker-size-half;
width: 100%; width: 100%;
height: $path-height; height: $path-height;
background: $progress-color-grey-light;
}
&:last-child {
&::after {
right: 50%;
}
} }
// Active state // Active state
&.active { &.active {
.progress-step-cta {
display: inline-block;
}
.progress-title { .progress-title {
font-weight: 400; font-weight: 400;
} }
} }
> a { &.completed {
display: block; .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 // Progress marker
@ -130,9 +143,13 @@ $path-position: $marker-size-half - ($path-height / 2);
padding-bottom: 2px; // To align text within the marker padding-bottom: 2px; // To align text within the marker
z-index: 20; z-index: 20;
background-color: $panel-bg; background-color: $panel-bg;
margin-left: auto;
margin-right: auto;
color: $text-color-weak;
font-size: 35px;
vertical-align: sub;
} }
// Progress text // Progress text
.progress-text { .progress-text {
display: block; display: block;
@ -141,56 +158,11 @@ $path-position: $marker-size-half - ($path-height / 2);
text-overflow: ellipsis; 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 { .progress-marker {
margin-left: auto; color: $text-color-weak;
margin-right: auto; text-decoration:none;
font-size: 35px;
vertical-align: sub;
} }