利用Backbone.js构建监控前端的解决方案

{
  name: 'FooEnvironment',
  description: 'Foo Environment, <insert buzzwords here>',
  baseTable: 'foobar', # Which table in the backend contains the corresponding data
  target: 'barTarget', # The responsible target (backend-plugin)
}

{
    name: 'FooProtocol Traffic', # Graphs display name
    size: 'full' # only matters for some CSS-transformations
    interval: X  # Which delta each tuple differs from the other
    start-date: "DATE",
    end-date: "DATE",
    axes: {
            "y1": { label: 'Foo/t', data: [['MEASURMENT1', 'AGGREGATION'], ['MEASURMENT2', 'AGGREGATION']] },
            "y2": { label: 'Bar/sec', data: [['MEASURMENT_ON_Y2', 'AGGREGATION']] }
    }
  }

// 定义环境模型
var Environment = Backbone.Model.extend({
  defaults: {
    name: 'Unnamed Environment',
    description: 'No description provided.',
    baseTable: 'default',
    target: 'default'
  }
});
​
// 定义环境集合
var Environments = Backbone.Collection.extend({
  model: Environment
});
​
// 定义图表模型
var Chart = Backbone.Model.extend({
  defaults: {
    name: 'Unnamed Chart',
    size: 'full',
    interval: 60,
    start_date: '2023-01-01 00:00:00',
    end_date: '2023-12-31 23:59:59',
    axes: {
      "y1": { label: 'Foo/t', data: [] },
      "y2": { label: 'Bar/sec', data: [] }
    }
  }
});
​
// 定义图表集合
var Charts = Backbone.Collection.extend({
  model: Chart
});
​
// 定义环境视图
var EnvironmentView = Backbone.View.extend({
  tagName: 'li',
​
  template: _.template($('#environment-template').html()),
​
  render: function() {
    this.$el.html(this.template(this.model.attributes));
​
    return this;
  }
});
​
// 定义图表视图
var ChartView = Backbone.View.extend({
  tagName: 'li',
​
  template: _.template($('#chart-template').html()),
​
  render: function() {
    this.$el.html(this.template(this.model.attributes));
​
    return this;
  }
});
​
// 定义环境集合视图
var EnvironmentsView = Backbone.View.extend({
  el: $('#environments'),
​
  initialize: function() {
    this.listenTo(this.collection, 'add', this.addOne);
  },
​
  addOne: function(environment) {
    var environmentView = new EnvironmentView({ model: environment });
​
    this.$el.append(environmentView.render().el);
  }
});
​
// 定义图表集合视图
var ChartsView = Backbone.View.extend({
  el: $('#charts'),
​
  initialize: function() {
    this.listenTo(this.collection, 'add', this.addOne);
  },
​
  addOne: function(chart) {
    var chartView = new ChartView({ model: chart });
​
    this.$el.append(chartView.render().el);
  }
});
​
// 定义添加环境表单视图
var AddEnvironmentView = Backbone.View.extend({
  el: $('#add-environment-form'),
​
  events: {
    'submit': 'addEnvironment'
  },
​
  addEnvironment: function(e) {
    e.preventDefault();
​
    var name = this.$('input[name=name]').val();
    var description = this.$('input[name=description]').val();
    var baseTable = this.$('input[name=baseTable]').val();
    var target = this.$('input[name=target]').val();
​
    var environment = new Environment({
      name: name,
      description: description,
      baseTable: baseTable,
      target: target
    });
​
    environments.add(environment);
  }
});
​
// 定义添加图表表单视图
var AddChartView = Backbone.View.extend({
  el: $('#add-chart-form'),
​
  events: {
    'submit': 'addChart'
  },
​
  addChart: function(e) {
    e.preventDefault();
​
    var name = this.$('input[name=name]').val();
    var size = this.$('input[name=size]').val();
    var interval = this.$('input[name=interval]').val();
    var start_date = this.$('input[name=start_date]').val();
    var end_date = this.$('input[name=end_date]').val();
​
    var chart = new Chart({
      name: name,
      size: size,
      interval: interval,
      start_date: start_date,
      end_date: end_date
    });
​
    charts.add(chart);
  }
});
​
// 创建环境集合和环境视图
var environments = new Environments();
var environmentsView = new EnvironmentsView({ collection: environments });
​
// 创建图表集合和图表视图
var charts = new Charts();
var chartsView = new ChartsView({ collection: charts });
​
// 创建添加环境表单视图
var addEnvironmentView = new AddEnvironmentView();
​
// 创建添加图表表单视图
var addChartView = new AddChartView();

$.ajax({
  url: '/api/environments',
  success: function(data) {
    data.forEach(function(environment) {
      environments.add(environment);
    });
  }
});
​
$.ajax({
  url: '/api/charts',
  success: function(data) {
    data.forEach(function(chart) {
      charts.add(chart);
    });
  }
});

// 添加环境
environments.add({
  name: 'New Environment',
  description: 'This is a new environment.',
  baseTable: 'default',
  target: 'default'
});
​
// 删除环境
environments.remove(environment);
​
// 添加图表
charts.add({
  name: 'New Chart',
  size: 'full',
  interval: 60,
  start_date: '2023-01-01 00:00:00',
  end_date: '2023-12-31 23:59:59'
});
​
// 删除图表
charts.remove(chart);