mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
plugins: fixed plugin edit page and plugin page
This commit is contained in:
parent
c6a02bec81
commit
60e2ba111f
@ -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>);
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -12,7 +12,7 @@ export class FolderPageLoader {
|
||||
url: '/fsdfds',
|
||||
text: '',
|
||||
breadcrumbs: [
|
||||
{ title: 'Dashboards', uri: '/dashboards' },
|
||||
{ title: 'Dashboards', url: '/dashboards' },
|
||||
{ title: ' ' },
|
||||
],
|
||||
children: [
|
||||
|
@ -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>
|
||||
</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="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="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] === 'Dashboards'">
|
||||
<dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,42 +1,5 @@
|
||||
<page-header model="ctrl.navModel"></page-header>
|
||||
|
||||
<!-- <div class="page-header-canvas"> -->
|
||||
<!-- <div class="page-container"> -->
|
||||
<!-- <navbar model="ctrl.navModel"></navbar> -->
|
||||
<!-- -->
|
||||
<!-- <div class="page-header"> -->
|
||||
<!-- <page-h1 model="ctrl.navModel"></page-h1> -->
|
||||
<!-- -->
|
||||
<!-- <div class="page-header-tabs"> -->
|
||||
<!-- <ul class="gf-tabs"> -->
|
||||
<!-- <li class="gf-tabs-item"> -->
|
||||
<!-- <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> -->
|
||||
<!-- <i class="icon-gf icon-gf-panel"></i> -->
|
||||
<!-- Panels -->
|
||||
<!-- </a> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li class="gf-tabs-item"> -->
|
||||
<!-- <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> -->
|
||||
<!-- <i class="gicon gicon-datasources"></i> -->
|
||||
<!-- Data sources -->
|
||||
<!-- </a> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li class="gf-tabs-item"> -->
|
||||
<!-- <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> -->
|
||||
<!-- <i class="icon-gf icon-gf-apps"></i> -->
|
||||
<!-- Apps -->
|
||||
<!-- </a> -->
|
||||
<!-- </li> -->
|
||||
<!-- </ul> -->
|
||||
<!-- -->
|
||||
<!-- <a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> -->
|
||||
<!-- Find more <img src="public/img/icn-plugins-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">
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user