Skip to content

N
nexpie-grafana-theme
Commit 60e2ba11 by Torkel Ödegaard
Options

plugins: fixed plugin edit page and plugin page

parent c6a02bec
Showing with 145 additions and 136 deletions
public/app/core/components/PageHeader/PageHeader.tsx
...@@ -76,8 +76,8 @@ export default class PageHeader extends React.Component<IProps, any> { ...@@ -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) { if (bc.url) {
breadcrumbsResult.push(<a className="text-link" key={i} href={bc.uri}>{bc.title}</a>); 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 { ...@@ -14,10 +14,7 @@ export class DashNavCtrl {
private $rootScope, private $rootScope,
private dashboardSrv, private dashboardSrv,
private $location, private $location,
public playlistSrv, public playlistSrv) {
navModelSrv) {
this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);
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 { ...@@ -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 ng-if="ctrl.navModel">
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body" ng-init="ctrl.init()"> <div class="page-container page-body">
<div class="page-action-bar"> <div class="sidebar-container">
<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"> <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'readme'">
{{tab}} <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
</button> </div>
</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> </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>
<div class="gf-form-button-row"> <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.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-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> <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
</div>
</div> </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>
<aside class="page-sidebar"> <aside class="page-sidebar">
<section class="page-sidebar-section"> <section class="page-sidebar-section">
<h4>Version</h4> <h4>Version</h4>
<span>{{ctrl.model.info.version}}</span> <span>{{ctrl.model.info.version}}</span>
<div ng-show="ctrl.model.hasUpdate"> <div ng-show="ctrl.model.hasUpdate">
<a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a> <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
</div> </div>
</section> </section>
<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'"> <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
<h5>Includes</h4> <h5>Includes</h4>
<ul class="ui-list plugin-info-list"> <ul class="ui-list plugin-info-list">
<li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item"> <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
<i class="{{plug.icon}}"></i> <i class="{{plug.icon}}"></i>
{{plug.name}} {{plug.name}}
</li> </li>
</ul> </ul>
</section> </section>
<section class="page-sidebar-section"> <section class="page-sidebar-section">
<h5>Dependencies</h4> <h5>Dependencies</h4>
<ul class="ui-list plugin-info-list"> <ul class="ui-list plugin-info-list">
<li class="plugin-info-list-item"> <li class="plugin-info-list-item">
<img src="public/img/grafana_icon.svg"></img> <img src="public/img/grafana_icon.svg"></img>
Grafana {{ctrl.model.dependencies.grafanaVersion}} Grafana {{ctrl.model.dependencies.grafanaVersion}}
</li> </li>
<li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item"> <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
<i class="{{plugDep.icon}}"></i> <i class="{{plugDep.icon}}"></i>
{{plugDep.name}} {{plugDep.version}} {{plugDep.name}} {{plugDep.version}}
</li> </li>
</ul> </ul>
</section> </section>
<section class="page-sidebar-section"> <section class="page-sidebar-section">
<h5>Links</h4> <h5>Links</h4>
<ul class="ui-list"> <ul class="ui-list">
<li ng-repeat="link in ctrl.model.info.links"> <li ng-repeat="link in ctrl.model.info.links">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a> <a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
</li> </li>
</ul> </ul>
</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 { ...@@ -11,8 +11,7 @@ export class PluginEditCtrl {
includes: any; includes: any;
readmeHtml: any; readmeHtml: any;
includedDatasources: any; includedDatasources: any;
tabIndex: number; tab: string;
tabs: any;
navModel: any; navModel: any;
hasDashboards: any; hasDashboards: any;
preUpdateHook: () => any; preUpdateHook: () => any;
...@@ -24,24 +23,76 @@ export class PluginEditCtrl { ...@@ -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 { ...@@ -52,16 +103,7 @@ export class PluginEditCtrl {
return plug; return plug;
}); });
if (this.model.type === 'app') { this.setNavModel(this.model);
this.hasDashboards = _.find(result.includes, {type: 'dashboard'});
if (this.hasDashboards) {
this.tabs.unshift('Dashboards');
}
this.tabs.unshift('Config');
this.tabIndex = 0;
}
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 { ...@@ -35,8 +33,20 @@ export class AppPageCtrl {
return; return;
} }
this.navModel = this.navModelSrv.getNav('plugin-page-' + app.id); let pluginNav = this.navModelSrv.getNav('plugin-page-' + app.id);
this.navModel.breadcrumbs.push({text: this.page.name});
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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment