]> git.proxmox.com Git - pve-docs.git/blobdiff - api-viewer/PVEAPI.js
apiviewer: add search and collapse/expand tools
[pve-docs.git] / api-viewer / PVEAPI.js
index a167b4cdb6540b6c98bfdc9d7f16fc0b4c7ad985..9a1415609e1308deaa60f50f8f44ee3ac6cb2fa8 100644 (file)
@@ -1,8 +1,8 @@
 // avoid errors when running without development tools
-if (!Ext.isDefined(Ext.global.console)) {   
-    var console = { 
-        dir: function() {}, 
-        log: function() {} 
+if (!Ext.isDefined(Ext.global.console)) {
+    var console = {
+        dir: function() {},
+        log: function() {}
     };
 }
 
@@ -10,7 +10,7 @@ Ext.onReady(function() {
 
     Ext.define('pve-param-schema', {
         extend: 'Ext.data.Model',
-        fields:  [ 
+        fields:  [
            'name', 'type', 'typetext', 'description', 'verbose_description',
            'enum', 'minimum', 'maximum', 'minLength', 'maxLength',
            'pattern', 'title', 'requires', 'format', 'default',
@@ -22,10 +22,11 @@ Ext.onReady(function() {
        ]
     });
 
-    var store = Ext.create('Ext.data.TreeStore', {
+    var store = Ext.define('pve-updated-treestore', {
+       extend: 'Ext.data.TreeStore',
        model: Ext.define('pve-api-doc', {
             extend: 'Ext.data.Model',
-            fields:  [ 
+            fields:  [
                'path', 'info', 'text',
            ]
        }),
@@ -39,9 +40,34 @@ Ext.onReady(function() {
         }, {
             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;
 
@@ -71,10 +97,10 @@ Ext.onReady(function() {
        if (pdef['enum'])
            return pdef['enum'].join(' | ');
 
-       if (pdef.format) 
+       if (pdef.format)
            return pdef.format;
 
-       if (pdef.pattern) 
+       if (pdef.pattern)
            return Ext.htmlEncode(pdef.pattern);
 
        return '';
@@ -196,20 +222,109 @@ Ext.onReady(function() {
                    if (!rtype)
                        rtype = 'object';
 
+                   var rpstore = Ext.create('Ext.data.Store', {
+                       model: 'pve-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: '<tpl if="groupValue">Optional</tpl><tpl if="!groupValue">Obligatory</tpl>'
+                   });
                    var returnhtml;
                    if (retinf.items) {
-                       returnhtml = '<pre>items: ' + JSON.stringify(retinf.items, null, 4) + '</pre>';
+                       returnhtml = '<pre>items: ' + Ext.htmlEncode(JSON.stringify(retinf.items, null, 4)) + '</pre>';
                    }
 
                    if (retinf.properties) {
                        returnhtml = returnhtml || '';
-                       returnhtml += '<pre>properties:' + JSON.stringify(retinf.properties, null, 4);
+                       returnhtml += '<pre>properties:' + Ext.htmlEncode(JSON.stringify(retinf.properties, null, 4)) + '</pre>';
                    }
 
+                   var rawSection = Ext.create('Ext.panel.Panel', {
+                       bodyPadding: '0px 10px 10px 10px',
+                       html: returnhtml,
+                       hidden: true
+                   });
+
                    sections.push({
+                       xtype: 'gridpanel',
                        title: 'Returns: ' + rtype,
-                       html: returnhtml
-                   });
+                       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);
+
+
                }
 
                var permhtml = '';
@@ -228,12 +343,12 @@ Ext.onReady(function() {
                            } else if (info.permissions.user === 'all') {
                                permhtml += "Accessible by all authenticated users.";
                            } else {
-                               permhtml += 'Onyl accessible by user "' + 
+                               permhtml += 'Onyl accessible by user "' +
                                    info.permissions.user + '"';
                            }
                        }
                    } else if (info.permissions.check) {
-                       permhtml += "<pre>Check: " + 
+                       permhtml += "<pre>Check: " +
                            Ext.htmlEncode(Ext.JSON.encode(info.permissions.check))  + "</pre>";
                    } else {
                        permhtml += "Unknown systax!";
@@ -245,8 +360,8 @@ Ext.onReady(function() {
                    bodyPadding: 10,
                    html: permhtml
                });
-    
-  
+
+
                items.push({
                    title: method,
                    autoScroll: true,
@@ -265,8 +380,49 @@ Ext.onReady(function() {
        ct.setActiveTab(0);
     };
 
+    Ext.define('Ext.form.SearchField', {
+       extend: 'Ext.form.field.Text',
+       alias: 'widget.searchfield',
+       emptyText: 'Search',
+       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',
+       title: 'Resource Tree',
+       tbar: [
+           {
+               xtype: 'searchfield',
+           }
+       ],
+       tools: [
+           {
+               type: 'expand',
+               handler: function() {
+                  tree.expandAll();
+               },
+           },
+           {
+               type: 'collapse',
+               handler: function() {
+                  tree.collapseAll();
+               }
+           },
+       ],
         store: store,
        width: 200,
         region: 'west',
@@ -279,6 +435,7 @@ Ext.onReady(function() {
                    return;
                var rec = selections[0];
                render_docu(rec.data);
+               location.hash = '#' + rec.data.path;
            }
        }
     });
@@ -300,4 +457,18 @@ Ext.onReady(function() {
        ]
     });
 
+    var deepLink = function() {
+       var path = window.location.hash.substring(1);
+       var endpoint = store.findNode('path', path);
+
+       if (endpoint) {
+           tree.getSelectionModel().select(endpoint);
+           tree.expandPath(endpoint.getPath());
+           render_docu(endpoint.data);
+       }
+    }
+    window.onhashchange = deepLink;
+
+    deepLink();
+
 });