diff --git a/features/availability.feature b/features/availability.feature index 148c2dddc..f55e8e62b 100644 --- a/features/availability.feature +++ b/features/availability.feature @@ -604,6 +604,40 @@ Feature: Availability reports Then I should see "workhours" And I should see "2013-03-04" And I should see "2013-03-10" - And I should see trend graph have background color "rgb(161, 158, 149)" - And I should see trend graph have background color "transparent" - And I should see trend graph have background color "rgb(170, 222, 83)" + And I should see trend graph have background color "#a19e95" + And I should see trend graph have background color "#aade53" + + Scenario: Create availability report with re-scalling + Given I am on the Host details page + And I have these report data entries: + | timestamp | event_type | flags | attrib | host_name | service_description | state | hard | retry | downtime_depth | output | + | 2013-03-01 00:01:00 | 801 | NULL | NULL | linux-server2 | | 0 | 1 | 1 | 0 | OK - linux-server2 | + | 2013-03-01 12:00:00 | 801 | NULL | NULL | linux-server1 | | 0 | 1 | 1 | NULL | OK - Sven Melander | + | 2013-03-03 00:01:00 | 801 | NULL | NULL | linux-server2 | | 0 | 1 | 1 | 0 | OK - linux-server2 | + | 2013-03-05 00:03:00 | 801 | NULL | NULL | linux-server2 | | 0 | 1 | 1 | NULL | ERROR - cannot find linux-server2 | + | 2013-03-05 10:20:00 | 801 | NULL | NULL | linux-server2 | | 0 | 1 | 1 | 0 | OK - linux-server2 | + And I hover over the "Report" menu + And I hover over the "Availability" menu + When I click "Create Availability Report" + And I select "Hosts" from "Report type" + And I select "linux-server1" from the multiselect "objects_tmp" + And I select "linux-server2" from the multiselect "objects_tmp" + Then "objects" should have option "linux-server1" + Then "objects" should have option "linux-server2" + When I select "Custom" from "Reporting period" + And I enter "2013-03-01" into "Start date" + And I enter "23:31" into "time_start" + And I enter "2013-04-01" into "End date" + And I enter "22:32" into "time_end" + And I check "Include trends graph" + Then I check "Show trends re-scaling" + And I click "Show report" + And I should see "linux-server1" + And I should see "linux-server2" + And I should see "2013-03-01" + And I should see "2013-03-11" + And I should see "2013-03-21" + And I should see trend graph have background color "#aade53" + And I should see trend graph have background color "#333" + When I hover over "bar" + Then I should see css "#tooltip" diff --git a/modules/reports/controllers/reports.php b/modules/reports/controllers/reports.php index 5174e8f94..0a4d1da82 100644 --- a/modules/reports/controllers/reports.php +++ b/modules/reports/controllers/reports.php @@ -136,7 +136,7 @@ public function generate($input=false) { $this->template->current_skin = $this->options['skin']; } - $this->template->css[] = $this->add_path('reports/css/tgraph.css'); + $this->template->css[] = $this->add_path('reports/css/trendgraph.css'); $this->template->css[] = $this->add_path('reports/css/datePicker.css'); $this->template->content = $this->add_view('reports/index'); # base template with placeholders for all parts @@ -346,7 +346,7 @@ public function generate($input=false) { } } - $template->trends_graph = $this->add_view('trends/new_report'); + $template->trends_graph = $this->add_view('trends/tgraph_report'); /* New JS trend graph */ diff --git a/modules/reports/views/reports/css/tgraph.css b/modules/reports/views/reports/css/tgraph.css deleted file mode 100644 index e0fc315cd..000000000 --- a/modules/reports/views/reports/css/tgraph.css +++ /dev/null @@ -1,100 +0,0 @@ - -.tgraph-container { -} - -.tgraph { - position: relative; - width: 84%; - height: 40px; - color: #333; - float: left; - padding-left: 1%; - font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif; -} - -.tgraph-hoverbox { - border: 1px solid #999; - border-radius: 4px; - display: none; - z-index: 9999; - box-shadow: inset 2px 2px 5px #fff; - background: transparent; - background: rgba(255, 255, 255, 0.8); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)"; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF); - zoom: 1; - - position: absolute; - color: #333; - max-width: 180px; - font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif; - padding: 5px; - text-shadow: 1px 1px 1px #fff; -} - -.tgraph .tgraph-time { - float: left; - text-align: left; - font-size: 7pt; -} - -.tgraph .tgraph-time-line { - margin: 0 0; - border-left: 1px solid #000; - opacity: 0.1; - z-index: 0; - width: 0; -} - -.tgraph-label { - float: left; - width: 15%; - padding: 10px 0 0 0; - min-height: 30px; - font-size: 8pt; - text-align: right; -} - -.tgraph .tgraph-subline { - position: absolute; - margin-top: -12px; - outline: 1px solid #fff; - height: 10px; - min-width: 3px; -} - -.tgraph .tgraph-subline .tgraph-block { - height: 10px; -} - -.tgraph .tgraph-note:hover { - background: #bbb; - z-index: 1; -} - -.tgraph .tgraph-block-line { - margin: 12px 0; - position: relative; - width: 100%; -} - -.tgraph .tgraph-block .tgraph-block { - height: 8px; -} - -.tgraph .tgraph-block { - height: 16px; - z-index: 0; - position: absolute; -} - -.tgraph-hoverbox b { - display: inline-block; - margin: 2px 0px; -} - -.tgraph-hoverbox small { - display: inline-block; - margin: 2px 0px; - font-size: 7pt; -} diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css new file mode 100644 index 000000000..847f84867 --- /dev/null +++ b/modules/reports/views/reports/css/trendgraph.css @@ -0,0 +1,83 @@ +.x-item { + overflow: hidden; + width: 100%; +} +.tgraph-row { + position: relative; + width: 84%; + height: 40px; + color: #333; + float: left; + padding-left: 1%; + font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif; +} +.tgraph-blockline { + margin: 2px 0; + position: relative; + width: 100%; + overflow: hidden; + direction: ltr; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} +.tgraph-blockline .bar { + height: 20px; + margin: 0; + color: white; +} +.tgraph-sub-blockline { + position: relative; + width: 100%; + overflow: hidden; + align-items: center; + direction: ltr; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} +.tgraph-sub-blockline .bar { + position: relative; + margin: 0 auto; + height: 10px; + min-width: 10px; + color: white; +} +.tgraph-sub-blockline .bar-transparent { + position: relative; + margin: 0; + height: 10px; + color: white; + background: 'transparent'; +} +.tgraph-time { + float: left; + text-align: left; + font-size: 7pt; +} +.tgraph-timeline { + margin: 0 0; + border-left: 1px solid #000; + opacity: 0.1; + z-index: 0; + width: 0; +} +.y-label { + float: left; + width: 15%; + padding: 10px 0 0 0; + min-height: 30px; + font-size: 8pt; + text-align: right; +} +#tooltip { + position: absolute; + background: #fff; + border: 1px solid #aaa; + padding: 5px; + display: none; +} \ No newline at end of file diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php new file mode 100644 index 000000000..6cbd4e130 --- /dev/null +++ b/modules/reports/views/trends/tgraph_report.php @@ -0,0 +1,189 @@ +
+ $statechanges) { + $labels[] = $service; + $servicerow = array(); + + for($i = 0; $i < count($statechanges); $i++) { + $cur_out = $statechanges[$i]['output']; + + if(isset($outputs_r[$cur_out])) { + $output_id = $outputs_r[$cur_out]; + } else { + $output_id = count($outputs); + $outputs[] = $cur_out; + $outputs_r[$cur_out] = $output_id; + } + + $servicerow[] = array( + $statechanges[$i]['duration'], /* 0: duration */ + $statechanges[$i]['state'], /* 1: state */ + $output_id /* 2: short */ + ); + + switch(strtolower($obj_type)) { + case 'host': + $state_name = Reports_Model::$host_states[$statechanges[$i]['state']]; + break; + case 'service': + $state_name = Reports_Model::$service_states[$statechanges[$i]['state']]; + break; + default: + $state_name = 'N/A'; + } + $state_names[$statechanges[$i]['state']] = ucfirst($state_name); + } + $rawdata[] = $servicerow; + } + $colors = reports::_state_color_table($obj_type); + + $data = array(); + for($i = 0; $i < count($rawdata); $i++) { + $data[$i] = array(); + for ($j = 0; $j < count($rawdata[$i]); $j++) { + $data[$i][$j] = array( + 'duration' => $rawdata[$i][$j][0], + 'label' => $state_names[$rawdata[$i][$j][1]], + 'short' => str_replace('\'', '', $outputs[$rawdata[$i][$j][2]]), + 'color' => $colors[$rawdata[$i][$j][1]] + ); + } + } + + $lastHost = ''; + function generateDates($startDate, $endDate) { + $dates = array(); + $start = new DateTime(date("Y-m-d H:i:s",$startDate)); + $end = new DateTime(date("Y-m-d H:i:s",$endDate)); + $end->modify('-1 days'); + $interval = $start->diff($end); + $daysDifference = $interval->days; + + // Calculate the interval depending on the span of days + $intervalDays = ($daysDifference <= 7) ? 1 : ceil($daysDifference / 7); + // Generate dates based on the calculated interval + while($start <= $end) { + $dates[] = $start->format('Y-m-d'); + $start->modify('+' . $intervalDays . ' days'); + } + return $dates; + } + + $dateLabel = generateDates($graph_start_date, $graph_end_date); + $totalInterval = $graph_end_date - $graph_start_date; + $dateCount = count($dateLabel); + $labelCount = count($labels); + + for($y = 0; $y < $labelCount; $y++) { + // graph for Y-labels + if(mb_strpos($labels[$y], ';')) { + $Hostname = explode(';', $labels[$y])[0]; + $Servicename = explode(';', $labels[$y])[1]; + if ($Hostname === $lastHost) { + $rowLabel = $Servicename; + } else { + $rowLabel = "".$Hostname.";".$Servicename; + } + $lastHost = $Hostname; + } else { + $rowLabel = "".$labels[$y].""; + } + + $bars = count($data[$y])-1; + echo "
"; + echo ""; + echo "
"; + if($use_scaling) { + $scaleLastDT = new DateTime(date("Y-m-d H:i:s", $graph_end_date)); + $scaleStartDT = new DateTime(date("Y-m-d H:i:s", $graph_end_date)); + + echo "
"; + for($z = 0; $z <= $bars; $z++){ + $barAve = $data[$y][$z]['duration'] / $totalInterval; + $barWidth = round($barAve*100,3); + $scaleLastDT->modify('+'.$data[$y][$z]['duration'].' second'); + $dataValue = "
".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."
".$data[$y][$z]['short']; + + if($barAve < 0.03) { + echo "
"; + + $data[$y][$z]['color'] = "#333"; + } else { + echo "
"; + } + $scaleStartDT->modify('+'.$data[$y][$z]['duration'].' second'); + } + echo "
"; + } + + echo "
"; + $lastDateTime = new DateTime(date("Y-m-d H:i:s", $graph_start_date)); + $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_start_date)); + $totalBar = 0; + + + for($z=0; $z<=$bars; $z++){ + $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100,3); + if($z==$bars && $totalBar > 0) { + $barWidth = round(100 - $totalBar,3); + } + $lastDateTime->modify('+'.$data[$y][$z]['duration'].' second'); + $dataValue = "
".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."
".$data[$y][$z]['short']; + + echo "
"; + + $startDateTime->modify('+'.$data[$y][$z]['duration'].' second'); + $totalBar += $barWidth; + } + echo "
"; + echo "
"; + echo "
"; + } + + echo "
"; + echo "
"; + echo ""; + echo "
"; + echo "
"; + // graph X-labels + $i = 0; + while($i < $dateCount) { + echo "
". + "
". + "  ".$dateLabel[$i]. + "
"; + $i++; + } + echo "
"; +?> + +Not showing %d graphs due to being 100%% OK

"), $skipped); +} ?> +
+ +