Virtual media page
Adds page to manage virtual media devices. User selects file
and pushes 'start' button to establish websocket connection.
nbdServerService added to provide ability for user to navigate
away from the page and return with the ability to see the current
active sessions.
Currently only supports 1 Virtual Media device.
Resolves openbmc/phosphor-webui#40
Tested: uploaded ubuntu image file, started the connection and
mounted virtual media device from host console. Able to see Ubuntu
image file. Also uploaded file and navigated away from the page,
checking that the websocket remained open and was sending /
recieving messages. Finally, tested that when connection
was stopped, 'USB disconnect' log was present in host console.
Change-Id: Ia3155d27cbcfef94c2753dde1303a151e08847cc
Signed-off-by: beccabroek <beccabroek@gmail.com>
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
diff --git a/app/configuration/styles/index.scss b/app/configuration/styles/index.scss
index e532583..f035580 100644
--- a/app/configuration/styles/index.scss
+++ b/app/configuration/styles/index.scss
@@ -2,3 +2,4 @@
@import "./snmp.scss";
@import "./date-time.scss";
@import "./firmware.scss";
+@import "./virtual-media.scss";
diff --git a/app/configuration/styles/virtual-media.scss b/app/configuration/styles/virtual-media.scss
new file mode 100644
index 0000000..f7d75b8
--- /dev/null
+++ b/app/configuration/styles/virtual-media.scss
@@ -0,0 +1,86 @@
+.vm__page-description {
+ margin-top: 1em;
+ margin-bottom: 3em;
+}
+
+.vm__upload {
+ align-items: center;
+ margin-bottom: 2em;
+}
+
+.vm__upload-chooser {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ margin: 0.7em 0.7em 0.7em 0;
+}
+.vm__upload-choose-label {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+ margin-right: 4px;
+}
+
+.vm__upload-choose-button {
+ padding: 0.5em 0.75em;
+ font-size: 1rem;
+ background-color: $white;
+ min-width: 3em;
+ &.disabled {
+ background-color: $btn__disabled-bg;
+ }
+}
+
+.vm__upload-content {
+ flex: 1 0 220px;
+ max-width: 640px;
+
+ .icon__exit {
+ float: right;
+ cursor: pointer;
+ width: 0.75em;
+ height: 0.75em;
+ margin: 0.3em 1em 0.3em 0.3em;
+ background-image: url(../assets/images/crit-x-black.svg);
+ }
+}
+
+.vm__upload-controls {
+ display: flex;
+ align-items: center;
+}
+
+.vm__upload-name {
+ flex: 1 0 220px;
+ background-color: $medgrey;
+ padding: 0.5em;
+}
+
+.vm__error-border,
+.vm__active-border {
+ border-top: 2px solid $error-color;
+ margin-top: 4px;
+ padding-top: 4px;
+}
+.vm__active-border {
+ border-color: $status-ok;
+}
+
+.vm__active-text {
+ color: $status-ok;
+ font-size: 0.8rem;
+ margin-top: 4px;
+}
+
+.vm__upload-start {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 100%;
+ margin-top: 1em;
+
+ @media screen and (min-width: 760px) {
+ flex-basis: auto;
+ margin-top: 0;
+ margin-left: 0.75em;
+ }
+}