diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 7ac29227001..69993927470 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -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; diff --git a/public/app/plugins/panel/gettingstarted/module.html b/public/app/plugins/panel/gettingstarted/module.html index 2086ffbfc0e..1be6f484b03 100644 --- a/public/app/plugins/panel/gettingstarted/module.html +++ b/public/app/plugins/panel/gettingstarted/module.html @@ -1,4 +1,4 @@ -
+
Getting Started with Grafana @@ -6,38 +6,30 @@
-
diff --git a/public/app/plugins/panel/gettingstarted/module.ts b/public/app/plugins/panel/gettingstarted/module.ts index e78203647c0..2e99bf29676 100644 --- a/public/app/plugins/panel/gettingstarted/module.ts +++ b/public/app/plugins/panel/gettingstarted/module.ts @@ -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() { diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index baad57157b2..03f5019ff8e 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -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; }