Skip to content

Commit f22be91

Browse files
ryantxuryantxu
committed
Release 0.0.6
1 parent 5ef0809 commit f22be91

14 files changed

+394
-2
lines changed

‎dist/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018 Ryan McKinley
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎dist/README.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
## AJAX Panel for Grafana
2+
3+
[![CircleCI](https://circleci.com/gh/ryantxu/ajax-panel/tree/master.svg?style=svg)](https://circleci.com/gh/ryantxu/ajax-panel/tree/master)
4+
[![dependencies Status](https://david-dm.org/ryantxu/ajax-panel/status.svg)](https://david-dm.org/ryantxu/ajax-panel)
5+
[![devDependencies Status](https://david-dm.org/ryantxu/ajax-panel/dev-status.svg)](https://david-dm.org/ryantxu/ajax-panel?type=dev)
6+
7+
The AJAX Panel is a general way to load external content into a grafana dashboard.
8+
9+
### Options
10+
11+
* **Method**:
12+
13+
GET or POST or iframe
14+
15+
* **URL**:
16+
17+
The URL to request
18+
19+
* **Parameters**:
20+
21+
The parameters that will be passed in the request. This is a javascript object with access to the variables: - `ctrl` The control object.
22+
23+
### Screenshots
24+
25+
![Screenshot](https://raw.githubusercontent.com/ryantxu/ajax-panel/master/src/img/screenshot.png)
26+
![Options](https://raw.githubusercontent.com/ryantxu/ajax-panel/master/src/img/screenshot-ajax-options.png)
27+
![Examples](https://raw.githubusercontent.com/ryantxu/ajax-panel/master/src/img/screenshot-examples.png)
28+
29+
#### Changelog
30+
31+
##### v0.0.6 (not released yet)
32+
33+
* Support requests to /api (grafana internal API)
34+
* Adding circleci build
35+
* removing dist from master build (only add it on release branches)
36+
* Support empty text response (#9)
37+
* webpack build
38+
* Show query results
39+
* tested with grafana 6
40+
41+
42+
##### v0.0.5
43+
44+
* Support angular templates using AJAX response
45+
* Options to display as: HTML, Text, JSON, or preformatted text
46+
* Fixed display issue with 5.1
47+
* Support direct link rendered image
48+
* Show possible variables in editor
49+
50+
##### v0.0.4
51+
52+
* Support template variables in parameters (@linar-jether)
53+
* Improved error handling
54+
* Move ajax requests to 'issueQueries' block rather than refresh
55+
* Show loading spinner
56+
* Convert to TypeScript
57+
* Use datasources for complex authentication
58+
* Support loading images
59+
* Support header configuration
60+
* Support showing time info
61+
* Include various sample configurations
62+
63+
##### v0.0.3
64+
65+
* Support template variables in url (@linar-jether)
66+
* Adding iframe method (@linar-jether)
67+
68+
##### v0.0.2
69+
70+
* Quick and Dirty, but it works!

‎dist/img/ajax_panel_logo.svg

+1
Loading

‎dist/img/screenshot-ajax-options.png

113 KB
Loading

‎dist/img/screenshot-examples.png

170 KB
Loading

‎dist/img/screenshot.png

669 KB
Loading

‎dist/module.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/module.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/partials/editor.display.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<div class="editor-row">
2+
<div class="section gf-form-group">
3+
<h5 class="section-heading">Display</h5>
4+
<div class="gf-form">
5+
<span class="gf-form-label width-5">Mode</span>
6+
7+
8+
<div ng-if="ctrl.isIframe">
9+
<select class="gf-form-input" value="iframe">
10+
<option value="iframe">iframe</option>
11+
</select>
12+
</div>
13+
14+
<div ng-if="!ctrl.isIframe" class="gf-form-select-wrapper width-12">
15+
<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-change="ctrl.updateTemplate()">
16+
<option value="html">Direct HTML</option>
17+
<option value="text">Escaped Text</option>
18+
<option value="pre">Preformatted Text</option>
19+
<option value="json">JSON Tree</option>
20+
<option value="template">Angular Template</option>
21+
</select>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<div class="section gf-form-group">
27+
<h5 class="section-heading">Time</h5>
28+
<gf-form-switch class="gf-form" label="Show Time" label-class="width-7"
29+
checked="ctrl.panel.showTime"
30+
on-change="ctrl.onConfigChanged()"></gf-form-switch>
31+
<div ng-if="ctrl.panel.showTime">
32+
<div class="gf-form">
33+
<span class="gf-form-label width-7">Prefix</span>
34+
<input type="text" class="gf-form-input width-10" placeholder="prefix"
35+
ng-model="ctrl.panel.showTimePrefix" ng-change="ctrl.onConfigChanged()" ng-model-onblur />
36+
</div>
37+
<div class="gf-form">
38+
<span class="gf-form-label width-7">Value</span>
39+
<div class="gf-form-select-wrapper width-10">
40+
<select class="gf-form-input" ng-model="ctrl.panel.showTimeValue" ng-change="ctrl.onConfigChanged()">
41+
<option value="request">Request Time</option>
42+
<option value="recieve">Recieve Time</option>
43+
<!--
44+
<option value="header-Date">Date Header</option>
45+
<option value="header-Last-Modified">Last-Modified</option>
46+
<option value="header-Expires">Expires</option>
47+
-->
48+
<option value="">None</option>
49+
</select>
50+
</div>
51+
</div>
52+
<div class="gf-form" ng-if="ctrl.panel.showTimeValue">
53+
<span class="gf-form-label width-7">Format</span>
54+
<input type="text" class="gf-form-input width-10" placeholder="MomentJS" ng-model="ctrl.panel.showTimeFormat" ng-change="ctrl.onConfigChanged()" ng-model-onblur />
55+
<span bs-tooltip="'See documentation at:<br/>http://momentjs.com'">&nbsp;<a href="https://momentjs.com/docs/#/displaying/" target="_blank"><i class="fa fa-question-circle"></i></a></span>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<div class="editor-row" ng-if="ctrl.panel.mode === 'template'">
62+
<h5 class="section-heading">Angular Template</h5>
63+
64+
<div class="gf-form">
65+
<div class="gf-form gf-form--grow">
66+
<code-editor
67+
content="ctrl.panel.template"
68+
on-change="ctrl.updateTemplate()"
69+
data-mode="html"
70+
data-behaviours-enabled="true"
71+
data-snippets-enabled="false"
72+
data-max-lines="20"
73+
code-editor-focus="true" >
74+
</code-editor>
75+
</div>
76+
</div>
77+
<span>
78+
A dynamic angular template with the AJAX response bound to the variable: <code ng-non-bindable>{{ response }}</code>
79+
</span>
80+
</div>

‎dist/partials/editor.examples.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
3+
4+
<div class="dashlist">
5+
<div class="dashlist-section">
6+
<div class="dashlist-item" ng-repeat="example in ctrl.getStaticExamples()">
7+
<a class="dashlist-link"
8+
ng-click="ctrl.loadExample(example, $event);" href="#">
9+
<span class="dashlist-title">
10+
{{example.name}}
11+
</span>
12+
<span class="pluginlist-version">
13+
{{example.text}}
14+
</span>
15+
</a>
16+
</div>
17+
</div>
18+
19+
<div class="small-link">
20+
More examples? <a href="https://github.com/ryantxu/ajax-panel/fork">Contributions Welcome!</a>
21+
</div>

‎dist/partials/editor.request.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<div class="editor-row">
2+
3+
<h5 class="section-heading">Source</h5>
4+
<div class="gf-form-group">
5+
<div class="gf-form">
6+
<div class="gf-form-select-wrapper width-20">
7+
<select class="gf-form-input"
8+
ng-model="ctrl.panel.request"
9+
ng-change="ctrl.updateTemplate(); ctrl.onConfigChanged()">
10+
<option value="http">HTTP</option>
11+
<option value="query">Metric Query</option>
12+
<option value="datasource">Datasource</option>
13+
</select>
14+
</div>
15+
</div>
16+
17+
<div ng-if="ctrl.panel.request === 'datasource'">
18+
<span class="small-link">
19+
<span ng-show="ctrl.dsInfo.isProxy" class="label label-tag">Proxy</span>
20+
<span ng-show="ctrl.dsInfo.basicAuth" class="label label-tag">Basic Auth</span>
21+
<span ng-show="ctrl.dsInfo.withCredentials" class="label label-tag">Use Credentials</span>
22+
<a ng-href="{{ ctrl.dsInfo.baseURL }}" target="_blank">{{ ctrl.dsInfo.baseURL }} &nbsp; <i class="fa fa-external-link"></i></a>
23+
</span>
24+
</div>
25+
</div>
26+
27+
<div class="gf-form-group" ng-if="!ctrl.isUsingMetricQuery()">
28+
<div class="gf-form">
29+
<span class="gf-form-label width-9">{{ (ctrl.panel.request==='datasource') ? 'Path' : 'URL' }}</span>
30+
<input type="text" class="input-large gf-form-input" placeholder="URL" ng-model="ctrl.panel.url" ng-change="ctrl.onConfigChanged()" ng-model-onblur />
31+
</div>
32+
<div class="gf-form">
33+
<span class="gf-form-label width-9">Method</span>
34+
<div class="gf-form-select-wrapper width-9">
35+
<select class="gf-form-input" ng-model="ctrl.panel.method" ng-options="t for t in ['GET', 'POST', 'iframe']" ng-change="ctrl.updateTemplate(); ctrl.onConfigChanged()"></select>
36+
</div>
37+
</div>
38+
<div ng-if="!ctrl.isIframe">
39+
<div class="gf-form" >
40+
<span class="gf-form-label width-9">
41+
Response
42+
<info-popover mode="right-normal" position="top center">
43+
Useful when loading images<br/>
44+
or other non-text content
45+
</info-popover>
46+
</span>
47+
<div class="gf-form-select-wrapper width-9">
48+
<select class="gf-form-input" ng-model="ctrl.panel.responseType" ng-change="ctrl.onConfigChanged()">
49+
<option value="text">Text</option>
50+
<option value="blob">Blob</option>
51+
<option value="document">Document</option>
52+
<option value="json">JSON</option>
53+
<option value="arraybuffer">Array Buffer (for images)</option>
54+
</select>
55+
</div>
56+
<span bs-tooltip="'See documentation at:<br/>https://developer.mozilla.org/'"> &nbsp; <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType" target="_blank"><i class="fa fa-question-circle"></i></a></span>
57+
</div>
58+
<gf-form-switch
59+
class="gf-form"
60+
label="Credentials"
61+
label-class="width-9"
62+
checked="ctrl.panel.withCredentials"
63+
on-change="ctrl.onConfigChanged()"></gf-form-switch>
64+
</div>
65+
<gf-form-switch
66+
class="gf-form"
67+
tooltip="Only make a request when the URL changes."
68+
label="Only Changes"
69+
label-class="width-9"
70+
checked="ctrl.panel.skipSameURL"
71+
on-change="ctrl.onConfigChanged()"></gf-form-switch>
72+
</div>
73+
74+
75+
<!-- Standard Parameters -->
76+
<div ng-if="!ctrl.isUsingMetricQuery()">
77+
<div class="gf-form-group small-link">
78+
<h5 class="section-heading">Parameters (via javascript)</h5>
79+
<div class="gf-form gf-form--grow">
80+
<code-editor
81+
content="ctrl.panel.params_js"
82+
on-change="ctrl.updateFN()"
83+
data-mode="javascript"
84+
data-behaviours-enabled="true"
85+
data-snippets-enabled="false"
86+
data-max-lines="20" >
87+
</code-editor>
88+
</div>
89+
<div style="overflow:hidden; white-space: nowrap;">
90+
<a ng-href="{{ ctrl.lastURL }}" target="_blank">
91+
<i class="fa fa-external-link"></i>
92+
{{ ctrl.lastURL }}
93+
</a>
94+
</div>
95+
</div>
96+
97+
<div class="gf-form-group" ng-if="!ctrl.isIframe">
98+
<h5 class="section-heading">Headers (via javascript)</h5>
99+
<div class="gf-form-inline">
100+
<div class="gf-form gf-form--grow">
101+
<code-editor
102+
content="ctrl.panel.header_js"
103+
on-change="ctrl.updateFN()"
104+
data-mode="javascript"
105+
data-behaviours-enabled="true"
106+
data-snippets-enabled="false"
107+
data-max-lines="20" >
108+
</code-editor>
109+
</div>
110+
</div>
111+
</div>
112+
113+
114+
<div class="gf-form-group" ng-if="ctrl.debugParams">
115+
<h5 class="section-heading">Variables</h5>
116+
<table class="filter-table" style="width:auto;">
117+
<tr ng-repeat="(key, value) in ctrl.debugParams track by $index">
118+
<td>${{key}}</td>
119+
<td>{{value}}</td>
120+
</tr>
121+
</table>
122+
</div>
123+
124+
<br/>
125+
<span class="small">
126+
Request Count: {{ ctrl.requestCount }}<br/>
127+
</span>
128+
</div>
129+
130+
</div>

‎dist/partials/module.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
<div><!-- Needed for Scrollbar to work! -->
3+
4+
<!-- Filled up by a dynamic template -->
5+
<div class="ngtemplate"></div>
6+
7+
<!-- Visibility is handled by jquery -->
8+
<div class="imgwrap" ng-click="ctrl.openFullscreen();">
9+
<img src="" />
10+
</div>
11+
12+
<div class="ajaxmodal">
13+
<div class="center-popup">
14+
<div class="center-wrap">
15+
<img />
16+
</div>
17+
</div>
18+
<div class="modal-backdrop"></div>
19+
</div>
20+
21+
</div>

‎dist/plugin.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"type": "panel",
3+
"name": "AJAX",
4+
"id": "ryantxu-ajax-panel",
5+
"info": {
6+
"description": "AJAX panel for grafana",
7+
"author": {
8+
"name": "Ryan McKinley",
9+
"url": "https://github.com/ryantxu"
10+
},
11+
"keywords": ["ajax", "panel"],
12+
"logos": {
13+
"small": "img/ajax_panel_logo.svg",
14+
"large": "img/ajax_panel_logo.svg"
15+
},
16+
"links": [
17+
{
18+
"name": "Project site",
19+
"url": "https://github.com/ryantxu/ajax-panel"
20+
},
21+
{
22+
"name": "MIT License",
23+
"url": "https://github.com/ryantxu/ajax-panel/blob/master/LICENSE"
24+
}
25+
],
26+
"screenshots": [
27+
{
28+
"name": "Options",
29+
"path": "img/screenshot-ajax-options.png"
30+
}
31+
],
32+
"version": "0.0.6",
33+
"updated": "2019-02-09"
34+
},
35+
"dependencies": {
36+
"grafanaVersion": "3.x.x",
37+
"plugins": []
38+
}
39+
}

0 commit comments

Comments
 (0)