[teleport] Various fixes (#123)

* Open new tab when clicking on active session icon * Use hostname instead of relying on serverId as fallback (fallback is handled in backend) * Simplified quicklaunch regex to just check for white spaces * Encode URL when finding documents by url to handle special characters * Update sessions story and snapshot
gravitational · Jul 15, 2020 · 35b7560 · 35b7560
1 parent 7227d3d
commit 35b7560
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 97 deletions.
diff --git a/packages/teleport/src/cluster/components/Sessions/SessionList/DescCell.tsx b/packages/teleport/src/cluster/components/Sessions/SessionList/DescCell.tsx
@@ -19,26 +19,23 @@ import styled, { useTheme } from 'styled-components';
 import { Cell } from 'design/DataTable';
 import { Session } from 'teleport/services/ssh';
 import * as Icons from 'design/Icon/Icon';
-import { NavLink } from 'react-router-dom';
 import cfg from 'teleport/config';
 
 export default function TypeCell(props: any) {
   const { rowIndex, data } = props;
-  const { sid, serverId, login, hostname } = data[rowIndex] as Session;
+  const { sid, login, hostname } = data[rowIndex] as Session;
 
-  // DELETE IN: 5.2 remove check for hostname.
-  // Older teleport versions do not set/retrieve hostname.
-  const nodeDesc = hostname || serverId;
   const url = cfg.getSshSessionRoute({ sid });
   const theme = useTheme();
-  const text = `Session is in progress [${login}@${nodeDesc}]`;
+  const text = `Session is in progress [${login}@${hostname}]`;
 
   return (
     <Cell>
       <StyledEventType>
         <Icons.Cli
-          as={NavLink}
-          to={url}
+          as="a"
+          href={url}
+          target="_blank"
           p="1"
           mr="3"
           bg="bgTerminal"

diff --git a/packages/teleport/src/cluster/components/Sessions/SessionList/NodeCell.tsx b/packages/teleport/src/cluster/components/Sessions/SessionList/NodeCell.tsx
@@ -20,14 +20,12 @@ import { Session } from 'teleport/services/ssh';
 
 export default function DescCell(props: any) {
   const { rowIndex, data } = props;
-  const { hostname, addr, serverId } = data[rowIndex] as Session;
-  // DELETE IN: 5.2 remove check for hostname/addr.
-  // Older teleport versions do not set/retrieve hostname or addr.
-  const nodeName = hostname || serverId;
+  const { hostname, addr } = data[rowIndex] as Session;
   const nodeAddr = addr ? `[${addr}]` : '';
+
   return (
     <Cell>
-      {nodeName} {nodeAddr}
+      {hostname} {nodeAddr}
     </Cell>
   );
 }
diff --git a/packages/teleport/src/cluster/components/Sessions/Sessions.story.tsx b/packages/teleport/src/cluster/components/Sessions/Sessions.story.tsx
@@ -72,23 +72,4 @@ const sessions = [
       },
     ],
   },
-  {
-    id: 'AB',
-    namespace: 'AG',
-    login: 'root',
-    active: 'AZ',
-    created: new Date('2019-04-22T00:00:51.543Z'),
-    durationText: '5 min',
-    serverId: '10_128_0_6.demo.gravitational.io',
-    clusterId: '',
-    hostname: undefined,
-    sid: 'sid1',
-    addr: undefined,
-    parties: [
-      {
-        user: 'hehwawe@aw.sg',
-        remoteAddr: '129.232.123.132',
-      },
-    ],
-  },
 ];
diff --git a/packages/teleport/src/cluster/components/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/packages/teleport/src/cluster/components/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -273,12 +273,12 @@ exports[`loaded 1`] = `
           </strong>
            - 
           <strong>
-            2
+            1
           </strong>
            
           of 
           <strong>
-            2
+            1
           </strong>
         </div>
         <div
@@ -336,14 +336,12 @@ exports[`loaded 1`] = `
                 class="c10"
               >
                 <a
-                  bg="bgTerminal"
                   class="c7 c11 icon icon-terminal "
                   color="light"
                   font-size="2"
                   href="/web/cluster/localhost/console/session/sid0"
-                  mr="3"
-                  p="1"
                   style="border-radius: 50%; border: 2px solid #00bfa5; text-decoration: none;"
+                  target="_blank"
                 />
                 Session is in progress [root@localhost]
               </div>
@@ -379,55 +377,6 @@ exports[`loaded 1`] = `
               </button>
             </td>
           </tr>
-          <tr>
-            <td>
-              <div
-                class="c10"
-              >
-                <a
-                  bg="bgTerminal"
-                  class="c7 c11 icon icon-terminal "
-                  color="light"
-                  font-size="2"
-                  href="/web/cluster/localhost/console/session/sid1"
-                  mr="3"
-                  p="1"
-                  style="border-radius: 50%; border: 2px solid #00bfa5; text-decoration: none;"
-                />
-                Session is in progress [root@10_128_0_6.demo.gravitational.io]
-              </div>
-            </td>
-            <td>
-              sid1
-            </td>
-            <td>
-              hehwawe@aw.sg [129.232.123.132]
-            </td>
-            <td>
-              10_128_0_6.demo.gravitational.io
-               
-              
-            </td>
-            <td>
-              5 min
-            </td>
-            <td
-              align="right"
-            >
-              <button
-                class="c12"
-                height="24px"
-                kind="border"
-              >
-                OPTIONS
-                <span
-                  class="c7 c13 icon icon-caret-down "
-                  color="text.secondary"
-                  font-size="2"
-                />
-              </button>
-            </td>
-          </tr>
         </tbody>
       </table>
     </div>

diff --git a/packages/teleport/src/components/NodeList/NodeList.tsx b/packages/teleport/src/components/NodeList/NodeList.tsx
@@ -129,8 +129,8 @@ const LoginCell: React.FC<Required<{
   [key: string]: any;
 }>> = props => {
   const { rowIndex, data, onOpen, onSelect } = props;
-  const { hostname, id } = data[rowIndex] as Node;
-  const serverId = hostname || id;
+  const { id } = data[rowIndex] as Node;
+  const serverId = id;
   function handleOnOpen() {
     return onOpen(serverId);
   }

diff --git a/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx b/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
@@ -31,11 +31,11 @@ export default function FieldInputSsh({
   function onKeyPress(e) {
     const value = e.target.value;
     if ((e.key === 'Enter' || e.type === 'click') && value) {
-      const valid = check(value);
-      setHasError(!valid);
-      if (valid) {
-        const [login, serverId] = value.split('@');
-        onPress(login, serverId);
+      const match = check(value);
+      setHasError(!match);
+      if (match) {
+        const { username, host } = match.groups;
+        onPress(username, host);
       }
     } else {
       setHasError(false);
@@ -63,10 +63,11 @@ export default function FieldInputSsh({
   );
 }
 
-const SSH_STR_REGEX = /(^(\w+-?\w+)+@(\S+)$)/;
+// Checks for spaces between chars, and
+// captures two named groups: username and host.
+const SSH_STR_REGEX = /^(?:(?<username>[^\s]+)@)(?<host>[^\s]+)$/;
 const check = value => {
-  const match = SSH_STR_REGEX.exec(value);
-  return match !== null;
+  return SSH_STR_REGEX.exec(value.trim());
 };
 
 const StyledInput = styled(Input)(

diff --git a/packages/teleport/src/console/stores/storeDocs.ts b/packages/teleport/src/console/stores/storeDocs.ts
@@ -82,7 +82,7 @@ export default class StoreDocs extends Store<State> {
   }
 
   findByUrl(url: string) {
-    return this.state.items.find(i => i.url === url);
+    return this.state.items.find(i => i.url === encodeURI(url));
   }
 
   getNodeDocuments() {