diff --git a/web/gui/index.html b/web/gui/index.html
index 4a8647dd9c..58b0744043 100644
--- a/web/gui/index.html
+++ b/web/gui/index.html
@@ -16,23 +16,6 @@
<link rel="stylesheet" type="text/css" href="main.css?v=5">
<link rel="icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP9JREFUeNpiYBgFo+A/w34gpiZ8DzWzAYgNiHGAA5UdgA73g+2gcyhgg/0DGQoweB6IBQYyFCCOGOBQwBMd/xnW09ERDtgcoEBHB+zHFQrz6egIBUasocDAcJ9OxWAhE4YQI8MDILmATg7wZ8QRDfQKhQf4Cie6pAVGPA4AhQKo0BCgZRAw4ZSBpIWJNI6CD4wEKikBaFqgVSgcYMIrzcjwgcahcIGRiPYCLUPBkNhWUwP9akVcoQBpatG4MsLviAIqWj6f3Absfdq2igg7IIEKDVQKEzN5ofAenJCp1I8gJRTug5tfkGIdR1FDniMI+QZUjF8Amn5htOdHCAAEGACE6B0cS6mrEwAAAABJRU5ErkJggg==" />
- <!-- <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
- <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
- <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
- <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
- <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
- <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
- <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
- <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
- <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
- <link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
- <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
- <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
- <link rel="manifest" href="manifest.json">
- <meta name="msapplication-TileColor" content="#ffffff">
- <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
- <meta name="theme-color" content="#ffffff"> -->
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://my-netdata.io" />
@@ -80,23 +63,6 @@
</script>
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
- <!-- <nav id="mynetdata_nav" class="collapse navbar-collapse navbar-left" role="navigation" style="padding-right: 20px;">
- <ul class="nav navbar-nav">
- <li data-placement="right" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
- <img src="images/netdata-logomark.svg" height="32"/>
- </li>
- <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
- <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
- <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
- <div class="agent-item" style="white-space: nowrap">
- <i class="fas fa-hourglass-half"></i>
- Loading, please wait...
- <div></div>
- </div>
- </div>
- </li>
- </ul>
- </nav> -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
@@ -104,13 +70,14 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <!-- <a href="/" class="navbar-brand" id="1hostname" title="server hostname<br/>click it to reload the dashboard" data-toggle="tooltip" data-placement="bottom">netdata</a> -->
<ul class="nav navbar-nav" style="display: inline-block">
<li data-placement="right" class="hidden-xs hidden-sm" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
<img src="images/netdata-logomark.svg" height="32"/>
</li>
<li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
- <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
+ <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">
+ my-netdata
+ <strong class="caret"></strong></a>
<div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
<div class="agent-item" style="white-space: nowrap">
<i class="fas fa-hourglass-half"></i>
@@ -135,26 +102,6 @@
<li title="print this dashboard to PDF" data-toggle="tooltip" data-placement="bottom" id="printButton"><a href="#" class="btn" data-toggle="modal" data-target="#printPreflightModal"><i class="fas fa-print"></i> <span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
<li title="get help on using the charts" data-toggle="tooltip" data-placement="bottom" class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fas fa-question-circle"></i> <span class="hidden-sm hidden-md">Help</span></a></li>
<li id="account-menu-container" class="dropdown" data-toggle="tooltip"></li>
- <!--
- <li class="dropdown hidden-sm hidden-md hidden-lg" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">my-netdata <strong class="caret"></strong></a>
- <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
- <div class="agent-item" style="white-space: nowrap">
- <i class="fas fa-hourglass-half"></i>
- Loading, please wait...
- <div></div>
- </div>
- </div>
- </li>
- -->
- <!--
- <li class="dropdown hidden-sm hidden-md hidden-lg">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Nodes <strong class="caret"></strong></a>
- <ul id="mynetdata_servers2" class="dropdown-menu scrollable-menu inpagemenu" role="menu">
- <li><a href="#" onclick="return false;" style="color: #999;">loading...</a></li>
- </ul>
- </li>
- -->
</ul>
</nav>
</div>
diff --git a/web/gui/main.css b/web/gui/main.css
index 2ddb776e5c..b6ba959107 100644
--- a/web/gui/main.css
+++ b/web/gui/main.css
@@ -151,12 +151,6 @@ body.modal-open {
/*width: 220px;*/
}
-/*
-.affix-top {
- width: 220px;
-}
-*/
-
.dashboard-sidebar {
max-height: calc(100% - 70px) !important;
overflow-y: auto;
@@ -168,12 +162,6 @@ body.modal-open {
position: static;
}
-@media (min-width: 768px) {
- .dashboard-sidebar {
- padding-left: 20px;
- }
-}
-
/* First level of nav */
.dashboard-sidenav {
margin-top: 20px;
@@ -353,146 +341,6 @@ body.modal-open {
user-select: none;
}
-@media print {
- body {
- overflow: visible !important;
- -webkit-print-color-adjust: exact;
- page-break-inside: auto;
- page-break-before: auto;
- page-break-after: auto;
- }
-
- .dashboard-section {
- page-break-inside: auto;
- page-break-before: auto;
- page-break-after: auto;
- }
-
- .dashboard-subsection {
- page-break-before: avoid;
- page-break-after: auto;
- page-break-inside: auto;
- }
-
- .charts-body {
- padding-left: 0%;
- padding-right: 0%;
- display: block;
- page-break-inside: auto;
- page-break-before: auto;
- page-break-after: auto;
- }
-
- .back-to-top,
- .dashboard-theme-toggle {
- display: block;
- }
-}
-
-@media (min-width: 768px) {
- .charts-body {
- padding-left: 0%;
- padding-right: 0%;
- }
-
- .back-to-top,
- .dashboard-theme-toggle {
- display: block;
- }
-}
-
-/* Show and affix the side nav when space allows it */
-@media (min-width: 992px) {
- .container {
- padding-left: 0% !important;
- }
-
- .charts-body {
- width: calc(100% - 213px) !important;
- padding-left: 1% !important;
- padding-right: 0% !important;
- }
-
- .sidebar-body {
- display: inline-block !important;
- width: 213px !important;
- }
-
- .dashboard-sidebar .nav > .active > ul {
- display: block;
- }
-
- /* Widen the fixed sidebar */
- .dashboard-sidebar.affix,
- .dashboard-sidebar.affix-top,
- .dashboard-sidebar.affix-bottom {
- width: 213px !important;
- }
-
- .dashboard-sidebar.affix {
- position: fixed; /* Undo the static from mobile first approach */
- top: 20px;
- }
-
- .dashboard-sidebar.affix-bottom {
- position: absolute; /* Undo the static from mobile first approach */
- }
-
- .dashboard-sidebar.affix-bottom .dashboard-sidenav,
- .dashboard-sidebar.affix .dashboard-sidenav {
- margin-top: 0;
- margin-bottom: 0;
- }
-}
-
-@media (min-width: 1200px) {
- .container {
- padding-left: 2% !important;
- }
-
- .charts-body {
- width: calc(100% - 233px) !important;
- padding-left: 1% !important;
- padding-right: 1% !important;
- }
-
- .sidebar-body {
- display: inline-block !important;
- width: 233px !important;
- }
-
- /* Widen the fixed sidebar again */
- .dashboard-sidebar.affix,
- .dashboard-sidebar.affix-top,
- .dashboard-sidebar.affix-bottom {
- width: 233px !important;
- }
-}
-
-@media (min-width: 1360px) {
- .container {
- padding-left: 3% !important;
- }
-
- .charts-body {
- width: calc(100% - 263px) !important;
- padding-left: 1% !important;
- padding-right: 2% !important;
- }
-
- .sidebar-body {
- display: inline-block !important;
- width: 263px !important;
- }
-
- /* Widen the fixed sidebar again */
- .dashboard-sidebar.affix,
- .dashboard-sidebar.affix-top,
- .dashboard-sidebar.affix-bottom {
- width: 263px !important;
- }
-}
-
.action-button {
position: relative;
display: inline-block;
@@ -664,8 +512,23 @@ body.modal-open {
right: 19px;
}
+#myNetdataDropdownParent {
+ float: left;
+}
+
#hostname {
font-size: 18px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 220px;
+ }
+
+ #hostnametext {
+ white-space: pre;
+ float: left;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 160px;
}
.sign-in-btn {
@@ -718,3 +581,180 @@ body.modal-open {
.beta {
color:#FFCC00;
}
+
+
+@media (min-width: 1400px) {
+ #hostname {
+ max-width: 600px !important;
+ }
+
+ #hostnametext {
+ max-width: 540px !important;
+ }
+}
+
+@media (min-width: 1360px) {
+ .container {
+ padding-left: 3% !important;
+ }
+
+ #hostname {
+ max-width: 280px !important;
+ }
+
+ #hostnametext {
+ max-width: 220px !important;
+ }
+
+ .charts-body {
+ width: calc(100% - 263px) !important;
+ padding-left: 1% !important;
+ padding-right: 2% !important;
+ }
+
+ .sidebar-body {
+ display: inline-block !important;
+ width: 263px !important;
+ }
+
+ /* Widen the fixed sidebar again */
+ .dashboard-sidebar.affix,
+ .dashboard-sidebar.affix-top,
+ .dashboard-sidebar.affix-bottom {
+ width: 263px !important;
+ }
+}
+
+@media (min-width: 1200px) {
+ #hostname {
+ max-width: 100px;
+ }
+
+ #hostnametext {
+ max-width: 40px;
+ }
+ .container {
+ padding-left: 2% !important;
+ }
+
+
+ .charts-body {
+ width: calc(100% - 233px) !important;
+ padding-left: 1% !important;
+ padding-right: 1% !important;
+ }
+
+ .sidebar-body {
+ display: inline-block !important;
+ width: 233px !important;
+ }
+
+ /* Widen the fixed sidebar again */
+ .dashboard-sidebar.affix,
+ .dashboard-sidebar.affix-top,
+ .dashboard-sidebar.affix-bottom {
+ width: 233px !important;
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ padding-left: 0% !important;
+ }
+
+ .charts-body {
+ width: calc(100% - 213px) !important;
+ padding-left: 1% !important;
+ padding-right: 0% !important;
+ }
+
+ .sidebar-body {
+ display: inline-block !important;
+ width: 213px !important;
+ }
+
+ .dashboard-sidebar .nav > .active > ul {
+ display: block;
+ }
+
+ /* Widen the fixed sidebar */
+ .dashboard-sidebar.affix,
+ .dashboard-sidebar.affix-top,
+ .dashboard-sidebar.affix-bottom {
+ width: 213px !important;
+ }
+
+ .dashboard-sidebar.affix {
+ position: fixed; /* Undo the static from mobile first approach */
+ top: 20px;
+ }
+
+ .dashboard-sidebar.affix-bottom {
+ position: absolute; /* Undo the static from mobile first approach */
+ }
+
+ .dashboard-sidebar.affix-bottom .dashboard-sidenav,
+ .dashboard-sidebar.affix .dashboard-sidenav {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+@media (min-width: 860px) {
+ .dashboard-sidebar {
+ padding-left: 20px;
+ }
+
+}
+
+@media (min-width: 768px) {
+ .dashboard-sidebar {
+ padding-left: 20px;
+ }
+
+ .charts-body {
+ padding-left: 0%;
+ padding-right: 0%;
+ }
+
+ .back-to-top,
+ .dashboard-theme-toggle {
+ display: block;
+ }
+}
+
+@media print {
+ body {
+ overflow: visible !important;
+ -webkit-print-color-adjust: exact;
+ page-break-inside: auto;
+ page-break-before: auto;
+ page-break-after: auto;
+ }
+
+ .dashboard-section {
+ page-break-inside: auto;
+ page-break-before: auto;
+ page-break-after: auto;
+ }
+
+ .dashboard-subsection {
+ page-break-before: avoid;
+ page-break-after: auto;
+ page-break-inside: auto;
+ }
+
+ .charts-body {
+ padding-left: 0%;
+ padding-right: 0%;
+ display: block;
+ page-break-inside: auto;
+ page-break-before: auto;
+ page-break-after: auto;
+ }
+
+ .back-to-top,
+ .dashboard-theme-toggle {
+ display: block;
+ }
+}
diff --git a/web/gui/main.js b/web/gui/main.js
index 65c4d4a888..69a7148fd0 100644
--- a/web/gui/main.js
+++ b/web/gui/main.js
@@ -1775,8 +1775,6 @@ function renderPage(menus, data) {
if (urlOptions.mode === 'print') {
chtml += '</div>';
}
-
- // console.log(' \------- ' + chart.id + ' (' + chart.priority + '): ' + chart.context + ' height: ' + menus[menu].submenus[submenu].height);
}
head += '</div>';
@@ -2747,7 +2745,7 @@ function initializeDynamicDashboardWithData(data) {
}
// update the dashboard hostname
- document.getElementById('hostname').innerHTML = options.hostname + ((netdataSnapshotData !== null) ? ' (snap)' : '').toString() + ' <strong class="caret">';
+ document.getElementById('hostname').innerHTML = '<span id="hostnametext">' + options.hostname + ((netdataSnapshotData !== null) ? ' (snap)' : '').toString() + '</span> <strong class="caret">';
document.getElementById('hostname').href = NETDATA.serverDefault;
document.getElementById('netdataVersion').innerHTML = options.version;