feat(ec2): status icons in QuickPick, Explorer (#3661)

Hweinstock · web-flow · commit 82a2368b858f · 2023-08-07T13:21:42.000-07:00
Problem

While we have added functionality to start/stop/restart instances from explorer, we don't have anyway of knowing the existing state. 

Solution

First, I want to point out that the icons used here are temporary and I don't believe they are the best fit. They are put there currently to demonstrate the functionality. 

The three different icons to the left of the label indicate the status of the instance with the 'X' meaning stopped, the check mark meaning 'running', and the wheel indicating that its 'pending' (starting up, booting down). 

We also added icons to run/stop/restart the instances, such that the icons are only visible for valid actions (i.e. we cannot stop an already stopped instance). Additionally, we only display the `openTerminal` command next to `running` instances.

Notes on Explorer Updates:

- Currently the command is not accessible from the command palette, because we have no way to link the selection back to the node to update. One approach could be to refresh the entire explorer or find a way to expose the `ec2ParentNode` such that we can refresh just that node. 
- When executing a command, the node will visually update, but only once. Thus, starting a node will leave it stuck in pending status until another refresh from elsewhere allows it to update. This issue will be addressed in a subsequent PR. 
- Explorer updates are limited to the EC2ParentNode, so any actions here will not impact updates for other nodes.
diff --git a/package.json b/package.json
@@ -1120,6 +1120,10 @@
                     "command": "aws.ec2.openTerminal",
                     "when": "aws.isDevMode"
                 },
+                {
+                    "command": "aws.ec2.openTerminal",
+                    "when": "aws.isDevMode"
+                },
                 {
                     "command": "aws.ec2.startInstance",
                     "when": "aws.isDevMode"
@@ -1349,7 +1353,42 @@
                 {
                     "command": "aws.ec2.rebootInstance",
                     "group": "0@1",
-                    "when": "viewItem == awsEc2Node"
+                    "when": "viewItem =~ /^(awsEc2(Parent|Running)Node)$/"
+                },
+                {
+                    "command": "aws.ec2.openTerminal",
+                    "group": "inline@1",
+                    "when": "viewItem =~ /^(awsEc2(Parent|Running)Node)$/"
+                },
+                {
+                    "command": "aws.ec2.startInstance",
+                    "group": "0@1",
+                    "when": "viewItem =~ /^(awsEc2(Stopped|Pending)Node)$/"
+                },
+                {
+                    "command": "aws.ec2.startInstance",
+                    "group": "inline@1",
+                    "when": "viewItem =~ /^(awsEc2(Stopped|Pending)Node)$/"
+                },
+                {
+                    "command": "aws.ec2.stopInstance",
+                    "group": "0@1",
+                    "when": "viewItem =~ /^(awsEc2(Running|Pending)Node)$/"
+                },
+                {
+                    "command": "aws.ec2.stopInstance",
+                    "group": "inline@1",
+                    "when": "viewItem =~ /^(awsEc2(Running|Pending)Node)$/"
+                },
+                {
+                    "command": "aws.ec2.rebootInstance",
+                    "group": "0@1",
+                    "when": "viewItem =~ /^(awsEc2RunningNode)$/"
+                },
+                {
+                    "command": "aws.ec2.rebootInstance",
+                    "group": "inline@1",
+                    "when": "viewItem =~ /^(awsEc2RunningNode)$/"
                 },
                 {
                     "command": "aws.ecr.createRepository",
@@ -2122,6 +2161,7 @@
             {
                 "command": "aws.ec2.startInstance",
                 "title": "%AWS.command.ec2.startInstance%",
+                "icon": "$(debug-start)",
                 "category": "%AWS.title%",
                 "cloud9": {
                     "cn": {
@@ -2132,6 +2172,7 @@
             {
                 "command": "aws.ec2.stopInstance",
                 "title": "%AWS.command.ec2.stopInstance%",
+                "icon": "$(debug-stop)",
                 "category": "%AWS.title%",
                 "cloud9": {
                     "cn": {
@@ -2142,6 +2183,7 @@
             {
                 "command": "aws.ec2.rebootInstance",
                 "title": "%AWS.command.ec2.rebootInstance%",
+                "icon": "$(debug-restart)",
                 "category": "%AWS.title%",
                 "cloud9": {
                     "cn": {
diff --git a/src/ec2/activation.ts b/src/ec2/activation.ts
@@ -8,7 +8,14 @@ import { telemetry } from '../shared/telemetry/telemetry'
 import { Ec2InstanceNode } from './explorer/ec2InstanceNode'
 import { copyTextCommand } from '../awsexplorer/commands/copyText'
 import { Ec2Node } from './explorer/ec2ParentNode'
-import { openRemoteConnection, openTerminal, rebootInstance, startInstance, stopInstance } from './commands'
+import {
+    openRemoteConnection,
+    openTerminal,
+    rebootInstance,
+    startInstance,
+    stopInstance,
+    refreshExplorer,
+} from './commands'
 
 export async function activate(ctx: ExtContext): Promise<void> {
     ctx.extensionContext.subscriptions.push(
@@ -28,14 +35,17 @@ export async function activate(ctx: ExtContext): Promise<void> {
 
         Commands.register('aws.ec2.startInstance', async (node?: Ec2Node) => {
             await startInstance(node)
+            refreshExplorer(node)
         }),
 
         Commands.register('aws.ec2.stopInstance', async (node?: Ec2Node) => {
             await stopInstance(node)
+            refreshExplorer(node)
         }),
 
         Commands.register('aws.ec2.rebootInstance', async (node?: Ec2Node) => {
             await rebootInstance(node)
+            refreshExplorer(node)
         })
     )
 }
diff --git a/src/ec2/commands.ts b/src/ec2/commands.ts
@@ -6,11 +6,16 @@
 import { Ec2InstanceNode } from './explorer/ec2InstanceNode'
 import { Ec2Node } from './explorer/ec2ParentNode'
 import { Ec2ConnectionManager } from './model'
-import { Ec2Prompter, instanceFilter } from './prompter'
-import { Ec2Selection } from './prompter'
-import { Ec2Client, Ec2Instance } from '../shared/clients/ec2Client'
+import { Ec2Prompter, instanceFilter, Ec2Selection } from './prompter'
+import { Ec2Instance, Ec2Client } from '../shared/clients/ec2Client'
 import { copyToClipboard } from '../shared/utilities/messages'
 
+export function refreshExplorer(node?: Ec2Node) {
+    if (node) {
+        node instanceof Ec2InstanceNode ? node.parent.refreshNode() : node.refreshNode()
+    }
+}
+
 export async function openTerminal(node?: Ec2Node) {
     const selection = await getSelection(node)
 
diff --git a/src/ec2/explorer/ec2InstanceNode.ts b/src/ec2/explorer/ec2InstanceNode.ts
@@ -2,30 +2,58 @@
  * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { getNameOfInstance } from '../../shared/clients/ec2Client'
+import * as vscode from 'vscode'
+import { Ec2Client, getNameOfInstance } from '../../shared/clients/ec2Client'
 import { AWSResourceNode } from '../../shared/treeview/nodes/awsResourceNode'
 import { AWSTreeNodeBase } from '../../shared/treeview/nodes/awsTreeNodeBase'
 import { Ec2Instance } from '../../shared/clients/ec2Client'
 import globals from '../../shared/extensionGlobals'
+import { getIconCode } from '../utils'
 import { Ec2Selection } from '../prompter'
+import { Ec2ParentNode } from './ec2ParentNode'
+
+export const Ec2InstanceRunningContext = 'awsEc2RunningNode'
+export const Ec2InstanceStoppedContext = 'awsEc2StoppedNode'
+export const Ec2InstancePendingContext = 'awsEc2PendingNode'
+
+type Ec2InstanceNodeContext = 'awsEc2RunningNode' | 'awsEc2StoppedNode' | 'awsEc2PendingNode'
 
 export class Ec2InstanceNode extends AWSTreeNodeBase implements AWSResourceNode {
     public constructor(
+        public readonly parent: Ec2ParentNode,
+        public readonly client: Ec2Client,
         public override readonly regionCode: string,
         private readonly partitionId: string,
-        private instance: Ec2Instance,
-        public override readonly contextValue: string
+        protected instance: Ec2Instance
     ) {
         super('')
-        this.update(instance)
+        this.updateInstance(instance)
         this.id = this.InstanceId
     }
 
-    public update(newInstance: Ec2Instance) {
+    public updateInstance(newInstance: Ec2Instance) {
         this.setInstance(newInstance)
         this.label = `${this.name} (${this.InstanceId})`
-        this.tooltip = `${this.name}\n${this.InstanceId}\n${this.arn}`
+        this.contextValue = this.getContext()
+        this.iconPath = new vscode.ThemeIcon(getIconCode(this.instance))
+        this.tooltip = `${this.name}\n${this.InstanceId}\n${this.instance.status}\n${this.arn}`
+    }
+
+    public async updateStatus() {
+        const newStatus = await this.client.getInstanceStatus(this.InstanceId)
+        this.updateInstance({ ...this.instance, status: newStatus })
+    }
+
+    private getContext(): Ec2InstanceNodeContext {
+        if (this.instance.status == 'running') {
+            return Ec2InstanceRunningContext
+        }
+
+        if (this.instance.status == 'stopped') {
+            return Ec2InstanceStoppedContext
+        }
+
+        return Ec2InstancePendingContext
     }
 
     public setInstance(newInstance: Ec2Instance) {
diff --git a/src/ec2/explorer/ec2ParentNode.ts b/src/ec2/explorer/ec2ParentNode.ts
@@ -9,18 +9,19 @@ import { PlaceholderNode } from '../../shared/treeview/nodes/placeholderNode'
 import { Ec2InstanceNode } from './ec2InstanceNode'
 import { Ec2Client } from '../../shared/clients/ec2Client'
 import { updateInPlace } from '../../shared/utilities/collectionUtils'
+import { Commands } from '../../shared/vscode/commands'
 
-export const contextValueEc2 = 'awsEc2Node'
+export const parentContextValue = 'awsEc2ParentNode'
 export type Ec2Node = Ec2InstanceNode | Ec2ParentNode
 
 export class Ec2ParentNode extends AWSTreeNodeBase {
     protected readonly placeHolderMessage = '[No EC2 Instances Found]'
-    protected readonly ec2InstanceNodes: Map<string, Ec2InstanceNode>
-    public override readonly contextValue: string = contextValueEc2
+    protected ec2InstanceNodes: Map<string, Ec2InstanceNode>
+    public override readonly contextValue: string = parentContextValue
 
     public constructor(
         public override readonly regionCode: string,
-        private readonly partitionId: string,
+        public readonly partitionId: string,
         protected readonly ec2Client: Ec2Client
     ) {
         super('EC2', vscode.TreeItemCollapsibleState.Collapsed)
@@ -44,8 +45,17 @@ export class Ec2ParentNode extends AWSTreeNodeBase {
         updateInPlace(
             this.ec2InstanceNodes,
             ec2Instances.keys(),
-            key => this.ec2InstanceNodes.get(key)!.update(ec2Instances.get(key)!),
-            key => new Ec2InstanceNode(this.regionCode, this.partitionId, ec2Instances.get(key)!, contextValueEc2)
+            key => this.ec2InstanceNodes.get(key)!.updateInstance(ec2Instances.get(key)!),
+            key => new Ec2InstanceNode(this, this.ec2Client, this.regionCode, this.partitionId, ec2Instances.get(key)!)
         )
     }
+
+    public async clearChildren() {
+        this.ec2InstanceNodes = new Map<string, Ec2InstanceNode>()
+    }
+
+    public async refreshNode(): Promise<void> {
+        this.clearChildren()
+        Commands.vscode().execute('aws.refreshAwsExplorerNode', this)
+    }
 }
diff --git a/src/ec2/prompter.ts b/src/ec2/prompter.ts
@@ -9,6 +9,7 @@ import { Ec2Client, Ec2Instance } from '../shared/clients/ec2Client'
 import { isValidResponse } from '../shared/wizards/wizard'
 import { CancellationError } from '../shared/utilities/timeoutUtils'
 import { AsyncCollection } from '../shared/utilities/asyncCollection'
+import { getIconCode } from './utils'
 
 export type instanceFilter = (instance: Ec2Instance) => boolean
 export interface Ec2Selection {
@@ -20,8 +21,9 @@ export class Ec2Prompter {
     public constructor(protected filter?: instanceFilter) {}
 
     protected static asQuickPickItem(instance: Ec2Instance): DataQuickPickItem<string> {
+        const icon = `$(${getIconCode(instance)})`
         return {
-            label: '$(terminal) \t' + (instance.name ?? '(no name)'),
+            label: `${icon} \t ${instance.name ?? '(no name)'}`,
             detail: instance.InstanceId,
             data: instance.InstanceId,
         }
diff --git a/src/ec2/utils.ts b/src/ec2/utils.ts
@@ -0,0 +1,18 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Ec2Instance } from '../shared/clients/ec2Client'
+
+export function getIconCode(instance: Ec2Instance) {
+    if (instance.status === 'running') {
+        return 'check'
+    }
+
+    if (instance.status === 'stopped') {
+        return 'stop'
+    }
+
+    return 'loading~spin'
+}
diff --git a/src/test/ec2/explorer/ec2InstanceNode.test.ts b/src/test/ec2/explorer/ec2InstanceNode.test.ts
@@ -4,13 +4,20 @@
  */
 
 import * as assert from 'assert'
-import { Ec2InstanceNode } from '../../../ec2/explorer/ec2InstanceNode'
-import { Ec2Instance, getNameOfInstance } from '../../../shared/clients/ec2Client'
-import { contextValueEc2 } from '../../../ec2/explorer/ec2ParentNode'
+import {
+    Ec2InstanceNode,
+    Ec2InstancePendingContext,
+    Ec2InstanceRunningContext,
+    Ec2InstanceStoppedContext,
+} from '../../../ec2/explorer/ec2InstanceNode'
+import { Ec2Client, Ec2Instance, getNameOfInstance } from '../../../shared/clients/ec2Client'
+import { Ec2ParentNode } from '../../../ec2/explorer/ec2ParentNode'
 
 describe('ec2InstanceNode', function () {
     let testNode: Ec2InstanceNode
     let testInstance: Ec2Instance
+    const testRegion = 'testRegion'
+    const testPartition = 'testPartition'
 
     before(function () {
         testInstance = {
@@ -21,9 +28,15 @@ describe('ec2InstanceNode', function () {
                     Value: 'testName',
                 },
             ],
+            status: 'running',
         }
+        const testClient = new Ec2Client('')
+        const testParentNode = new Ec2ParentNode(testRegion, testPartition, testClient)
+        testNode = new Ec2InstanceNode(testParentNode, testClient, 'testRegion', 'testPartition', testInstance)
+    })
 
-        testNode = new Ec2InstanceNode('testRegion', 'testPartition', testInstance, contextValueEc2)
+    this.beforeEach(function () {
+        testNode.updateInstance(testInstance)
     })
 
     it('instantiates without issue', async function () {
@@ -42,13 +55,37 @@ describe('ec2InstanceNode', function () {
         assert.strictEqual(testNode.name, getNameOfInstance(testInstance))
     })
 
-    it('initializes the tooltip', async function () {
-        assert.strictEqual(testNode.tooltip, `${testNode.name}\n${testNode.InstanceId}\n${testNode.arn}`)
-    })
-
     it('has no children', async function () {
         const childNodes = await testNode.getChildren()
         assert.ok(childNodes)
         assert.strictEqual(childNodes.length, 0, 'Expected node to have no children')
     })
+
+    it('has an EC2ParentNode as parent', async function () {
+        assert.ok(testNode.parent instanceof Ec2ParentNode)
+    })
+
+    it('intializes the client', async function () {
+        assert.ok(testNode.client instanceof Ec2Client)
+    })
+
+    it('sets context value based on status', async function () {
+        const stoppedInstance = { ...testInstance, status: 'stopped' }
+        testNode.updateInstance(stoppedInstance)
+        assert.strictEqual(testNode.contextValue, Ec2InstanceStoppedContext)
+
+        const runningInstance = { ...testInstance, status: 'running' }
+        testNode.updateInstance(runningInstance)
+        assert.strictEqual(testNode.contextValue, Ec2InstanceRunningContext)
+
+        const pendingInstance = { ...testInstance, status: 'pending' }
+        testNode.updateInstance(pendingInstance)
+        assert.strictEqual(testNode.contextValue, Ec2InstancePendingContext)
+    })
+
+    it('updates label with new instance', async function () {
+        const newIdInstance = { ...testInstance, InstanceId: 'testId2' }
+        testNode.updateInstance(newIdInstance)
+        assert.strictEqual(testNode.label, `${getNameOfInstance(newIdInstance)} (${newIdInstance.InstanceId})`)
+    })
 })
diff --git a/src/test/ec2/explorer/ec2ParentNode.test.ts b/src/test/ec2/explorer/ec2ParentNode.test.ts
@@ -4,7 +4,7 @@
  */
 
 import * as assert from 'assert'
-import { Ec2ParentNode, contextValueEc2 } from '../../../ec2/explorer/ec2ParentNode'
+import { Ec2ParentNode } from '../../../ec2/explorer/ec2ParentNode'
 import { stub } from '../../utilities/stubber'
 import { Ec2Client, Ec2Instance } from '../../../shared/clients/ec2Client'
 import { intoCollection } from '../../../shared/utilities/collectionUtils'
@@ -36,8 +36,8 @@ describe('ec2ParentNode', function () {
 
     beforeEach(function () {
         instances = [
-            { name: 'firstOne', InstanceId: '0' },
-            { name: 'secondOne', InstanceId: '1' },
+            { name: 'firstOne', InstanceId: '0', status: 'running' },
+            { name: 'secondOne', InstanceId: '1', status: 'stopped' },
         ]
 
         testNode = new Ec2ParentNode(testRegion, testPartition, createClient())
@@ -61,14 +61,6 @@ describe('ec2ParentNode', function () {
         )
     })
 
-    it('has child nodes with ec2 contextValuue', async function () {
-        const childNodes = await testNode.getChildren()
-
-        childNodes.forEach(node =>
-            assert.strictEqual(node.contextValue, contextValueEc2, 'expected the node to have a ec2 contextValue')
-        )
-    })
-
     it('sorts child nodes', async function () {
         const sortedText = ['aa', 'ab', 'bb', 'bc', 'cc', 'cd']
         instances = [
diff --git a/src/test/ec2/prompter.test.ts b/src/test/ec2/prompter.test.ts
