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 = [];
     const breadcrumbsResult = [];
     for (let i = 0; i < breadcrumbs.length; i++) {
     for (let i = 0; i < breadcrumbs.length; i++) {
       const bc = breadcrumbs[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 {
       } else {
         breadcrumbsResult.push(<span key={i}> / {bc.title}</span>);
         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 $rootScope,
     private dashboardSrv,
     private dashboardSrv,
     private $location,
     private $location,
-    public playlistSrv,
-    navModelSrv) {
-      this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);
-
+    public playlistSrv) {
       appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope);
       appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope);
 
 
       if (this.dashboard.meta.isSnapshot) {
       if (this.dashboard.meta.isSnapshot) {

public/app/features/dashboard/folder_page_loader.ts

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

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

-<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 ng-if="ctrl.navModel">
+  <page-header model="ctrl.navModel"></page-header>
 
 
+  <div class="page-container page-body">
     <div class="sidebar-container">
     <div class="sidebar-container">
-
-    <div class="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
+      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'readme'">
         <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
         <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
         </div>
         </div>
       </div>
       </div>
 
 
-    <div class="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
+      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'config'">
         <div ng-if="ctrl.model.id">
         <div ng-if="ctrl.model.id">
           <plugin-component type="app-config-ctrl"></plugin-component>
           <plugin-component type="app-config-ctrl"></plugin-component>
 
 
@@ -26,7 +20,7 @@
         </div>
         </div>
       </div>
       </div>
 
 
-    <div class="tab-content sidebar.content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
+      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'dashboards'">
         <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
         <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
       </div>
       </div>
 
 
@@ -70,4 +64,5 @@
         </section>
         </section>
       </aside>
       </aside>
     </div>
     </div>
+  </div>
 </div>
 </div>

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

 <page-header model="ctrl.navModel"></page-header>
 <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-container page-body">
   <div class="page-action-bar">
   <div class="page-action-bar">
     <div class="gf-form">
     <div class="gf-form">

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

-<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 class="page-container">
     <div ng-if="ctrl.page">
     <div ng-if="ctrl.page">
       <plugin-component type="app-page">
       <plugin-component type="app-page">
       </plugin-component>
       </plugin-component>
     </div>
     </div>
+  </div>
 </div>
 </div>

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -11,8 +11,7 @@ export class PluginEditCtrl {
   includes: any;
   includes: any;
   readmeHtml: any;
   readmeHtml: any;
   includedDatasources: any;
   includedDatasources: any;
-  tabIndex: number;
-  tabs: any;
+  tab: string;
   navModel: any;
   navModel: any;
   hasDashboards: any;
   hasDashboards: any;
   preUpdateHook: () => any;
   preUpdateHook: () => any;
@@ -24,24 +23,76 @@ export class PluginEditCtrl {
     private $rootScope,
     private $rootScope,
     private backendSrv,
     private backendSrv,
     private $sce,
     private $sce,
-    $routeParams,
+    private $routeParams,
     navModelSrv,
     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.preUpdateHook = () => Promise.resolve();
     this.postUpdateHook = () => 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() {
   init() {
     return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => {
     return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => {
       this.model = result;
       this.model = result;
       this.pluginIcon = this.getPluginIcon(this.model.type);
       this.pluginIcon = this.getPluginIcon(this.model.type);
-      this.navModel.breadcrumbs.push({text: this.model.name});
 
 
       this.model.dependencies.plugins.forEach(plug => {
       this.model.dependencies.plugins.forEach(plug => {
         plug.icon = this.getPluginIcon(plug.type);
         plug.icon = this.getPluginIcon(plug.type);
@@ -52,16 +103,7 @@ export class PluginEditCtrl {
         return plug;
         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();
       return this.initReadme();
     });
     });
   }
   }

public/app/features/plugins/plugin_page_ctrl.ts

-///<reference path="../../headers/common.d.ts" />
-
 import angular from 'angular';
 import angular from 'angular';
 import _ from 'lodash';
 import _ from 'lodash';
 
 
@@ -35,8 +33,20 @@ export class AppPageCtrl {
       return;
       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() {
   loadPluginInfo() {