IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: made plugins page work

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-01 10:47:21 +01:00
parent 32ffb2d544
commit e53b55479a
7 changed files with 79 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/api/index.go
View File

@@ -226,7 +226,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
}, },
{ {
Text: "Teams", Text: "Teams",
Id: "users", Id: "teams",
Description: "Manage org groups", Description: "Manage org groups",
Icon: "gicon gicon-user-group", Icon: "gicon gicon-user-group",
Url: setting.AppSubUrl + "/org/user-groups", Url: setting.AppSubUrl + "/org/user-groups",

1
public/app/features/org/all.ts
View File

@@ -5,6 +5,7 @@ import './select_org_ctrl';
import './change_password_ctrl'; import './change_password_ctrl';
import './new_org_ctrl'; import './new_org_ctrl';
import './user_invite_ctrl'; import './user_invite_ctrl';
import './user_groups_ctrl';
import './org_api_keys_ctrl'; import './org_api_keys_ctrl';
import './org_details_ctrl'; import './org_details_ctrl';
import './prefs_control'; import './prefs_control';

9
public/app/features/org/partials/user_groups.html
View File

@@ -3,14 +3,13 @@
<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 width-15 gf-form-group"> <div class="gf-form width-15">
<span style="position: relative;"> <label class="gf-form-label">Search</label>
<input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true" <input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true"
ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" /> ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
</span>
</div> </div>
<div class="page-action-bar__spacer"> <div class="page-action-bar__spacer"></div>
<a class="btn btn-success" ng-click="ctrl.openUserGroupModal()"> <a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>

2
public/app/features/org/user_groups_ctrl.ts
View File

@@ -15,7 +15,7 @@ export class UserGroupsCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, navModelSrv) { constructor(private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'users', 0); this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
this.get(); this.get();
} }

147
public/app/features/plugins/partials/plugin_edit.html
View File

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

2
public/app/features/plugins/plugin_edit_ctrl.ts
View File

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

18
public/sass/layout/_page.scss
View File

@@ -32,14 +32,6 @@
.page-body { .page-body {
padding-top: $spacer*2; padding-top: $spacer*2;
&--with-sidebar {
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
} }
.page-heading { .page-heading {
@@ -63,10 +55,18 @@
flex-grow: 1; flex-grow: 1;
} }
.page-content-with-sidebar { .sidebar-content {
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
} }
.sidebar-container {
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
.page-sidebar { .page-sidebar {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
width: $page-sidebar-width; width: $page-sidebar-width;