diff --git a/kvmd/kvmd/msd.py b/kvmd/kvmd/msd.py index 988a1c30..0746a6f6 100644 --- a/kvmd/kvmd/msd.py +++ b/kvmd/kvmd/msd.py @@ -176,6 +176,7 @@ class MassStorageDevice: # pylint: disable=too-many-instance-attributes self.__loop = loop self.__device_info: Optional[_MassStorageDeviceInfo] = None + self.__saved_device_info: Optional[_MassStorageDeviceInfo] = None self.__region = aioregion.AioExclusiveRegion(MsdIsBusyError) self.__device_file: Optional[aiofiles.base.AiofilesContextManager] = None self.__written = 0 @@ -217,7 +218,7 @@ class MassStorageDevice: # pylint: disable=too-many-instance-attributes get_logger().info("Mass-storage device switched to Server") def get_state(self) -> Dict: - info = (self.__device_info._asdict() if self.__device_info else None) + info = (self.__saved_device_info._asdict() if self.__saved_device_info else None) if info: info["hw"] = (info["hw"]._asdict() if info["hw"] else None) info["image"] = (info["image"]._asdict() if info["image"] else None) @@ -283,7 +284,7 @@ class MassStorageDevice: # pylint: disable=too-many-instance-attributes device_info = await self.__loop.run_in_executor(None, _explore_device, self._device_path) if not device_info: raise MsdError("Can't explore device %r" % (self._device_path)) - self.__device_info = device_info + self.__device_info = self.__saved_device_info = device_info async def __close_device_file(self) -> None: try: diff --git a/kvmd/kvmd/server.py b/kvmd/kvmd/server.py index 17eb94c3..5eaaaba6 100644 --- a/kvmd/kvmd/server.py +++ b/kvmd/kvmd/server.py @@ -40,10 +40,14 @@ def _system_task(method: Callable) -> Callable: def _json(result: Optional[Dict]=None, status: int=200) -> aiohttp.web.Response: - return aiohttp.web.json_response({ - "ok": (True if status == 200 else False), - "result": (result or {}), - }, status=status) + return aiohttp.web.Response( + text=json.dumps({ + "ok": (True if status == 200 else False), + "result": (result or {}), + }, sort_keys=True, indent=4), + status=status, + content_type="application/json", + ) def _json_exception(msg: str, err: Exception, status: int) -> aiohttp.web.Response: diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css index 45e4db45..71e0eefd 100644 --- a/kvmd/web/css/main.css +++ b/kvmd/web/css/main.css @@ -1,15 +1,13 @@ body { - margin: 0px; + margin: 0; color: #c3c3c3; background-color: #36393f; - font-family: sans-serif!important; + font-family: sans-serif !important; } img#logo { - height: 24px; -webkit-filter: invert(0.7); filter: invert(0.7); vertical-align: middle; - margin-right: 10px; padding: 13px 15px; } div.centered { @@ -22,7 +20,7 @@ div.centered { } ul#ctl { - box-shadow: 0 2px 4px rgba(0,0,0,0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); list-style-type: none; margin: 0; padding: 0; @@ -38,10 +36,10 @@ ul#ctl li a:hover:not(.active) { ul#ctl li.ctl-left { float: left; } -ul#ctl li.ctl-left-sep:last-child { +/*ul#ctl li.ctl-left-sep:last-child { float: left; border-right: 1px solid black; -} +}*/ ul#ctl li.ctl-right { float: right; } @@ -49,11 +47,11 @@ ul#ctl li.ctl-right-sep:not(last-child) { float: right; border-left: 1px solid black; } -ul#ctl p { +/*ul#ctl p { color: #c3c3c3; - margin: 0px; + margin: 0; padding: 15px 16px; -} +}*/ ul#ctl img { vertical-align: middle; margin-right: 10px; @@ -73,14 +71,14 @@ div.ctl-dropdown { display: inline-block; } div.ctl-dropdown-content { - white-space:nowrap; + white-space: nowrap; border: 1px solid #17191d; border-radius: 0 0 8px 8px; display: none; position: absolute; background-color: #282b30; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); + min-width: 180px; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4); z-index: 9; } div.ctl-dropdown:hover .ctl-dropdown-content { @@ -91,14 +89,16 @@ div.ctl-dropdown:hover .ctl-item { } div.ctl-dropdown-content button { box-shadow: none; - border: 0; + border: none; color: #c3c3c3; - background-color: #282b30; + background-color: #36393f; display: block; width: 100%; height: 30px; font-size: 16px; text-align: left; + padding: 0 15px; + outline: none; cursor: pointer; } div.ctl-dropdown-content button:last-child { @@ -106,26 +106,62 @@ div.ctl-dropdown-content button:last-child { } div.ctl-dropdown-content button:enabled:hover { color: white; - background-color: #17191d!important; + background-color: #17191d !important; } div.ctl-dropdown-content button:disabled { - color: #36393f; - cursor: wait; + color: #6c7481; + cursor: default; +} +div.ctl-dropdown-content button:active { + color: #5e646e !important; +} +div.ctl-dropdown-content button.first { + display: inline-block; + width: 50%; + /*border-right: 1px solid #17191d;*/ + border-radius: 0 !important; +} +div.ctl-dropdown-content button.second-half-first { + display: inline-block; + width: 25%; + border-left: 1px solid #17191d; + border-radius: 0 !important; +} +div.ctl-dropdown-content button.second-half-second { + display: inline-block; + width: 25%; + border-left: 1px solid #17191d; + border-radius: 0 !important; +} +div.ctl-dropdown-content button.first-bottom { + display: inline-block; + width: 50%; + border-radius: 0 0 0 8px !important; +} +div.ctl-dropdown-content button.second-bottom { + display: inline-block; + width: 50%; + border-left: 1px solid #17191d; + border-radius: 0 0 8px 0 !important; } div.ctl-dropdown-content hr { - margin: 0px; + margin: 0; display: block; height: 0; border: 0; border-top: 1px solid #17191d; padding: 0; } +div.ctl-dropdown-content-text { + margin: 10px 15px 10px 15px; + font-size: 14px; +} div#stream-box { border: 1px solid #17191d; border-radius: 8px; box-sizing: border-box; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4); display: inline-block; background-color: #484b51; padding: 10px; @@ -148,13 +184,6 @@ img.stream-image-inactive { filter: grayscale(100%); } -img#atx-power-led, -img#hid-mouse-led, -img#msd-led, -img#atx-hdd-led, -img#stream-led, -img#hid-keyboard-led { -} img.led-on { -webkit-filter: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); filter: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); @@ -177,3 +206,42 @@ img.led-msd-writing { @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } + +table#msd-info { + border-spacing: 5px; + margin: 0 10px 0 10px; + font-size: 14px; +} +table#msd-info +td#msd-current-image-name, +td#msd-current-image-size, +td#msd-storage-device, +td#msd-storage-size, +td#msd-new-image-name, +td#msd-new-image-size { + font-weight: bold; + max-width: 330px; + overflow: hidden; +} + +div#msd-progress { + background-color: #111; + height: 1.5em; + width: 100%; + position: relative; +} +div#msd-progress:before { + color: white; + content: attr(data-label); + font-size: 0.8em; + position: absolute; + text-align: center; + top: 4px; + left: 0; + right: 0; +} +div#msd-progress span#msd-progress-value { + background-color: #436a8a; + display: inline-block; + height: 100%; +} diff --git a/kvmd/web/index.html b/kvmd/web/index.html index 4812f105..3af08b90 100644 --- a/kvmd/web/index.html +++ b/kvmd/web/index.html @@ -31,7 +31,7 @@ System ↴
- +
@@ -44,10 +44,10 @@ ATX ↴
- - + +
- +
@@ -59,9 +59,82 @@ Mass Storage ↴
- О, привет!
- К сожалению, я пока не реализовал эту функцию,
- но ты можешь полюбоваться на эту великолепную менюшку :3 + + + + + + + + + + + + + + + + + + + + +
Image name:
Image size:
Storage size:
KVM Device:
+
+ + + + + +
+ + + + + +
diff --git a/kvmd/web/js/msd.js b/kvmd/web/js/msd.js index 5ae851ea..073d3069 100644 --- a/kvmd/web/js/msd.js +++ b/kvmd/web/js/msd.js @@ -1,4 +1,8 @@ var msd = new function() { + var __state = null; + var __upload_http = null; + var __image_file = null; + this.loadInitialState = function() { var http = tools.makeRequest("GET", "/kvmd/msd", function() { if (http.readyState === 4) { @@ -12,13 +16,115 @@ var msd = new function() { }; this.setState = function(state) { - if (state.connected_to == "server") { - cls = "led-on"; - } else if (state.busy) { - cls = "led-msd-writing"; - } else { - cls = "led-off"; + __state = state; + console.log(state); + __applyState(); + }; + + this.clickButton = function(el_button) { + if (el_button.id === "msd-upload-new-image-button") { + var form_data = new FormData(); + form_data.append("image_name", __image_file.name); + form_data.append("image_data", __image_file); + + __upload_http = new XMLHttpRequest(); + __upload_http.open("POST", "/kvmd/msd/write", true); + __upload_http.upload.timeout = 5000; + __upload_http.onreadystatechange = __uploadStateChange; + __upload_http.upload.onprogress = __uploadProgress; + __upload_http.send(form_data); + + } else if (el_button.id === "msd-abort-uploading-button") { + __upload_http.onreadystatechange = null; + __upload_http.upload.onprogress = null; + __upload_http.abort(); + __upload_http = null; + $("msd-progress").setAttribute("data-label", "Aborted"); + $("msd-progress-value").style.width = "0%"; + msd.loadInitialState(); + + } else if (el_button.id === "msd-switch-to-kvm-button" || el_button.id === "msd-switch-to-server-button") { + var to = (el_button.id === "msd-switch-to-kvm-button" ? "kvm" : "server"); + var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() { + if (http.readyState === 4) { + if (http.status !== 200) { + alert("Switch error:", http.responseText); + } + } + __applyState(); + }); + __applyState(); + el_button.disabled = true; + } + }; + + this.selectNewImageFile = function(el_input) { + var image_file = (el_input.files.length ? el_input.files[0] : null); + if (image_file && image_file.size > __state.info.size) { + alert("New image is too big for your Mass Storage Device; maximum: " + __formatSize(__state.info.size)); + el_input.value = ""; + image_file = null; + } + __image_file = image_file; + $("msd-new-image").style.display = (__image_file ? "block" : "none"); + $("msd-progress").setAttribute("data-label", "Waiting for upload ..."); + $("msd-progress-value").style.width = "0%"; + $("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : ""); + $("msd-new-image-size").innerHTML = (__image_file ? __formatSize(__image_file.size) : ""); + __applyState(); + }; + + var __applyState = function() { + if (__state.connected_to === "server") { + $("msd-led").className = "led-on"; + } else if (__state.busy) { + $("msd-led").className = "led-msd-writing"; + } else { + $("msd-led").className = "led-off"; + } + + $("msd-not-in-operate").style.display = (__state.in_operate ? "none" : "block"); + $("msd-current-image-broken").style.display = ((__state.info.image && !__state.info.image.complete) ? "block" : "none"); + + $("msd-current-image-name").innerHTML = (__state.info.image ? __state.info.image.name : "None"); + $("msd-current-image-size").innerHTML = (__state.info.image ? __formatSize(__state.info.image.size) : "None"); + $("msd-storage-size").innerHTML = (__state.in_operate ? __formatSize(__state.info.size) : "Unavailable"); + $("msd-storage-device").innerHTML = (__state.in_operate ? __state.info.real : "Missing"); + + $("msd-switch-to-kvm-button").disabled = (!__state.in_operate || __state.connected_to === "kvm" || __state.busy); + $("msd-switch-to-server-button").disabled = (!__state.in_operate || __state.connected_to === "server" || __state.busy); + $("msd-select-new-image-button").disabled = (!__state.in_operate || __state.connected_to !== "kvm" || __state.busy || __upload_http); + $("msd-upload-new-image-button").disabled = (!__state.in_operate || __state.connected_to !== "kvm" || __state.busy || !__image_file); + $("msd-abort-uploading-button").disabled = (!__state.in_operate || !__upload_http); + }; + + var __formatSize = function(size) { + if (size > 0) { + var index = Math.floor( Math.log(size) / Math.log(1024) ); + return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][index]; + } else { + return 0; + } + }; + + var __uploadStateChange = function(event) { + if (__upload_http.readyState === 4) { + if (__upload_http.status !== 200) { + alert("Can't upload image to the Mass Storage Device:", __upload_http.responseText); + } else { + $("msd-progress").setAttribute("data-label", "Done"); + $("msd-progress-value").style.width = "100%"; + } + __upload_http = null; + __applyState(); + } + }; + + var __uploadProgress = function(event) { + if(event.lengthComputable) { + var percent = Math.round((event.loaded * 100) / event.total); + $("msd-progress").setAttribute("data-label", percent + "%"); + $("msd-progress-value").style.width = percent + "%"; } - $("msd-led").className = cls; }; }; diff --git a/kvmd/web/svg/info.svg b/kvmd/web/svg/info.svg new file mode 100644 index 00000000..b28139d5 --- /dev/null +++ b/kvmd/web/svg/info.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/kvmd/web/svg/warning.svg b/kvmd/web/svg/warning.svg new file mode 100644 index 00000000..3137b24d --- /dev/null +++ b/kvmd/web/svg/warning.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + +