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

feat(plugins): progress on plugins page

Browse Source
pull/4169/head
Torkel Ödegaard 10 years ago
parent b98e5690eb
commit c148d89004
15 changed files with 263 additions and 116 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. 1
      pkg/api/dtos/plugins.go
  2. 1
      pkg/api/plugin_setting.go
  3. 4
      pkg/plugins/frontend_plugin.go
  4. 2
      public/app/features/plugins/edit_ctrl.ts
  5. 245
      public/app/features/plugins/partials/edit.html
  6. 3
      public/sass/_grafana.scss
  7. 6
      public/sass/_variables.dark.scss
  8. 2
      public/sass/_variables.light.scss
  9. 7
      public/sass/_variables.scss
  10. 2
      public/sass/base/_type.scss
  11. 2
      public/sass/components/_tabs.scss
  12. 14
      public/sass/layout/_lists.scss
  13. 52
      public/sass/layout/_page.scss
  14. 11
      public/sass/pages/_dashboard.scss
  15. 27
      public/sass/pages/_plugins.scss

1
pkg/api/dtos/plugins.go
Unescape View File

@ -4,6 +4,7 @@ import "github.com/grafana/grafana/pkg/plugins"
type PluginSetting struct {
Name string `json:"name"`
Type string `json:"type"`
PluginId string `json:"pluginId"`
Enabled bool `json:"enabled"`
Pinned bool `json:"pinned"`

1
pkg/api/plugin_setting.go
Unescape View File

@ -42,6 +42,7 @@ func GetPluginSettingById(c *middleware.Context) Response {
return ApiError(404, "Plugin not found, no installed plugin with that id", nil)
} else {
dto := &dtos.PluginSetting{
Type: def.Type,
PluginId: def.Id,
Name: def.Name,
Info: &def.Info,

4
pkg/plugins/frontend_plugin.go
Unescape View File

@ -56,6 +56,10 @@ func (fp *FrontendPluginBase) handleModuleDefaults() {
}
func evalRelativePluginUrlPath(pathStr string, pluginId string) string {
if pathStr == "" {
return ""
}
u, _ := url.Parse(pathStr)
if u.IsAbs() {
return pathStr

2
public/app/features/plugins/edit_ctrl.ts
Unescape View File

@ -8,11 +8,13 @@ export class PluginEditCtrl {
pluginId: any;
includedPanels: any;
includedDatasources: any;
tabIndex: number;
/** @ngInject */
constructor(private backendSrv: any, private $routeParams: any) {
this.model = {};
this.pluginId = $routeParams.pluginId;
this.tabIndex = 0;
this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => {
this.model = result;

245
public/app/features/plugins/partials/edit.html
Unescape View File

@ -1,112 +1,167 @@
<navbar title="Plugins" title-url="plugins" icon="icon-gf icon-gf-apps">
<a href="plugins/apps" class="navbar-page-btn">
<i class="fa fa-cubes"></i>
<i class="fa fa-chevron-right"></i>
Apps
</a>
</navbar>
<div class="page-container">
<div class="page-header">
<img class="page-header-logo" src="{{ctrl.model.info.logos.large}}">
<h1>
{{ctrl.model.name}}
</h1>
<div class="plugin-header">
<span ng-show="ctrl.model.info.logos.large" class="plugin-header-logo">
<img src="{{ctrl.model.info.logos.large}}">
</span>
<div class="plugin-header-info-block">
<h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
<div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
<div class="plugin-header-stamps">
<span class="plugin-header-stamps-type">
<i class="icon-gf icon-gf-apps"></i> {{ctrl.model.type}}
</span>
</div>
</div>
</div>
<div class="flex-container">
<div class="app-edit-description">
{{ctrl.model.info.description}}<br>
<span style="small">
Version: {{ctrl.model.info.version}} &nbsp; &nbsp; Updated: {{ctrl.model.info.updated}}
</span>
<ul class="nav nav-tabs nav-tabs-alt">
<li ng-repeat="tab in ::['Overview', 'Details', 'Config']" ng-class="{active: ctrl.tabIndex === $index}">
<a ng-click="ctrl.tabIndex= $index">
{{::tab}}
</a>
</li>
</ul>
<div class="page-body">
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 0">
README.md
</div>
<div class="form-inline">
<editor-checkbox text="Enabled" model="ctrl.model.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
&nbsp; &nbsp; &nbsp;
<editor-checkbox text="Pinned" model="ctrl.model.pinned" change="ctrl.togglePinned()"></editor-checkbox>
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 1">
Details
</div>
</div>
<div class="flex-column">
<ul class="app-edit-links">
<li>
By <a href="{{ctrl.model.info.author.url}}" class="external-link" target="_blank">{{ctrl.model.info.author.name}}</a>
</li>
<li ng-repeat="link in ctrl.model.info.links">
<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
</li>
</ul>
<div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabIndex === 2">
<div class="gf-form-inline">
<div class="gf-form">
<editor-checkbox text="Enabled" model="ctrl.model.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
</div>
<div class="gf-form">
<editor-checkbox text="Pinned" model="ctrl.model.pinned" change="ctrl.togglePinned()"></editor-checkbox>
</div>
</div>
</div>
<aside class="page-sidebar">
<section class="page-sidebar-section">
<h4>Version</h4>
<span>1.0.1</span>
</section>
<section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
<h5>Includes</h4>
<span>TODO</span>
</section>
<section class="page-sidebar-section">
<h5>Dependencies</h4>
<span>TODO</span>
</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>
<!-- <section class="simple&#45;box"> -->
<!-- <h3 class="simple&#45;box&#45;header">Included with app:</h3> -->
<!-- <div class="flex&#45;container"> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;th&#45;large"></i> -->
<!-- Dashboards -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li><em class="small">None</em></li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;line&#45;chart"></i> -->
<!-- Panels -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li ng&#45;show="!ctrl.includedPanels.length"><em class="small">None</em></li> -->
<!-- <li ng&#45;repeat="panel in ctrl.includedPanels"> -->
<!-- {{panel.name}} -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;database"></i> -->
<!-- Datasources -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li ng&#45;show="!ctrl.includedDatasources.length"><em class="small">None</em></li> -->
<!-- <li ng&#45;repeat="ds in ctrl.includedDatasources"> -->
<!-- {{ds.name}} -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;files&#45;o"></i> -->
<!-- Pages -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li ng&#45;repeat="page in ctrl.model.pages"> -->
<!-- <a href="apps/{{ctrl.appId}}/page/{{page.slug}}" class="external&#45;link">{{page.name}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- <section class="simple&#45;box"> -->
<!-- <h3 class="simple&#45;box&#45;header">Dependencies:</h3> -->
<!-- <div class="simple&#45;box&#45;body"> -->
<!-- Grafana 2.6.x -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- <section class="simple&#45;box"> -->
<!-- <h3 class="simple&#45;box&#45;header">Configuration:</h3> -->
<!-- <div class="simple&#45;box&#45;body"> -->
<!-- <div ng&#45;if="ctrl.model.appId"> -->
<!-- <plugin&#45;component type="app&#45;config&#45;ctrl"></plugin&#45;component> -->
<!-- <div class="clearfix"></div> -->
<!-- <button type="submit" class="btn btn&#45;success" ng&#45;click="ctrl.update()">Save</button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- <div class="app&#45;edit&#45;description"> -->
<!-- {{ctrl.model.info.description}}<br> -->
<!-- <span style="small"> -->
<!-- Version: {{ctrl.model.info.version}} &#38;nbsp; &#38;nbsp; Updated: {{ctrl.model.info.updated}} -->
<!-- </span> -->
<!-- </div> -->
<!-- -->
<!-- </div> -->
<!-- <div class="flex&#45;column"> -->
<!-- <ul class="app&#45;edit&#45;links"> -->
<!-- <li> -->
<!-- By <a href="{{ctrl.model.info.author.url}}" class="external&#45;link" target="_blank">{{ctrl.model.info.author.name}}</a> -->
<!-- </li> -->
<!-- <li ng&#45;repeat="link in ctrl.model.info.links"> -->
<!-- <a href="{{link.url}}" class="external&#45;link" target="_blank">{{link.name}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <section class="simple&#45;box"> -->
<!-- <h3 class="simple&#45;box&#45;header">Included with app:</h3> -->
<!-- <div class="flex&#45;container"> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;th&#45;large"></i> -->
<!-- Dashboards -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li><em class="small">None</em></li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;line&#45;chart"></i> -->
<!-- Panels -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li ng&#45;show="!ctrl.includedPanels.length"><em class="small">None</em></li> -->
<!-- <li ng&#45;repeat="panel in ctrl.includedPanels"> -->
<!-- {{panel.name}} -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;database"></i> -->
<!-- Datasources -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li ng&#45;show="!ctrl.includedDatasources.length"><em class="small">None</em></li> -->
<!-- <li ng&#45;repeat="ds in ctrl.includedDatasources"> -->
<!-- {{ds.name}} -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- <div class="simple&#45;box&#45;body simple&#45;box&#45;column"> -->
<!-- <div class="simple&#45;box&#45;column&#45;header"> -->
<!-- <i class="fa fa&#45;files&#45;o"></i> -->
<!-- Pages -->
<!-- </div> -->
<!-- <ul> -->
<!-- <li ng&#45;repeat="page in ctrl.model.pages"> -->
<!-- <a href="apps/{{ctrl.appId}}/page/{{page.slug}}" class="external&#45;link">{{page.name}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- <section class="simple&#45;box"> -->
<!-- <h3 class="simple&#45;box&#45;header">Dependencies:</h3> -->
<!-- <div class="simple&#45;box&#45;body"> -->
<!-- Grafana 2.6.x -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- <section class="simple&#45;box"> -->
<!-- <h3 class="simple&#45;box&#45;header">Configuration:</h3> -->
<!-- <div class="simple&#45;box&#45;body"> -->
<!-- <div ng&#45;if="ctrl.model.appId"> -->
<!-- <plugin&#45;component type="app&#45;config&#45;ctrl"></plugin&#45;component> -->
<!-- <div class="clearfix"></div> -->
<!-- <button type="submit" class="btn btn&#45;success" ng&#45;click="ctrl.update()">Save</button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- -->
<!-- </div> -->

3
public/sass/_grafana.scss
Unescape View File

@ -26,6 +26,7 @@
@import "utils/widths";
// LAYOUTS
@import "layout/lists";
@import "layout/page";
// COMPONENTS
@ -44,7 +45,6 @@
@import "components/tagsinput";
@import "components/tables_lists";
@import "components/search";
@import "components/dashboard";
@import "components/tightform";
@import "components/gf-form";
@import "components/sidemenu";
@ -69,6 +69,7 @@
// PAGES
@import "pages/login";
@import "pages/dashboard";
@import "pages/playlist";
@import "pages/admin";
@import "pages/alerting";

6
public/sass/_variables.dark.scss
Unescape View File

@ -50,8 +50,10 @@ $critical: #ed2e18;
// -------------------------
$body-bg: rgb(20,20,20);
$page-bg: $dark-2;
$body-color: $gray-4;
$text-color: $gray-4;
$body-color: $gray-4;
$text-color: $gray-4;
$text-color-strong: $white;
$text-color-weak: $gray-1;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);

2
public/sass/_variables.light.scss
Unescape View File

@ -58,6 +58,8 @@ $body-bg: $white;
$page-bg: $white;
$body-color: $gray-1;
$text-color: $gray-1;
$text-color-strong: $white;
$text-color-weak: $gray-1;
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);

7
public/sass/_variables.scss
Unescape View File

@ -93,7 +93,7 @@ $font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$line-height-base: 1.5 !default;
$font-weight-semi-bold: 600;
$font-weight-semi-bold: 600;
$font-size-h1: 2.0rem !default;
$font-size-h2: 1.75rem !default;
@ -141,6 +141,11 @@ $border-radius-sm: 0.1rem !default;
$caret-width: .3em !default;
$caret-width-lg: $caret-width !default;
// Page
$page-sidebar-width: 10rem;
$page-sidebar-margin: 5rem;
// Links
// -------------------------
$link-decoration: none !default;

2
public/sass/base/_type.scss
Unescape View File

@ -65,7 +65,7 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color;
}
h1, .h1 { font-size: $font-size-h1; }
h1, .h1 { font-size: $font-size-h1; font-style: italic; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }

2
public/sass/components/_tabs.scss
Unescape View File

@ -13,7 +13,7 @@
@include border-radius(3px);
border: 1px solid $divider-border-color;
background-color: transparent;
border-bottom: 1px solid $panel-bg;
border-bottom: 1px solid $page-bg;
color: $link-color;
}

14
public/sass/layout/_lists.scss
Unescape View File

@ -0,0 +1,14 @@
.ui-list {
margin: 0;
padding: 0;
list-style: none;
> li {
margin-bottom: 0.3125rem;
&:last-child {
margin-bottom: 0;
}
}
}

52
public/sass/layout/_page.scss
Unescape View File

@ -3,21 +3,10 @@
height: 100%;
}
.dashboard-container {
padding: $dashboard-padding;
width: 100%;
}
.main-view {
height: 100%;
}
.page-dashboard {
.main-view {
background-image: none;
}
}
.page-container {
background-color: $page-bg;
padding: ($spacer * 2) ($spacer * 4);
@ -27,12 +16,29 @@
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
}
.page-header-logo {
max-width: 7rem;
.page-body {
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
.page-content-with-sidebar {
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
}
.page-sidebar {
@include media-breakpoint-up(md) {
width: $page-sidebar-width;
margin-left: $page-sidebar-margin;
}
}
.page-header {
padding: $spacer 0 $spacer/2 0;
margin-bottom: 2rem;
display: flex;
justify-content: flex-end;
align-items: flex-end;
@ -40,13 +46,12 @@
@include brand-bottom-border();
h1 {
font-style: italic;
flex-grow: 1;
}
button, a {
margin-left: $spacer;
}
margin-bottom: 2rem;
}
.page-heading {
@ -75,3 +80,20 @@
}
}
.page-sidebar {
color: $text-color-weak;
h4 {
font-size: $font-size-base;
font-weight: $font-weight-semi-bold;
color: $text-color-strong;
}
h5 {
font-size: $font-size-base;
color: $text-color-weak;
font-weight: $font-weight-semi-bold;
}
}
.page-sidebar-section {
margin-bottom: $spacer*2;
}

11
public/sass/components/_dashboard.scss → public/sass/pages/_dashboard.scss
Unescape View File

@ -1,3 +1,14 @@
.dashboard-container {
padding: $dashboard-padding;
width: 100%;
}
.page-dashboard {
.main-view {
background-image: none;
}
}
.template-variable {
color: $variable;
}

27
public/sass/pages/_plugins.scss
Unescape View File

@ -1,3 +1,30 @@
.plugin-header {
@include clearfix();
padding: $spacer 0 $spacer/2 0;
margin-bottom: 2rem;
}
.plugin-header-logo {
float: left;
width: 7rem;
img {
width: 7rem;
}
margin-right: $spacer;
}
.plugin-header-info-block {
padding-top: $spacer;
}
.plugin-header-author {
}
.plugin-header-stamps-type {
color: $link-color-disabled;
text-transform: uppercase;
}
// .app-edit-logo-box {
// padding: 1.2rem;

Write Preview
Loading…
Cancel
Save