Skip to content
This repository was archived by the owner on Feb 8, 2024. It is now read-only.

Display cluster name for each connection & add autoconnect #678

Merged
gzdunek merged 4 commits into from
Mar 18, 2022
Merged

Display cluster name for each connection & add autoconnect #678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74629d1
Display cluster name for each connection
gzdunek Mar 17, 2022
e705d4f
Automatically try to connect a connection when possible
gzdunek Mar 17, 2022
39860ce
Update connection icon
gzdunek Mar 17, 2022
f07ad95
Always use root cluster URI to obtain `documentsService` in `useServe…
gzdunek Mar 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React from 'react';
import React, { useEffect } from 'react';
import { useAppContext } from 'teleterm/ui/appContextProvider';
import * as types from 'teleterm/ui/services/workspacesService';
import useAsync from 'teleterm/ui/useAsync';
Expand All @@ -25,6 +25,7 @@ export default function useGateway(doc: types.DocumentGateway) {
const workspaceDocumentsService = useWorkspaceDocumentsService();
const gateway = ctx.clustersService.findGateway(doc.gatewayUri);
const connected = !!gateway;
const cluster = ctx.clustersService.findRootClusterByResource(doc.targetUri);

const [connectAttempt, createGateway, setConnectAttempt] = useAsync(
async () => {
Expand All @@ -45,10 +46,7 @@ export default function useGateway(doc: types.DocumentGateway) {
});

const reconnect = () => {
const cluster = ctx.clustersService.findRootClusterByResource(
doc.targetUri
);
if (cluster && cluster.connected) {
if (cluster?.connected) {
createGateway();
return;
}
Expand All @@ -75,6 +73,12 @@ export default function useGateway(doc: types.DocumentGateway) {
}
}, [disconnectAttempt.status]);

useEffect(() => {
if (cluster.connected) {
createGateway();
}
}, [cluster.connected]);

Copy link
Copy Markdown
Member

@ravicious ravicious Mar 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What kind of scenario is this + the change in the reconnect above are going to handle?

Copy link
Copy Markdown
Contributor Author

@gzdunek gzdunek Mar 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you click on a connection it opens new tab with text: Click to reconnect, even when you are connected to the cluster (and in useReconnect it just changes document status).
After this change, clicking on a connection will try to make the connection automatically and open a tab.

return {
doc,
gateway,
Expand Down
17 changes: 11 additions & 6 deletions packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,25 @@ import { useAppContext } from 'teleterm/ui/appContextProvider';
import * as types from 'teleterm/ui/services/workspacesService';
import useAttempt from 'shared/hooks/useAttemptNext';
import { useWorkspaceDocumentsService } from 'teleterm/ui/Documents';
import { useEffect } from 'react';

export function useReconnect(doc: types.DocumentTshNode) {
const ctx = useAppContext();
const workspaceDocumentsService = useWorkspaceDocumentsService();
const { attempt, setAttempt } = useAttempt('');
const cluster = ctx.clustersService.findRootClusterByResource(doc.serverUri);

function updateDoc() {
function markDocumentAsConnected() {
workspaceDocumentsService.update(doc.uri, { status: 'connected' });
}

useEffect(() => {
if (cluster.connected) {
markDocumentAsConnected();
}
}, []);

function reconnect() {
const cluster = ctx.clustersService.findRootClusterByResource(
doc.serverUri
);
if (!cluster) {
setAttempt({
status: 'failed',
Expand All @@ -44,13 +49,13 @@ export function useReconnect(doc: types.DocumentTshNode) {
if (!cluster.connected) {
ctx.commandLauncher.executeCommand('cluster-connect', {
clusterUri: cluster.uri,
onSuccess: updateDoc,
onSuccess: markDocumentAsConnected,
});

return;
}

updateDoc();
markDocumentAsConnected();
}

return { reconnect, attempt };
Expand Down
4 changes: 3 additions & 1 deletion packages/teleterm/src/ui/ServerConnect/useServerConnect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ export default function useServerConnect({ serverUri, onClose }: Props) {
const logins = cluster?.loggedInUser?.sshLoginsList || [];

const connect = (login: string) => {
const rootCluster =
ctx.clustersService.findRootClusterByResource(serverUri);
const documentsService = ctx.workspacesService.getWorkspaceDocumentService(
cluster.uri
rootCluster.uri
Copy link
Copy Markdown
Member

@ravicious ravicious Mar 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm still kinda conflicted whether we should convert a resource URI to a root cluster URI this way. The root cluster URI seems to be baked into every other URI, so theoretically we should be able to get it just from operations on that string alone, without having to use clustersService. My main concern is that in other places it'll require pulling in that clustersService which can unnecessarily complicate tests.

We might think about something like routing.extractRootClusterUri in the future. For now I added just ensureRootClusterUri there which takes any kind of cluster URI and converts it to a root cluster URI.

Copy link
Copy Markdown
Contributor Author

@gzdunek gzdunek Mar 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, I will add it to our master ticket

);
const doc = documentsService.createTshNodeDocument(serverUri);
doc.title = `${login}@${server.hostname}`;
Expand Down
3 changes: 3 additions & 0 deletions packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export function ExpanderConnections() {
id: 'e9c4fbc2',
serverUri: 'brock',
login: 'casey',
clusterName: 'teleport.example.sh',
},
{
connected: true,
Expand All @@ -27,6 +28,7 @@ export function ExpanderConnections() {
targetUri: 'brock',
port: '22',
gatewayUri: 'empty',
clusterName: 'teleport.example.sh',
},
{
connected: false,
Expand All @@ -35,6 +37,7 @@ export function ExpanderConnections() {
id: '949651ed',
serverUri: 'brock',
login: 'casey',
clusterName: 'teleport.example.sh',
},
];
},
Expand Down
34 changes: 26 additions & 8 deletions packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import { ButtonIcon, Flex, Text } from 'design';
import { CircleCross, CircleStop } from 'design/Icon';
import { TrackedConnection } from 'teleterm/ui/services/connectionTracker';
import { ExtendedTrackedConnection } from 'teleterm/ui/services/connectionTracker';
import { ListItem } from 'teleterm/ui/components/ListItem';
import { ConnectionStatusIndicator } from './ConnectionStatusIndicator';
import { useKeyboardArrowsNavigation } from 'teleterm/ui/components/KeyboardArrowsNavigation';

interface ConnectionItemProps {
index: number;
item: TrackedConnection;
item: ExtendedTrackedConnection;

onActivate(): void;

Expand All @@ -19,7 +19,6 @@ interface ConnectionItemProps {

export function ConnectionItem(props: ConnectionItemProps) {
const offline = !props.item.connected;
const color = !offline ? 'text.primary' : 'text.placeholder';
const { isActive } = useKeyboardArrowsNavigation({
index: props.index,
onRun: props.onActivate,
Expand All @@ -41,18 +40,37 @@ export function ConnectionItem(props: ConnectionItemProps) {
const actionIcon = offline ? actionIcons.remove : actionIcons.disconnect;

return (
<ListItem onClick={() => props.onActivate()} isActive={isActive}>
<ConnectionStatusIndicator mr={2} connected={props.item.connected} />
<ListItem
onClick={props.onActivate}
isActive={isActive}
css={{ padding: '6px 8px', height: 'unset' }}
>
<ConnectionStatusIndicator mr={3} connected={props.item.connected} />
<Flex
alignItems="center"
justifyContent="space-between"
flex="1"
width="100%"
minWidth="0"
>
<Text typography="body1" color={color} title={props.item.title}>
{props.item.title}
</Text>
<Flex flexDirection="column">
<Text
typography="body1"
bold
color="text.primary"
title={props.item.title}
css={{ lineHeight: '16px', whiteSpace: 'normal' }}
>
{props.item.title}
</Text>
<Text
color="text.secondary"
typography="body2"
css={{ whiteSpace: 'normal' }}
>
{props.item.clusterName}
</Text>
</Flex>
<ButtonIcon
mr="-10px"
color="text.placeholder"
Expand Down
6 changes: 3 additions & 3 deletions ...eleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react';
import { FilterableList } from 'teleterm/ui/components/FilterableList';
import { TrackedConnection } from 'teleterm/ui/services/connectionTracker';
import { ExtendedTrackedConnection } from 'teleterm/ui/services/connectionTracker';
import { ConnectionItem } from './ConnectionItem';
import { Box, Text } from 'design';
import { useKeyboardArrowsNavigationStateUpdate } from 'teleterm/ui/components/KeyboardArrowsNavigation';

interface ConnectionsFilterableListProps {
items: TrackedConnection[];
items: ExtendedTrackedConnection[];

onActivateItem(id: string): void;

Expand All @@ -23,7 +23,7 @@ export function ConnectionsFilterableList(
return (
<Box width="300px">
{props.items.length ? (
<FilterableList<TrackedConnection>
<FilterableList<ExtendedTrackedConnection>
items={props.items}
filterBy="title"
placeholder="Search Connections"
Expand Down
4 changes: 2 additions & 2 deletions packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { forwardRef } from 'react';
import { ListThin } from 'design/Icon';
import { Cluster } from 'design/Icon';
import styled from 'styled-components';
import { Button } from 'design';
import { ConnectionsIconStatusIndicator } from './ConnectionsIconStatusIndicator';
Expand All @@ -21,7 +21,7 @@ export const ConnectionsIcon = forwardRef<HTMLDivElement, ConnectionsIconProps>(
m="auto"
title="Connections"
>
<ListThin fontSize={12} />
<Cluster fontSize={14} />
</StyledButton>
</Container>
);
Expand Down
15 changes: 12 additions & 3 deletions packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ import {
getGatewayConnectionByDocument,
getServerConnectionByDocument,
} from './trackedConnectionUtils';
import { TrackedConnection, TrackedGatewayConnection } from './types';
import {
ExtendedTrackedConnection,
TrackedConnection,
TrackedGatewayConnection,
} from './types';

export class ConnectionTrackerService extends ImmutableStore<ConnectionTrackerState> {
private _trackedConnectionOperationsFactory: TrackedConnectionOperationsFactory;
Expand Down Expand Up @@ -55,8 +59,13 @@ export class ConnectionTrackerService extends ImmutableStore<ConnectionTrackerSt
return useStore(this).state;
}

getConnections(): TrackedConnection[] {
return this.state.connections;
getConnections(): ExtendedTrackedConnection[] {
return this.state.connections.map(connection => {
const { clusterUri } =
this._trackedConnectionOperationsFactory.create(connection);
const cluster = this._clusterService.findCluster(clusterUri);
return { ...connection, clusterName: cluster?.name };
});
}

async activateItem(id: string): Promise<void> {
Expand Down
4 changes: 4 additions & 0 deletions packages/teleterm/src/ui/services/connectionTracker/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,7 @@ export interface TrackedGatewayConnection extends TrackedConnectionBase {
export type TrackedConnection =
| TrackedServerConnection
| TrackedGatewayConnection;

export type ExtendedTrackedConnection = TrackedConnection & {
clusterName: string;
};