diff --git a/pkg/dashboard/dashboard.scss b/pkg/dashboard/dashboard.scss
new file mode 100644
index 000000000..8d2d09b3f
--- /dev/null
+++ b/pkg/dashboard/dashboard.scss
@@ -0,0 +1,213 @@
+@import "../lib/page.scss";
+@import "../lib/table.css";
+@import "../../node_modules/@patternfly/patternfly/components/Button/button.scss";
+
+#dashboard-hosts {
+ /* Dashboard list is narrow enough in extreme mobile mode to not overflow */
+ /* This is a work-around to enable tooltips to escape panel bounds. */
+ overflow: visible;
+}
+
+#dashboard-hosts .list-group-item {
+ border-left-width: 7px;
+ border-left-style: solid;
+ border-top: none;
+ position: relative;
+ outline: 0;
+}
+
+#dashboard-hosts .list-group-item:before {
+ content: "";
+ position: absolute;
+ border-top: 1px solid #BABABA;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ height: 1px;
+}
+
+#dashboard-hosts .list-group-item:first-child:before {
+ border-top-color: transparent;
+}
+
+#dashboard-hosts .list-group button {
+ margin-right: 0.3rem;
+ margin-left: 0.3rem;
+ float: right;
+}
+
+/* Per server buttons not visible by default */
+#dashboard-hosts .list-group button {
+ display: none;
+}
+
+/* When panel is editable, then buttons are visible */
+#dashboard-hosts.editable .list-group button {
+ display: inline-block;
+}
+
+#dashboard-hosts.editable .list-group-item:hover {
+ background-color: var(--color-gray-1);
+ cursor: auto;
+}
+
+#dashboard-hosts .spinner {
+ float: left;
+ margin: 6px 13px 4px 3px;
+}
+
+#dashboard-hosts .list-group-item span.reconnecting {
+ color: var(--color-subtle-copy);
+ display: inline;
+ padding-left: 20px;
+}
+
+.host-avatar {
+ border-radius: 3px;
+ margin-right: 10px;
+ width: 32px;
+ height: 32px;
+}
+
+#dashboard-hosts .list-group-item .host-avatar {
+ float: left;
+ border-style: none;
+}
+
+#dashboard-hosts .list-group-item > span {
+ padding-top: 6px;
+ padding-bottom: 4px;
+ display: inline-block;
+}
+
+#dashboard-hosts .list-group-item div.os {
+ padding-top: 6px;
+ padding-bottom: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: right;
+ color: var(--color-subtle-copy);
+ float: right;
+}
+
+#dashboard-toolbar > div.ct-select,
+#dashboard-toolbar > div.dropdown {
+ display: inline-flex;
+}
+
+#dashboard-toolbar .dropdown-toggle span {
+ display: inline-block;
+ width: 6em;
+ text-align: left;
+ padding-left: 5px;
+}
+
+@media (max-width: 400px) {
+ #dashboard-hosts .list-group-item div.os {
+ display: none;
+ }
+ #dashboard-hosts .list-group-item span.reconnecting {
+ display: none;
+ }
+}
+
+.zoom-controls {
+ --dropdown-max: 1fr;
+ display: none;
+}
+
+@media (min-width: 640px) {
+ .zoom-controls {
+ --dropdown-max: 10rem;
+ }
+}
+
+.show-zoom-controls .zoom-controls {
+ display: grid;
+ grid-auto-flow: column;
+ grid-gap: 0.5rem;
+ justify-content: end;
+ margin: 0 0 0.5rem 0;
+ position: relative;
+ /* Put size constraints on the first column, the dropdown */
+ grid-template-columns: minmax(5rem, var(--dropdown-max)) 2.5rem min-content;
+ min-height: 2.25rem;
+}
+
+/* Make the dropdown take up space vertically */
+.zoom-controls > .dropdown,
+.standard-zoom-controls > .dropdown {
+ display: inline-flex;
+}
+
+/* Ensure zoom button is proper width */
+.zoom-controls > .pf-c-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Make the custom dropdown button properly stretchy */
+.zoom-controls > .dropdown > .pf-c-button,
+.standard-zoom-controls > .dropdown > .pf-c-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.show-zoom-cursor .zoomable-plot {
+ cursor: ew-resize;
+}
+
+.dashboard-plot {
+ margin-bottom: 10px;
+ height: 250px;
+}
+
+#host-edit-color {
+ width:100px;
+ height:26px;
+}
+
+#host-edit-color-popover .popover-content {
+ text-align: center;
+ padding: 0.5rem;
+}
+
+#host-edit-color-popover .popover-content > div {
+ display: flex;
+}
+
+#host-edit-color-popover .color-cell {
+ display: inline-block;
+ width: 2rem;
+ height: 2rem;
+ margin: 1px;
+}
+
+#host-edit-avatar {
+ margin-top: 10px;
+}
+
+#host-edit-avatar canvas:hover,
+#host-edit-color:hover,
+#host-edit-color-popover .color-cell:hover {
+ cursor: pointer;
+ box-shadow: inset 0px 0px 0px 1px #7BB2DD;
+}
+
+#host-edit-apply {
+ min-width: 55px;
+}
+
+#host-edit-file-input {
+ display: none;
+}
+
+/* Make the time range buttons equal width */
+
+#dashboard-range-buttons button {
+ width: 70px;
+}
diff --git a/pkg/dashboard/index.html b/pkg/dashboard/index.html
index 0617428b4..c5662f689 100644
--- a/pkg/dashboard/index.html
+++ b/pkg/dashboard/index.html
@@ -23,7 +23,7 @@
-
+
diff --git a/pkg/shell/shell.scss b/pkg/shell/shell.scss
index 5870801ba..51b1feb13 100644
--- a/pkg/shell/shell.scss
+++ b/pkg/shell/shell.scss
@@ -45,216 +45,6 @@ html.index-page body {
position: static;
}
-#dashboard-hosts {
- /* Dashboard list is narrow enough in extreme mobile mode to not overflow */
- /* This is a work-around to enable tooltips to escape panel bounds. */
- overflow: visible;
-}
-
-#dashboard-hosts .list-group-item {
- border-left-width: 7px;
- border-left-style: solid;
- border-top: none;
- position: relative;
- outline: 0;
-}
-
-#dashboard-hosts .list-group-item:before {
- content: "";
- position: absolute;
- border-top: 1px solid #BABABA;
- top: 0px;
- left: 0px;
- right: 0px;
- height: 1px;
-}
-
-#dashboard-hosts .list-group-item:first-child:before {
- border-top-color: transparent;
-}
-
-#dashboard-hosts .list-group button {
- margin-right: 0.3rem;
- margin-left: 0.3rem;
- float: right;
-}
-
-/* Per server buttons not visible by default */
-#dashboard-hosts .list-group button {
- display: none;
-}
-
-/* When panel is editable, then buttons are visible */
-#dashboard-hosts.editable .list-group button {
- display: inline-block;
-}
-
-#dashboard-hosts.editable .list-group-item:hover {
- background-color: var(--color-gray-1);
- cursor: auto;
-}
-
-#dashboard-hosts .spinner {
- float: left;
- margin: 6px 13px 4px 3px;
-}
-
-#dashboard-hosts .list-group-item span.reconnecting {
- color: var(--color-subtle-copy);
- display: inline;
- padding-left: 20px;
-}
-
-.host-avatar {
- border-radius: 3px;
- margin-right: 10px;
- width: 32px;
- height: 32px;
-}
-
-#dashboard-hosts .list-group-item .host-avatar {
- float: left;
- border-style: none;
-}
-
-#dashboard-hosts .list-group-item > span {
- padding-top: 6px;
- padding-bottom: 4px;
- display: inline-block;
-}
-
-#dashboard-hosts .list-group-item div.os {
- padding-top: 6px;
- padding-bottom: 4px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: right;
- color: var(--color-subtle-copy);
- float: right;
-}
-
-#dashboard-toolbar > div.ct-select,
-#dashboard-toolbar > div.dropdown {
- display: inline-flex;
-}
-
-#dashboard-toolbar .dropdown-toggle span {
- display: inline-block;
- width: 6em;
- text-align: left;
- padding-left: 5px;
-}
-
-@media (max-width: 400px) {
- #dashboard-hosts .list-group-item div.os {
- display: none;
- }
- #dashboard-hosts .list-group-item span.reconnecting {
- display: none;
- }
-}
-
-.zoom-controls {
- --dropdown-max: 1fr;
- display: none;
-}
-
-@media (min-width: 640px) {
- .zoom-controls {
- --dropdown-max: 10rem;
- }
-}
-
-.show-zoom-controls .zoom-controls {
- display: grid;
- grid-auto-flow: column;
- grid-gap: 0.5rem;
- justify-content: end;
- margin: 0 0 0.5rem 0;
- position: relative;
- /* Put size constraints on the first column, the dropdown */
- grid-template-columns: minmax(5rem, var(--dropdown-max)) 2.5rem min-content;
- min-height: 2.25rem;
-}
-
-/* Make the dropdown take up space vertically */
-.zoom-controls > .dropdown,
-.standard-zoom-controls > .dropdown {
- display: inline-flex;
-}
-
-/* Ensure zoom button is proper width */
-.zoom-controls > .pf-c-button {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* Make the custom dropdown button properly stretchy */
-.zoom-controls > .dropdown > .pf-c-button,
-.standard-zoom-controls > .dropdown > .pf-c-button {
- display: inline-flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
-}
-
-.show-zoom-cursor .zoomable-plot {
- cursor: ew-resize;
-}
-
-.dashboard-plot {
- margin-bottom: 10px;
- height: 250px;
-}
-
-#host-edit-color {
- width:100px;
- height:26px;
-}
-
-#host-edit-color-popover .popover-content {
- text-align: center;
- padding: 0.5rem;
-}
-
-#host-edit-color-popover .popover-content > div {
- display: flex;
-}
-
-#host-edit-color-popover .color-cell {
- display: inline-block;
- width: 2rem;
- height: 2rem;
- margin: 1px;
-}
-
-#host-edit-avatar {
- margin-top: 10px;
-}
-
-#host-edit-avatar canvas:hover,
-#host-edit-color:hover,
-#host-edit-color-popover .color-cell:hover {
- cursor: pointer;
- box-shadow: inset 0px 0px 0px 1px #7BB2DD;
-}
-
-#host-edit-apply {
- min-width: 55px;
-}
-
-#host-edit-file-input {
- display: none;
-}
-
-/* Make the time range buttons equal width */
-
-#dashboard-range-buttons button {
- width: 70px;
-}
-
#sync-users {
max-height: 126px;
overflow-y: auto;
diff --git a/webpack.config.js b/webpack.config.js
index 57c9c1212..36b9bc926 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,6 +10,7 @@ var info = {
"dashboard/dashboard": [
"dashboard/list.js",
+ "dashboard/dashboard.scss",
],
"docker/docker": [