0260b100f068e4d6333a41b41f81e565a5f09b19
[squid-reports.git] / web / squid.js
1 urlbase="./api.php"
2
3 graph_colors = [
4 "salmon", "lightcoral", "crimson", "red", "darkred", "orangered",
5 "gold", "orange", "yellow", "darkkhaki", "lime", "green", "greenyellow",
6 "springgreen", "olive", "cyan", "turquoise", "teal", "lightskyblue",
7 "dodgerblue", "royalblue", "blue", "navy", "violet", "fuchsia", 
8 "darkviolet", "purple", "deeppink", "gray", "darkslategray", "sandybrown",
9 "goldenrod", "chocolate", "saddlebrown", "maroon", "rosybrown", "sienna", 
10 "brown", "dimgray", "mediumvioletred", "indigo", "orchid", "mediumpurple", 
11 "steelblue", "powderblue", "lightseagreen", "cadetblue", "aquamarine", 
12 "olivedrab", "chartreuse", "darkolivegreen", "tomato", "firebrick" 
13 ]
14
15 currentState=""
16
17 templates = {}
18 columns = {}
19
20 cats = {}
21 reps = {}
22
23 data = []
24
25 current_filter = {}
26
27 dictionaries = {}
28
29 current_rep = ''
30
31 online_traffic = null
32 online_connections = null
33 online_hosts = []
34
35 timer = null
36
37 assigned_colors = []
38
39 current_time = null
40 time_labels = []
41
42 function toDate(d) {
43   var curr_day = d.getDate();
44   if (curr_day<10) { curr_day = '0' + curr_day; }
45   var curr_month = d.getMonth() + 1;
46   if (curr_month<10) { curr_month = '0' + curr_month; }
47   var curr_year = d.getFullYear();
48   return curr_year + "-" + curr_month + "-" + curr_day
49 }
50
51 function Today() {
52   var dToday = new Date();
53   dToday.setHours(0,0,0,0)
54   return dToday
55 }
56
57 today = toDate(Today());
58
59 date_from = today
60 date_to = today
61
62 function UrlParams(params) {
63
64   var out = [];
65
66   for (var key in params) {
67     if (params.hasOwnProperty(key)) {
68       out.push(key + '=' + encodeURIComponent(params[key]));
69     }
70   }
71
72   return out.join('&');
73
74 }
75
76 function Macro(template, values) {
77   return templates[template].replace(/\$(\w+)\;/g,function (s,name) {
78       return values[name]
79     })
80 }
81
82 function ColumnMacro(column, values, macro = "column"){
83   var columnrec = columns[column]
84   var templatestr
85   if (columnrec) {
86     if (columnrec.template_name) {
87       macro = columnrec.template_name
88     }
89     templatestr = columnrec.template
90   }
91   if (templatestr) {
92     return templatestr.replace(/\$(\w+)\;/g,function (s,name) {
93       return values[name]
94     })
95   } else {
96     return Macro(macro,{VALUE:values[column]})
97   }
98 }
99
100 function HeaderMacro(column,macro = "header-column"){
101   var columnrec = columns[column]
102   if (columnrec) {
103     var alias = columns[column].alias;
104   } else {
105     var alias = ''
106   }
107   if (!(alias)) { alias = column }
108   return Macro(macro,{VALUE:alias})
109 }
110
111 function GetApi(onfinish,method,params) {
112
113   var req = new XMLHttpRequest();
114
115   req.onreadystatechange = function () {
116     if (this.readyState != 4) return; 
117     if (this.status != 200) {
118       setTimeout(OnLoad,30000);
119       return;
120     }
121     res = JSON.parse(this.responseText);
122     onfinish(res);
123   };
124
125   var url  = urlbase+"?method="+method;
126
127   if (params) {
128   
129     url = url + '&' + UrlParams(params)
130   
131   }
132
133   req.open("GET", url, true);
134   req.withCredentials = true;
135   req.send();
136
137 }
138
139 function UpdatePageProps(props) {
140
141   var logo = document.getElementById("brand");
142   logo.innerText = props["site-header"];
143
144   refresh = props["online_refresh"]
145   online_history = props["online_history"]
146
147   cats = props["cats"]
148
149   for (var i in res["columns"]) { 
150     columns[res["columns"][i]["name"]] = {alias:res["columns"][i]["alias"],template:res["columns"][i]["template"],template_name:res["columns"][i]["template_name"]}
151   }
152
153   for (var i in res["templates"]) { 
154     var mnemo = res["templates"][i]["mnemo"]
155     var body = res["templates"][i]["body"]
156     templates[mnemo] = body
157   }
158
159   dictionaries = res["dictionaries"]
160  
161   menuInnerHTML = ""
162   for (var cat in cats) {
163     category = cats[cat]
164     innerHTML = ""
165     for (rep in category["reps"]) {
166       report = category["reps"][rep]
167       reps[report["mnemo"]] = report
168       reptext = Macro("menuitem",{ MNEMO:report["mnemo"], NAME:report["name"], DESCR:report["description"] })
169       innerHTML = innerHTML + reptext
170     }
171     grouptxt = Macro("menugroup",{ MNEMO:category["mnemo"], NAME:category["name"], DESCR:category["description"], MENUITEM: innerHTML})
172     menuInnerHTML = menuInnerHTML + grouptxt
173   }
174   menuInnerHTML = Macro("menuonline",{}) + menuInnerHTML
175   menuHTML = Macro("menu", { MENUGROUP: menuInnerHTML} )
176   var Left = document.getElementById("menu");
177   Left.innerHTML = menuHTML
178
179   Online();
180   
181 }
182
183 function SetDates() {
184   var inp = document.getElementById("date-from")
185   inp.value = date_from
186   inp.max = date_to
187
188   var inp = document.getElementById("date-to")
189   inp.value = date_to
190   inp.min = date_from
191
192   var inp = document.getElementById("report-button")
193   if (current_rep) {
194     inp.disabled = false
195   } else {
196     inp.disabled = true
197   }
198 }
199
200 function OnLoad() {
201
202   GetApi(UpdatePageProps,"get-base-config",null)
203   SetDates();
204
205 }
206
207 function ShowHide(id) {
208   var content = document.getElementById(id);
209   if (content.style.display === "block") {
210     content.style.display = "none";
211   } else {
212     content.style.display = "block";
213   }
214 }
215
216 function MergeTR(tr,th, macro = "column") {
217   var str = ""
218   for (i in th) {
219     if (!(th[i].startsWith('_'))) {
220       str = str + ColumnMacro(th[i],tr,macro) 
221     }
222   }
223   return str
224 }
225
226 function MergeTH(th, macro = "header-column") {
227   var str = ""
228   for (i in th) {
229     if (!(th[i].startsWith('_'))) {
230       str = str + HeaderMacro(th[i])  
231     }
232   }
233   return str
234 }
235
236 function ProduceRep(res) {
237
238   current_filter = res["filter"]
239   if (!current_filter) { current_filter = {} }
240   dictionary = res["dictionary"]
241
242   header_template = res["header"]
243   has_total = res["has_total"]
244
245   innerHTML = ""
246   data = res["data"]
247   ii=0
248
249   if (has_total == "1") {
250     total = data.pop()
251   }
252   
253   for (i in data) {
254     row_data = data[i]
255     table_row = Macro("table-row",{DATA:MergeTR(row_data,dictionary)})
256     innerHTML = innerHTML + table_row
257   }
258
259   headerHTML = Macro("header-row",{DATA:MergeTH(dictionary)})
260   
261   if (has_total == "1") {
262     totalHTML = Macro("total-row",{DATA:MergeTR(total,dictionary)})
263     reportHTML = Macro("report-table-total",{HEADER:headerHTML,LINES:innerHTML,TOTAL:totalHTML})
264   } else {
265     reportHTML = Macro("report-table",{HEADER:headerHTML,LINES:innerHTML})
266   }
267   var body = document.getElementById("report-body") 
268   body.innerHTML = reportHTML;
269
270   if (reps[current_rep].graph_x) {
271     DisplayGraph(true)
272     var config = PrepareGraphDataset(data,reps[current_rep].graph_x,reps[current_rep].graph_y,reps[current_rep].graph_series)
273     config.options.responsive = true
274     
275     config.options.scales = {
276       xAxes: [{
277         scaleLabel: {
278           display: true,
279         }
280       }],
281       yAxes: [{
282         stacked: true,
283         scaleLabel: {
284           display: true,
285         },
286         ticks: {
287           suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
288         }
289       }]
290     }
291     DrawGraph(config)
292   } else {
293     DisplayGraph(false)
294   }
295
296 }
297
298 function DrawGraph(config) {
299   var ctx = document.getElementById('canvas').getContext('2d')
300   var div = document.getElementById("report-graph");
301   canvas.width = div.style.width;
302   canvas.height = div.style.height;
303   window.Graph = new Chart(ctx, config);
304 }
305
306 function AssignColor(key) {
307   if (assigned_colors[key]) {
308     return assigned_colors[key]
309   }
310   var rand_color 
311   if (graph_colors.length) { 
312     var idx = Math.floor(Math.random() * graph_colors.length)
313     rand_color = graph_colors[idx]
314     graph_colors.splice(idx,1)
315   } else {
316     rand_color = "darkgray"
317   }
318   assigned_colors[key] = rand_color
319   return rand_color
320 }
321
322 function PrepareGraphDataset(data,graph_x,graph_y,graph_series) {
323   
324   var xvals = []
325   var series = []
326
327   var values = []
328
329   for (i in data) {
330     rec = data[i]
331     for (key in rec) {
332       if (key == graph_x) {
333         if (!xvals.includes(Number(rec[key]))) {
334           xvals.push(Number(rec[key]))
335         }
336       }
337       if (key == graph_series) {
338         if (!series.includes(rec[key])) {
339           series.push(rec[key])
340         }
341       }
342     }
343   }
344   
345   xvals.sort(function(a,b) { return a-b; })
346   series.sort()
347
348   for (var i in series) {
349     values[i] = {}
350     values[i].data = []
351     values[i].label = series[i]
352     values[i].fill = true
353     values[i].borderColor = AssignColor(values[i].label)
354     values[i].backgroundColor = AssignColor(values[i].label)
355     for (var j in xvals) {
356       values[i].data[j] = 0
357     } 
358   }
359
360   for (var k in data) {
361     rec = data[k]
362     xval = null
363     yval = null
364     dataset = null
365     for (key in rec) {
366       if (key == graph_x) {
367         xval = Number(rec[key])
368       }
369       if (key == graph_y) {
370         yval = Number(rec[key])
371       }
372       if (key == graph_series) {
373         dataset = rec[key]
374       }
375     }
376     var j = xvals.indexOf(xval)
377     var i = series.indexOf(dataset)
378     values[i].data[j] = yval 
379   }
380
381   return  {
382       type: 'line',
383       data: {
384         labels: xvals,
385         datasets: values,
386       },
387       options: {
388       }
389     }
390
391   
392 }
393
394 function AliasByName(dict,name) {
395   for (i in dict) {
396     if (dict[i].name == name) { return dict[i].alias }
397   }
398   return name
399 }
400
401 function AddTraffic(label,b) {
402   var rec
403   for (i in online_traffic) {
404     if (online_traffic[i].label == label) {
405       rec = online_traffic[i]
406       break
407     }
408   }
409   if (!rec) {
410     rec = { label: label, borderColor: AssignColor(label), backgroundColor: AssignColor(label), data: new Array(online_history).fill(0) }
411     online_traffic.push(rec)
412   }
413   rec.data[rec.data.length-1] += b
414 }
415
416 function ProduceOnline(res) {
417
418   if (!online_traffic) {
419     current_time = null
420     online_traffic = []
421     time_labels = []
422     cur = Date.now()
423     for (i = 1; i<=online_history; i++) {
424       cur = cur - refresh
425       time_labels.unshift(cur)
426     }
427     config = {
428       type: 'line',
429       data: {
430         labels: time_labels,
431         datasets: online_traffic,
432       },
433       options: {
434         animation: {
435           duration: 0
436         },
437         responsive: true,
438         scales: {
439           xAxes: [{
440             type: 'time',
441             scaleLabel: {
442               display: true,
443             }
444           }],
445           yAxes: [{
446             stacked: true,
447             ticks: {
448                 suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
449             },
450             scaleLabel: {
451               display: true,
452               labelString: "Скорость, Кбит/c"
453             }
454           }]
455         }
456       }
457     }
458     DrawGraph(config) 
459   }
460
461   var delta
462
463   if (current_time) {
464     delta = (Date.now() - current_time)/1000
465   } else {
466     delta = 1
467   }
468   
469   current_time = Date.now()
470
471   time_labels.shift()
472   time_labels.push(current_time)
473   
474   for (i = online_traffic.length-1; i>=0; i--) {
475     online_traffic[i].data.shift()
476     online_traffic[i].data.push(0)
477   }
478   
479   dictionary = res["dictionary"]
480
481   header_template = res["header"]
482
483   innerHTML = ""
484   data = res["data"]
485   ii=0
486
487   var new_online_connections = []
488
489   dictionary.unshift("useralias")
490   for (i in data) {
491     row_data = data[i]
492     user = row_data["_user"]
493     username = AliasByName(dictionaries['user_id'],user)
494     row_data["useralias"] = username
495     
496     host = row_data["host"]
497     hostname = AliasByName(dictionaries['host_id'],host)
498     row_data["host"] = hostname
499     
500     table_row = Macro("table-row",{DATA:MergeTR(row_data,dictionary)})
501     innerHTML = innerHTML + table_row
502
503     var bytes = Number(row_data['bytes'])
504     
505     var idx = row_data["_ip"]+':'+row_data["_port"]  
506     var last_bytes 
507     
508     if (online_connections) {
509       last_bytes = online_connections[idx]
510       if (!last_bytes) {
511         last_bytes = 0
512       }
513     } else {
514       last_bytes = bytes
515     }
516     
517     new_online_connections[idx] = bytes
518     
519     AddTraffic(username,8*(bytes-last_bytes)/(1024*delta))
520   }
521   
522   online_connections = new_online_connections
523
524   for (i = online_traffic.length-1; i>=0; i--) {
525     if (Math.max.apply(null,online_traffic[i].data) == 0) {
526       online_traffic.splice(i,1)
527     }
528   }
529
530   headerHTML = Macro("header-row",{DATA:MergeTH(dictionary)})
531   
532   reportHTML = Macro("report-table",{HEADER:headerHTML,LINES:innerHTML})
533
534   var body = document.getElementById("report-body") 
535   body.innerHTML = reportHTML;
536
537   timer = setTimeout(Online,refresh)
538  
539   window.Graph.update()
540
541 }
542
543 function CancelRefresh() {
544   if (timer) {
545     clearTimeout(timer)
546     timer = null
547   }
548 }
549
550 function ShowRep(id) {
551   CancelRefresh()
552   current_filter = {}
553   var header = document.getElementById("report-name") 
554   header.innerText = reps[id]["name"] 
555   var body = document.getElementById("report-body") 
556   body.innerText = "Отчет загружается..." 
557   current_rep = id
558   UpdateDates()
559   Rerun()
560 }
561
562 function ShowFilteredRep(id,filter) {
563   CancelRefresh()
564   for (i in filter) {
565     current_filter[i] = filter[i]
566   }
567   var header = document.getElementById("report-name") 
568   header.innerText = reps[id]["name"] 
569   var body = document.getElementById("report-body") 
570   body.innerText = "Отчет загружается..." 
571   current_rep = id
572   UpdateDates()
573   Rerun()
574 }
575
576 function FilterSelect(name,dict,value) {
577   var str = '<select onchange="SetFilter(\''+name+'\',this);">'
578   for (key in dict) {
579     if (dict[key].id==value) {
580       str = str + '<option selected value="'+dict[key].id+'">'+dict[key].name+"</option>"
581     } else {
582       str = str + '<option value="'+dict[key].id+'">'+dict[key].name+"</option>"
583     }
584   }
585   str = str + "</select>" + Macro("clear-filter",{NAME:name})
586   return str
587 }
588
589 function Filter() {
590   var str = ""
591   for (key in current_filter) {
592     var dict = dictionaries[key]
593     if(dict) {
594       str = str + FilterSelect(key,dict,current_filter[key])
595     } else {
596       str = str + Macro("filter-display",{NAME:HeaderMacro(key),VALUE:current_filter[key]}) + Macro("clear-filter",{NAME:key})
597     }
598   }
599   return str
600 }
601
602 function RefreshFilterPane() {
603   var filter = document.getElementById("report-dates")
604   if (current_rep) {
605     filter.style.display = "block";
606   } else {
607     filter.style.display = "none";
608   } 
609   var filter = document.getElementById("filter") 
610   if (Object.keys(current_filter).length === 0) {
611     filter.style.display = "none";
612     filter.innerHTML = ''
613   } else {
614     filter.style.display = "inline-block";
615     filter.innerHTML = Filter()
616   }
617 }
618
619 function Rerun() {
620   online_traffic = null
621   var parameters = JSON.parse(JSON.stringify(current_filter))
622   parameters["mnemo"] = current_rep
623   parameters["date_from"] = date_from
624   parameters["date_to"] = date_to
625   GetApi(ProduceRep,"report",parameters);
626   var filter = document.getElementById("filter") 
627   RefreshFilterPane();
628 }
629
630 function Online() {
631   CancelRefresh()
632   RefreshFilterPane()
633   var header = document.getElementById("report-name") 
634   header.innerText = "Активные соединения" 
635   GetApi(ProduceOnline,"online",{});
636   DisplayGraph(true)
637 }
638
639 function UpdateDates() {
640   var inp = document.getElementById("date-from")
641   date_from = inp.value
642   var inp = document.getElementById("date-to")
643   date_to = inp.value
644
645   SetDates();
646
647 }
648
649 function DateLeft() {
650   UpdateDates()
651   var dFrom = new Date(date_from)
652   var dTo = new Date(date_to)
653   var delta = Math.round(((dTo.getTime() - dFrom.getTime()))/(86400*1000))
654   dTo.setDate(dTo.getDate() - (1 + delta))
655   dFrom.setDate(dFrom.getDate() - (1 + delta))
656   date_from = toDate(dFrom)
657   date_to = toDate(dTo)
658   SetDates()
659 }
660
661 function DateRight() {
662   dToday = new Date();
663   UpdateDates()
664   var dFrom = new Date(date_from)
665   var dTo = new Date(date_to)
666   var delta = Math.round(((dTo.getTime() - dFrom.getTime()))/(86400*1000))
667   dFrom.setDate(dFrom.getDate() + 1 + delta)
668   dTo.setDate(dTo.getDate() + 1 + delta)
669   if (dTo>Today()) {
670     dTo = Today()
671   }
672   if (dFrom>Today()) {
673     dFrom = Today()
674   }
675   date_from = toDate(dFrom)
676   date_to = toDate(dTo)
677   SetDates()
678 }
679
680 function SetFilter(name,select) {
681   current_filter[name] = select.value;
682 }
683
684 function ClearFilter(name) {
685   delete current_filter[name];
686   RefreshFilterPane();
687 }
688
689 function DisplayGraph(on) {
690   var selector = document.getElementById("page-selector") 
691   if (on) {
692     selector.style.display="block"
693   } else {
694     selector.style.display="none"
695     Display('report-body')
696   }
697 }
698
699 function Display(id) {
700   var elements = document.getElementsByClassName('report-block');
701   for (i=0; i<elements.length; i++) {
702     if (elements[i].id == id) {
703       elements[i].style.display = "block"
704     } else {
705       elements[i].style.display = "none"
706     }
707   }
708 }