Skip to content

Commit 7a16e2a

Browse files
rgrunberrgrunber
committed
Set up 2 sets of instructions for Local/Remote (SSH) landing page.
- When "Use Extension" is enabled, mention Dev Spaces Remote SSH extension and corresponding instructions - When "Use Extension" is disabled use the existing (manual) instructions - Use ${HOME} instead of $HOME for better portability across platforms Signed-off-by: Roland Grunberg <rgrunber@redhat.com>
1 parent 242b416 commit 7a16e2a

3 files changed

Lines changed: 138 additions & 7 deletions

File tree

‎build/scripts/code-sshd-page/page-style.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,28 @@ code {
3434
width: 100%;
3535
}
3636

37+
.header-parent {
38+
display: table;
39+
width: 100%;
40+
}
41+
42+
.header-title {
43+
width: 87%;
44+
display: table-cell;
45+
}
46+
47+
.toggle-label {
48+
width: 8%;
49+
display: table-cell;
50+
vertical-align: middle;
51+
}
52+
53+
.toggle-input {
54+
width: 5%;
55+
display: table-cell;
56+
vertical-align: middle;
57+
}
58+
3759
/* Container for clipboard icon of code block */
3860
.clipboard {
3961
background-color: #f6f8fa;
@@ -68,3 +90,72 @@ code {
6890
.clipboard-img-code:hover {
6991
background-color: #f6f8fa;
7092
}
93+
94+
.extension-li {
95+
line-height: 2;
96+
}
97+
98+
/* The switch - the box around the slider */
99+
.switch {
100+
position: relative;
101+
display: inline-block;
102+
width: 60px;
103+
height: 34px;
104+
}
105+
106+
/* Hide default HTML checkbox */
107+
.switch input {
108+
opacity: 0;
109+
width: 0;
110+
height: 0;
111+
}
112+
113+
/* Keyboard focus of custom slider */
114+
.switch input:focus-visible + .slider {
115+
outline: 2px solid #0b57d0;
116+
outline-offset: 2px;
117+
}
118+
119+
/* The slider */
120+
.slider {
121+
position: absolute;
122+
cursor: pointer;
123+
top: 0;
124+
left: 0;
125+
right: 0;
126+
bottom: 0;
127+
background-color: #ccc;
128+
-webkit-transition: .4s;
129+
transition: .4s;
130+
}
131+
132+
.slider:before {
133+
position: absolute;
134+
content: "";
135+
height: 26px;
136+
width: 26px;
137+
left: 4px;
138+
bottom: 4px;
139+
background-color: white;
140+
-webkit-transition: .4s;
141+
transition: .4s;
142+
}
143+
144+
input:checked + .slider {
145+
background-color: #2196F3;
146+
}
147+
148+
input:checked + .slider:before {
149+
-webkit-transform: translateX(26px);
150+
-ms-transform: translateX(26px);
151+
transform: translateX(26px);
152+
}
153+
154+
/* Rounded sliders */
155+
.slider.round {
156+
border-radius: 34px;
157+
}
158+
159+
.slider.round:before {
160+
border-radius: 50%;
161+
}

‎build/scripts/code-sshd-page/page-utils.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,22 @@ function initializePlatformContent() {
1818
for (var i = 0; i < pathEntries.length; i++) {
1919
var currText = pathEntries[i].innerHTML;
2020
currText = currText.replaceAll("/dev/null", "nul");
21-
currText = currText.replaceAll("$HOME", "%USERPROFILE%");
21+
currText = currText.replaceAll("${HOME}", "%USERPROFILE%");
2222
currText = currText.replaceAll("/","\\");
2323
pathEntries[i].innerHTML = currText;
2424
}
2525
}
26+
syncDocsContent();
27+
}
28+
29+
function toggleExtensionSwitch () {
30+
syncDocsContent();
31+
}
32+
33+
function syncDocsContent() {
34+
var docsElem = document.getElementById("docs-parent");
35+
var useExtension = document.getElementById("use-extension").checked;
36+
var extensionElem = document.getElementById("docs-extension");
37+
var manualElem = document.getElementById("docs-manual");
38+
docsElem.innerHTML = useExtension ? extensionElem.innerHTML : manualElem.innerHTML;
2639
}

‎build/scripts/code-sshd-page/server.js‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,35 @@ const server = http.createServer((req, res) => {
5353
<script src="page-utils.js"></script>
5454
</head>
5555
<body>
56-
<h1>Workspace ${process.env["DEVWORKSPACE_NAME"]} is running</h1>
57-
<div class="border">
56+
<div class="header-parent">
57+
<div class="header-title">
58+
<h1>Workspace ${process.env["DEVWORKSPACE_NAME"]} is running</h1>
59+
</div>
60+
<div class="toggle-label">Use Extension</div>
61+
<div class="toggle-input">
62+
<label class="switch">
63+
<input id="use-extension" type="checkbox" checked onclick="toggleExtensionSwitch()">
64+
<span class="slider round"></span>
65+
</label>
66+
</div>
67+
</div>
68+
<div id="docs-parent">
69+
</div>
70+
<div id="docs-extension" hidden>
71+
<ol>
72+
<li class="extension-li">Install the following VS Code extensions :
73+
<ul>
74+
<li class="extension-li"><code>Dev Spaces Remote SSH</code> from the <a href="https://marketplace.visualstudio.com/items?itemName=redhat.devspaces-remote-ssh">VS Code Marketplace</a> or the <a href="https://open-vsx.org/extension/redhat/devspaces-remote-ssh">OpenVSX Registry</a></li>
75+
<li class="extension-li"><code>Remote - SSH</code> from the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh">VS Code Marketplace</a> <b>OR</b> <code>Open Remote - SSH</code> from the <a href="https://open-vsx.org/extension/jeanp413/open-remote-ssh">OpenVSX Registry</a></li>
76+
</ul>
77+
</li>
78+
<li class="extension-li">From the "Remote Explorer" view, select the <code>Connect to Dev Spaces</code> command and input the URL of this page.</li>
79+
<ul>
80+
<li class="extension-li">It should be of the form : <code>https://$\{CLUSTER_URL\}/$\{USER\}/$\{DEVWORKSPACE_NAME\}/3400/</code></li>
81+
</ul>
82+
</ol>
83+
</div>
84+
<div id="docs-manual" hidden>
5885
<ol>
5986
<li>Make sure your local <a href="${process.env["CLUSTER_CONSOLE_URL"]}/command-line-tools">oc client</a> is <a href="https://oauth-openshift${getHostURL()}/oauth/token/request">logged in</a> to your OpenShift cluster</li>
6087
<li><p class="center">Run <code id="port-forward">oc port-forward -n ${process.env["DEVWORKSPACE_NAMESPACE"]} ${process.env["HOSTNAME"]} 2022:2022</code><a href="#"><svg class="clipboard-img-code" onclick="copyToClipboard('port-forward')" title="Copy" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
@@ -79,14 +106,14 @@ const server = http.createServer((req, res) => {
79106
<p>
80107
<b>&#9888; Please ensure the permissions on the private key used are restricted to allow only the file owner to read/write. The SSH service may fail to correctly authenticate otherwise.</b>
81108
</p>
82-
This can also be configured locally in the client SSH configuration file (eg. <code class="path">$HOME/.ssh/config</code>) with the following :
109+
This can also be configured locally in the client SSH configuration file (eg. <code class="path">$\{HOME\}/.ssh/config</code>) with the following :
83110
<div class="parent">
84111
<div>
85112
<pre id="config" class="path">Host localhost
86113
HostName 127.0.0.1
87114
User ${username}
88115
Port 2022
89-
IdentityFile $HOME/.ssh/ssh_client_ed25519_key
116+
IdentityFile "$\{HOME\}/.ssh/ssh_client_ed25519_key"
90117
UserKnownHostsFile /dev/null</pre>
91118
</div>
92119
<div class="clipboard">
@@ -99,12 +126,12 @@ const server = http.createServer((req, res) => {
99126
</div>
100127
</div>
101128
<p>
102-
Where <code class="path">$HOME/.ssh/ssh_client_ed25519_key</code> should be replaced by the absolute path to the private key file on your local system.
129+
Where <code class="path">$\{HOME\}/.ssh/ssh_client_ed25519_key</code> should be replaced by the absolute path to the private key file on your local system.
103130
</p>
104131
</li>
105132
</ol>
106133
<h3>Troubleshooting</h3>
107-
<p>If the connection fails with "<code>WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED</code>", it may be necessary to remove the <code>localhost</code> or <code>127.0.0.1</code> entries from <code class="path">$HOME/.ssh/known_hosts</code>. This is because the SSHD service container (to which <code>oc port-forward</code> is forwarding) may change. This can be bypassed by setting <code>UserKnownHostsFile <span class="path">/dev/null</span></code></p>
134+
<p>If the connection fails with "<code>WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED</code>", it may be necessary to remove the <code>localhost</code> or <code>127.0.0.1</code> entries from <code class="path">$\{HOME\}/.ssh/known_hosts</code>. This is because the SSHD service container (to which <code>oc port-forward</code> is forwarding) may change. This can be bypassed by setting <code>UserKnownHostsFile <span class="path">/dev/null</span></code></p>
108135
<p>If the connection fails for an unknown reason, consider disabling the setting <code>remote.SSH.useExecServer</code> (set to false)</p>
109136
<p>For any other issues, relating to the use of a VS Code-based editor and the "Remote - SSH", the "Remote - SSH" logs from the "Output" view are very helpful in diagnosing the issue.</p>
110137
</div>

0 commit comments

Comments
 (0)