newgrid: fixes to default home dashboard

pkg/api/dashboard.go

@@ -275,18 +275,19 @@ func GetHomeDashboard(c *middleware.Context) Response {
 }
 
 func addGettingStartedPanelToHomeDashboard(dash *simplejson.Json) {
-	rows := dash.Get("rows").MustArray()
-	row := simplejson.NewFromAny(rows[0])
+	panels := dash.Get("panels").MustArray()
 
 	newpanel := simplejson.NewFromAny(map[string]interface{}{
-		"type": "gettingstarted",
-		"id":   123123,
-		"span": 12,
+		"type":   "gettingstarted",
+		"id":     123123,
+		"x":      0,
+		"y":      3,
+		"width":  12,
+		"height": 4,
 	})
 
-	panels := row.Get("panels").MustArray()
 	panels = append(panels, newpanel)
-	row.Set("panels", panels)
+	dash.Set("panels", panels)
 }
 
 // GetDashboardVersions returns all dashboard versions as JSON

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

@@ -1,19 +1,16 @@
 <div class="dashlist" ng-if="ctrl.checksDone">
   <div class="dashlist-section">
-    <h6 class="dashlist-section-header">
-      Getting Started with Grafana
-      <button class="dashlist-cta-close-btn" ng-click="ctrl.dismiss()">
-        <i class="fa fa-remove"></i>
-      </button>
-    </h6>
-    <ul class="progress-tracker">
-      <li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
-        <a class="progress-link" ng-href="{{step.href}}" target="{{step.target}}" title="{{step.note}}">
-          <span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
-          <span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
-        </a>
-        <a class="btn progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
-      </li>
-    </ul>
-  </div>
+		<button class="dashlist-cta-close-btn" ng-click="ctrl.dismiss()">
+			<i class="fa fa-remove"></i>
+		</button>
+		<ul class="progress-tracker">
+			<li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
+				<a class="progress-link" ng-href="{{step.href}}" target="{{step.target}}" title="{{step.note}}">
+					<span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
+					<span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
+				</a>
+				<a class="btn progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
+			</li>
+		</ul>
+	</div>
 </div>

public/dashboards/home.json

@@ -1,68 +1,70 @@
 {
-  "id": null,
-  "title": "Home",
-  "tags": [],
-  "style": "dark",
-  "timezone": "browser",
+  "annotations": {
+    "list": []
+  },
   "editable": true,
+  "folderId": null,
+  "gnetId": null,
+  "graphTooltip": 0,
   "hideControls": true,
-  "sharedCrosshair": false,
-  "rows": [
-   {
-      "title": "Home Dashboard",
-      "collapse": false,
+  "id": null,
+  "links": [],
+  "panels": [
+    {
+      "content": "<div class=\"text-center dashboard-header\">\n  <span>Home Dashboard</span>\n</div>",
       "editable": true,
-      "height": 150,
-      "panels": [
-        {
-          "content": "<div class=\"text-center dashboard-header\">\n  <span>Home Dashboard</span>\n</div>",
-          "editable": true,
-          "id": 1,
-          "links": [],
-          "mode": "html",
-          "span": 12,
-          "style": {},
-          "title": "",
-          "transparent": true,
-          "type": "text"
-        }
-     ]
-   },
-   {
-      "collapse": false,
+      "height": 2,
+      "id": 1,
+      "links": [],
+      "mode": "html",
+      "style": {},
+      "title": "",
+      "transparent": true,
+      "type": "text",
+      "width": 12,
+      "x": 0,
+      "y": 0
+    },
+    {
+      "folderId": 0,
+      "headings": true,
+      "height": 17,
+      "id": 3,
+      "limit": 4,
+      "links": [],
+      "query": "",
+      "recent": true,
+      "search": false,
+      "starred": true,
+      "tags": [],
+      "title": "",
+      "transparent": false,
+      "type": "dashlist",
+      "width": 7,
+      "x": 0,
+      "y": 6
+    },
+    {
       "editable": true,
-      "height": "510px",
-      "panels": [
-        {
-          "id": 3,
-          "limit": 4,
-          "links": [],
-          "query": "",
-          "span": 7,
-          "tags": [],
-          "title": "",
-          "transparent": false,
-          "type": "dashlist",
-          "recent": true,
-          "search": false,
-          "starred": true,
-          "headings": true
-        },
-        {
-          "editable": true,
-          "error": false,
-          "id": 4,
-          "isNew": true,
-          "links": [],
-          "span": 5,
-          "title": "",
-          "transparent": false,
-          "type": "pluginlist"
-        }
-      ],
-      "title": "Row"
-   }
- ],
+      "error": false,
+      "height": 17,
+      "id": 4,
+      "links": [],
+      "title": "",
+      "transparent": false,
+      "type": "pluginlist",
+      "width": 5,
+      "x": 7,
+      "y": 6
+    }
+  ],
+  "rows": [],
+  "schemaVersion": 15,
+  "style": "dark",
+  "tags": [],
+  "templating": {
+    "list": []
+  },
   "time": {
     "from": "now-6h",
     "to": "now"
@@ -94,13 +96,7 @@
     ],
     "type": "timepicker"
   },
-  "templating": {
-    "list": []
-  },
-  "annotations": {
-    "list": []
-  },
-  "schemaVersion": 12,
-  "version": 0,
-  "links": []
+  "timezone": "browser",
+  "title": "Home",
+  "version": 0
 }

public/sass/_variables.dark.scss

@@ -245,6 +245,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 // -------------------------
 $page-nav-bg: $black;
 $page-nav-shadow: 5px 5px 20px -5px $black;
+$page-nav-breadcrumb-color: $gray-3;
 
 
 // Pagination

public/sass/_variables.light.scss

@@ -197,6 +197,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
 // -------------------------
 $page-nav-bg: $white;
 $page-nav-shadow: 5px 5px 20px -5px $gray-4;
+$page-nav-breadcrumb-color: $black;
 
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;

public/sass/components/_panel_gettingstarted.scss

@@ -35,7 +35,7 @@ $path-position:             $marker-size-half - ($path-height / 2);
 // Container element
 .progress-tracker {
   display: flex;
-  margin: 20px auto;
+  margin: 0 auto;
   padding: 0;
   list-style: none;
 }

public/sass/layout/_page.scss

@@ -140,7 +140,7 @@ $page-breadcrumb__angle-a: 30px;
 
 
   > a {
-    color: $text-color-weak;
+    color: $page-nav-breadcrumb-color;
     font-size: $font-size-sm;
     display: block;
     padding: 0.6rem 1rem 0.6rem 3rem;;

public/sass/pages/_dashboard.scss

@@ -246,6 +246,9 @@ div.flot-text {
   font-family: $headings-font-family;
   font-size: $font-size-h3;
   text-align: center;
+  overflow: hidden;
+  position: relative;
+  top: -10px;
   span {
     display: inline-block;
     @include brand-bottom-border();