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                                         if(jobs.output[i].jobstatus == 'R' || jobs.output[i].jobstatus == 'C' || jobs.output[i].endtime == null) {
 150                                                 continue;
 151                                         }
 152                                         job = new JobClass(jobs.output[i]);
 153                                         this.jobs.push(job);
 154                                 }
 155                                 this.jobs_all = this.jobs;
 156                         } else {
 157                                 this.jobs = jobs;
 158                         }
 159                 } else {
 160                         alert('No jobs found.');
 161                 }
 162         },
 163
 164         get_jobs: function() {
 165                 return this.jobs;
 166         },
 167
 168         set_graph_container: function(id) {
 169                 this.graph_container = $(id);
 170         },
 171
 172         get_graph_container: function() {
 173                 return this.graph_container;
 174         },
 175
 176         set_legend_container: function(id) {
 177                 this.legend_container = $(id);
 178         },
 179
 180         get_legend_container: function() {
 181                 return this.legend_container;
 182         },
 183
 184         set_time_range_filter: function(id) {
 185                 var self = this;
 186                 this.time_range = $(id);
 187                 $(this.time_range).observe('change', function() {
 188                         var time_range = self.get_time_range();
 189                         self.set_time_range(time_range);
 190                         self.update();
 191                 });
 192         },
 193
 194         get_time_range: function() {
 195                 var time_range = parseInt(this.time_range.value, 10) * 1000;
 196                 return time_range;
 197         },
 198
 199         set_date_from_el: function(date_from) {
 200                 this.date_from = $(date_from);
 201         },
 202
 203         get_date_from_el: function() {
 204                 return this.date_from;
 205         },
 206
 207         set_date_to_el: function(date_to) {
 208                 this.date_to = $(date_to);
 209         },
 210
 211         get_date_to_el: function() {
 212                 return this.date_to;
 213         },
 214
 215         set_time_range: function(timestamp) {
 216                 var to_stamp = Math.round(new Date().getTime());
 217                 this.set_xaxis_max(to_stamp, true);
 218                 var from_stamp = (Math.round(new Date().getTime()) - this.get_time_range());
 219                 this.set_xaxis_min(from_stamp, true);
 220         },
 221
 222
 223         set_xaxis_min: function(value, set_range) {
 224                 if (this.graph_options.xaxis.max && value > this.graph_options.xaxis.max) {
 225                         alert('Wrong time range.');
 226                         return;
 227                 }
 228
 229                 if (value == this.graph_options.xaxis.max) {
 230                         value -= 86400000;
 231                 }
 232
 233                 this.graph_options.xaxis.min = value;
 234
 235                 if (set_range) {
 236                         var iso_date = timestamp_to_iso_date(value);
 237                         var from_el = this.get_date_from_el();
 238                         $(from_el).value = iso_date;
 239                 }
 240         },
 241
 242         set_xaxis_max: function(value, set_range) {
 243                 if (value < this.graph_options.xaxis.min) {
 244                         alert('Wrong time range.');
 245                         return;
 246                 }
 247
 248                 if (value == this.graph_options.xaxis.min) {
 249                         value += 86400000;
 250                 }
 251
 252                 this.graph_options.xaxis.max = value;
 253
 254                 if (set_range) {
 255                         var iso_date = timestamp_to_iso_date(value);
 256                         var to_el = this.get_date_to_el();
 257                         $(to_el).value = iso_date;
 258                 }
 259         },
 260
 261         set_date_fields_events: function(date_from, date_to) {
 262                 var self = this;
 263                 this.date_from = date_from;
 264                 this.date_to = date_to;
 265                 $(date_from).observe('change', function() {
 266                         var from_stamp = iso_date_to_timestamp(this.value);
 267                         self.set_xaxis_min(from_stamp);
 268                         self.update();
 269                 });
 270
 271                 $(date_to).observe('change', function() {
 272                         var to_stamp = iso_date_to_timestamp(this.value);
 273                         self.set_xaxis_max(to_stamp);
 274                         self.update();
 275                 });
 276
 277                 var date = this.get_time_range();
 278                 this.set_time_range(date);
 279         },
 280
 281         set_clients_filter: function(client_filter) {
 282                 var self = this;
 283                 $(client_filter).observe('change', function() {
 284                         if (this.value == self.filter_all_mark) {
 285                                 delete self.filter_include['clientid'];
 286                         } else {
 287                                 self.filter_include['clientid'] = parseInt(this.value, 10);
 288                         }
 289                         self.update();
 290                 });
 291         },
 292
 293         set_jobs_filter: function(job_filter) {
 294                 var self = this;
 295                 $(job_filter).observe('change', function() {
 296                         if (this.value == self.filter_all_mark) {
 297                                 delete self.filter_include['name'];
 298                         } else {
 299                                 self.filter_include['name'] = this.value;
 300                         }
 301                         self.update();
 302                 });
 303         },
 304
 305         apply_jobs_filter: function() {
 306                 var self = this;
 307                 var jobs = this.jobs_all;
 308                 var filtred_jobs = [];
 309                 var to_add;
 310                 for (var i = 0; i < jobs.length; i++) {
 311                         to_add = true;
 312                         $H(this.filter_include).each(function(pair) {
 313                                 if (jobs[i].hasOwnProperty(pair.key) && jobs[i][pair.key] != pair.value) {
 314                                         to_add = false;
 315                                         return;
 316                                 }
 317                                 if (jobs[i].job.hasOwnProperty(pair.key) && jobs[i].job[pair.key] != pair.value) {
 318                                         to_add = false;
 319                                         return;
 320                                 }
 321                         });
 322                         if (to_add === true) {
 323                                 filtred_jobs.push(jobs[i]);
 324                         }
 325                 }
 326
 327                 for (var i = 0; i < filtred_jobs.length; i++) {
 328                         $H(this.filter_exclude).each(function(pair) {
 329                                 if (filtred_jobs[i].hasOwnProperty(pair.key) && filtred_jobs[i][pair.key] != pair.value) {
 330                                         return;
 331                                 }
 332                                 if (filtred_jobs[i].job.hasOwnProperty(pair.key) && filtred_jobs[i].job[pair.key] != pair.value) {
 333                                         return;
 334                                 }
 335                                 delete filtred_jobs[i];
 336                         });
 337                 }
 338                 this.set_jobs(filtred_jobs);
 339         },
 340
 341         prepare_series: function() {
 342                 var self = this;
 343                 this.series = [];
 344                 var series_uniq = {};
 345                 var x_vals = [];
 346                 var y_vals = [];
 347                 var jobs = this.get_jobs();
 348                 for (var i = 0; i < jobs.length; i++) {
 349                         if(jobs[i].start_stamp < this.graph_options.xaxis.min || jobs[i].end_stamp > this.graph_options.xaxis.max) {
 350                                 continue;
 351                         }
 352                         if (series_uniq.hasOwnProperty(jobs[i].job.name) == false) {
 353                                 series_uniq[jobs[i].job.name] = [];
 354                         }
 355                         series_uniq[jobs[i].job.name].push(jobs[i].start_point, jobs[i].end_point, [null, null]);
 356
 357                 }
 358                 $H(series_uniq).each(function(pair) {
 359                         var serie = [];
 360                         for (var i = 0; i<pair.value.length; i++) {
 361                                 serie.push(pair.value[i]);
 362                         }
 363                         self.series.push({data: serie, label: pair.key});
 364                 });
 365         },
 366
 367         extend_graph_options: function() {
 368                 this.graph_options.legend.container = this.get_legend_container();
 369                 this.graph_options.title = this.txt.graph_title;
 370                 this.graph_options.xaxis.title = this.txt.xaxis_title;
 371                 this.graph_options.yaxis.title = this.txt.yaxis_title;
 372         },
 373
 374         draw_graph: function(opts) {
 375                 var options = Flotr._.extend(Flotr._.clone(this.graph_options), opts || {});
 376
 377                 this.graph_obj = Flotr.draw(
 378                         this.get_graph_container(),
 379                         this.series,
 380                         options
 381                 );
 382         },
 383
 384         set_events: function() {
 385                 var self = this;
 386                 Flotr.EventAdapter.observe(this.graph_container, 'flotr:select', function(area) {
 387                         var options = {
 388                                 xaxis : {
 389                                         min : area.x1,
 390                                         max : area.x2,
 391                                         mode : 'time',
 392                                         timeMode: 'local',
 393                                         labelsAngle : 45,
 394                                         color: 'white',
 395                                         autoscale: true
 396                                         },
 397                                 yaxis : {
 398                                         min : area.y1,
 399                                         max : area.y2,
 400                                         color: 'white',
 401                                         autoscale: true
 402                                 }
 403                         };
 404
 405                         self.draw_graph(options);
 406                 });
 407
 408                 Flotr.EventAdapter.observe(this.graph_container, 'flotr:click', function () {
 409                         self.update();
 410                 });
 411         }
 412 });
 413
 414 var GraphPieClass = Class.create({
 415         jobs: [],
 416         container: null,
 417         series: null,
 418         pie: null,
 419         graph_options: {
 420                 colors: ['#63c422', '#d70808', '#FFFF66', 'orange', 'blue'],
 421                 HtmlText: false,
 422                 fontColor: '#ffffff',
 423                 grid: {
 424                         verticalLines : false,
 425                         horizontalLines : false,
 426                         outlineWidth: 0,
 427                 },
 428                 xaxis: { showLabels : false,},
 429                 yaxis: { showLabels : false },
 430                 pie: {
 431                         show : true,
 432                         explode : 5,
 433                         labelFormatter: PieGraph.pie_label_formatter,
 434                         shadowSize: 4,
 435                         fillOpacity: 1,
 436                         sizeRatio: 0.6
 437                 },
 438                 mouse: {
 439                         track : true,
 440                         trackFormatter: PieGraph.pie_track_formatter,
 441                         relative: true
 442                 },
 443                 legend: {
 444                         position : 'se',
 445                         backgroundColor : '#D2E8FF',
 446                         margin: 0
 447                 }
 448         },
 449         initialize: function(jobs, container_id) {
 450                 this.jobs = jobs;
 451                 this.container = document.getElementById(container_id);
 452                 this.series = this.prepare_series();
 453                 this.draw_grah();
 454         },
 455         prepare_series: function() {
 456                 var series = [];
 457                 var label, serie;
 458                 var job_types = Object.keys(this.jobs);
 459                 var jobs_count;
 460                 for (var i = 0; i < job_types.length; i++) {
 461                         label = job_types[i];
 462                         jobs_count = this.jobs[label].length;
 463                         serie = {
 464                                 data: [[0, jobs_count]],
 465                                 label: label + ' (' + jobs_count.toString() + ')'
 466                         }
 467                         series.push(serie);
 468                 }
 469                 return series;
 470         },
 471         draw_grah: function() {
 472                 this.pie = Flotr.draw(this.container, this.series, this.graph_options);
 473         }
 474 });
 475
 476 var iso_date_to_timestamp = function(iso_date) {
 477         var date_split = iso_date.split(' ');
 478         var date = date_split[0].split('-');
 479         if (date_split[1]) {
 480                 var time = date_split[1].split(':');
 481                 var date_obj = new Date(date[0], (date[1] - 1), date[2], time[0], time[1], time[2]);
 482         } else {
 483                 var date_obj = new Date(date[0], (date[1] - 1), date[2], 0, 0, 0);
 484         }
 485         return date_obj.getTime();
 486 }
 487
 488 var timestamp_to_iso_date = function(timestamp) {
 489         var iso_date;
 490         var date = new Date(timestamp);
 491
 492         var year = date.getFullYear();
 493         var month = (date.getMonth() + 1).toString();
 494         month = ('0' + month).substr(-2,2);
 495         var day = date.getDate().toString();
 496         day = ('0' + day).substr(-2,2);
 497         var date_values =  [year, month ,day];
 498
 499         var iso_date = date_values.join('-');
 500         return iso_date;
 501 }