Show all kinds of active sessions (#1315)

Updates #17126 Updates #17871
gravitational · Nov 3, 2022 · 4c323da · 4c323da
1 parent f200b58
commit 4c323da
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 19 deletions.
diff --git a/web/packages/teleport/src/Sessions/SessionList/SessionList.tsx b/web/packages/teleport/src/Sessions/SessionList/SessionList.tsx
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import styled from 'styled-components';
-import Table, { Cell } from 'design/DataTable';
 import { ButtonBorder } from 'design';
+import Table, { Cell } from 'design/DataTable';
 import Icon, * as Icons from 'design/Icon/Icon';
+import React from 'react';
+import styled from 'styled-components';
 
 import cfg from 'teleport/config';
-import { Session, Participant, SessionKind } from 'teleport/services/session';
+import { Participant, Session, SessionKind } from 'teleport/services/session';
 
 export default function SessionList(props: Props) {
   const { sessions, pageSize = 100 } = props;
@@ -59,7 +59,7 @@ export default function SessionList(props: Props) {
         },
         {
           altKey: 'join-btn',
-          render: renderPlayCell,
+          render: renderJoinCell,
         },
       ]}
       emptyText="No Active Sessions Found"
@@ -83,21 +83,28 @@ export default function SessionList(props: Props) {
   );
 }
 
-const renderIconCell = (kind: SessionKind) => {
-  let icon = Icons.Cli;
-  if (kind === 'k8s') {
-    icon = Icons.Kubernetes;
-  }
+const kinds: {
+  [key in SessionKind]: { icon: React.ReactNode; joinable: boolean };
+} = {
+  ssh: { icon: Icons.Cli, joinable: true },
+  k8s: { icon: Icons.Kubernetes, joinable: false },
+  desktop: { icon: Icons.Desktop, joinable: false },
+  app: { icon: Icons.NewTab, joinable: false },
+  db: { icon: Icons.Database, joinable: false },
+};
 
+const renderIconCell = (kind: SessionKind) => {
+  const { icon } = kinds[kind];
   return (
     <Cell>
       <Icon p={1} mr={3} fontSize={3} as={icon} />
     </Cell>
   );
 };
 
-const renderPlayCell = ({ sid, clusterId, kind }: Session) => {
-  if (kind === 'k8s') {
+const renderJoinCell = ({ sid, clusterId, kind }: Session) => {
+  const { joinable } = kinds[kind];
+  if (!joinable) {
     return <Cell align="right" height="26px" />;
   }
 

diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -349,12 +349,12 @@ exports[`loaded 1`] = `
           </strong>
            - 
           <strong>
-            2
+            5
           </strong>
            of
            
           <strong>
-            2
+            5
           </strong>
         </div>
       </div>
@@ -497,6 +497,81 @@ exports[`loaded 1`] = `
           </a>
         </td>
       </tr>
+      <tr>
+        <td>
+          <span
+            class="c12 c17 icon icon-desktop c12 c17"
+            color="light"
+            font-size="3"
+          />
+        </td>
+        <td>
+          desktop-2
+        </td>
+        <td>
+          acacfbb4-3885-4d08-a466-de832a73ffac
+        </td>
+        <td>
+          lisa2
+        </td>
+        <td>
+          5 seconds
+        </td>
+        <td
+          align="right"
+          height="26px"
+        />
+      </tr>
+      <tr>
+        <td>
+          <span
+            class="c12 c17 icon icon-database c12 c17"
+            color="light"
+            font-size="3"
+          />
+        </td>
+        <td>
+          databse-32
+        </td>
+        <td>
+          2314fbb4-3885-4d08-a466-de832a731222
+        </td>
+        <td>
+          lisa2
+        </td>
+        <td>
+          3 minutes
+        </td>
+        <td
+          align="right"
+          height="26px"
+        />
+      </tr>
+      <tr>
+        <td>
+          <span
+            class="c12 c17 icon icon-new-tab c12 c17"
+            color="light"
+            font-size="3"
+          />
+        </td>
+        <td>
+          grafana
+        </td>
+        <td>
+          cafefbb4-3885-4d08-a466-de832a7313131
+        </td>
+        <td>
+          lisa2
+        </td>
+        <td>
+          13 minutes
+        </td>
+        <td
+          align="right"
+          height="26px"
+        />
+      </tr>
     </tbody>
   </table>
 </div>

diff --git a/web/packages/teleport/src/Sessions/fixtures/index.ts b/web/packages/teleport/src/Sessions/fixtures/index.ts
@@ -51,4 +51,55 @@ export const sessions: Session[] = [
     addr: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
     clusterId: 'im-a-cluster-name',
   },
+  {
+    kind: 'desktop',
+    sid: 'acacfbb4-3885-4d08-a466-de832a73ffac',
+    namespace: 'default',
+    parties: [
+      {
+        user: 'lisa2',
+      },
+    ],
+    login: 'root',
+    created: new Date('2022-07-11T14:36:14.491402068Z'),
+    durationText: '5 seconds',
+    serverId: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    resourceName: 'desktop-2',
+    addr: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    clusterId: 'im-a-cluster-name',
+  },
+  {
+    kind: 'db',
+    sid: '2314fbb4-3885-4d08-a466-de832a731222',
+    namespace: 'default',
+    parties: [
+      {
+        user: 'lisa2',
+      },
+    ],
+    login: 'root',
+    created: new Date('2022-07-11T14:36:14.491402068Z'),
+    durationText: '3 minutes',
+    serverId: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    resourceName: 'databse-32',
+    addr: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    clusterId: 'im-a-cluster-name',
+  },
+  {
+    kind: 'app',
+    sid: 'cafefbb4-3885-4d08-a466-de832a7313131',
+    namespace: 'default',
+    parties: [
+      {
+        user: 'lisa2',
+      },
+    ],
+    login: 'root',
+    created: new Date('2022-07-11T14:36:14.491402068Z'),
+    durationText: '13 minutes',
+    serverId: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    resourceName: 'grafana',
+    addr: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    clusterId: 'im-a-cluster-name',
+  },
 ];
diff --git a/web/packages/teleport/src/services/session/makeSession.ts b/web/packages/teleport/src/services/session/makeSession.ts
@@ -16,7 +16,15 @@ limitations under the License.
 
 import { formatDistanceStrict } from 'date-fns';
 
-import { Session, Participant } from './types';
+import { Session, SessionKind, Participant } from './types';
+
+const nameField: { [kind in SessionKind]: string } = {
+  ssh: 'server_hostname',
+  k8s: 'kubernetes_cluster_name',
+  db: 'database_name',
+  app: 'app_name',
+  desktop: 'desktop_name',
+};
 
 export default function makeSession(json): Session {
   const {
@@ -26,9 +34,7 @@ export default function makeSession(json): Session {
     login,
     created,
     server_id,
-    server_hostname,
     cluster_name,
-    kubernetes_cluster_name,
     server_addr,
     parties,
   } = json;
@@ -46,7 +52,7 @@ export default function makeSession(json): Session {
     created: createdDate,
     durationText,
     serverId: server_id,
-    resourceName: kind === 'k8s' ? kubernetes_cluster_name : server_hostname,
+    resourceName: json[nameField[kind]],
     clusterId: cluster_name,
     parties: parties ? parties.map(p => makeParticipant(p)) : [],
     addr: server_addr ? server_addr.replace(PORT_REGEX, '') : '',

diff --git a/web/packages/teleport/src/services/session/types.ts b/web/packages/teleport/src/services/session/types.ts
@@ -33,9 +33,12 @@ export interface Session {
   // of resource that the session is running in:
   //  - ssh: is referring to the hostname
   //  - k8s: is referring to the kubernetes cluster name
+  //  - db: is referring to the database
+  //  - desktop: is referring to the desktop
+  //  - app: is referring to the app
   resourceName: string;
 }
 
 export type ParticipantList = Record<string, Participant[]>;
 
-export type SessionKind = 'ssh' | 'k8s';
+export type SessionKind = 'ssh' | 'k8s' | 'db' | 'app' | 'desktop';