gerrit.onap Code Review - ccsdk/features.git/blob

   1 (function( $, app, i18n, raphael ) {
   2
   3         var ui = app.ns("ui");
   4         var ut = app.ns("ut");
   5         var services = app.ns("services");
   6
   7         ui.AnyRequest = ui.Page.extend({
   8                 defaults: {
   9                         cluster: null,       // (required) instanceof app.services.Cluster
  10                         path: "_search",     // default uri to send a request to
  11                         query: { query: { match_all: { }}},
  12                         transform: "  return root;" // default transformer function (does nothing)
  13                 },
  14                 init: function(parent) {
  15                         this._super();
  16                         this.prefs = services.Preferences.instance();
  17                         this.history = this.prefs.get("anyRequest-history") || [ { type: "POST", path: this.config.path, query : JSON.stringify(this.config.query), transform: this.config.transform } ];
  18                         this.el = $.joey(this._main_template());
  19                         this.base_uriEl = this.el.find("INPUT[name=base_uri]");
  20                         this.pathEl = this.el.find("INPUT[name=path]");
  21                         this.typeEl = this.el.find("SELECT[name=method]");
  22                         this.dataEl = this.el.find("TEXTAREA[name=body]");
  23                         this.prettyEl = this.el.find("INPUT[name=pretty]");
  24                         this.transformEl = this.el.find("TEXTAREA[name=transform]");
  25                         this.asGraphEl = this.el.find("INPUT[name=asGraph]");
  26                         this.asTableEl = this.el.find("INPUT[name=asTable]");
  27                         this.asJsonEl = this.el.find("INPUT[name=asJson]");
  28                         this.cronEl = this.el.find("SELECT[name=cron]");
  29                         this.outEl = this.el.find("DIV.uiAnyRequest-out");
  30                         this.errEl = this.el.find("DIV.uiAnyRequest-jsonErr");
  31                         this.typeEl.val("GET");
  32                         this.attach(parent);
  33                         this.setHistoryItem(this.history[this.history.length - 1]);
  34                 },
  35                 setHistoryItem: function(item) {
  36                         this.pathEl.val(item.path);
  37                         this.typeEl.val(item.type);
  38                         this.dataEl.val(item.query);
  39                         this.transformEl.val(item.transform);
  40                 },
  41                 _request_handler: function( ev ) {
  42                         if(! this._validateJson_handler()) {
  43                                 return;
  44                         }
  45                         var path = this.pathEl.val(),
  46                                         type = this.typeEl.val(),
  47                                         query = JSON.stringify(JSON.parse(this.dataEl.val())),
  48                                         transform = this.transformEl.val(),
  49                                         base_uri = this.base_uriEl.val();
  50                         if( ev ) { // if the user click request
  51                                 if(this.timer) {
  52                                         window.clearTimeout(this.timer); // stop any cron jobs
  53                                 }
  54                                 delete this.prevData; // remove data from previous cron runs
  55                                 this.outEl.text(i18n.text("AnyRequest.Requesting"));
  56                                 if( ! /\/$/.test( base_uri )) {
  57                                         base_uri += "/";
  58                                         this.base_uriEl.val( base_uri );
  59                                 }
  60                                 for(var i = 0; i < this.history.length; i++) {
  61                                         if(this.history[i].path === path &&
  62                                                 this.history[i].type === type &&
  63                                                 this.history[i].query === query &&
  64                                                 this.history[i].transform === transform) {
  65                                                 this.history.splice(i, 1);
  66                                         }
  67                                 }
  68                                 this.history.push({
  69                                         path: path,
  70                                         type: type,
  71                                         query: query,
  72                                         transform: transform
  73                                 });
  74                                 this.history.slice(250); // make sure history does not get too large
  75                                 this.prefs.set( "anyRequest-history", this.history );
  76                                 this.el.find("UL.uiAnyRequest-history")
  77                                         .empty()
  78                                         .append($( { tag: "UL", children: this.history.map(this._historyItem_template, this) }).children())
  79                                         .children().find(":last-child").each(function(i, j) { j.scrollIntoView(false); }).end()
  80                                         .scrollLeft(0);
  81                         }
  82                         this.config.cluster.request({
  83                                 url: base_uri + path,
  84                                 type: type,
  85                                 data: query,
  86                                 success: this._responseWriter_handler,
  87                                 error: this._responseError_handler
  88                         });
  89                 },
  90                 _responseError_handler: function (response) {
  91                         var obj;
  92                         try {
  93                                 obj = JSON.parse(response.responseText);
  94                                 if (obj) {
  95                                         this._responseWriter_handler(obj);
  96                                 }
  97                         } catch (err) {
  98                         }
  99                 },
 100                 _responseWriter_handler: function(data) {
 101                         this.outEl.empty();
 102                         try {
 103                                 data = (new Function("root", "prev", this.transformEl.val()))(data, this.prevData)
 104                         } catch(e) {
 105                                 this.errEl.text(e.message);
 106                                 return;
 107                         }
 108                         if(this.asGraphEl.attr("checked")) {
 109                                 var w = this.outEl.width();
 110                                 raphael(this.outEl[0], w - 10, 300)
 111                                         .g.barchart(10, 10, w - 20, 280, [data]);
 112                         }
 113                         if(this.asTableEl.attr("checked")) {
 114                                 try {
 115                                         var store = new app.data.ResultDataSourceInterface();
 116                                         this.outEl.append(new app.ui.ResultTable({
 117                                                 width: this.outEl.width() - 23,
 118                                                 store: store
 119                                         } ) );
 120                                         store.results(data);
 121                                 } catch(e) {
 122                                         this.errEl.text("Results Table Failed: " + e.message);
 123                                 }
 124                         }
 125                         if(this.asJsonEl.attr("checked")) {
 126                                 this.outEl.append(new ui.JsonPretty({ obj: data }));
 127                         }
 128                         if(this.cronEl.val() > 0) {
 129                                 this.timer = window.setTimeout(function(){
 130                                         this._request_handler();
 131                                 }.bind(this), this.cronEl.val());
 132                         }
 133                         this.prevData = data;
 134                 },
 135                 _validateJson_handler: function( ev ) {
 136                         /* if the textarea is empty, we replace its value by an empty JSON object : "{}" and the request goes on as usual */
 137                         var jsonData = this.dataEl.val().trim();
 138                         var j;
 139                         if(jsonData === "") {
 140                                 jsonData = "{}";
 141                                 this.dataEl.val( jsonData );
 142                         }
 143                         try {
 144                                 j = JSON.parse(jsonData);
 145                         } catch(e) {
 146                                 this.errEl.text(e.message);
 147                                 return false;
 148                         }
 149                         this.errEl.text("");
 150                         if(this.prettyEl.attr("checked")) {
 151                                 this.dataEl.val(JSON.stringify(j, null, "  "));
 152                         }
 153                         return true;
 154                 },
 155                 _historyClick_handler: function( ev ) {
 156                         var item = $( ev.target ).closest( "LI" ).data( "item" );
 157                         this.setHistoryItem( item );
 158                 },
 159                 _main_template: function() {
 160                         return { tag: "DIV", cls: "anyRequest", children: [
 161                                 { tag: "DIV", cls: "uiAnyRequest-request", children: [
 162                                         new app.ui.SidebarSection({
 163                                                 open: false,
 164                                                 title: i18n.text("AnyRequest.History"),
 165                                                 body: { tag: "UL", onclick: this._historyClick_handler, cls: "uiAnyRequest-history", children: this.history.map(this._historyItem_template, this)       }
 166                                         }),
 167                                         new app.ui.SidebarSection({
 168                                                 open: true,
 169                                                 title: i18n.text("AnyRequest.Query"),
 170                                                 body: { tag: "DIV", children: [
 171                                                         { tag: "INPUT", type: "text", name: "base_uri", value: this.config.cluster.config.base_uri },
 172                                                         { tag: "BR" },
 173                                                         { tag: "INPUT", type: "text", name: "path", value: this.config.path },
 174                                                         { tag: "SELECT", name: "method", children: ["POST", "GET", "PUT", "HEAD", "DELETE"].map(ut.option_template) },
 175                                                         { tag: "TEXTAREA", name: "body", rows: 20, text: JSON.stringify(this.config.query) },
 176                                                         { tag: "BUTTON", css: { cssFloat: "right" }, type: "button", children: [ { tag: "B", text: i18n.text("AnyRequest.Request") } ], onclick: this._request_handler },
 177                                                         { tag: "BUTTON", type: "button", text: i18n.text("AnyRequest.ValidateJSON"), onclick: this._validateJson_handler },
 178                                                         { tag: "LABEL", children: [ { tag: "INPUT", type: "checkbox", name: "pretty" }, i18n.text("AnyRequest.Pretty") ] },
 179                                                         { tag: "DIV", cls: "uiAnyRequest-jsonErr" }
 180                                                 ]}
 181                                         }),
 182                                         new app.ui.SidebarSection({
 183                                                 title: i18n.text("AnyRequest.Transformer"),
 184                                                 help: "AnyRequest.TransformerHelp",
 185                                                 body: { tag: "DIV", children: [
 186                                                         { tag: "CODE", text: "function(root, prev) {" },
 187                                                         { tag: "BR" },
 188                                                         { tag: "TEXTAREA", name: "transform", rows: 5, text: this.config.transform },
 189                                                         { tag: "BR" },
 190                                                         { tag: "CODE", text: "}" }
 191                                                 ] }
 192                                         }),
 193                                         new app.ui.SidebarSection({
 194                                                 title: i18n.text("AnyRequest.RepeatRequest"),
 195                                                 body: { tag: "DIV", children: [
 196                                                         i18n.text("AnyRequest.RepeatRequestSelect"), " ",
 197                                                         { tag: "SELECT", name: "cron", children: [
 198                                                                 { value: 0, text: "do not repeat" },
 199                                                                 { value: 1000, text: "second" },
 200                                                                 { value: 1000 * 2, text: "2 seconds" },
 201                                                                 { value: 1000 * 5, text: "5 seconds" },
 202                                                                 { value: 1000 * 20, text: "20 seconds" },
 203                                                                 { value: 1000 * 60, text: "minute" },
 204                                                                 { value: 1000 * 60 * 10, text: "10 minutes" },
 205                                                                 { value: 1000 * 60 * 60, text: "hour" }
 206                                                         ].map(function(op) { return $.extend({ tag: "OPTION"}, op); }) }
 207                                                 ] }
 208                                         }),
 209                                         new app.ui.SidebarSection({
 210                                                 title: i18n.text("AnyRequest.DisplayOptions"),
 211                                                 help: "AnyRequest.DisplayOptionsHelp",
 212                                                 body: { tag: "DIV", children: [
 213                                                         { tag: "LABEL", children: [ { tag: "INPUT", type: "checkbox", checked: true, name: "asJson" }, i18n.text("AnyRequest.AsJson") ] },
 214                                                         { tag: "BR" },
 215                                                         { tag: "LABEL", children: [ { tag: "INPUT", type: "checkbox", name: "asGraph" }, i18n.text("AnyRequest.AsGraph") ] },
 216                                                         { tag: "BR" },
 217                                                         { tag: "LABEL", children: [ { tag: "INPUT", type: "checkbox", name: "asTable" }, i18n.text("AnyRequest.AsTable") ] }
 218                                                 ] }
 219                                         })
 220                                 ] },
 221                                 { tag: "DIV", cls: "uiAnyRequest-out" }
 222                         ] };
 223                 },
 224                 _historyItem_template: function(item) {
 225                         return { tag: "LI", cls: "booble", data: { item: item }, children: [
 226                                 { tag: "SPAN", text: item.path },
 227                                 " ",
 228                                 { tag: "EM", text: item.query },
 229                                 " ",
 230                                 { tag: "SPAN", text: item.transform }
 231                         ] };
 232                 }
 233         });
 234
 235 })( this.jQuery, this.app, this.i18n, this.Raphael );