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/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 70b70cc..541d15e 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,9 +1,11 @@
-button, .button, .submit {
+button,
+.button,
+.submit {
font-size: 1em;
@include fontFamilyBold;
text-transform: none;
border-radius: 3px;
- padding: .5rem 2rem .5rem;
+ padding: 0.5rem 2rem 0.5rem;
height: auto;
border: 0;
overflow: hidden;
@@ -11,7 +13,12 @@
cursor: pointer;
}
&.disabled {
+ pointer-events: none;
color: $btn__disabled-txt;
+ background-color: $btn__disabled-bg;
+ border-color: $btn__disabled-bg;
+ border-style: solid;
+ border-width: 2px;
&:hover {
cursor: default;
background: transparent;
@@ -36,14 +43,15 @@
cursor: default;
}
}
- i { //button symbol
+ i {
+ //button symbol
font-style: normal;
text-transform: none;
font-size: 1.5em;
transform: rotate(80deg);
display: inline-block;
}
- img{
+ img {
width: 18px;
height: 18px;
display: inline-block;
@@ -61,14 +69,18 @@
@include fastTransition-all;
}
&.disabled {
- border: 2px solid $lightgrey;
- background: $btn__disabled-bg;
- @include fastTransition-all;
+ pointer-events: none;
+ color: $btn__disabled-txt;
+ background-color: $btn__disabled-bg;
+ border-color: $btn__disabled-bg;
+ border-style: solid;
+ border-width: 2px;
&:hover {
background: $btn__disabled-bg;
}
}
- i { // button symbol
+ i {
+ // button symbol
font-style: normal;
font-weight: 400;
text-transform: none;
@@ -77,11 +89,11 @@
display: inline-block;
vertical-align: middle;
}
- img{
+ img {
width: 18px;
height: 18px;
display: inline-block;
- margin-right: .5em;
+ margin-right: 0.5em;
margin-top: -3px;
}
}
@@ -94,7 +106,7 @@
text-decoration: underline;
}
&:before {
- content: '';
+ content: "";
position: absolute;
left: 0;
top: 0px;
@@ -105,14 +117,14 @@
border-top: 4px solid $black;
}
&:after {
- content: '\2794';
+ content: "\2794";
position: absolute;
transform: rotate(-45deg);
- font-size: .9em;
+ font-size: 0.9em;
font-weight: 700;
vertical-align: middle;
display: inline-block;
left: 11px;
top: 0px;
}
-}
\ No newline at end of file
+}