apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: made plugins page work

Browse Source
pull/10063/head
Torkel Ödegaard 8 years ago
parent 32ffb2d544
commit e53b55479a
7 changed files with 79 additions and 102 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      pkg/api/index.go
  2. 1
      public/app/features/org/all.ts
  3. 9
      public/app/features/org/partials/user_groups.html
  4. 2
      public/app/features/org/user_groups_ctrl.ts
  5. 147
      public/app/features/plugins/partials/plugin_edit.html
  6. 2
      public/app/features/plugins/plugin_edit_ctrl.ts
  7. 18
      public/sass/layout/_page.scss

2
pkg/api/index.go
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save