Ignore:
Timestamp:
01/28/15 14:47:04 (9 years ago)
Author:
emanuel.dima@uni-tuebingen.de
Message:
  1. alpha16: added version page and better statistics
File:
1 edited

Legend:

Unmodified
Added
Removed

  • SRUAggregator/trunk/src/main/resources/assets/js/main.js

    r5957 r5959  
    1313                        navbarCollapse: false,
    1414                        navbarPageFn: this.renderAggregator,
     15                        // navbarPageFn: this.renderStatistics,
    1516                        errorMessages: [],
    1617                };
    … …  
    6263        },
    6364
     65        renderHelp: function() {
     66                return React.createElement(HelpPage, null);
     67        },
     68
     69        renderAbout: function() {
     70                return React.createElement(AboutPage, {statistics: this.statistics});
     71        },
     72
    6473        renderStatistics: function() {
    6574                return React.createElement(StatisticsPage, {ajax: this.ajax});
    6675        },
    6776
    68         renderHelp: function() {
    69                 return React.createElement(HelpPage, null);
    70         },
    71 
    7277        toggleCollapse: function() {
    7378                this.setState({navbarCollapse: !this.state.navbarCollapse});
    7479        },
     80
     81        about: function(e) {
     82                this.setState({navbarPageFn: this.renderAbout});
     83        },
     84        statistics: function(e) {
     85                this.setState({navbarPageFn: this.renderStatistics});
     86        },
     87
    7588
    7689        setNavbarPageFn: function(pageFn) {
    … …  
    169182        },
    170183
    171         listItem: function(it) {
    172                 return React.createElement("li", null, " ", it[0], ":",
    173                                          typeof(it[1]) === "object" ?
    174                                                 React.createElement("ul", null, _.pairs(it[1]).map(this.listItem)) :
    175                                                 it[1]
     184        renderWaitTimeSecs: function(t) {
     185                var hue = t * 3;
     186                if (hue > 120) {
     187                        hue = 120;
     188                }
     189                var a = hue/120;
     190                hue = 120 - hue;
     191                var shue = "hsla("+hue+",100%,50%,"+a+")";
     192                return  React.createElement("span", {className: "badge", style: {backgroundColor:shue, color:"black"}},
     193                                        t.toFixed(3), "s"
     194                                );
     195        },
     196
     197        renderEndpoint: function(endpoint) {
     198                var stat = endpoint[1];
     199                var errors = _.pairs(stat.errors);
     200                var diagnostics = _.values(stat.diagnostics);
     201                return React.createElement("div", null,
     202                                        React.createElement("ul", {className: "list-inline list-unstyled"},
     203                                                React.createElement("li", null,  endpoint[0], ":"),
     204                                                React.createElement("li", null,
     205                                                        React.createElement("span", null, stat.numberOfRequests), " request(s)," + ' ' +
     206                                                        "average:", this.renderWaitTimeSecs(stat.avgExecutionTime), "," + ' ' +
     207                                                        "max: ", this.renderWaitTimeSecs(stat.maxExecutionTime)
     208                                                )
     209                                        ),
     210                                                (errors && errors.length) ?
     211                                                React.createElement("ul", {className: "list-unstyled inline", style: {marginLeft:40}},
     212                                                         errors.map(function(e) {
     213                                                                return  React.createElement("div", null,
     214                                                                                        React.createElement("div", {className: "inline alert alert-danger"}, " Exception: ", e[0]),
     215                                                                                        " ",
     216                                                                                        React.createElement("div", {className: "inline"}, React.createElement("span", {className: "badge"}, "x ", e[1]))
     217                                                                                );
     218                                                          })
     219                                                ) : false,
     220                                       
     221                                                (diagnostics && diagnostics.length) ?
     222                                                React.createElement("ul", {className: "list-unstyled inline", style: {marginLeft:40}},
     223                                                         diagnostics.map(function(d) {
     224                                                                return  React.createElement("div", null,
     225                                                                                        React.createElement("div", {className: "inline alert alert-warning"},
     226                                                                                                "Diagnostic: ", d.diagnostic.dgnMessage, ": ", d.diagnostic.dgnDiagnostic
     227                                                                                        ),
     228                                                                                        " ",
     229                                                                                        React.createElement("div", {className: "inline"}, React.createElement("span", {className: "badge"}, "x ", d.counter))
     230                                                                                );
     231                                                          })
     232                                                ) : false
    176233                                       
    177234                                );
    178235        },
    179236
    180         // renderEndpoint: function(endp) {
    181         //      return <li>
    182         //                              <ul>
    183         //                                      <li>endpoint: {endp[0]}</li>
    184         //                              <li>numberOfRequests: {endp[1].numberOfRequests}</li>
    185         //                              <li>avgQueueTime: {endp[1].avgQueueTime}</li>
    186         //                              <li>maxQueueTime: {endp[1].maxQueueTime}</li>
    187         //                              <li>avgExecutionTime: {endp[1].avgExecutionTime}</li>
    188         //                              <li>maxExecutionTime: {endp[1].maxExecutionTime}</li>
    189         //                                      <li>errors
    190         //                                              <ul>
    191         //                                                      { _.pairs(object).map(endp[1].errors, function(e) { return <li>{e[0]}:{e[1]}</li>; }) }
    192         //                                              </ul>
    193         //                                      </li>
    194         //                              </ul>
    195         //                      </li>;
    196         // },
    197         // renderInstitution: function(instname, instendps) {
    198         //      return  <li>
    199         //                              <ul>
    200         //                                      <li>{instname}</li>
    201         //                                      <li>
    202         //                                              <ul>{_.pairs(object).map(instendps, this.renderEndpoint)}</ul>
    203         //                                      </li>
    204  //                                     </ul>
    205  //                             </li>;
    206         // },
     237        renderInstitution: function(inst) {
     238                return  React.createElement("div", {style: {marginBottom:30}},
     239                                        React.createElement("h4", null, inst[0]),
     240                                        React.createElement("div", {style: {marginLeft:20}}, " ", _.pairs(inst[1]).map(this.renderEndpoint) )
     241                                );
     242        },
    207243
    208244        renderStatistics: function(stats) {
    209                 return React.createElement("ul", null, _.pairs(stats).map(this.listItem));
     245                return  React.createElement("div", {className: "container"},
     246                                        React.createElement("ul", {className: "list-inline list-unstyled"},
     247                                                 stats.maxConcurrentScanRequestsPerEndpoint ?
     248                                                        React.createElement("li", null, "max concurrent scan requests per endpoint:", " ",
     249                                                                React.createElement("kbd", null, stats.maxConcurrentScanRequestsPerEndpoint), ","
     250                                                        ) : false,
     251                                               
     252                                                 stats.maxConcurrentSearchRequestsPerEndpoint ?
     253                                                        React.createElement("li", null, "max concurrent search requests per endpoint:", " ",
     254                                                                React.createElement("kbd", null, stats.maxConcurrentSearchRequestsPerEndpoint), ","
     255                                                        ) : false,
     256                                               
     257                                                React.createElement("li", null, "timeout:", " ", React.createElement("kbd", null, stats.timeout, " seconds"))
     258                                        ),
     259                                        React.createElement("div", null, " ",  _.pairs(stats.institutions).map(this.renderInstitution), " ")
     260                                )
     261                                 ;
     262        },
     263
     264        render: function() {
     265                return  (
     266                        React.createElement("div", null,
     267                                React.createElement("div", {className: "top-gap statistics"},
     268                                        React.createElement("h1", null, "Statistics"),
     269                                        React.createElement("h2", null, "Last scan"),
     270                                        this.renderStatistics(this.state.lastScanStats),
     271                                        React.createElement("h2", null, "Searches since last scan"),
     272                                        this.renderStatistics(this.state.searchStats)
     273                                )
     274                        )
     275                        );
     276        },
     277});
     278
     279var HelpPage = React.createClass({displayName: 'HelpPage',
     280        openHelpDesk: function() {
     281                window.open('http://support.clarin-d.de/mail/form.php?queue=Aggregator&lang=en',
     282                        '_blank', 'height=560,width=370');
    210283        },
    211284
    … …  
    214287                        React.createElement("div", null,
    215288                                React.createElement("div", {className: "top-gap"},
    216                                         React.createElement("h1", null, "Statistics"),
    217                                         React.createElement("h2", null, "Last Scan"),
    218                                         this.renderStatistics(this.state.lastScanStats),
    219                                         React.createElement("h2", null, "Search"),
    220                                         this.renderStatistics(this.state.searchStats)
    221                                 )
    222                         )
    223                         );
    224         },
    225 });
    226 
    227 var HelpPage = React.createClass({displayName: 'HelpPage',
    228         openHelpDesk: function() {
    229                 window.open('http://support.clarin-d.de/mail/form.php?queue=Aggregator&lang=en',
    230                         '_blank', 'height=560,width=370');
    231         },
    232 
    233         render: function() {
    234                 return  (
    235                         React.createElement("div", null,
    236                                 React.createElement("div", {className: "top-gap"},
     289                                        React.createElement("h1", null, "Help"),
    237290                                        React.createElement("h3", null, "Performing search in FCS corpora"),
    238291                                        React.createElement("p", null, "To perform simple keyword search in all CLARIN-D Federated Content Search centers" + ' ' +
    … …  
    270323});
    271324
     325var AboutPage = React.createClass({displayName: 'AboutPage',
     326        propTypes: {
     327                statistics: PT.func.isRequired,
     328        },
     329
     330        render: function() {
     331                return  React.createElement("div", null,
     332                                        React.createElement("div", {className: "top-gap"},
     333                                                React.createElement("h1", null, "About"),
     334                                                React.createElement("h3", null, "Technology"),
     335
     336                                                React.createElement("p", null, "The Aggregator uses the following software components:"),
     337
     338                                                React.createElement("ul", null,
     339                                                        React.createElement("li", null,
     340                                                                React.createElement("a", {href: "http://dropwizard.io/"}, "Dropwizard"), " ",
     341                                                                "(", React.createElement("a", {href: "http://www.apache.org/licenses/LICENSE-2.0"}, "Apache License 2.0"), ")"
     342                                                        ),
     343                                                        React.createElement("li", null,
     344                                                                React.createElement("a", {href: "http://eclipse.org/jetty/"}, "Jetty"), " ",
     345                                                                "(", React.createElement("a", {href: "http://www.apache.org/licenses/LICENSE-2.0"}, "Apache License 2.0"), ")"
     346                                                        ),
     347                                                        React.createElement("li", null,
     348                                                                React.createElement("a", {href: "http://jackson.codehaus.org/"}, "Jackson"), " ",
     349                                                                "(", React.createElement("a", {href: "http://www.apache.org/licenses/LICENSE-2.0"}, "Apache License 2.0"), ")"
     350                                                        ),
     351                                                        React.createElement("li", null,
     352                                                                React.createElement("a", {href: "https://jersey.java.net/"}, "Jersey"), " ",
     353                                                                "(", React.createElement("a", {href: "https://jersey.java.net/license.html#/cddl"}, "CCDL 1.1"), ")"
     354                                                        ),
     355                                                        React.createElement("li", null,
     356                                                                React.createElement("a", {href: "https://github.com/optimaize/language-detector"}, "Optimaize Language Detector"), " ",
     357                                                                "(", React.createElement("a", {href: "http://www.apache.org/licenses/LICENSE-2.0"}, "Apache License 2.0"), ")"
     358                                                        ),
     359                                                        React.createElement("li", null,
     360                                                                React.createElement("a", {href: "http://poi.apache.org/"}, "Apache POI"), " ",
     361                                                                "(", React.createElement("a", {href: "http://www.apache.org/licenses/LICENSE-2.0"}, "Apache License 2.0"), ")"
     362                                                        )
     363                                                ),
     364
     365                                                React.createElement("ul", null,
     366                                                        React.createElement("li", null,
     367                                                                React.createElement("a", {href: "http://facebook.github.io/react/"}, "React"), " ",
     368                                                                "(", React.createElement("a", {href: "https://github.com/facebook/react/blob/master/LICENSE"}, "BSD license"), ")"
     369                                                        ),
     370                                                        React.createElement("li", null,
     371                                                                React.createElement("a", {href: "http://getbootstrap.com/"}, "Bootstrap"), " ",
     372                                                                "(", React.createElement("a", {href: "http://opensource.org/licenses/mit-license.html"}, "MIT license"), ")"
     373                                                        ),
     374                                                        React.createElement("li", null,
     375                                                                React.createElement("a", {href: "http://jquery.com/"}, "jQuery"), " ",
     376                                                                "(", React.createElement("a", {href: "http://opensource.org/licenses/mit-license.html"}, "MIT license"), ")"
     377                                                        ),
     378                                                        React.createElement("li", null,
     379                                                                React.createElement("a", {href: "http://glyphicons.com/"}, "GLYPHICONS free"), " ",
     380                                                                "(", React.createElement("a", {href: "https://creativecommons.org/licenses/by/3.0/"}, "CC-BY 3.0"), ")"
     381                                                        ),
     382                                                        React.createElement("li", null,
     383                                                                React.createElement("a", {href: "http://fortawesome.github.io/Font-Awesome/"}, "FontAwesome"), " ",
     384                                                                "(", React.createElement("a", {href: "http://opensource.org/licenses/mit-license.html"}, "MIT"), ", ", React.createElement("a", {href: "http://scripts.sil.org/OFL"}, "SIL Open Font License"), ")"
     385                                                        )
     386                                                ),
     387
     388                                                React.createElement("h3", null, "Statistics"),
     389                                                React.createElement("button", {type: "button", className: "btn btn-default btn-lg", onClick: this.props.statistics},
     390                                                        React.createElement("span", {className: "glyphicon glyphicon-cog", 'aria-hidden': "true"}, " "),
     391                                                        "View server log"
     392                                                )                                       
     393                                        )
     394                                );
     395        }
     396});
     397
    272398var Footer = React.createClass({displayName: 'Footer',
     399        about: function(e) {
     400                main.about();
     401                e.preventDefault();
     402                e.stopPropagation();
     403        },
     404
    273405        render: function() {
    274406                return  (
    275407                        React.createElement("div", {className: "container"},
    276408                                React.createElement("div", {id: "CLARIN_footer_left"},
    277                                                 React.createElement("a", {title: "about", id: "aboutlink", href: "about"},
     409                                                React.createElement("a", {title: "about", href: "#", onClick: this.about},
    278410                                                React.createElement("span", {className: "glyphicon glyphicon-info-sign"}),
    279                                                 React.createElement("span", null, "VERSION 2.0.0.α15")
     411                                                React.createElement("span", null, "VERSION 2.0.0.α16")
    280412                                        )
    281413                                ),
    … …  
    296428});
    297429
    298 React.render(React.createElement(Main, null),  document.getElementById('body'));
     430var main = React.render(React.createElement(Main, null),  document.getElementById('body'));
    299431React.render(React.createElement(Footer, null), document.getElementById('footer') );
    300432
Note: See TracChangeset for help on using the changeset viewer.