git.sur5r.net Git - bacula/bacula/blob - gui/baculum/protected/JavaScript/graph.js

   1 var JobClass = Class.create({
   2         job: null,
   3         job_size: 0,
   4         start_stamp: 0,
   5         end_stamp: 0,
   6         start_point: [],
   7         end_point: [],
   8
   9         initialize: function(job) {
  10                 this.set_job(job);
  11         },
  12
  13         set_job: function(job) {
  14                 if (typeof(job) == "object") {
  15                         this.job = job;
  16                         this.set_job_size();
  17                         this.set_start_stamp();
  18                         this.set_end_stamp();
  19                         this.set_start_point();
  20                         this.set_end_point();
  21                 } else {
  22                         alert('Job is not object');
  23                 }
  24         },
  25
  26         set_start_point: function() {
  27                 var xaxis = this.start_stamp;
  28                 var yaxis = this.job_size;
  29                 this.start_point = [xaxis, yaxis];
  30         },
  31
  32         set_end_point: function() {
  33                 var xaxis = this.end_stamp;
  34                 var yaxis = this.job_size;
  35                 this.end_point = [xaxis, yaxis];
  36         },
  37
  38         set_job_size: function(unit) {
  39                 var units = ['Bi', 'KiB', 'MiB', 'GiB', 'TiB'];
  40                 var pos = units.indexOf(unit);
  41                 var size = 0;
  42
  43                 if (pos != -1) {
  44                         unit = pos;
  45                 } else {
  46                         // default GiB
  47                         unit = 3;
  48                 }
  49
  50                 this.job_size = this.job.jobbytes / (1 << (10 * unit));
  51         },
  52
  53         set_start_stamp: function() {
  54                 this.start_stamp = iso_date_to_timestamp(this.job.starttime);
  55         },
  56
  57         set_end_stamp: function() {
  58                 this.end_stamp =  iso_date_to_timestamp(this.job.endtime);
  59         }
  60 });
  61
  62 var GraphClass = Class.create({
  63         jobs: [],
  64         jobs_all: [],
  65         series: [],
  66         graph_obj: null,
  67         graph_container: null,
  68         legend_container: null,
  69         time_range: null,
  70         date_from: null,
  71         date_to: null,
  72         txt: {},
  73         filter_include: {
  74                 type: 'B'
  75         },
  76         filter_exclude: {
  77                 start_stamp: 0,
  78                 end_stamp: 0
  79         },
  80         filter_all_mark: '@',
  81         graph_options:  {
  82                 legend: {
  83                         show: true,
  84                         noColumns: 9,
  85                         labelBoxHeight: 10,
  86                         fontColor: '#ffffff'
  87                 },
  88                 bars: {
  89                         show: true,
  90                         fill: true,
  91                         horizontal : false,
  92                         shadowSize : 0
  93                 },
  94                 xaxis: {
  95                         mode : 'time',
  96                         timeMode: 'local',
  97                         labelsAngle : 45,
  98                         autoscale: true,
  99                         color: 'white',
 100                         showLabels: true
 101                 },
 102                 yaxis: {
 103                         color: 'white',
 104                         min: 0
 105                 },
 106                 selection: {
 107                         mode : 'x'
 108                 },
 109                 lines: {
 110                         show: true,
 111                         lineWidth: 0,
 112                         fill: true,
 113                         steps: true
 114                 },
 115                 grid: {
 116                         color: '#ffffff',
 117                         outlineWidth: 0
 118                 },
 119                 HtmlText: false
 120         },
 121
 122         initialize: function(jobs, txt, container, legend, time_range, date_from, date_to, client_filter, job_filter) {
 123                 this.set_jobs(jobs);
 124                 this.txt = txt;
 125                 this.set_graph_container(container);
 126                 this.set_legend_container(legend);
 127                 this.set_time_range_filter(time_range);
 128                 this.set_date_from_el(date_from);
 129                 this.set_date_to_el(date_to);
 130                 this.set_date_fields_events(date_from, date_to);
 131                 this.set_jobs_filter(job_filter);
 132                 this.set_clients_filter(client_filter);
 133                 this.update();
 134                 this.set_events();
 135         },
 136
 137         update: function() {
 138                 this.extend_graph_options();
 139                 this.apply_jobs_filter();
 140                 this.prepare_series();
 141                 this.draw_graph();
 142         },
 143
 144         set_jobs: function(jobs) {
 145                 if (typeof(jobs) == "object") {
 146                         if (jobs.hasOwnProperty('output')) {
 147                                 var job;
 148                                 for (var i = 0; i<jobs.output.length; i++) {
 149                                         job = new JobClass(jobs.output[i]);
 150                                         this.jobs.push(job);
 151                                 }
 152                                 this.jobs_all = this.jobs;
 153                         } else {
 154                                 this.jobs = jobs;
 155                         }
 156                 } else {
 157                         alert('No jobs found.');
 158                 }
 159         },
 160
 161         get_jobs: function() {
 162                 return this.jobs;
 163         },
 164
 165         set_graph_container: function(id) {
 166                 this.graph_container = $(id);
 167         },
 168
 169         get_graph_container: function() {
 170                 return this.graph_container;
 171         },
 172
 173         set_legend_container: function(id) {
 174                 this.legend_container = $(id);
 175         },
 176
 177         get_legend_container: function() {
 178                 return this.legend_container;
 179         },
 180
 181         set_time_range_filter: function(id) {
 182                 var self = this;
 183                 this.time_range = $(id);
 184                 $(this.time_range).observe('change', function() {
 185                         var time_range = self.get_time_range();
 186                         self.set_time_range(time_range);
 187                         self.update();
 188                 });
 189         },
 190
 191         get_time_range: function() {
 192                 var time_range = parseInt(this.time_range.value, 10) * 1000;
 193                 return time_range;
 194         },
 195
 196         set_date_from_el: function(date_from) {
 197                 this.date_from = $(date_from);
 198         },
 199
 200         get_date_from_el: function() {
 201                 return this.date_from;
 202         },
 203
 204         set_date_to_el: function(date_to) {
 205                 this.date_to = $(date_to);
 206         },
 207
 208         get_date_to_el: function() {
 209                 return this.date_to;
 210         },
 211
 212         set_time_range: function(timestamp) {
 213                 var to_stamp = Math.round(new Date().getTime());
 214                 this.set_xaxis_max(to_stamp, true);
 215                 var from_stamp = (Math.round(new Date().getTime()) - this.get_time_range());
 216                 this.set_xaxis_min(from_stamp, true);
 217         },
 218
 219
 220         set_xaxis_min: function(value, set_range) {
 221                 if (this.graph_options.xaxis.max && value > this.graph_options.xaxis.max) {
 222                         alert('Wrong time range.');
 223                         return;
 224                 }
 225
 226                 if (value == this.graph_options.xaxis.max) {
 227                         value -= 86400000;
 228                 }
 229
 230                 this.graph_options.xaxis.min = value;
 231
 232                 if (set_range) {
 233                         var iso_date = timestamp_to_iso_date(value);
 234                         var from_el = this.get_date_from_el();
 235                         $(from_el).value = iso_date;
 236                 }
 237         },
 238
 239         set_xaxis_max: function(value, set_range) {
 240                 if (value < this.graph_options.xaxis.min) {
 241                         alert('Wrong time range.');
 242                         return;
 243                 }
 244
 245                 if (value == this.graph_options.xaxis.min) {
 246                         value += 86400000;
 247                 }
 248
 249                 this.graph_options.xaxis.max = value;
 250
 251                 if (set_range) {
 252                         var iso_date = timestamp_to_iso_date(value);
 253                         var to_el = this.get_date_to_el();
 254                         $(to_el).value = iso_date;
 255                 }
 256         },
 257
 258         set_date_fields_events: function(date_from, date_to) {
 259                 var self = this;
 260                 this.date_from = date_from;
 261                 this.date_to = date_to;
 262                 $(date_from).observe('change', function() {
 263                         var from_stamp = iso_date_to_timestamp(this.value);
 264                         self.set_xaxis_min(from_stamp);
 265                         self.update();
 266                 });
 267
 268                 $(date_to).observe('change', function() {
 269                         var to_stamp = iso_date_to_timestamp(this.value);
 270                         self.set_xaxis_max(to_stamp);
 271                         self.update();
 272                 });
 273
 274                 var date = this.get_time_range();
 275                 this.set_time_range(date);
 276         },
 277
 278         set_clients_filter: function(client_filter) {
 279                 var self = this;
 280                 $(client_filter).observe('change', function() {
 281                         if (this.value == self.filter_all_mark) {
 282                                 delete self.filter_include['clientid'];
 283                         } else {
 284                                 self.filter_include['clientid'] = parseInt(this.value, 10);
 285                         }
 286                         self.update();
 287                 });
 288         },
 289
 290         set_jobs_filter: function(job_filter) {
 291                 var self = this;
 292                 $(job_filter).observe('change', function() {
 293                         if (this.value == self.filter_all_mark) {
 294                                 delete self.filter_include['name'];
 295                         } else {
 296                                 self.filter_include['name'] = this.value;
 297                         }
 298                         self.update();
 299                 });
 300         },
 301
 302         apply_jobs_filter: function() {
 303                 var self = this;
 304                 var jobs = this.jobs_all;
 305                 var filtred_jobs = [];
 306                 var to_add;
 307                 for (var i = 0; i < jobs.length; i++) {
 308                         to_add = true;
 309                         $H(this.filter_include).each(function(pair) {
 310                                 if (jobs[i].hasOwnProperty(pair.key) && jobs[i][pair.key] != pair.value) {
 311                                         to_add = false;
 312                                         return;
 313                                 }
 314                                 if (jobs[i].job.hasOwnProperty(pair.key) && jobs[i].job[pair.key] != pair.value) {
 315                                         to_add = false;
 316                                         return;
 317                                 }
 318                         });
 319                         if (to_add === true) {
 320                                 filtred_jobs.push(jobs[i]);
 321                         }
 322                 }
 323
 324                 for (var i = 0; i < filtred_jobs.length; i++) {
 325                         $H(this.filter_exclude).each(function(pair) {
 326                                 if (filtred_jobs[i].hasOwnProperty(pair.key) && filtred_jobs[i][pair.key] != pair.value) {
 327                                         return;
 328                                 }
 329                                 if (filtred_jobs[i].job.hasOwnProperty(pair.key) && filtred_jobs[i].job[pair.key] != pair.value) {
 330                                         return;
 331                                 }
 332                                 delete filtred_jobs[i];
 333                         });
 334                 }
 335                 this.set_jobs(filtred_jobs);
 336         },
 337
 338         prepare_series: function() {
 339                 var self = this;
 340                 this.series = [];
 341                 var series_uniq = {};
 342                 var x_vals = [];
 343                 var y_vals = [];
 344                 var jobs = this.get_jobs();
 345                 for (var i = 0; i < jobs.length; i++) {
 346                         if(jobs[i].start_stamp < this.graph_options.xaxis.min || jobs[i].end_stamp > this.graph_options.xaxis.max) {
 347                                 continue;
 348                         }
 349                         if (series_uniq.hasOwnProperty(jobs[i].job.name) == false) {
 350                                 series_uniq[jobs[i].job.name] = [];
 351                         }
 352                         series_uniq[jobs[i].job.name].push(jobs[i].start_point, jobs[i].end_point, [null, null]);
 353
 354                 }
 355                 $H(series_uniq).each(function(pair) {
 356                         var serie = [];
 357                         for (var i = 0; i<pair.value.length; i++) {
 358                                 serie.push(pair.value[i]);
 359                         }
 360                         self.series.push({data: serie, label: pair.key});
 361                 });
 362         },
 363
 364         extend_graph_options: function() {
 365                 this.graph_options.legend.container = this.get_legend_container();
 366                 this.graph_options.title = this.txt.graph_title;
 367                 this.graph_options.xaxis.title = this.txt.xaxis_title;
 368                 this.graph_options.yaxis.title = this.txt.yaxis_title;
 369         },
 370
 371         draw_graph: function(opts) {
 372                 var options = Flotr._.extend(Flotr._.clone(this.graph_options), opts || {});
 373
 374                 this.graph_obj = Flotr.draw(
 375                         this.get_graph_container(),
 376                         this.series,
 377                         options
 378                 );
 379         },
 380
 381         set_events: function() {
 382                 var self = this;
 383                 Flotr.EventAdapter.observe(this.graph_container, 'flotr:select', function(area) {
 384                         var options = {
 385                                 xaxis : {
 386                                         min : area.x1,
 387                                         max : area.x2,
 388                                         mode : 'time',
 389                                         timeMode: 'local',
 390                                         labelsAngle : 45,
 391                                         color: 'white',
 392                                         autoscale: true
 393                                         },
 394                                 yaxis : {
 395                                         min : area.y1,
 396                                         max : area.y2,
 397                                         color: 'white',
 398                                         autoscale: true
 399                                 }
 400                         };
 401
 402                         self.draw_graph(options);
 403                 });
 404
 405                 Flotr.EventAdapter.observe(this.graph_container, 'flotr:click', function () {
 406                         self.update();
 407                 });
 408         }
 409 });
 410
 411
 412 var iso_date_to_timestamp = function(iso_date) {
 413         var date_split = iso_date.split(' ');
 414         var date = date_split[0].split('-');
 415         if (date_split[1]) {
 416                 var time = date_split[1].split(':');
 417                 var date_obj = new Date(date[0], (date[1] - 1), date[2], time[0], time[1], time[2]);
 418         } else {
 419                 var date_obj = new Date(date[0], (date[1] - 1), date[2], 0, 0, 0);
 420         }
 421         return date_obj.getTime();
 422 }
 423
 424 var timestamp_to_iso_date = function(timestamp) {
 425         var iso_date;
 426         var date = new Date(timestamp);
 427
 428         var year = date.getFullYear();
 429         var month = (date.getMonth() + 1).toString();
 430         month = ('0' + month).substr(-2,2);
 431         var day = date.getDate().toString();
 432         day = ('0' + day).substr(-2,2);
 433         var date_values =  [year, month ,day];
 434
 435         var iso_date = date_values.join('-');
 436         return iso_date;
 437 }