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/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

+
+.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

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

public/sass/pages/_plugins.scss

+.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;