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 @@ +