feat(ux): completed work on getting started panel, #6466

pkg/api/dashboard.go

@@ -8,6 +8,7 @@ import (
 
 	"github.com/grafana/grafana/pkg/api/dtos"
 	"github.com/grafana/grafana/pkg/bus"
+	"github.com/grafana/grafana/pkg/components/simplejson"
 	"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/metrics"
 	"github.com/grafana/grafana/pkg/middleware"
@@ -216,9 +217,28 @@ func GetHomeDashboard(c *middleware.Context) Response {
 		return ApiError(500, "Failed to load home dashboard", err)
 	}
 
+	if c.HasUserRole(m.ROLE_ADMIN) && !c.HasHelpFlag(m.HelpFlagGettingStartedPanelDismissed) {
+		addGettingStartedPanelToHomeDashboard(dash.Dashboard)
+	}
+
 	return Json(200, &dash)
 }
 
+func addGettingStartedPanelToHomeDashboard(dash *simplejson.Json) {
+	rows := dash.Get("rows").MustArray()
+	row := simplejson.NewFromAny(rows[0])
+
+	newpanel := simplejson.NewFromAny(map[string]interface{}{
+		"type": "gettingstarted",
+		"id":   123123,
+		"span": 12,
+	})
+
+	panels := row.Get("panels").MustArray()
+	panels = append(panels, newpanel)
+	row.Set("panels", panels)
+}
+
 func GetDashboardFromJsonFile(c *middleware.Context) {
 	file := c.Params(":file")
 

pkg/api/frontendsettings.go

@@ -127,6 +127,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
 			"name":         panel.Name,
 			"id":           panel.Id,
 			"info":         panel.Info,
+			"hideFromList": panel.HideFromList,
 			"sort":         getPanelSort(panel.Id),
 		}
 	}

pkg/middleware/middleware.go

@@ -229,6 +229,10 @@ func (ctx *Context) HasUserRole(role m.RoleType) bool {
 	return ctx.OrgRole.Includes(role)
 }
 
+func (ctx *Context) HasHelpFlag(flag m.HelpFlags1) bool {
+	return ctx.HelpFlags1.HasFlag(flag)
+}
+
 func (ctx *Context) TimeRequest(timer metrics.Timer) {
 	ctx.Data["perfmon.timer"] = timer
 }

pkg/plugins/models.go

@@ -38,6 +38,7 @@ type PluginBase struct {
 	Includes     []*PluginInclude   `json:"includes"`
 	Module       string             `json:"module"`
 	BaseUrl      string             `json:"baseUrl"`
+	HideFromList bool               `json:"hideFromList"`
 
 	IncludedInAppId string `json:"-"`
 	PluginDir       string `json:"-"`

public/app/features/dashboard/row/add_panel.ts

@@ -18,9 +18,15 @@ export class AddPanelCtrl {
   constructor(private $scope, private $timeout, private $rootScope) {
     this.row = this.rowCtrl.row;
     this.dashboard = this.rowCtrl.dashboard;
-    this.allPanels = _.orderBy(_.map(config.panels, item => item), 'sort');
-    this.panelHits = this.allPanels;
     this.activeIndex = 0;
+
+    this.allPanels = _.chain(config.panels)
+      .filter({hideFromList: false})
+      .map(item => item)
+      .orderBy('sort')
+      .value();
+
+    this.panelHits = this.allPanels;
   }
 
   keyDown(evt) {

public/app/plugins/panel/gettingstarted/module.ts

@@ -14,44 +14,9 @@ class GettingStartedPanelCtrl extends PanelCtrl {
   constructor($scope, $injector, private backendSrv, private datasourceSrv, private $q) {
     super($scope, $injector);
 
-    /* tslint:disable */
-    if (contextSrv.user.helpFlags1 & 1) {
-      this.row.removePanel(this.panel, false);
-      return;
-    }
-    /* tslint:enable */
-
     this.stepIndex = 0;
     this.steps = [];
 
-    if (!contextSrv.hasRole('Admin')) {
-      this.steps.push({
-        cta: 'Basic Concepts Guide',
-        icon: 'fa fa-file-text-o',
-        href: 'http://docs.grafana.org/guides/basic_concepts/',
-        check: () => $q.when(false),
-        cssClass: 'active',
-      });
-
-      this.steps.push({
-        cta: 'Getting Started Guide',
-        icon: 'fa fa-file-text-o',
-        href: 'http://docs.grafana.org/guides/getting_started/',
-        check: () => $q.when(false),
-        cssClass: 'active',
-      });
-
-      this.steps.push({
-        cta: 'Building a dashboard',
-        icon: 'fa fa-film',
-        href: 'http://docs.grafana.org/tutorials/screencasts/',
-        check: () => $q.when(false),
-        cssClass: 'active',
-      });
-
-      return;
-    }
-
     this.steps.push({
       title: 'Install Grafana',
       icon: 'icon-gf icon-gf-check',
@@ -114,7 +79,6 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.stepIndex = -1;
     return this.nextStep().then(res => {
       this.checksDone = true;
-      console.log(this.steps);
     });
   }
 

public/app/plugins/panel/gettingstarted/plugin.json

@@ -3,6 +3,8 @@
   "name": "Getting Started",
   "id": "gettingstarted",
 
+  "hideFromList": true,
+
   "info": {
     "author": {
       "name": "Grafana Project",

public/dashboards/home.json

@@ -9,7 +9,7 @@
   "sharedCrosshair": false,
   "rows": [
    {
-      "title": "Row title",
+      "title": "Home Dashboard",
       "collapse": false,
       "editable": true,
       "height": "25px",
@@ -25,14 +25,6 @@
           "title": "",
           "transparent": true,
           "type": "text"
-        },
-        {
-          "id": 8,
-          "links": [],
-          "span": 12,
-          "title": "",
-          "transparent": false,
-          "type": "gettingstarted"
         }
      ]
    },

public/sass/components/_panel_gettingstarted.scss

@@ -90,7 +90,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
     .progress-text {
       display: none;
     }
-
     .progress-marker {
       .icon-gf {
         color: $brand-primary;
@@ -113,9 +112,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
     }
     .progress-text {
       text-decoration: line-through;
-      &:hover {
-        color: $text-color-weak;
-      }
     }
     &::after {
       background: $progress-color-grey-light;