From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 06561735ED for ; Fri, 28 May 2021 14:13:45 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 03D97960D for ; Fri, 28 May 2021 14:13:45 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id B24AD95FF for ; Fri, 28 May 2021 14:13:43 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 8C17E466C0 for ; Fri, 28 May 2021 14:13:43 +0200 (CEST) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Fri, 28 May 2021 14:13:40 +0200 Message-Id: <20210528121341.16026-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.20.1 In-Reply-To: <20210528121341.16026-1-d.csapak@proxmox.com> References: <20210528121341.16026-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.108 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment POISEN_SPAM_PILL 0.1 Meta: its spam POISEN_SPAM_PILL_2 0.1 random spam to be learned in bayes POISEN_SPAM_PILL_4 0.1 random spam to be learned in bayes SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [pdef.name, metadata.style] Subject: [pve-devel] [PATCH widget-toolkit 2/3] add api-viewer source X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Fri, 28 May 2021 12:13:45 -0000 so that we can reuse it across products source was 'pbs' since that had the most features (http upgrade check) a few changes to combine pve/pbs/pmg: * use an optional 'cliusage' function it it exists to determine CLI usage * check allowtoken for undefined to see if it is allowed or not * use 'pmxapi' instead of pbs/pmg/pveapi * rename all occurrences of 'pve' to 'pmx' Signed-off-by: Dominik Csapak --- src/api-viewer/APIVIEWER.js | 529 ++++++++++++++++++++++++++++++++++++ 1 file changed, 529 insertions(+) create mode 100644 src/api-viewer/APIVIEWER.js diff --git a/src/api-viewer/APIVIEWER.js b/src/api-viewer/APIVIEWER.js new file mode 100644 index 0000000..c2864ed --- /dev/null +++ b/src/api-viewer/APIVIEWER.js @@ -0,0 +1,529 @@ +// avoid errors when running without development tools +if (!Ext.isDefined(Ext.global.console)) { + var console = { + dir: function() {}, + log: function() {} + }; +} + +Ext.onReady(function() { + + Ext.define('pmx-param-schema', { + extend: 'Ext.data.Model', + fields: [ + 'name', 'type', 'typetext', 'description', 'verbose_description', + 'enum', 'minimum', 'maximum', 'minLength', 'maxLength', + 'pattern', 'title', 'requires', 'format', 'default', + 'disallow', 'extends', 'links', + { + name: 'optional', + type: 'boolean' + } + ] + }); + + var store = Ext.define('pmx-updated-treestore', { + extend: 'Ext.data.TreeStore', + model: Ext.define('pmx-api-doc', { + extend: 'Ext.data.Model', + fields: [ + 'path', 'info', 'text', + ] + }), + proxy: { + type: 'memory', + data: pmxapi + }, + sorters: [{ + property: 'leaf', + direction: 'ASC' + }, { + property: 'text', + direction: 'ASC' + }], + filterer: 'bottomup', + doFilter: function(node) { + this.filterNodes(node, this.getFilters().getFilterFn(), true); + }, + + filterNodes: function(node, filterFn, parentVisible) { + var me = this, + bottomUpFiltering = me.filterer === 'bottomup', + match = filterFn(node) && parentVisible || (node.isRoot() && !me.getRootVisible()), + childNodes = node.childNodes, + len = childNodes && childNodes.length, i, matchingChildren; + + if (len) { + for (i = 0; i < len; ++i) { + matchingChildren = me.filterNodes(childNodes[i], filterFn, match || bottomUpFiltering) || matchingChildren; + } + if (bottomUpFiltering) { + match = matchingChildren || match; + } + } + + node.set("visible", match, me._silentOptions); + return match; + }, + + }).create(); + + var render_description = function(value, metaData, record) { + var pdef = record.data; + + value = pdef.verbose_description || value; + + // TODO: try to render asciidoc correctly + + metaData.style = 'white-space:pre-wrap;' + + return Ext.htmlEncode(value); + }; + + var render_type = function(value, metaData, record) { + var pdef = record.data; + + return pdef['enum'] ? 'enum' : (pdef.type || 'string'); + }; + + let render_simple_format = function(pdef, type_fallback) { + if (pdef.typetext) + return pdef.typetext; + + if (pdef['enum']) + return pdef['enum'].join(' | '); + + if (pdef.format) + return pdef.format; + + if (pdef.pattern) + return pdef.pattern; + + if (pdef.type === 'boolean') + return ``; + + if (type_fallback && pdef.type) + return `<${pdef.type}>`; + + return; + }; + + let render_format = function(value, metaData, record) { + let pdef = record.data; + + metaData.style = 'white-space:normal;' + + if (pdef.type === 'array' && pdef.items) { + let format = render_simple_format(pdef.items, true); + return `[${Ext.htmlEncode(format)}, ...]`; + } + + return Ext.htmlEncode(render_simple_format(pdef) || ''); + }; + + var real_path = function(path) { + return path.replace(/^.*\/_upgrade_(\/)?/, "/"); + }; + + var permission_text = function(permission) { + let permhtml = ""; + + if (permission.user) { + if (!permission.description) { + if (permission.user === 'world') { + permhtml += "Accessible without any authentication."; + } else if (permission.user === 'all') { + permhtml += "Accessible by all authenticated users."; + } else { + permhtml += 'Onyl accessible by user "' + + permission.user + '"'; + } + } + } else if (permission.check) { + permhtml += "
Check: " +
+		Ext.htmlEncode(Ext.JSON.encode(permission.check))  + "
"; + } else if (permission.userParam) { + permhtml += `
Check if user matches parameter '${permission.userParam}'`; + } else if (permission.or) { + permhtml += "
Or
"; + Ext.Array.each(permission.or, function(sub_permission) { + permhtml += permission_text(sub_permission); + }) + permhtml += "
"; + } else if (permission.and) { + permhtml += "
And
"; + Ext.Array.each(permission.and, function(sub_permission) { + permhtml += permission_text(sub_permission); + }) + permhtml += "
"; + } else { + //console.log(permission); + permhtml += "Unknown syntax!"; + } + + return permhtml; + }; + + var render_docu = function(data) { + var md = data.info; + + // console.dir(data); + + var items = []; + + var clicmdhash = { + GET: 'get', + POST: 'create', + PUT: 'set', + DELETE: 'delete' + }; + + Ext.Array.each(['GET', 'POST', 'PUT', 'DELETE'], function(method) { + var info = md[method]; + if (info) { + + var usage = ""; + + usage += ""; + + if (typeof cliusage === 'function') { + usage += cliusage(method, real_path(data.path)); + } + + var sections = [ + { + title: 'Description', + html: Ext.htmlEncode(info.description), + bodyPadding: 10 + }, + { + title: 'Usage', + html: usage, + bodyPadding: 10 + } + ]; + + if (info.parameters && info.parameters.properties) { + + var pstore = Ext.create('Ext.data.Store', { + model: 'pmx-param-schema', + proxy: { + type: 'memory' + }, + groupField: 'optional', + sorters: [ + { + property: 'name', + direction: 'ASC' + } + ] + }); + + Ext.Object.each(info.parameters.properties, function(name, pdef) { + pdef.name = name; + pstore.add(pdef); + }); + + pstore.sort(); + + var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{ + enableGroupingMenu: false, + groupHeaderTpl: 'OptionalRequired' + }); + + sections.push({ + xtype: 'gridpanel', + title: 'Parameters', + features: [groupingFeature], + store: pstore, + viewConfig: { + trackOver: false, + stripeRows: true + }, + columns: [ + { + header: 'Name', + dataIndex: 'name', + flex: 1 + }, + { + header: 'Type', + dataIndex: 'type', + renderer: render_type, + flex: 1 + }, + { + header: 'Default', + dataIndex: 'default', + flex: 1 + }, + { + header: 'Format', + dataIndex: 'type', + renderer: render_format, + flex: 2 + }, + { + header: 'Description', + dataIndex: 'description', + renderer: render_description, + flex: 6 + } + ] + }); + + } + + if (info.returns) { + + var retinf = info.returns; + var rtype = retinf.type; + if (!rtype && retinf.items) + rtype = 'array'; + if (!rtype) + rtype = 'object'; + + var rpstore = Ext.create('Ext.data.Store', { + model: 'pmx-param-schema', + proxy: { + type: 'memory' + }, + groupField: 'optional', + sorters: [ + { + property: 'name', + direction: 'ASC' + } + ] + }); + + var properties; + if (rtype === 'array' && retinf.items.properties) { + properties = retinf.items.properties; + } + + if (rtype === 'object' && retinf.properties) { + properties = retinf.properties; + } + + Ext.Object.each(properties, function(name, pdef) { + pdef.name = name; + rpstore.add(pdef); + }); + + rpstore.sort(); + + var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{ + enableGroupingMenu: false, + groupHeaderTpl: 'OptionalObligatory' + }); + var returnhtml; + if (retinf.items) { + returnhtml = '
items: ' + Ext.htmlEncode(JSON.stringify(retinf.items, null, 4)) + '
'; + } + + if (retinf.properties) { + returnhtml = returnhtml || ''; + returnhtml += '
properties:' + Ext.htmlEncode(JSON.stringify(retinf.properties, null, 4)) + '
'; + } + + var rawSection = Ext.create('Ext.panel.Panel', { + bodyPadding: '0px 10px 10px 10px', + html: returnhtml, + hidden: true + }); + + sections.push({ + xtype: 'gridpanel', + title: 'Returns: ' + rtype, + features: [groupingFeature], + store: rpstore, + viewConfig: { + trackOver: false, + stripeRows: true + }, + columns: [ + { + header: 'Name', + dataIndex: 'name', + flex: 1 + }, + { + header: 'Type', + dataIndex: 'type', + renderer: render_type, + flex: 1 + }, + { + header: 'Default', + dataIndex: 'default', + flex: 1 + }, + { + header: 'Format', + dataIndex: 'type', + renderer: render_format, + flex: 2 + }, + { + header: 'Description', + dataIndex: 'description', + renderer: render_description, + flex: 6 + } + ], + bbar: [ + { + xtype: 'button', + text: 'Show RAW', + handler: function(btn) { + rawSection.setVisible(!rawSection.isVisible()); + btn.setText(rawSection.isVisible() ? 'Hide RAW' : 'Show RAW'); + }} + ] + }); + + sections.push(rawSection); + + + } + + if (!data.path.match(/\/_upgrade_/)) { + var permhtml = ''; + + if (!info.permissions) { + permhtml = "Root only."; + } else { + if (info.permissions.description) { + permhtml += "
" + + Ext.htmlEncode(info.permissions.description) + "
"; + } + permhtml += permission_text(info.permissions); + } + + if (info.allowtoken !== undefined && !info.allowtoken) { + permhtml += "
This API endpoint is not available for API tokens." + } + + sections.push({ + title: 'Required permissions', + bodyPadding: 10, + html: permhtml + }); + } + + items.push({ + title: method, + autoScroll: true, + defaults: { + border: false + }, + items: sections + }); + } + }); + + var ct = Ext.getCmp('docview'); + ct.setTitle("Path: " + real_path(data.path)); + ct.removeAll(true); + ct.add(items); + ct.setActiveTab(0); + }; + + Ext.define('Ext.form.SearchField', { + extend: 'Ext.form.field.Text', + alias: 'widget.searchfield', + + emptyText: 'Search...', + + flex: 1, + + inputType: 'search', + listeners: { + 'change': function(){ + + var value = this.getValue(); + if (!Ext.isEmpty(value)) { + store.filter({ + property: 'path', + value: value, + anyMatch: true + }); + } else { + store.clearFilter(); + } + } + } + }); + + var tree = Ext.create('Ext.tree.Panel', { + title: 'Resource Tree', + tbar: [ + { + xtype: 'searchfield', + } + ], + tools: [ + { + type: 'expand', + tooltip: 'Expand all', + tooltipType: 'title', + callback: (tree) => tree.expandAll(), + }, + { + type: 'collapse', + tooltip: 'Collapse all', + tooltipType: 'title', + callback: (tree) => tree.collapseAll(), + }, + ], + store: store, + width: 200, + region: 'west', + split: true, + margins: '5 0 5 5', + rootVisible: false, + listeners: { + selectionchange: function(v, selections) { + if (!selections[0]) + return; + var rec = selections[0]; + render_docu(rec.data); + location.hash = '#' + rec.data.path; + } + } + }); + + Ext.create('Ext.container.Viewport', { + layout: 'border', + renderTo: Ext.getBody(), + items: [ + tree, + { + xtype: 'tabpanel', + title: 'Documentation', + id: 'docview', + region: 'center', + margins: '5 5 5 0', + layout: 'fit', + items: [] + } + ] + }); + + var deepLink = function() { + var path = window.location.hash.substring(1).replace(/\/\s*$/, '') + var endpoint = store.findNode('path', path); + + if (endpoint) { + tree.getSelectionModel().select(endpoint); + tree.expandPath(endpoint.getPath()); + render_docu(endpoint.data); + } + } + window.onhashchange = deepLink; + + deepLink(); + +}); -- 2.20.1
HTTP:   " + + method + " " + real_path("/api2/json" + data.path) + "