htrace-htraced/src/web/app/setup.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

var BaseView = Backbone.Marionette.LayoutView.extend({
  "el": "body",
  "regions": {
    "header": "#header",
    "app": "#app"
  }
});

var Router = Backbone.Marionette.AppRouter.extend({
  "routes": {
    "": "init",
    "!/search(?:query)": "search",
    "!/spans/:id": "span",
    "!/swimlane/:id": "swimlane",
    "!/swimlane/:id:?:lim": "swimlane"
  },

  "initialize": function() {
    // Collection
    this.spansCollection = new app.Spans();
  },

  "init": function() {
    Backbone.history.navigate("!/search", {"trigger": true});
  },

  "search": function(query) {
    app.root.app.show(new app.SearchView());

    var predicates;

    this.spansCollection.switchMode("infinite", {
      fetch: false,
      resetState: true
    });

    if (query) {
      predicates = _(query.split(";"))
      .map(function(predicate) {
        return _(predicate.split('&'))
          .reduce(function(mem, op) {
            var op = op.split('=');
            mem[op[0]] = op[1];
            return mem;
          }, {});
      });
      this.spansCollection.fullCollection.reset();
      this.spansCollection.setPredicates(predicates);
    }
    else {
      this.spansCollection.fullCollection.reset();
      this.spansCollection.setPredicates([{"op":"cn","field":"description","val":""}]);
    }
    this.spansCollection.fetch();

    app.root.app.currentView.controls.show(
      new app.SearchControlsView({
        "collection": this.spansCollection,
        "predicates": predicates
      }));
    app.root.app.currentView.main.show(
      new Backgrid.Grid({
        "collection": this.spansCollection,
        "columns": [{
          "label": "Begin",
          "cell": Backgrid.Cell.extend({
            className: "begin-cell",
            formatter: {
              fromRaw: function(rawData, model) {
                var beginMs = model.get("beginTime")
                return moment(beginMs).format('YYYY/MM/DD HH:mm:ss,SSS');
              },
              toRaw: function(formattedData, model) {
                return formattedData // data entry not supported for this cell
              }
            }
          }),
          "editable": false,
          "sortable": false
        }, {
          "name": "spanId",
          "label": "ID",
          "cell": "string",
          "editable": false,
          "sortable": false
        }, {
          "name": "processId",
          "label": "processId",
          "cell": "string",
          "editable": false,
          "sortable": false
        }, {
          "label": "Duration",
          "cell": Backgrid.Cell.extend({
            className: "duration-cell",
            formatter: {
              fromRaw: function(rawData, model) {
                return model.duration() + " ms"
              },
              toRaw: function(formattedData, model) {
                return formattedData // data entry not supported for this cell
              }
            }
          }),
          "editable": false,
          "sortable": false
        }, {
          "name": "description",
          "label": "Description",
          "cell": "string",
          "editable": false,
          "sortable": false
        }],
        "row": Backgrid.Row.extend({
          "events": {
            "click": "details"
          },
          "details": function() {
            Backbone.history.navigate("!/spans/" + this.model.get("spanId"), {"trigger": true});
          }
        })
      }));
    app.root.app.currentView.pagination.show(
      new Backgrid.Extension.Paginator({
        collection: this.spansCollection,
      }));
  },

  "span": function(id) {
    var span = this.spansCollection.findWhere({
      "spanId": id
    });

    if (!span) {
      Backbone.history.navigate("!/search", {"trigger": true});
      return;
    }

    var graphView = new app.GraphView({
      "collection": this.spansCollection,
      "id": "span-graph"
    });

    graphView.on("update:span", function(d) {
      app.root.app.currentView.span.show(
        new app.SpanDetailsView({
          "model": d.span
        }));
    });

    app.root.app.show(new app.DetailsView());
    app.root.app.currentView.content.show(graphView);
    app.root.app.currentView.content.currentView.setSpanId(id);
  },

  "swimlane": function(id, lim) {
    var top = new app.SwimlaneView();
    app.root.app.show(top);
    top.swimlane.show(new app.SwimlaneGraphView({
      "spanId": id,
      "lim": lim
    }));
  }
});

app.on("start", function(options) {
  app.root = new BaseView();
  app.routes = new Router();

  Backbone.history.start();
});

app.start();