]> git.proxmox.com Git - pve-docs.git/blob - api-viewer/PVEAPI.js
api-viewer: adapt and add flex for parameter coolumns
[pve-docs.git] / api-viewer / PVEAPI.js
1 // avoid errors when running without development tools
2 if (!Ext.isDefined(Ext.global.console)) {
3 var console = {
4 dir: function() {},
5 log: function() {}
6 };
7 }
8
9 Ext.onReady(function() {
10
11 Ext.define('pve-param-schema', {
12 extend: 'Ext.data.Model',
13 fields: [
14 'name', 'type', 'typetext', 'description', 'verbose_description',
15 'enum', 'minimum', 'maximum', 'minLength', 'maxLength',
16 'pattern', 'title', 'requires', 'format', 'default',
17 'disallow', 'extends', 'links',
18 {
19 name: 'optional',
20 type: 'boolean'
21 }
22 ]
23 });
24
25 var store = Ext.create('Ext.data.TreeStore', {
26 model: Ext.define('pve-api-doc', {
27 extend: 'Ext.data.Model',
28 fields: [
29 'path', 'info', 'text',
30 ]
31 }),
32 proxy: {
33 type: 'memory',
34 data: pveapi
35 },
36 sorters: [{
37 property: 'leaf',
38 direction: 'ASC'
39 }, {
40 property: 'text',
41 direction: 'ASC'
42 }]
43 });
44
45 var render_description = function(value, metaData, record) {
46 var pdef = record.data;
47
48 value = pdef.verbose_description || value;
49
50 // TODO: try to render asciidoc correctly
51
52 metaData.style = 'white-space:pre-wrap;'
53
54 return Ext.htmlEncode(value);
55 };
56
57 var render_type = function(value, metaData, record) {
58 var pdef = record.data;
59
60 return pdef['enum'] ? 'enum' : (pdef.type || 'string');
61 };
62
63 var render_format = function(value, metaData, record) {
64 var pdef = record.data;
65
66 metaData.style = 'white-space:normal;'
67
68 if (pdef.typetext)
69 return Ext.htmlEncode(pdef.typetext);
70
71 if (pdef['enum'])
72 return pdef['enum'].join(' | ');
73
74 if (pdef.format)
75 return pdef.format;
76
77 if (pdef.pattern)
78 return Ext.htmlEncode(pdef.pattern);
79
80 return '';
81 };
82
83 var render_docu = function(data) {
84 var md = data.info;
85
86 // console.dir(data);
87
88 var items = [];
89
90 var clicmdhash = {
91 GET: 'get',
92 POST: 'create',
93 PUT: 'set',
94 DELETE: 'delete'
95 };
96
97 Ext.Array.each(['GET', 'POST', 'PUT', 'DELETE'], function(method) {
98 var info = md[method];
99 if (info) {
100
101 var usage = "";
102
103 usage += "<table><tr><td>HTTP:&nbsp;&nbsp;&nbsp;</td><td>" + method + " /api2/json" + data.path + "</td></tr><tr><td>&nbsp</td></tr>";
104 usage += "<tr><td>CLI:</td><td>pvesh " + clicmdhash[method] + " " + data.path + "</td></tr></table>";
105
106 var sections = [
107 {
108 title: 'Description',
109 html: Ext.htmlEncode(info.description),
110 bodyPadding: 10
111 },
112 {
113 title: 'Usage',
114 html: usage,
115 bodyPadding: 10
116 }
117 ];
118
119 if (info.parameters && info.parameters.properties) {
120
121 var pstore = Ext.create('Ext.data.Store', {
122 model: 'pve-param-schema',
123 proxy: {
124 type: 'memory'
125 },
126 groupField: 'optional',
127 sorters: [
128 {
129 property: 'name',
130 direction: 'ASC'
131 }
132 ]
133 });
134
135 Ext.Object.each(info.parameters.properties, function(name, pdef) {
136 pdef.name = name;
137 pstore.add(pdef);
138 });
139
140 pstore.sort();
141
142 var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
143 enableGroupingMenu: false,
144 groupHeaderTpl: '<tpl if="groupValue">Optional</tpl><tpl if="!groupValue">Required</tpl>'
145 });
146
147 sections.push({
148 xtype: 'gridpanel',
149 title: 'Parameters',
150 features: [groupingFeature],
151 store: pstore,
152 viewConfig: {
153 trackOver: false,
154 stripeRows: true
155 },
156 columns: [
157 {
158 header: 'Name',
159 dataIndex: 'name',
160 flex: 1
161 },
162 {
163 header: 'Type',
164 dataIndex: 'type',
165 renderer: render_type,
166 flex: 1
167 },
168 {
169 header: 'Default',
170 dataIndex: 'default',
171 flex: 1
172 },
173 {
174 header: 'Format',
175 dataIndex: 'type',
176 renderer: render_format,
177 flex: 2
178 },
179 {
180 header: 'Description',
181 dataIndex: 'description',
182 renderer: render_description,
183 flex: 6
184 }
185 ]
186 });
187
188 }
189
190 if (info.returns) {
191
192 var rtype = info.returns.type;
193 if (!rtype && info.returns.items)
194 rtype = 'array';
195 if (!rtype)
196 rtype = 'object';
197
198 sections.push({
199 title: 'Returns: ' + rtype
200 });
201 }
202
203 var permhtml = '';
204 if (!info.permissions) {
205 permhtml = "Root only.";
206 } else {
207 if (info.permissions.description) {
208 permhtml += "<div style='white-space:pre-wrap;padding-bottom:10px;'>" +
209 Ext.htmlEncode(info.permissions.description) + "</div>";
210 }
211
212 if (info.permissions.user) {
213 if (!info.permissions.description) {
214 if (info.permissions.user === 'world') {
215 permhtml += "Accessible without any authententification.";
216 } else if (info.permissions.user === 'all') {
217 permhtml += "Accessible by all authententicated users.";
218 } else {
219 permhtml += 'Onyl accessible by user "' +
220 info.permissions.user + '"';
221 }
222 }
223 } else if (info.permissions.check) {
224 permhtml += "<pre>Check: " +
225 Ext.htmlEncode(Ext.JSON.encode(info.permissions.check)) + "</pre>";
226 } else {
227 permhtml += "Unknown systax!";
228 }
229 }
230
231 sections.push({
232 title: 'Required permissions',
233 bodyPadding: 10,
234 html: permhtml
235 });
236
237
238 items.push({
239 title: method,
240 autoScroll: true,
241 defaults: {
242 border: false
243 },
244 items: sections
245 });
246 }
247 });
248
249 var ct = Ext.getCmp('docview');
250 ct.setTitle("Path: " + data.path);
251 ct.removeAll(true);
252 ct.add(items);
253 ct.setActiveTab(0);
254 };
255
256 var tree = Ext.create('Ext.tree.Panel', {
257 title: 'Resource Tree',
258 store: store,
259 width: 200,
260 region: 'west',
261 split: true,
262 margins: '5 0 5 5',
263 rootVisible: false,
264 listeners: {
265 selectionchange: function(v, selections) {
266 if (!selections[0])
267 return;
268 var rec = selections[0];
269 render_docu(rec.data);
270 }
271 }
272 });
273
274 Ext.create('Ext.container.Viewport', {
275 layout: 'border',
276 renderTo: Ext.getBody(),
277 items: [
278 tree,
279 {
280 xtype: 'tabpanel',
281 title: 'Documentation',
282 id: 'docview',
283 region: 'center',
284 margins: '5 5 5 0',
285 layout: 'fit',
286 items: []
287 }
288 ]
289 });
290
291 });