feat(plugins): progress on plugins page

pkg/api/dtos/plugins.go

@@ -4,6 +4,7 @@ import "github.com/grafana/grafana/pkg/plugins"
 
 type PluginSetting struct {
 	Name     string                    `json:"name"`
+	Type     string                    `json:"type"`
 	PluginId string                    `json:"pluginId"`
 	Enabled  bool                      `json:"enabled"`
 	Pinned   bool                      `json:"pinned"`

pkg/api/plugin_setting.go

@@ -42,6 +42,7 @@ func GetPluginSettingById(c *middleware.Context) Response {
 		return ApiError(404, "Plugin not found, no installed plugin with that id", nil)
 	} else {
 		dto := &dtos.PluginSetting{
+			Type:     def.Type,
 			PluginId: def.Id,
 			Name:     def.Name,
 			Info:     &def.Info,

pkg/plugins/frontend_plugin.go

@@ -56,6 +56,10 @@ func (fp *FrontendPluginBase) handleModuleDefaults() {
 }
 
 func evalRelativePluginUrlPath(pathStr string, pluginId string) string {
+	if pathStr == "" {
+		return ""
+	}
+
 	u, _ := url.Parse(pathStr)
 	if u.IsAbs() {
 		return pathStr

public/app/features/plugins/edit_ctrl.ts

@@ -8,11 +8,13 @@ export class PluginEditCtrl {
   pluginId: any;
   includedPanels: any;
   includedDatasources: any;
+  tabIndex: number;
 
   /** @ngInject */
   constructor(private backendSrv: any, private $routeParams: any) {
     this.model = {};
     this.pluginId = $routeParams.pluginId;
+    this.tabIndex = 0;
 
     this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => {
       this.model = result;

public/app/features/plugins/partials/edit.html

@@ -1,112 +1,167 @@
 <navbar title="Plugins" title-url="plugins" icon="icon-gf icon-gf-apps">
 	<a href="plugins/apps" class="navbar-page-btn">
-		<i class="fa fa-cubes"></i>
+		<i class="fa fa-chevron-right"></i>
 		Apps
 	</a>
 </navbar>
 
 <div class="page-container">
-  <div class="page-header">
-		<img class="page-header-logo" src="{{ctrl.model.info.logos.large}}">
-		<h1>
-			{{ctrl.model.name}}
-		</h1>
+  <div class="plugin-header">
+		<span ng-show="ctrl.model.info.logos.large" class="plugin-header-logo">
+			<img src="{{ctrl.model.info.logos.large}}">
+		</span>
+		<div class="plugin-header-info-block">
+			<h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
+			<div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
+			<div class="plugin-header-stamps">
+				<span class="plugin-header-stamps-type">
+					<i class="icon-gf icon-gf-apps"></i> {{ctrl.model.type}}
+				</span>
+			</div>
+		</div>
 	</div>
 
-	<div class="flex-container">
-		<div class="app-edit-description">
-			{{ctrl.model.info.description}}<br>
-			<span style="small">
-				Version: {{ctrl.model.info.version}} &nbsp; &nbsp; Updated: {{ctrl.model.info.updated}}
-			</span>
+	<ul class="nav nav-tabs nav-tabs-alt">
+		<li ng-repeat="tab in ::['Overview', 'Details', 'Config']" ng-class="{active: ctrl.tabIndex === $index}">
+			<a ng-click="ctrl.tabIndex= $index">
+				{{::tab}}
+			</a>
+		</li>
+	</ul>
+
+	<div class="page-body">
+		<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 0">
+			README.md
 		</div>
 
-		<div class="form-inline">
-			<editor-checkbox text="Enabled" model="ctrl.model.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
-			&nbsp; &nbsp; &nbsp;
-			<editor-checkbox text="Pinned" model="ctrl.model.pinned" change="ctrl.togglePinned()"></editor-checkbox>
+		<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 1">
+			Details
 		</div>
-	</div>
-	<div class="flex-column">
-		<ul class="app-edit-links">
-			<li>
-				By <a href="{{ctrl.model.info.author.url}}" class="external-link" target="_blank">{{ctrl.model.info.author.name}}</a>
-			</li>
-			<li ng-repeat="link in ctrl.model.info.links">
-				<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
-			</li>
-		</ul>
+
+		<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 2">
+			<div class="gf-form-inline">
+				<div class="gf-form">
+					<editor-checkbox text="Enabled" model="ctrl.model.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
+				</div>
+				<div class="gf-form">
+					<editor-checkbox text="Pinned" model="ctrl.model.pinned" change="ctrl.togglePinned()"></editor-checkbox>
+				</div>
+			</div>
+		</div>
+
+		<aside class="page-sidebar">
+			<section class="page-sidebar-section">
+				<h4>Version</h4>
+				<span>1.0.1</span>
+			</section>
+			<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
+				<h5>Includes</h4>
+				<span>TODO</span>
+			</section>
+			<section class="page-sidebar-section">
+				<h5>Dependencies</h4>
+				<span>TODO</span>
+			</section>
+			<section class="page-sidebar-section">
+				<h5>Links</h4>
+				<ul class="ui-list">
+					<li ng-repeat="link in ctrl.model.info.links">
+						<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
+					</li>
+				</ul>
+			</section>
+		</aside>
 	</div>
 </div>
+</div>
 
-<!-- <section class="simple&#45;box"> -->
-<!-- 	<h3 class="simple&#45;box&#45;header">Included with app:</h3> -->
-<!-- 	<div class="flex&#45;container"> -->
-<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
-<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
-<!-- 				<i class="fa fa&#45;th&#45;large"></i> -->
-<!-- 				Dashboards -->
-<!-- 			</div> -->
-<!-- 			<ul> -->
-<!-- 				<li><em class="small">None</em></li> -->
-<!-- 			</ul> -->
-<!-- 		</div> -->
-<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
-<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
-<!-- 				<i class="fa fa&#45;line&#45;chart"></i> -->
-<!-- 				Panels -->
-<!-- 			</div> -->
-<!-- 			<ul> -->
-<!-- 				<li ng&#45;show="!ctrl.includedPanels.length"><em class="small">None</em></li> -->
-<!-- 				<li ng&#45;repeat="panel in ctrl.includedPanels"> -->
-<!-- 					{{panel.name}} -->
-<!-- 				</li> -->
-<!-- 			</ul> -->
-<!-- 		</div> -->
-<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
-<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
-<!-- 				<i class="fa fa&#45;database"></i> -->
-<!-- 				Datasources -->
-<!-- 			</div> -->
-<!-- 			<ul> -->
-<!-- 				<li ng&#45;show="!ctrl.includedDatasources.length"><em class="small">None</em></li> -->
-<!-- 				<li ng&#45;repeat="ds in ctrl.includedDatasources"> -->
-<!-- 					{{ds.name}} -->
-<!-- 				</li> -->
-<!-- 			</ul> -->
-<!-- 		</div> -->
-<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
-<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
-<!-- 				<i class="fa fa&#45;files&#45;o"></i> -->
-<!-- 				Pages -->
-<!-- 			</div> -->
-<!-- 			<ul> -->
-<!-- 				<li ng&#45;repeat="page in ctrl.model.pages"> -->
-<!-- 					<a href="apps/{{ctrl.appId}}/page/{{page.slug}}" class="external&#45;link">{{page.name}}</a> -->
-<!-- 				</li> -->
-<!-- 			</ul> -->
-<!-- 		</div> -->
-<!--  -->
-<!-- 	</div> -->
-<!-- </section> -->
-<!--  -->
-<!-- <section class="simple&#45;box"> -->
-<!-- 	<h3 class="simple&#45;box&#45;header">Dependencies:</h3> -->
-<!-- 	<div class="simple&#45;box&#45;body"> -->
-<!-- 		Grafana 2.6.x -->
-<!-- 	</div> -->
-<!-- </section> -->
-<!--  -->
-<!-- <section class="simple&#45;box"> -->
-<!-- 	<h3 class="simple&#45;box&#45;header">Configuration:</h3> -->
-<!-- 	<div class="simple&#45;box&#45;body"> -->
-<!-- 		<div ng&#45;if="ctrl.model.appId"> -->
-<!-- 			<plugin&#45;component type="app&#45;config&#45;ctrl"></plugin&#45;component> -->
-<!-- 			<div class="clearfix"></div> -->
-<!-- 			<button type="submit" class="btn btn&#45;success" ng&#45;click="ctrl.update()">Save</button> -->
-<!-- 		</div> -->
-<!-- 	</div> -->
-<!-- </section> -->
-<!--  -->
+<!-- 	<div class="app&#45;edit&#45;description"> -->
+	<!-- 		{{ctrl.model.info.description}}<br> -->
+	<!-- 		<span style="small"> -->
+		<!-- 			Version: {{ctrl.model.info.version}} &#38;nbsp; &#38;nbsp; Updated: {{ctrl.model.info.updated}} -->
+		<!-- 		</span> -->
+	<!-- 	</div> -->
 <!--  -->
 <!-- </div> -->
+		<!-- <div class="flex&#45;column"> -->
+			<!-- 	<ul class="app&#45;edit&#45;links"> -->
+				<!-- 		<li> -->
+					<!-- 			By <a href="{{ctrl.model.info.author.url}}" class="external&#45;link" target="_blank">{{ctrl.model.info.author.name}}</a> -->
+					<!-- 		</li> -->
+				<!-- 		<li ng&#45;repeat="link in ctrl.model.info.links"> -->
+					<!-- 			<a href="{{link.url}}" class="external&#45;link" target="_blank">{{link.name}}</a> -->
+					<!-- 		</li> -->
+				<!-- 	</ul> -->
+			<!-- </div> -->
+
+		<!-- <section class="simple&#45;box"> -->
+			<!-- 	<h3 class="simple&#45;box&#45;header">Included with app:</h3> -->
+			<!-- 	<div class="flex&#45;container"> -->
+				<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
+					<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
+						<!-- 				<i class="fa fa&#45;th&#45;large"></i> -->
+						<!-- 				Dashboards -->
+						<!-- 			</div> -->
+					<!-- 			<ul> -->
+						<!-- 				<li><em class="small">None</em></li> -->
+						<!-- 			</ul> -->
+					<!-- 		</div> -->
+				<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
+					<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
+						<!-- 				<i class="fa fa&#45;line&#45;chart"></i> -->
+						<!-- 				Panels -->
+						<!-- 			</div> -->
+					<!-- 			<ul> -->
+						<!-- 				<li ng&#45;show="!ctrl.includedPanels.length"><em class="small">None</em></li> -->
+						<!-- 				<li ng&#45;repeat="panel in ctrl.includedPanels"> -->
+							<!-- 					{{panel.name}} -->
+							<!-- 				</li> -->
+						<!-- 			</ul> -->
+					<!-- 		</div> -->
+				<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
+					<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
+						<!-- 				<i class="fa fa&#45;database"></i> -->
+						<!-- 				Datasources -->
+						<!-- 			</div> -->
+					<!-- 			<ul> -->
+						<!-- 				<li ng&#45;show="!ctrl.includedDatasources.length"><em class="small">None</em></li> -->
+						<!-- 				<li ng&#45;repeat="ds in ctrl.includedDatasources"> -->
+							<!-- 					{{ds.name}} -->
+							<!-- 				</li> -->
+						<!-- 			</ul> -->
+					<!-- 		</div> -->
+				<!-- 		<div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
+					<!-- 			<div class="simple&#45;box&#45;column&#45;header"> -->
+						<!-- 				<i class="fa fa&#45;files&#45;o"></i> -->
+						<!-- 				Pages -->
+						<!-- 			</div> -->
+					<!-- 			<ul> -->
+						<!-- 				<li ng&#45;repeat="page in ctrl.model.pages"> -->
+							<!-- 					<a href="apps/{{ctrl.appId}}/page/{{page.slug}}" class="external&#45;link">{{page.name}}</a> -->
+							<!-- 				</li> -->
+						<!-- 			</ul> -->
+					<!-- 		</div> -->
+				<!--  -->
+				<!-- 	</div> -->
+			<!-- </section> -->
+		<!--  -->
+		<!-- <section class="simple&#45;box"> -->
+			<!-- 	<h3 class="simple&#45;box&#45;header">Dependencies:</h3> -->
+			<!-- 	<div class="simple&#45;box&#45;body"> -->
+				<!-- 		Grafana 2.6.x -->
+				<!-- 	</div> -->
+			<!-- </section> -->
+		<!--  -->
+		<!-- <section class="simple&#45;box"> -->
+			<!-- 	<h3 class="simple&#45;box&#45;header">Configuration:</h3> -->
+			<!-- 	<div class="simple&#45;box&#45;body"> -->
+				<!-- 		<div ng&#45;if="ctrl.model.appId"> -->
+					<!-- 			<plugin&#45;component type="app&#45;config&#45;ctrl"></plugin&#45;component> -->
+					<!-- 			<div class="clearfix"></div> -->
+					<!-- 			<button type="submit" class="btn btn&#45;success" ng&#45;click="ctrl.update()">Save</button> -->
+					<!-- 		</div> -->
+				<!-- 	</div> -->
+			<!-- </section> -->
+		<!--  -->
+		<!--  -->
+		<!-- </div> -->

public/sass/_grafana.scss

@@ -26,6 +26,7 @@
 @import "utils/widths";
 
 // LAYOUTS
+@import "layout/lists";
 @import "layout/page";
 
 // COMPONENTS
@@ -44,7 +45,6 @@
 @import "components/tagsinput";
 @import "components/tables_lists";
 @import "components/search";
-@import "components/dashboard";
 @import "components/tightform";
 @import "components/gf-form";
 @import "components/sidemenu";
@@ -69,6 +69,7 @@
 
 // PAGES
 @import "pages/login";
+@import "pages/dashboard";
 @import "pages/playlist";
 @import "pages/admin";
 @import "pages/alerting";

public/sass/_variables.dark.scss

@@ -50,8 +50,10 @@ $critical:              #ed2e18;
 // -------------------------
 $body-bg:  			   rgb(20,20,20);
 $page-bg:  			   $dark-2;
-$body-color:   		   $gray-4;
-$text-color:   	       $gray-4;
+$body-color:   		 $gray-4;
+$text-color:   	   $gray-4;
+$text-color-strong: $white;
+$text-color-weak: $gray-1;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);

public/sass/_variables.light.scss

@@ -58,6 +58,8 @@ $body-bg:  		  $white;
 $page-bg:  		  $white;
 $body-color:    $gray-1;
 $text-color:    $gray-1;
+$text-color-strong: $white;
+$text-color-weak: $gray-1;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);

public/sass/_variables.scss

@@ -93,7 +93,7 @@ $font-size-sm:   .875rem !default;
 $font-size-xs:   .75rem !default;
 
 $line-height-base: 1.5 !default;
-$font-weight-semi-bold:       600;
+$font-weight-semi-bold: 600;
 
 $font-size-h1: 2.0rem !default;
 $font-size-h2: 1.75rem !default;
@@ -141,6 +141,11 @@ $border-radius-sm:       0.1rem !default;
 $caret-width:            .3em !default;
 $caret-width-lg:         $caret-width !default;
 
+// Page
+
+$page-sidebar-width: 10rem;
+$page-sidebar-margin: 5rem;
+
 // Links
 // -------------------------
 $link-decoration:         none !default;

public/sass/base/_type.scss

@@ -65,7 +65,7 @@ h1, h2, h3, h4, h5, h6,
   color: $headings-color;
 }
 
-h1, .h1 { font-size: $font-size-h1; }
+h1, .h1 { font-size: $font-size-h1; font-style: italic; }
 h2, .h2 { font-size: $font-size-h2; }
 h3, .h3 { font-size: $font-size-h3; }
 h4, .h4 { font-size: $font-size-h4; }

public/sass/components/_tabs.scss

@@ -13,7 +13,7 @@
     @include border-radius(3px);
 	  border: 1px solid $divider-border-color;
 	  background-color: transparent;
-	  border-bottom: 1px solid $panel-bg;
+	  border-bottom: 1px solid $page-bg;
 	  color: $link-color;
 	}
 

public/sass/layout/_lists.scss

@@ -0,0 +1,14 @@
+
+.ui-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  > li {
+    margin-bottom: 0.3125rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

public/sass/layout/_page.scss

@@ -3,21 +3,10 @@
   height: 100%;
 }
 
-.dashboard-container {
-  padding: $dashboard-padding;
-  width: 100%;
-}
-
 .main-view {
   height: 100%;
 }
 
-.page-dashboard {
-  .main-view {
-    background-image: none;
-  }
-}
-
 .page-container {
   background-color: $page-bg;
   padding: ($spacer * 2) ($spacer * 4);
@@ -27,12 +16,29 @@
   background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
 }
 
-.page-header-logo {
-  max-width: 7rem;
+.page-body {
+  @include media-breakpoint-up(md) {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.page-content-with-sidebar {
+  width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
+}
+
+.page-sidebar {
+  @include media-breakpoint-up(md) {
+    width: $page-sidebar-width;
+    margin-left: $page-sidebar-margin;
+  }
 }
 
 .page-header {
   padding: $spacer 0 $spacer/2 0;
+  margin-bottom: 2rem;
+
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
@@ -40,13 +46,12 @@
   @include brand-bottom-border();
 
   h1 {
-    font-style: italic;
     flex-grow: 1;
   }
+
   button, a {
     margin-left: $spacer;
   }
-  margin-bottom: 2rem;
 }
 
 .page-heading {
@@ -75,3 +80,20 @@
   }
 }
 
+.page-sidebar {
+  color: $text-color-weak;
+  h4 {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semi-bold;
+    color: $text-color-strong;
+  }
+  h5 {
+    font-size: $font-size-base;
+    color: $text-color-weak;
+    font-weight: $font-weight-semi-bold;
+  }
+}
+
+.page-sidebar-section {
+  margin-bottom: $spacer*2;
+}

public/sass/components/_dashboard.scss → public/sass/pages/_dashboard.scss

@@ -1,3 +1,14 @@
+.dashboard-container {
+  padding: $dashboard-padding;
+  width: 100%;
+}
+
+.page-dashboard {
+  .main-view {
+    background-image: none;
+  }
+}
+
 .template-variable {
   color: $variable;
 }

public/sass/pages/_plugins.scss

@@ -1,3 +1,30 @@
+.plugin-header {
+  @include clearfix();
+
+  padding: $spacer 0 $spacer/2 0;
+  margin-bottom: 2rem;
+}
+
+.plugin-header-logo {
+  float: left;
+  width: 7rem;
+  img {
+    width: 7rem;
+  }
+  margin-right: $spacer;
+}
+
+.plugin-header-info-block {
+  padding-top: $spacer;
+}
+
+.plugin-header-author {
+}
+
+.plugin-header-stamps-type {
+  color: $link-color-disabled;
+  text-transform: uppercase;
+}
 
 // .app-edit-logo-box {
 //   padding: 1.2rem;