plugins: fixed plugin edit page and plugin page

public/app/core/components/PageHeader/PageHeader.tsx

@@ -76,8 +76,8 @@ export default class PageHeader extends React.Component<IProps, any> {
     const breadcrumbsResult = [];
     for (let i = 0; i < breadcrumbs.length; i++) {
       const bc = breadcrumbs[i];
-      if (bc.uri) {
-        breadcrumbsResult.push(<a className="text-link" key={i} href={bc.uri}>{bc.title}</a>);
+      if (bc.url) {
+        breadcrumbsResult.push(<a className="text-link" key={i} href={bc.url}>{bc.title}</a>);
       } else {
         breadcrumbsResult.push(<span key={i}> / {bc.title}</span>);
       }

public/app/features/dashboard/dashnav/dashnav.ts

@@ -14,10 +14,7 @@ export class DashNavCtrl {
     private $rootScope,
     private dashboardSrv,
     private $location,
-    public playlistSrv,
-    navModelSrv) {
-      this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);
-
+    public playlistSrv) {
       appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope);
 
       if (this.dashboard.meta.isSnapshot) {

public/app/features/dashboard/folder_page_loader.ts

@@ -12,7 +12,7 @@ export class FolderPageLoader {
         url: '/fsdfds',
         text: '',
         breadcrumbs: [
-          { title: 'Dashboards', uri: '/dashboards' },
+          { title: 'Dashboards', url: '/dashboards' },
           { title: ' ' },
         ],
         children: [

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

@@ -1,73 +1,68 @@
-<page-header model="ctrl.navModel"></page-header>
+<div ng-if="ctrl.navModel">
+  <page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container page-body" ng-init="ctrl.init()">
-  <div class="page-action-bar">
-    <button class="btn" ng-repeat="tab in ctrl.tabs" ng-class="{'btn-secondary': ctrl.tabIndex === $index, 'btn-inverse': ctrl.tabIndex !== $index}" ng-click="ctrl.tabIndex = $index">
-      {{tab}}
-    </button>
-  </div>
-
-  <div class="sidebar-container">
-
-    <div class="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
-      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
+  <div class="page-container page-body">
+    <div class="sidebar-container">
+      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'readme'">
+        <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
+        </div>
       </div>
-    </div>
 
-    <div class="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
-      <div ng-if="ctrl.model.id">
-        <plugin-component type="app-config-ctrl"></plugin-component>
+      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'config'">
+        <div ng-if="ctrl.model.id">
+          <plugin-component type="app-config-ctrl"></plugin-component>
 
-        <div class="gf-form-button-row">
-          <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
-          <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
-          <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
+          <div class="gf-form-button-row">
+            <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
+            <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
+            <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="tab-content sidebar.content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
-      <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
-    </div>
+      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'dashboards'">
+        <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
+      </div>
 
-    <aside class="page-sidebar">
-      <section class="page-sidebar-section">
-        <h4>Version</h4>
-        <span>{{ctrl.model.info.version}}</span>
-        <div ng-show="ctrl.model.hasUpdate">
-          <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
-        </div>
-      </section>
-      <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
-        <h5>Includes</h4>
-        <ul class="ui-list plugin-info-list">
-          <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
-            <i class="{{plug.icon}}"></i>
-            {{plug.name}}
-          </li>
-        </ul>
-      </section>
-      <section class="page-sidebar-section">
-        <h5>Dependencies</h4>
-        <ul class="ui-list plugin-info-list">
-          <li class="plugin-info-list-item">
-            <img src="public/img/grafana_icon.svg"></img>
-            Grafana {{ctrl.model.dependencies.grafanaVersion}}
-          </li>
-          <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
-            <i class="{{plugDep.icon}}"></i>
-            {{plugDep.name}} {{plugDep.version}}
-          </li>
-        </ul>
-      </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>
+      <aside class="page-sidebar">
+        <section class="page-sidebar-section">
+          <h4>Version</h4>
+          <span>{{ctrl.model.info.version}}</span>
+          <div ng-show="ctrl.model.hasUpdate">
+            <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
+          </div>
+        </section>
+        <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
+          <h5>Includes</h4>
+          <ul class="ui-list plugin-info-list">
+            <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
+              <i class="{{plug.icon}}"></i>
+              {{plug.name}}
+            </li>
+          </ul>
+        </section>
+        <section class="page-sidebar-section">
+          <h5>Dependencies</h4>
+          <ul class="ui-list plugin-info-list">
+            <li class="plugin-info-list-item">
+              <img src="public/img/grafana_icon.svg"></img>
+              Grafana {{ctrl.model.dependencies.grafanaVersion}}
+            </li>
+            <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
+              <i class="{{plugDep.icon}}"></i>
+              {{plugDep.name}} {{plugDep.version}}
+            </li>
+          </ul>
+        </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>

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

@@ -1,42 +1,5 @@
 <page-header model="ctrl.navModel"></page-header>
 
-<!-- <div class="page&#45;header&#45;canvas"> -->
-<!--   <div class="page&#45;container"> -->
-<!--     <navbar model="ctrl.navModel"></navbar> -->
-<!--  -->
-<!--     <div class="page&#45;header"> -->
-<!-- 		  <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
-<!--  -->
-<!--       <div class="page&#45;header&#45;tabs"> -->
-<!--         <ul class="gf&#45;tabs"> -->
-<!--           <li class="gf&#45;tabs&#45;item"> -->
-<!--             <a class="gf&#45;tabs&#45;link" href="plugins?type=panel" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
-<!--               <i class="icon&#45;gf icon&#45;gf&#45;panel"></i> -->
-<!--               Panels -->
-<!--             </a> -->
-<!--           </li> -->
-<!--           <li class="gf&#45;tabs&#45;item"> -->
-<!--             <a class="gf&#45;tabs&#45;link" href="plugins?type=datasource" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
-<!--               <i class="gicon gicon&#45;datasources"></i> -->
-<!--               Data sources -->
-<!--             </a> -->
-<!--           </li> -->
-<!--           <li class="gf&#45;tabs&#45;item"> -->
-<!--             <a class="gf&#45;tabs&#45;link" href="plugins?type=app" ng&#45;class="{active: ctrl.tabIndex === 2}"> -->
-<!--               <i class="icon&#45;gf icon&#45;gf&#45;apps"></i> -->
-<!--               Apps -->
-<!--             </a> -->
-<!--           </li> -->
-<!--         </ul> -->
-<!--  -->
-<!--         <a class="get&#45;more&#45;plugins&#45;link pull&#45;right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> -->
-<!--           Find more <img src="public/img/icn&#45;plugins&#45;tiny.svg" />plugins on Grafana.com -->
-<!--         </a> -->
-<!--       </div> -->
-<!--     </div> -->
-<!--   </div> -->
-<!-- </div> -->
-
 <div class="page-container page-body">
   <div class="page-action-bar">
     <div class="gf-form">

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

@@ -1,8 +1,10 @@
-<navbar model="ctrl.navModel" ng-if="ctrl.navModel"></navbar>
+<div ng-if="ctrl.navModel">
+  <page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container" >
-	<div ng-if="ctrl.page">
-		<plugin-component type="app-page">
-		</plugin-component>
-	</div>
+  <div class="page-container">
+    <div ng-if="ctrl.page">
+      <plugin-component type="app-page">
+      </plugin-component>
+    </div>
+  </div>
 </div>

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -11,8 +11,7 @@ export class PluginEditCtrl {
   includes: any;
   readmeHtml: any;
   includedDatasources: any;
-  tabIndex: number;
-  tabs: any;
+  tab: string;
   navModel: any;
   hasDashboards: any;
   preUpdateHook: () => any;
@@ -24,24 +23,76 @@ export class PluginEditCtrl {
     private $rootScope,
     private backendSrv,
     private $sce,
-    $routeParams,
+    private $routeParams,
     navModelSrv,
   ) {
-    this.navModel = navModelSrv.getNav('cfg', 'plugins', 0);
-    this.model = {};
-    this.pluginId = $routeParams.pluginId;
-    this.tabIndex = 0;
-    this.tabs = ['Readme'];
 
+    this.pluginId = $routeParams.pluginId;
     this.preUpdateHook = () => Promise.resolve();
     this.postUpdateHook = () => Promise.resolve();
+
+    this.init();
+  }
+
+  setNavModel(model) {
+    let defaultTab = 'readme';
+
+    this.navModel = {
+      main: {
+        img: model.info.logos.large,
+        subTitle: model.info.description,
+        url: '',
+        text: '',
+        breadcrumbs: [
+          { title: 'Plugins', url: '/plugins' },
+          { title: model.name },
+        ],
+        children: [
+          {
+            icon: 'fa fa-fw fa-file-text-o',
+            id: 'readme',
+            text: 'Readme',
+            url: `plugins/${this.model.id}/edit?tab=readme`
+          }
+        ]
+      }
+    };
+
+    if (model.type === 'app') {
+        this.navModel.main.children.push({
+            icon: 'fa fa-fw fa-th-large',
+            id: 'config',
+            text: 'Config',
+            url: `plugins/${this.model.id}/edit?tab=config`
+        });
+
+        let hasDashboards = _.find(model.includes, {type: 'dashboard'});
+
+        if (hasDashboards) {
+          this.navModel.main.children.push({
+            icon: 'gicon gicon-dashboard',
+            id: 'dashboards',
+            text: 'Dashboards',
+            url: `plugins/${this.model.id}/edit?tab=dashboards`
+          });
+        }
+
+        defaultTab = 'config';
+    }
+
+    this.tab = this.$routeParams.tab || defaultTab;
+
+    for (let tab of this.navModel.main.children) {
+      if (tab.id === this.tab) {
+        tab.active = true;
+      }
+    }
   }
 
   init() {
     return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => {
       this.model = result;
       this.pluginIcon = this.getPluginIcon(this.model.type);
-      this.navModel.breadcrumbs.push({text: this.model.name});
 
       this.model.dependencies.plugins.forEach(plug => {
         plug.icon = this.getPluginIcon(plug.type);
@@ -52,16 +103,7 @@ export class PluginEditCtrl {
         return plug;
       });
 
-      if (this.model.type === 'app') {
-        this.hasDashboards = _.find(result.includes, {type: 'dashboard'});
-        if (this.hasDashboards) {
-          this.tabs.unshift('Dashboards');
-        }
-
-        this.tabs.unshift('Config');
-        this.tabIndex = 0;
-      }
-
+      this.setNavModel(this.model);
       return this.initReadme();
     });
   }

public/app/features/plugins/plugin_page_ctrl.ts

@@ -1,5 +1,3 @@
-///<reference path="../../headers/common.d.ts" />
-
 import angular from 'angular';
 import _ from 'lodash';
 
@@ -35,8 +33,20 @@ export class AppPageCtrl {
       return;
     }
 
-    this.navModel = this.navModelSrv.getNav('plugin-page-' + app.id);
-    this.navModel.breadcrumbs.push({text: this.page.name});
+    let pluginNav = this.navModelSrv.getNav('plugin-page-' + app.id);
+
+    this.navModel = {
+      main: {
+        img: app.info.logos.large,
+        subTitle: app.name,
+        url: '',
+        text: '',
+        breadcrumbs: [
+          { title: app.name, url: pluginNav.main.url },
+          { title: this.page.name },
+        ],
+      }
+    };
   }
 
   loadPluginInfo() {