diff --git a/ui/src/components/VncCard/index.js b/ui/src/components/VncCard/index.js
index 8021b12f..f7d0d729 100644
--- a/ui/src/components/VncCard/index.js
+++ b/ui/src/components/VncCard/index.js
@@ -3,11 +3,12 @@ import { Link } from "react-router-dom";
import VncScreen from "./VncScreen";
import { StyledVNC } from "./style.css";
+import { ajax } from "rxjs/ajax";
export default class VncCard extends Component {
state = { connection: "connecting" };
- connection = connection => {
+ connection = (connection) => {
this.setState({ connection: connection });
};
@@ -38,16 +39,32 @@ export default class VncCard extends Component {
{connected && }
{connected && }
+ {connected && (
+
+ )}
+ {connected && (
+
+ )}
{
+ ref={(instance) => {
this.screen = instance;
}}
session={session}
origin={origin}
- onUpdateState={state => this.connection(state)}
+ onUpdateState={(state) => this.connection(state)}
/>
@@ -59,6 +76,34 @@ export default class VncCard extends Component {
);
}
}
+function copyFromDocker(sessionId) {
+ const request = {
+ url: "/clipboard/" + sessionId,
+ method: "GET",
+ async: false,
+ responseType: "text",
+ };
+ ajax(request).subscribe((x) => {
+ if (navigator.clipboard) {
+ navigator.clipboard.writeText(x.response);
+ }
+ });
+}
+
+function pasteToDocker(sessionId) {
+ if (navigator.clipboard) {
+ navigator.clipboard.readText().then((text) => {
+ let request = {
+ url: "/clipboard/" + sessionId,
+ method: "POST",
+ body: text,
+ async: false,
+ headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ };
+ ajax(request).subscribe((msg) => msg);
+ });
+ }
+}
function Back() {
return (
@@ -70,7 +115,7 @@ function Back() {
function Connection(props) {
const { connection } = props;
- const icon = function(connection) {
+ const icon = function (connection) {
switch (connection) {
default:
case "disconnected": {
@@ -99,6 +144,15 @@ function Fullscreen(props) {
);
}
+function Clipboard(props) {
+ const { upload, session, title, operator } = props;
+ return (
+
+ );
+}
+
function Lock(props) {
const { locked, handleLock } = props;
return (
diff --git a/ui/src/components/VncCard/style.css.js b/ui/src/components/VncCard/style.css.js
index b9e26be7..acc6c7ba 100644
--- a/ui/src/components/VncCard/style.css.js
+++ b/ui/src/components/VncCard/style.css.js
@@ -5,6 +5,7 @@ const colorConnecting = "#6883d3";
const colorDisconnecting = " #ca9eff";
const colorFullscreen = "#59a781";
const backgroundColorLighter = "#3d444c";
+const copyAndPaste = "#405048";
export const StyledVNC = styled.div`
display: flex;
@@ -146,6 +147,28 @@ export const StyledVNC = styled.div`
&_disconnecting {
background-color: ${colorDisconnecting};
}
+
+ &_copy {
+ cursor: pointer;
+ background-color: ${copyAndPaste};
+ color: ${colorFullscreen};
+ margin-left: auto;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+
+ &_upload {
+ cursor: pointer;
+ background-color: ${copyAndPaste};
+ color: ${colorFullscreen};
+ margin-right: 10px;
+
+ &:hover {
+ color: #fff;
+ }
+ }
}
}
diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
index 23891669..a34bfb9e 100644
--- a/ui/src/setupProxy.js
+++ b/ui/src/setupProxy.js
@@ -15,6 +15,7 @@ module.exports = function (app) {
agent: agent,
})
);
+ app.use(createProxyMiddleware("/clipboard", { target: "http://localhost:4444" }));
app.use(createProxyMiddleware("/status", { target: "http://localhost:8080" }));
app.use(createProxyMiddleware("/video/", { target: "http://localhost:8080" }));
app.use(createProxyMiddleware("/wd/hub/", { target: "http://localhost:8080" }));