ux: made plugins page work

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

@@ -1,96 +1,73 @@
-<!-- <div class="page&#45;header&#45;canvas"> -->
-<!--   <div class="page&#45;container" ng&#45;init="ctrl.init()"> -->
-<!--     <navbar model="ctrl.navModel"></navbar> -->
-<!--  -->
-<!--     <div class="page&#45;header"> -->
-<!--       <div class="plugin&#45;header"> -->
-<!--         <span class="plugin&#45;header&#45;logo"> -->
-<!--           <img ng&#45;src="{{ctrl.model.info.logos.large}}"> -->
-<!--         </span> -->
-<!--  -->
-<!--         <div class="plugin&#45;header&#45;info&#45;block"> -->
-<!--           <h1 class="plugin&#45;header&#45;name">{{ctrl.model.name}}</h1> -->
-<!--           <div class="plugin&#45;header&#45;author">By {{ctrl.model.info.author.name}}</div> -->
-<!--           <div class="plugin&#45;header&#45;stamps"> -->
-<!--             <span class="plugin&#45;header&#45;stamps&#45;type"> -->
-<!--               <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}} -->
-<!--             </span> -->
-<!--           </div> -->
-<!--         </div> -->
-<!--       </div> -->
-<!--  -->
-<!--       <ul class="gf&#45;tabs"> -->
-<!--         <li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ctrl.tabs"> -->
-<!--           <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
-<!--             {{::tab}} -->
-<!--           </a> -->
-<!--         </li> -->
-<!--       </ul> -->
-<!--     </div> -->
-<!--   </div> -->
-<!-- </div> -->
-
 <page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container page-body page-body--with-sidebar">
-  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
-    <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
-    </div>
+<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="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
-    <div ng-if="ctrl.model.id">
-      <plugin-component type="app-config-ctrl"></plugin-component>
+  <div class="sidebar-container">
 
-      <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="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
+      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
       </div>
     </div>
-  </div>
 
-  <div class="tab-content page-content-with-sidebar" 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.tabs[ctrl.tabIndex] === 'Config'">
+      <div ng-if="ctrl.model.id">
+        <plugin-component type="app-config-ctrl"></plugin-component>
 
-  <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 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>
-    </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 class="tab-content sidebar.content" ng-if="ctrl.tabs[ctrl.tabIndex] === '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>
+  </div>
 </div>

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -27,7 +27,7 @@ export class PluginEditCtrl {
     $routeParams,
     navModelSrv,
   ) {
-    this.navModel = navModelSrv.getNav('cfg', 'plugins');
+    this.navModel = navModelSrv.getNav('cfg', 'plugins', 0);
     this.model = {};
     this.pluginId = $routeParams.pluginId;
     this.tabIndex = 0;