feat(plugins): more work on plugins list/edit view

pkg/api/dtos/plugins.go

@@ -1,13 +1,10 @@
 package dtos
 
-import (
-	"github.com/grafana/grafana/pkg/models"
-	"github.com/grafana/grafana/pkg/plugins"
-)
+import "github.com/grafana/grafana/pkg/plugins"
 
 type PluginSetting struct {
 	Name     string                    `json:"name"`
-	AppId    string                    `json:"appId"`
+	PluginId string                    `json:"pluginId"`
 	Enabled  bool                      `json:"enabled"`
 	Pinned   bool                      `json:"pinned"`
 	Module   string                    `json:"module"`
@@ -26,24 +23,3 @@ type PluginListItem struct {
 	Pinned   bool                `json:"pinned"`
 	Info     *plugins.PluginInfo `json:"info"`
 }
-
-func NewPluginSettingDto(def *plugins.AppPlugin, data *models.PluginSetting) *PluginSetting {
-	dto := &PluginSetting{
-		AppId:    def.Id,
-		Name:     def.Name,
-		Info:     &def.Info,
-		Module:   def.Module,
-		BaseUrl:  def.BaseUrl,
-		Pages:    def.Pages,
-		Includes: def.Includes,
-	}
-
-	if data != nil {
-		dto.Enabled = data.Enabled
-		dto.Pinned = data.Pinned
-		dto.Info = &def.Info
-		dto.JsonData = data.JsonData
-	}
-
-	return dto
-}

pkg/api/index.go

@@ -72,7 +72,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 			Text: "Plugins",
 			Icon: "icon-gf icon-gf-apps",
-			Url:  setting.AppSubUrl + "/apps",
+			Url:  setting.AppSubUrl + "/plugins",
 		})
 	}
 

pkg/api/plugin_setting.go

@@ -38,15 +38,34 @@ func GetPluginList(c *middleware.Context) Response {
 func GetPluginSettingById(c *middleware.Context) Response {
 	pluginId := c.Params(":pluginId")
 
-	if pluginDef, exists := plugins.Apps[pluginId]; !exists {
-		return ApiError(404, "PluginId not found, no installed plugin with that id", nil)
+	if def, exists := plugins.Plugins[pluginId]; !exists {
+		return ApiError(404, "Plugin not found, no installed plugin with that id", nil)
 	} else {
+		dto := &dtos.PluginSetting{
+			PluginId: def.Id,
+			Name:     def.Name,
+			Info:     &def.Info,
+		}
+
+		if app, exists := plugins.Apps[pluginId]; exists {
+			dto.Pages = app.Pages
+			dto.Includes = app.Includes
+			dto.BaseUrl = app.BaseUrl
+			dto.Module = app.Module
+		}
+
 		query := m.GetPluginSettingByIdQuery{PluginId: pluginId, OrgId: c.OrgId}
 		if err := bus.Dispatch(&query); err != nil {
-			return ApiError(500, "Failed to get login settings", nil)
+			if err != m.ErrPluginSettingNotFound {
+				return ApiError(500, "Failed to get login settings", nil)
+			}
+		} else {
+			dto.Enabled = query.Result.Enabled
+			dto.Pinned = query.Result.Pinned
+			dto.JsonData = query.Result.JsonData
 		}
 
-		return Json(200, dtos.NewPluginSettingDto(pluginDef, query.Result))
+		return Json(200, dto)
 	}
 }
 

public/app/features/admin/partials/edit_org.html

@@ -1,5 +1,8 @@
 <navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
-	<nav-button title="Orgs" title-url="admin/orgs" icon="icon-gf icon-gf-users"></nav-button>
+	<a href="admin/orgs" class="navbar-page-btn">
+		<i class="icon-gf icon-gf-users"></i>
+		Orgs
+	</a>
 </navbar>
 
 <div class="page-container">

public/app/features/admin/partials/edit_user.html

@@ -1,5 +1,8 @@
 <navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
-	<nav-button title="Users" title-url="admin/users" icon="icon-gf icon-gf-users"></nav-button>
+	<a href="admin/users" class="navbar-page-btn">
+		<i class="icon-gf icon-gf-users"></i>
+		Users
+	</a>
 </navbar>
 
 <div class="page-container">

public/app/features/admin/partials/new_user.html

@@ -1,5 +1,8 @@
 <navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
-	<nav-button title="Users" title-url="admin/users" icon="icon-gf icon-gf-users"></nav-button>
+	<a href="admin/users" class="navbar-page-btn">
+		<i class="icon-gf icon-gf-users"></i>
+		Users
+	</a>
 </navbar>
 
 <div class="page-container">

public/app/features/admin/partials/orgs.html

@@ -1,5 +1,8 @@
 <navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
-	<nav-button title="Orgs" title-url="admin/orgs" icon="icon-gf icon-gf-users"></nav-button>
+	<a href="admin/orgs" class="navbar-page-btn">
+		<i class="icon-gf icon-gf-users"></i>
+		Orgs
+	</a>
 </navbar>
 
 <div class="page-container">

public/app/features/admin/partials/users.html

@@ -1,5 +1,8 @@
 <navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
-	<nav-button title="Users" title-url="admin/users" icon="icon-gf icon-gf-users"></nav-button>
+	<a href="admin/users" class="navbar-page-btn">
+		<i class="icon-gf icon-gf-users"></i>
+		Users
+	</a>
 </navbar>
 
 <div class="page-container">

public/app/features/datasources/partials/list.html

@@ -22,8 +22,8 @@
 		<table class="filter-table" ng-if="ctrl.datasources.length > 0">
 			<thead>
 				<tr>
-					<th><strong>Name</strong></th>
-					<th><strong>Url</strong></th>
+					<th><strong>name</strong></th>
+					<th><strong>url</strong></th>
 					<th style="width: 60px;"></th>
 					<th style="width: 85px;"></th>
 					<th style="width: 44px;"></th>

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

@@ -1,108 +1,112 @@
-<navbar title="Plugins" title-url="Plugins" icon="icon-gf icon-gf-apps">
+<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>
+		Apps
+	</a>
 </navbar>
 
 <div class="page-container">
-	<div class="flex-container">
-		<div class="flex-column app-edit-logo-box">
-			<img src="{{ctrl.appModel.info.logos.large}}">
-		</div>
-		<div class="flex-column">
-			<h1>
-				{{ctrl.appModel.name}}
-			</h1>
-			<div class="app-edit-description">
-				{{ctrl.appModel.info.description}}<br>
-				<span style="small">
-					Version: {{ctrl.appModel.info.version}} &nbsp; &nbsp; Updated: {{ctrl.appModel.info.updated}}
-				</span>
-			</div>
-
-			<div class="form-inline">
-				<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
-				&nbsp; &nbsp; &nbsp;
-				<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
-			</div>
-		</div>
-		<div class="flex-column">
-			<ul class="app-edit-links">
-				<li>
-					By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a>
-				</li>
-				<li ng-repeat="link in ctrl.appModel.info.links">
-					<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
-				</li>
-			</ul>
-		</div>
+  <div class="page-header">
+		<img class="page-header-logo" src="{{ctrl.model.info.logos.large}}">
+		<h1>
+			{{ctrl.model.name}}
+		</h1>
 	</div>
 
-	<section class="simple-box">
-		<h3 class="simple-box-header">Included with app:</h3>
-		<div class="flex-container">
-			<div class="simple-box-body simple-box-column">
-				<div class="simple-box-column-header">
-					<i class="fa fa-th-large"></i>
-					Dashboards
-				</div>
-				<ul>
-					<li><em class="small">None</em></li>
-				</ul>
-			</div>
-			<div class="simple-box-body simple-box-column">
-				<div class="simple-box-column-header">
-					<i class="fa fa-line-chart"></i>
-					Panels
-				</div>
-				<ul>
-					<li ng-show="!ctrl.includedPanels.length"><em class="small">None</em></li>
-					<li ng-repeat="panel in ctrl.includedPanels">
-						{{panel.name}}
-					</li>
-				</ul>
-			</div>
-			<div class="simple-box-body simple-box-column">
-				<div class="simple-box-column-header">
-					<i class="fa fa-database"></i>
-					Datasources
-				</div>
-				<ul>
-					<li ng-show="!ctrl.includedDatasources.length"><em class="small">None</em></li>
-					<li ng-repeat="ds in ctrl.includedDatasources">
-						{{ds.name}}
-					</li>
-				</ul>
-			</div>
-			<div class="simple-box-body simple-box-column">
-				<div class="simple-box-column-header">
-					<i class="fa fa-files-o"></i>
-					Pages
-				</div>
-				<ul>
-					<li ng-repeat="page in ctrl.appModel.pages">
-						<a href="apps/{{ctrl.appId}}/page/{{page.slug}}" class="external-link">{{page.name}}</a>
-					</li>
-				</ul>
-			</div>
-
-		</div>
-	</section>
-
-	<section class="simple-box">
-		<h3 class="simple-box-header">Dependencies:</h3>
-		<div class="simple-box-body">
-			Grafana 2.6.x
+	<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>
 		</div>
-	</section>
 
-	<section class="simple-box">
-		<h3 class="simple-box-header">Configuration:</h3>
-		<div class="simple-box-body">
-			<div ng-if="ctrl.appModel.appId">
-				<plugin-component type="app-config-ctrl"></plugin-component>
-				<div class="clearfix"></div>
-				<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Save</button>
-			</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>
-	</section>
-
-
+	</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>
 </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

@@ -72,7 +72,7 @@
 @import "pages/playlist";
 @import "pages/admin";
 @import "pages/alerting";
-@import "pages/apps";
+@import "pages/plugins";
 @import "pages/signup";
 @import "pages/styleguide";
 

public/sass/layout/_page.scss

@@ -27,6 +27,10 @@
   background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
 }
 
+.page-header-logo {
+  max-width: 7rem;
+}
+
 .page-header {
   padding: $spacer 0 $spacer/2 0;
   display: flex;

public/sass/pages/_apps.scss

@@ -1,26 +0,0 @@
-
-.app-edit-logo-box {
-  padding: 1.2rem;
-  background: $panel-bg;
-  text-align: center;
-  img {
-    max-width: 7rem;
-  }
-  margin-right: 2rem;
-}
-
-.app-edit-links {
-  list-style: none;
-  margin: 0 0 0 2rem;
-
-  li {
-    background: $panel-bg;
-    margin-top: 4px;
-    padding: 0.2rem 1rem;
-  }
-}
-
-.app-edit-description {
-  font-style: italic;
-  margin-bottom: 1.5rem;
-}

public/sass/pages/_plugins.scss

@@ -0,0 +1,26 @@
+
+// .app-edit-logo-box {
+//   padding: 1.2rem;
+//   background: $panel-bg;
+//   text-align: center;
+//   img {
+//     max-width: 7rem;
+//   }
+//   margin-right: 2rem;
+// }
+//
+// .app-edit-links {
+//   list-style: none;
+//   margin: 0 0 0 2rem;
+//
+//   li {
+//     background: $panel-bg;
+//     margin-top: 4px;
+//     padding: 0.2rem 1rem;
+//   }
+// }
+//
+// .app-edit-description {
+//   font-style: italic;
+//   margin-bottom: 1.5rem;
+// }