improve server-status theme (#310)

* Add files via upload

* Add files via upload

* Add files via upload

* improve theme-server-status

1.前台分组展示agent
2.一些小优化

---------

Co-authored-by: SuperHsiao <superhsiao@4indesign.com>

resource/static/theme-server-status/css/dark.css

@@ -1,6 +1,6 @@
 body[theme="dark"] {
     background: #212e36 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PGZpbHRlciBpZD0iZGFya3JlYWRlci1pbWFnZS1maWx0ZXIiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMyAtMC42NjcgLTAuNjY3IDAuMDAwIDEuMDAwIC0wLjY2NyAwLjMzMyAtMC42NjcgMC4wMDAgMS4wMDAgLTAuNjY3IC0wLjY2NyAwLjMzMyAwLjAwMCAxLjAwMCAwLjAwMCAwLjAwMCAwLjAwMCAxLjAwMCAwLjAwMCIgLz48L2ZpbHRlcj48L2RlZnM+PGltYWdlIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWx0ZXI9InVybCgjZGFya3JlYWRlci1pbWFnZS1maWx0ZXIpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQU1nQUFBRElCQU1BQUFCZmRyT3RBQUFBTUZCTVZFWHc4UER4OGZIeTh2THo4L1AwOVBUMTlmWDI5dmIzOS9mNCtQajUrZm42K3ZyNysvdjgvUHo5L2YzKy92Ny8vLzlwVXFOWkFBQkxoMGxFUVZSNEFRWEJSMkJTQndNQTRBZFpoS29RTWdoVUpRbGtnSU1FTXJGS1FnWUpEckpEY0pCSmdOYVN4UWdPa3BCSnRVQTJXR1ZQYTZtdC9vNlQxdGFxSjdmV2szdWQyQTg0L2Q4SFRFZnRHaFRUa2s2ZmdRWlpPSkU4bklWclNQNnFQVDY0YkU1R0ZPWEUxcFVRbEMrSFRjZ0pUT0RNNDdjbmxkWWhPOFU3NDRyMTQzSUtMMk1RUTBWZkcwVWVoclZZSTh2eFZSMHBrOS9LMkErVnhnUUd6RVlNanVYTFBuZWVTQUhnaHRSWHBZaU42cHZWcDhmMXdZVE5tWDJnY0ROa0piaXFSRXBpK2IvQksvOXhpcldzcTNucytyYWdGcGNvOVJzMFJkSnJHZXg4MklPT2IzdmFveVhlUlVwb1RUTW91VnB2WE95NzUyWXJza013cjdUbDJmUVdoalVpTzFZa2VyY0JoUHBQdXNzQ2hPOFM2NEs1OUlrR01IWDNodDAzU0I5SURPWHNLWnIva0xGRGxQSys1TUw0eE1zNlpRbmthZmtQSmJsUE1uRmRYTC9nVktYNXhTUnZPUytHOUxhbEI1cjJTekwvNHlwVEU4R2FyZmFjbDJNYXcyUVU2MTFmdXpPUFlCb0FhSGMwYlN2V0RaSkUzUXcvWlYvRlFxaEJUQ0QrTVdsd1lDOUxOS2lweUJDN0doc3luOHZ1Y1dBUWJmZ0FTaW1FK2p4SFJ2TWNoRi93ZmEvcWpCaHJNSVZrYVFJbnNiT0RYK3YyMVVoODVmU0o5V2pPWmtwVGRPVjBidksvZVY1QXB5bWJEWTJJcGNJWEJRak1TcUNCM0VqOG94TzNBbnd0M0c0cWZ3SGxDZUh4a1l1NW9yQjAwL1NNWDNncEFSMWVaMVBVZ1dINkdod2NWMmJYQkJ2RkM5Sm83WkZHVXF5U2JnTkFnNFk1R1NuZWtxeUxxeThsTHp1bXhWTElJMEFlVFNSVHVJRm1kczdjSDA1bG5TaEF3UFdWUnBOM0VDVitBcGxhNDI5RkZMcnZ0YWtia1BGaVhEUEdoejBnYS91YXprWmx2bW9RUXpNaUc3c2RCV0hIQlIwL1BLMWhkVWRsNG14cnFGQkU2M282anFQbVJJdC9GSTRFQVhJeXdFTzEza2NoeGpOOUZuSjZFeWo3U2Rydms1MVR0VnhKeExhb1FUUXRiOUEvY2JSV0gzUHlPckxBbFY4NzUwTk1VVy9EeStSZmJNUDNtMzhZY3Z4aDkyclJ0N1BwOHZSSWtaZ29BVWtuYS9tWGg1UWo5YkZrT2pJL2hEZHVKSDBvQVh5ZTQwS3JyK1M0eFJDYjhvNjJCRGdhaGpZMmh1RDBoSWcvTE1wdXA1TGhuakNlTGtsNkxEK25tM1ZrOEVqSnBnRmxrdUVhOVpzRzlRUFpIdXZLNy9YZTBsUlFqeEJrK1ptN1JyRW1tcGhVSEtkNHB3RGJ3aEdQSkRLdFNaOEZLbHcyMGNrTjgrdFM3MGJoR3p6UFBmOUJ6UnQyWFpuMHVpcDhIdHpxeUFjQ3ZSLzl2b0ZYTW5GRHpXcUQva00xZGtGZm1NVko4a0E2d2pQNXdzTnVMbjJTaENzQXJzR1ZpVEJUNlI0cC9zWXNtYUNLTGRPblVXQ05GellhSzZBRGkxNldLWVkwMWszNXF0aTVqTGRUN0c3OGs5bzkrUnV1c2VQeTVRaU1YY2Q1T01YTFpJRk1lZ0w2eVJDOUUzT2I0TFVVUi9JMzI1SCtTZDZRN1k4NXI3a3Jub3lncllRc1NuZit5OGtmYXcxdlpuK2RvMFpINkVtT3VNU1lKUEFCM1IvbmpJVVRZQnJMQkx0UCtXWUJFMFhqMHZJL3BZdmduVDZrQ0cxNmFkK3hPZ2pLdDIrVStvYVZSZFhYbTVRanJVOGxPRlp6UEltODVBd01uODV1QVRNdjVpVUU5YWV4anBmcFhrYWRIMDdIWjRTdGlJYjBlMm5INXRZL3liY0tBREsxOE8rRkxWV1lLRktjWFJkYTBzQ1FqN0tQTzFTdmlqWHloUmhLTTJuNTNFbWU0UHFhdjdWWFB1dzZBdlBFK2NhMW5EczVQT2J3cTE2MkZJZ3dFRXNyUGhSOVkreWU0aUpzNDlta04zVXRDaUFHbUYrSnZCVlN5T0pkNm93WWdORHFqOU9GOTJyWTNZUi8wc1Y1bGtnQkZ1YTJhQkVVZExqSW0ybnpTQkJvNFByQ3ZqeFpqTVR1MWIxczRsVk51Z1duUzZSZzJnRVY3R3ZYMlRWa3hMWGRwYnB1K3JGRTlxbFF1U0NKOWhtN1pKSFNrOTExVVRtdjBIeGJ0dFc4Q3ZTNmZUcWFtaENmZ1hjWEJ3ZS9zN1diU3hEOXVXSEZkc2NTaUdLM2Q4ZFZQSnNxQnFGREN1SmFEWW4vVnJZSEN3dUl2T3Y2K0lBUm9vZ1hlMXVXdzNsbmVpUy9xMzlxbDcxakhXaGJDRXEvYTE1OVplY1JwK0s5U25kYWpIZ0U0Q01HYzU5TUdKdmdUNkhuWVRLTFpRL1Y0bDdDZFlrQ1ZON3NaRHhkS1VyK1gra21sVFZFM1N2RlBGQnZSZmJkN0dIUjhsN1c0YnBFbGl4Ni9uS296OWl4OFlyd3pjclFaNDVTV1BHT1NSWVUvMDlJMDVkZEg5eTB5dmd3em1ZMC9BY1VPQXVVL2JPeDZwOTdHdndHTDNZc2tHQ3N6b3JOZmFzdStYdm9WNW9xVVBYdHdISjRERmM5SEcwOG5TdUx3alZDeWlmaTFwWHNSN3BMVFowUERFWUxOMlFXeTYwUEhkNjU1aUJSYkpHRThOK3FyYjdNN3ppa0lOKzRsQnBOd2JVQUNGbGFnSGFpU2ZZa0N6ZlQ1WmxEVkdXQVNkdnNRRnhQaHl4YzZWWFNNbDJMdUlURkQ4bS9BTmFZUVF5ZGVWVzNkUWtXdzdNM0Z2eVMzU1JTUUNzdVdYdkw5SzRuMm1vdkpJOEY1OGtEZythTlhhMllpR2lySnlXUVRZY01SMGFBbU9NRVhQS1U2aTEzUE1FZXpLRUYyOFVUSGFZbDc3TGtRK0pXR1BvKzZac1ZkWkNnYm04Sm81WEZtUUdpcGo4aFduZkdSUFBaMlh5STMwMG1URnd6MEJ2d2oxdHd0WEp3WTh2TXNyOWRVNVFXVlhuWFhINml1S3N5eUtFbk5BTnRsbGpaejZOSVgrdXgvTnkvVGV5V3ZNdTlpRFdycjVNM2p2Y1JjUmFkbmFPUjUvdWc3RDdZdlRiMi9Cd29VcExtd09sdlVDV1B1MDdLVFNIOHQvbGQvcklEcU1sWUd6bEYvN0ZLdk1CMFYvREdNMlBMZEZwYnJGKzVJZnd5eEFieXlTNitmMjVUeW5obzdhZnM4UWVMditRamY1OUJUT1lHOUdSb1h3ellvcDhPNmM4MkxBVnFEYjBURHlBSVo4T25EUGE4S2lSU1VwbUJPa1JMbldmc1FGN3hYL1l6WS9rUDlVZE5lbXNmTG9FWnJtSW5vU01LSHFIcE52cFFXdk5YWU5uakpNK3VCTGhIeTB2RExHVlNiampCeUoyTjFTcVQ3YjZjOHdQSTBMcEdYbVpLcEsrYkEzMEhNT1ZSaVJHQStpdkoycmJJaUFaTCtaZUZRT2I1YzM4UnVYMk54MmV6bitiOFZwM3FYeUFYT2NIVWt4MzhlSk95ZUQxY3VuY2VZSE1JZ1N3RWV2clR1Z0xlRisvRHRVZzhxa010NHdFMGJxWXMyQ3kyVnZpY212SzB1OTA0K0ZDRThXUFBlS1JEVTFyNmVvbzhLZkZoOWd4aUk3V0hKQ2dmM3R2aHRCTVJxL1V2a1FZb0xWaXBIS3Q0QnNGbGQ3NUl1VFNXRWE4R0l0bkhrU1VlS2s0NEZTcmFQcEFZYnpRSzU2TVNvNkgxNDlyNTNxNVhTU2U0aTUrb081ejFMMVFhL0tLdlYxbHYvcHgvYVNMaDc5SmRXbXdRYWt5WmkrbzBkVlhnQ0p1Q0NacU45WTJ4SkNPelBwaHhTUzk5by9pcDNnb3U3eDdJQm5MUWxuNk5JZU4vOGhPMUhOQzZaYnJYdDNJQzVieVRRemRsM0dXSkc5TWZsSkduWkcreHA5ZFFiOUc0bW9JZ21qemRIMXdVTThkQXFWaW5zelRqNm1adnJSLine truncated
-    color: rgb(200, 195, 188);;;
+    color:#f1f1f1;
 }
 
 body[theme="dark"] .navbar-brand {
@@ -43,7 +43,7 @@ body[theme="dark"] .navbar-inverse .navbar-nav > .open > a {
 
 body[theme="dark"] .content {
     background-image: initial;
-    background-color: rgb(24, 26, 27);
+    background-color:#171A1B;
     border-color: rgb(62, 67, 70);
     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 10px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 10px;
@@ -52,18 +52,32 @@ body[theme="dark"] .content {
 
 body[theme="dark"] .table {
     background-image: initial;
-    background-color: rgb(24, 26, 27);
+    background-color:#171A1B;
     border-color: #545b5e;
 }
 
+body[theme="dark"] .table>thead>tr>th.node-group-tag {
+    background-color:#171A1B;
+}
+
 body[theme="dark"] .table-striped tbody > tr.even > td,
 body[theme="dark"] .table-striped tbody > tr.even > th {
-    background-color: rgb(24, 26, 27);;
+    background-color:#171A1B;
 }
 
 body[theme="dark"] .table-striped tbody > tr.odd > td,
 body[theme="dark"] .table-striped tbody > tr.odd > th {
-    background-color: rgb(27, 30, 31);
+    background-color:#171A1B;
+}
+
+body[theme="dark"] .table>tbody>tr>td,
+body[theme="dark"] .table>tbody>tr>th, 
+body[theme="dark"] .table>tfoot>tr>td, 
+body[theme="dark"] .table>tfoot>tr>th, 
+body[theme="dark"] .table>thead>tr>td, 
+body[theme="dark"] .table>thead>tr>th {
+    border-top: 0.7px solid #37434C;
+    line-height:20px;
 }
 
 body[theme="dark"] .progress {
@@ -78,6 +92,11 @@ body[theme="dark"] .progress-bar-success {
     background-image: linear-gradient(rgb(77, 133, 58) 0px, rgb(54, 126, 54) 100%);
 }
 
+body[theme="dark"] .progress-offline .progress-bar-success {
+    background-image: linear-gradient(grey 0px, grey 100%);
+}
+
+
 body[theme="dark"] .progress-bar-warning {
     background-image: linear-gradient(rgb(153, 95, 13) 0px, rgb(181, 113, 15) 100%);
 }
@@ -112,7 +131,7 @@ body[theme="dark"] .node-cell.status .status-icon.online {
 }
 
 body[theme="dark"] .node-cell.status .status-icon.offline {
-    background-color: grey;
+    background-image: linear-gradient(#9B2522 0px, #9B2522 100%);
 }
 
 body[theme="dark"] .service-status .danger {
@@ -129,4 +148,10 @@ body[theme="dark"] .service-status .warning {
 
 body[theme="dark"] .service-day-status-icon {
     background-color: grey;
+}
+
+body[theme="dark"] footer p a, 
+body[theme="dark"] footer p a:hover {
+    color: #f1f1f1;
+    text-decoration: none;
 }

resource/static/theme-server-status/css/light.css

@@ -27,6 +27,10 @@ body[theme="light"] .table {
     background: #ffffff;
 }
 
+body[theme="light"] .table>thead>tr>th.node-group-tag {
+    background-color:#ffffff;
+}
+
 body[theme="light"] .table-striped tbody > tr.even > td,
 body[theme="light"] .table-striped tbody > tr.even > th {
     background-color: #F9F9F9;
@@ -37,10 +41,25 @@ body[theme="light"] .table-striped tbody > tr.odd > th {
     background-color: #FFF;
 }
 
+body[theme="light"] .table>tbody>tr>td, 
+body[theme="light"] .table>tbody>tr>th, 
+body[theme="light"] .table>tfoot>tr>td, 
+body[theme="light"] .table>tfoot>tr>th, 
+body[theme="light"] .table>thead>tr>td, 
+body[theme="light"] .table>thead>tr>th {
+    line-height:20px;
+}
+
 body[theme="light"] .progress-bar {
     color: #000;
 }
 
+
+body[theme="light"] .progress-offline .progress-bar-success {
+    background-image: linear-gradient(grey 0px, grey 100%);
+}
+}
+
 body[theme="light"] .table-hover > tbody > tr:hover > td {
     background: #E6E6E6;
 }
@@ -75,4 +94,10 @@ body[theme="light"] .service-status .warning {
 
 body[theme="light"] .service-day-status-icon {
     background-color: #ebebeb;
+}
+
+body[theme="light"] footer p a, 
+body[theme="light"] footer p a:hover {
+    color: #333333;
+    text-decoration: none;
 }

resource/static/theme-server-status/css/main.css

@@ -1,5 +1,5 @@
 body {
-    padding-top: 70px !important;
+    padding-top:70px !important;
     padding-bottom: 30px !important;
 }
 
@@ -8,14 +8,27 @@ body {
     min-height: 40px !important;
 }
 
+.navbar-inner{
+    margin:0 auto;
+}
+
+.pl-md-unset {
+    max-width: 95vw;
+}
+
 .navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
     margin-top: 18px;
     padding: 0 !important;
 }
 
+.navbar-toggle {
+    margin-right:0
+}
+
 .navbar-brand {
     font-size: 20px;
     text-align: center;
+    padding:12px 0 0 0;
 }
 
 .node-cell-expand {
@@ -32,18 +45,17 @@ body {
     padding-top: 10px;
 }
 
-.dropdown {
-    margin-right: 10px;
-}
-
 .navbar-inverse, .nav.navbar-nav {
     background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%) !important;
 }
 
+.navbar-inverse .navbar-nav>li>a {
+    color:#f1f1f1;
+}
+
 .navbar-inverse .navbar-brand {
     font-size: 20px;
 }
-
 /* 导航部分 结束 */
 
 /* 正文部分 开始 */
@@ -63,6 +75,15 @@ body {
     text-align: left;
 }
 
+.table>thead>tr>th{
+  border:none;  
+}
+
+.table .node-group-tag {
+    font-size: 18px;
+    padding-bottom:15px;
+}
+
 .progress {
     margin-bottom: 0;
 }
@@ -78,6 +99,10 @@ body {
     border-top: 0 !important;
 }
 
+.accordian-body{
+    margin: 10px 0px 10px 18px;
+}
+
 .node-cell.center {
     text-align: center !important;
 }
@@ -147,104 +172,45 @@ body {
 }
 
 /* 服务页 正文结束 */
-
 @media only screen and (max-width: 1200px) {
-    .node-cell.os,
-    .node-cell.location,
-    .node-cell.uptime {
-        display: none;
-        visibility: hidden;
+    .accordian-body{
+        margin: 5px 0px 5px 10px;        
+    }
+    .table .node-group-tag {
+        font-size:16px;
+        padding-bottom:6px;
     }
 }
 
 @media only screen and (max-width: 720px) {
     body {
         font-size: 10px !important;
+        padding-top:60px !important;
     }
-
     .content {
         padding: 0;
+        margin-bottom: 10px;
     }
-
     .node-cell.os,
-    .node-cell.location,
-    .node-cell.uptime {
-        display: none;
-        visibility: hidden;
-    }
-
-    .service-day-status-icon {
-        width: 8px;
-        height: 8px;
-        margin-right: 2px;
-        border-radius: 3px;
-    }
-}
-
-@media only screen and (max-width: 620px) {
-    body {
-        font-size: 10px !important;
-    }
-
-    .content {
-        padding: 0;
-    }
-
-    .node-cell.type,
-    .node-cell.location,
     .node-cell.uptime,
-    .node-cell.traffic {
+    .node-cell.traffic{
         display: none;
         visibility: hidden;
     }
-
-    .service-day-status-icon {
+    .node-cell.location{
+        display: table-cell;
+        visibility: visible;
     }
-}
-
-@media only screen and (max-width: 533px) {
-    body {
-        font-size: 10px !important;
-    }
-
-    .content {
-        padding: 0;
-    }
-
-    .node-cell.os,
-    .node-cell.location,
-    .node-cell.uptime,
-    .node-cell.traffic {
+    .node-cell-os-text,.node-cell-location-text{
         display: none;
         visibility: hidden;
     }
-
-    .service-day-status-icon {
+    .accordian-body{
+        margin: 5px 0px 5px 10px;        
     }
-}
-
-@media only screen and (max-width: 450px) {
-    body {
-        font-size: 10px !important;
-    }
-
-    .content {
-        padding: 0;
-    }
-
-    .node-cell.type,
-    .node-cell.location,
-    .node-cell.uptime,
-    .node-cell.traffic {
-        display: none;
-        visibility: hidden;
-    }
-
-    .node-cell.cpu,
-    .node-cell.ram,
-    .node-cell.hdd {
-        min-width: 25px;
-        max-width: 50px;
+    .table .node-group-tag {
+        font-size:12px;
+        padding-bottom:6px;
     }
 }