diff --git a/js/apps/system/aardvark/frontend/js/templates/newDashboardView.ejs b/js/apps/system/aardvark/frontend/js/templates/newDashboardView.ejs index c718ba520b..0e0b7de42c 100644 --- a/js/apps/system/aardvark/frontend/js/templates/newDashboardView.ejs +++ b/js/apps/system/aardvark/frontend/js/templates/newDashboardView.ejs @@ -2,13 +2,17 @@ <% var largeChart = function(name) { %>
-
+
+
+
<% } %> <% var smallChart = function(name) { %>
-
+
+
+
<% } %> <% var tendency = function(title, name) { %> @@ -28,20 +32,20 @@ Request Statistics
-
Total Time in seconds
+
Total Time in seconds
<% largeChart("totalTimeChart") %> <% smallChart("totalTimeDistribution") %>
-
Data Transfer in Bytes
+
Data Transfer in Bytes
<% largeChart("dataTransferChart") %> <% smallChart("dataTransferDistribution") %>
-
Requests
+
Requests
<% largeChart("requestsChart") %> -
+
<% tendency("Async Requests", "asyncRequests"); %> <% tendency("Client Connections", "clientConnections"); %>
@@ -51,26 +55,33 @@ System Resources
-
+
<% tendency("Number of threads", "numberOfThreads"); %>
-
+
Resident Size
-
+
<% tendency("Virtual Size in GB", "virualSize"); %>
-
-
Major Page Faults
-
+
+
Major Page Faults
+
System User Time in seconds
+
+
+
+
+
+
-
System User Time in seconds
-
+
+
+
diff --git a/js/apps/system/aardvark/frontend/scss/_constants.scss b/js/apps/system/aardvark/frontend/scss/_constants.scss index 45ebe4f03d..b980cc9eee 100644 --- a/js/apps/system/aardvark/frontend/scss/_constants.scss +++ b/js/apps/system/aardvark/frontend/scss/_constants.scss @@ -1 +1,2 @@ $tile-width: 240px; +$legend-width: 200px; diff --git a/js/apps/system/aardvark/frontend/scss/_newDashboard.scss b/js/apps/system/aardvark/frontend/scss/_newDashboard.scss index 02a1f6b0ee..978f6fb7ce 100644 --- a/js/apps/system/aardvark/frontend/scss/_newDashboard.scss +++ b/js/apps/system/aardvark/frontend/scss/_newDashboard.scss @@ -1,4 +1,5 @@ $dashboard-height: 250px; +$dashboard-padding: 28px; %dashboard-chart-box { @extend %pull-left; @@ -13,41 +14,56 @@ $dashboard-height: 250px; .dashboard-interior-chart { @extend %pull-left; - height: $dashboard-height - 30px; + height: $dashboard-height - $dashboard-padding; } .dashboard-large-chart { @extend %dashboard-chart-box; @extend %pull-left; height: $dashboard-height; + padding-top: $dashboard-padding; } .dashboard-medium-chart { @extend %dashboard-chart-box; @extend %pull-left; height: $dashboard-height; + padding-top: $dashboard-padding; } .dashboard-small-chart { @extend %dashboard-chart-box; @extend %pull-left; height: $dashboard-height; + padding-top: $dashboard-padding; +} + +.dashboard-tendency-chart { + @extend %dashboard-chart-box; + @extend %pull-left; + height: $dashboard-height + $dashboard-padding; } .dashboard-legend { @extend %pull-left; - width: 100px; + height: $dashboard-height; + width: $legend-width; + + .dashboard-legend-inner { + padding-top: 20px; + } } .dashboard-half-height-chart { @extend %clear-float; - height: $dashboard-height / 2; + height: ($dashboard-height + $dashboard-padding) / 2; } .dashboard-title-bar { background-color: $c-bar-bg; border: { - bottom: 0; + bottom: 1px; + bottom-color: $c-black; left: 1px; left-color: $c-black; right: 1px; @@ -63,13 +79,24 @@ $dashboard-height: 250px; margin-left: -1px; margin-right: -1px; text-align: center; + + .dashboard-half-title-bar { + @extend %pull-left; + border-left: 1px solid $c-black; + margin-left: -1px; + width: 50%; + + &:first-child { + border-left: 0; + margin-left: 0; + } + } } .dashboard-subtitle-bar { @extend %pull-left; @extend %dashboard-chart-box; border-bottom: 1px solid $c-black; - border-top: 1px solid $c-black; font-size: 16px; height: 36px; line-height: 36px; @@ -80,7 +107,7 @@ $dashboard-height: 250px; .dashboard-tendency { @extend %pull-left; @extend %dashboard-chart-box; - height: $dashboard-height / 2 - 36px - 36px; + height: ($dashboard-height + $dashboard-padding) / 2 - 36px - 36px - 2px; width: 50%; } diff --git a/js/apps/system/aardvark/frontend/scss/_resizing.scss b/js/apps/system/aardvark/frontend/scss/_resizing.scss index 869cf995eb..445f031a63 100644 --- a/js/apps/system/aardvark/frontend/scss/_resizing.scss +++ b/js/apps/system/aardvark/frontend/scss/_resizing.scss @@ -37,6 +37,7 @@ div.resizecontainer { @for $i from 1 through 11 { $min: $tile-width * $i; $content-size: $min - 12px; + @media (min-width: $min) and (max-width: $min + $tile-width - 1) { div.resizecontainer { @@ -54,7 +55,7 @@ div.resizecontainer { width: $int-width; .dashboard-interior-chart { - width: $int-width - 106px; + width: $int-width - $legend-width; } } @@ -63,7 +64,7 @@ div.resizecontainer { width: $int-width; .dashboard-interior-chart { - width: $int-width - 106px; + width: $int-width - $legend-width; } } @@ -72,9 +73,19 @@ div.resizecontainer { width: $int-width; .dashboard-interior-chart { - width: $int-width - 106px; + width: $int-width - $legend-width; } } + + .dashboard-tendency-chart { + $int-width: ($content-size / 3); + width: $int-width; + + .dashboard-interior-chart { + width: $int-width - $legend-width; + } + } + } } diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css index 099d7d7486..f8002f54a9 100644 --- a/js/apps/system/aardvark/frontend/scss/generated.css +++ b/js/apps/system/aardvark/frontend/scss/generated.css @@ -1369,7 +1369,7 @@ textarea, .fa-plus-square-o:before { content: "\f196"; } -ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboard-interior-chart, .dashboard-legend, .dashboardModal, .pagination-line li a { +ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboard-interior-chart, .dashboard-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboardModal, .pagination-line li a { float: left; } div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol { @@ -2086,17 +2086,22 @@ div.resizecontainer { .dashboard-large-chart { width: 152px; } .dashboard-large-chart .dashboard-interior-chart { - width: 46px; } + width: -48px; } .dashboard-medium-chart { width: 114px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 8px; } + width: -86px; } .dashboard-small-chart { width: 76px; } .dashboard-small-chart .dashboard-interior-chart { - width: -30px; } } + width: -124px; } + + .dashboard-tendency-chart { + width: 76px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: -124px; } } @media (min-width: 480px) and (max-width: 719px) { div.resizecontainer { width: 468px; } @@ -2109,17 +2114,22 @@ div.resizecontainer { .dashboard-large-chart { width: 312px; } .dashboard-large-chart .dashboard-interior-chart { - width: 206px; } + width: 112px; } .dashboard-medium-chart { width: 234px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 128px; } + width: 34px; } .dashboard-small-chart { width: 156px; } .dashboard-small-chart .dashboard-interior-chart { - width: 50px; } } + width: -44px; } + + .dashboard-tendency-chart { + width: 156px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: -44px; } } @media (min-width: 720px) and (max-width: 959px) { div.resizecontainer { width: 708px; } @@ -2132,17 +2142,22 @@ div.resizecontainer { .dashboard-large-chart { width: 472px; } .dashboard-large-chart .dashboard-interior-chart { - width: 366px; } + width: 272px; } .dashboard-medium-chart { width: 354px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 248px; } + width: 154px; } .dashboard-small-chart { width: 236px; } .dashboard-small-chart .dashboard-interior-chart { - width: 130px; } } + width: 36px; } + + .dashboard-tendency-chart { + width: 236px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 36px; } } @media (min-width: 960px) and (max-width: 1199px) { div.resizecontainer { width: 948px; } @@ -2155,17 +2170,22 @@ div.resizecontainer { .dashboard-large-chart { width: 632px; } .dashboard-large-chart .dashboard-interior-chart { - width: 526px; } + width: 432px; } .dashboard-medium-chart { width: 474px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 368px; } + width: 274px; } .dashboard-small-chart { width: 316px; } .dashboard-small-chart .dashboard-interior-chart { - width: 210px; } } + width: 116px; } + + .dashboard-tendency-chart { + width: 316px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 116px; } } @media (min-width: 1200px) and (max-width: 1439px) { div.resizecontainer { width: 1188px; } @@ -2178,17 +2198,22 @@ div.resizecontainer { .dashboard-large-chart { width: 792px; } .dashboard-large-chart .dashboard-interior-chart { - width: 686px; } + width: 592px; } .dashboard-medium-chart { width: 594px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 488px; } + width: 394px; } .dashboard-small-chart { width: 396px; } .dashboard-small-chart .dashboard-interior-chart { - width: 290px; } } + width: 196px; } + + .dashboard-tendency-chart { + width: 396px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 196px; } } @media (min-width: 1440px) and (max-width: 1679px) { div.resizecontainer { width: 1428px; } @@ -2201,17 +2226,22 @@ div.resizecontainer { .dashboard-large-chart { width: 952px; } .dashboard-large-chart .dashboard-interior-chart { - width: 846px; } + width: 752px; } .dashboard-medium-chart { width: 714px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 608px; } + width: 514px; } .dashboard-small-chart { width: 476px; } .dashboard-small-chart .dashboard-interior-chart { - width: 370px; } } + width: 276px; } + + .dashboard-tendency-chart { + width: 476px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 276px; } } @media (min-width: 1680px) and (max-width: 1919px) { div.resizecontainer { width: 1668px; } @@ -2224,17 +2254,22 @@ div.resizecontainer { .dashboard-large-chart { width: 1112px; } .dashboard-large-chart .dashboard-interior-chart { - width: 1006px; } + width: 912px; } .dashboard-medium-chart { width: 834px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 728px; } + width: 634px; } .dashboard-small-chart { width: 556px; } .dashboard-small-chart .dashboard-interior-chart { - width: 450px; } } + width: 356px; } + + .dashboard-tendency-chart { + width: 556px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 356px; } } @media (min-width: 1920px) and (max-width: 2159px) { div.resizecontainer { width: 1908px; } @@ -2247,17 +2282,22 @@ div.resizecontainer { .dashboard-large-chart { width: 1272px; } .dashboard-large-chart .dashboard-interior-chart { - width: 1166px; } + width: 1072px; } .dashboard-medium-chart { width: 954px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 848px; } + width: 754px; } .dashboard-small-chart { width: 636px; } .dashboard-small-chart .dashboard-interior-chart { - width: 530px; } } + width: 436px; } + + .dashboard-tendency-chart { + width: 636px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 436px; } } @media (min-width: 2160px) and (max-width: 2399px) { div.resizecontainer { width: 2148px; } @@ -2270,17 +2310,22 @@ div.resizecontainer { .dashboard-large-chart { width: 1432px; } .dashboard-large-chart .dashboard-interior-chart { - width: 1326px; } + width: 1232px; } .dashboard-medium-chart { width: 1074px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 968px; } + width: 874px; } .dashboard-small-chart { width: 716px; } .dashboard-small-chart .dashboard-interior-chart { - width: 610px; } } + width: 516px; } + + .dashboard-tendency-chart { + width: 716px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 516px; } } @media (min-width: 2400px) and (max-width: 2639px) { div.resizecontainer { width: 2388px; } @@ -2293,17 +2338,22 @@ div.resizecontainer { .dashboard-large-chart { width: 1592px; } .dashboard-large-chart .dashboard-interior-chart { - width: 1486px; } + width: 1392px; } .dashboard-medium-chart { width: 1194px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 1088px; } + width: 994px; } .dashboard-small-chart { width: 796px; } .dashboard-small-chart .dashboard-interior-chart { - width: 690px; } } + width: 596px; } + + .dashboard-tendency-chart { + width: 796px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 596px; } } @media (min-width: 2640px) and (max-width: 2879px) { div.resizecontainer { width: 2628px; } @@ -2316,17 +2366,22 @@ div.resizecontainer { .dashboard-large-chart { width: 1752px; } .dashboard-large-chart .dashboard-interior-chart { - width: 1646px; } + width: 1552px; } .dashboard-medium-chart { width: 1314px; } .dashboard-medium-chart .dashboard-interior-chart { - width: 1208px; } + width: 1114px; } .dashboard-small-chart { width: 876px; } .dashboard-small-chart .dashboard-interior-chart { - width: 770px; } } + width: 676px; } + + .dashboard-tendency-chart { + width: 876px; } + .dashboard-tendency-chart .dashboard-interior-chart { + width: 676px; } } div.centralRow { margin-top: 65px; margin-bottom: 65px; } @@ -2930,34 +2985,44 @@ pre.gv-object-view { text-overflow: ellipsis; white-space: nowrap; } -.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-subtitle-bar, .dashboard-tendency { +.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency { border-left: 1px solid black; margin-left: -1px; } - .dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child { + .dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-tendency-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child { border-left: 0; margin-left: 0; } .dashboard-interior-chart { - height: 220px; } + height: 222px; } .dashboard-large-chart { - height: 250px; } + height: 250px; + padding-top: 28px; } .dashboard-medium-chart { - height: 250px; } + height: 250px; + padding-top: 28px; } .dashboard-small-chart { - height: 250px; } + height: 250px; + padding-top: 28px; } + +.dashboard-tendency-chart { + height: 278px; } .dashboard-legend { - width: 100px; } + height: 250px; + width: 200px; } + .dashboard-legend .dashboard-legend-inner { + padding-top: 20px; } .dashboard-half-height-chart { - height: 125px; } + height: 139px; } .dashboard-title-bar { background-color: #686766; - border-bottom: 0; + border-bottom: 1px; + border-bottom-color: black; border-left: 1px; border-left-color: black; border-right: 1px; @@ -2972,10 +3037,16 @@ pre.gv-object-view { margin-left: -1px; margin-right: -1px; text-align: center; } + .dashboard-title-bar .dashboard-half-title-bar { + border-left: 1px solid black; + margin-left: -1px; + width: 50%; } + .dashboard-title-bar .dashboard-half-title-bar:first-child { + border-left: 0; + margin-left: 0; } .dashboard-subtitle-bar { border-bottom: 1px solid black; - border-top: 1px solid black; font-size: 16px; height: 36px; line-height: 36px; @@ -2983,7 +3054,7 @@ pre.gv-object-view { width: 50%; } .dashboard-tendency { - height: 53px; + height: 65px; width: 50%; } .dashboard-row {