diff --git a/packages/core/src/awsService/cloudformation/consoleLinksUtils.ts b/packages/core/src/awsService/cloudformation/consoleLinksUtils.ts index 67a56fc6eeb..390f1f3804a 100644 --- a/packages/core/src/awsService/cloudformation/consoleLinksUtils.ts +++ b/packages/core/src/awsService/cloudformation/consoleLinksUtils.ts @@ -2,6 +2,9 @@ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ + +import { parse } from '@aws-sdk/util-arn-parser' + export function arnToConsoleUrl(arn: string): string { return `https://console.aws.amazon.com/go/view?arn=${encodeURIComponent(arn)}` } @@ -11,6 +14,15 @@ export function arnToConsoleTabUrl(arn: string, tab: 'resources' | 'events' | 'o return `https://${region}.console.aws.amazon.com/cloudformation/home?region=${region}#/stacks/${tab}?stackId=${encodeURIComponent(arn)}` } +export function operationIdToConsoleUrl(arn: string, operationId: string): string | undefined { + try { + const region = parse(arn).region + return `https://${region}.console.aws.amazon.com/cloudformation/home?region=${region}#/stacks/operations/info?stackId=${encodeURIComponent(arn)}&operationId=${operationId}` + } catch { + return undefined + } +} + // Reference link - https://cloudscape.design/foundation/visual-foundation/iconography/ - icon name: external export function externalLinkSvg(): string { return `` diff --git a/packages/core/src/awsService/cloudformation/ui/stackEventsWebviewProvider.ts b/packages/core/src/awsService/cloudformation/ui/stackEventsWebviewProvider.ts index 7f56dfd369c..86b1eccdce1 100644 --- a/packages/core/src/awsService/cloudformation/ui/stackEventsWebviewProvider.ts +++ b/packages/core/src/awsService/cloudformation/ui/stackEventsWebviewProvider.ts @@ -9,20 +9,30 @@ import { LanguageClient } from 'vscode-languageclient/node' import { extractErrorMessage, getStackStatusClass, isStackInTransientState } from '../utils' import { GetStackEventsRequest, ClearStackEventsRequest } from '../stacks/actions/stackActionProtocol' import { StackViewCoordinator } from './stackViewCoordinator' -import { arnToConsoleTabUrl, externalLinkSvg, consoleLinkStyles } from '../consoleLinksUtils' +import { arnToConsoleTabUrl, operationIdToConsoleUrl, externalLinkSvg, consoleLinkStyles } from '../consoleLinksUtils' const EventsPerPage = 50 const RefreshIntervalMs = 5000 +interface StackEventWithOperationId extends StackEvent { + OperationId?: string +} + +interface GroupedEvent extends StackEventWithOperationId { + isParent?: boolean + groupId: string + groupParentId?: string +} + export class StackEventsWebviewProvider implements WebviewViewProvider, Disposable { private view?: WebviewView private stackName?: string private stackArn?: string - private allEvents: StackEvent[] = [] + private allEvents: StackEventWithOperationId[] = [] private currentPage = 0 private nextToken?: string private refreshTimer?: NodeJS.Timeout - private readonly disposables: Disposable[] = [] + private expandedGroups = new Set() private readonly coordinatorSubscription: Disposable constructor( @@ -57,13 +67,16 @@ export class StackEventsWebviewProvider implements WebviewViewProvider, Disposab this.allEvents = [] this.currentPage = 0 this.nextToken = undefined + this.expandedGroups.clear() try { - const result = await this.client.sendRequest(GetStackEventsRequest, { - stackName: this.stackName, - }) + const result = await this.client.sendRequest(GetStackEventsRequest, { stackName }) this.allEvents = result.events this.nextToken = result.nextToken + + if (this.allEvents.length > 0 && this.allEvents[0].OperationId) { + this.expandedGroups.add(`op-${this.allEvents[0].OperationId}`) + } } catch (error) { this.renderError(`Failed to load events: ${extractErrorMessage(error)}`) } @@ -87,11 +100,18 @@ export class StackEventsWebviewProvider implements WebviewViewProvider, Disposab } }) - webviewView.webview.onDidReceiveMessage(async (message: { command: string }) => { + webviewView.webview.onDidReceiveMessage(async (message: { command: string; groupId?: string }) => { if (message.command === 'nextPage') { await this.nextPage() } else if (message.command === 'prevPage') { await this.prevPage() + } else if (message.command === 'toggle' && message.groupId) { + if (this.expandedGroups.has(message.groupId)) { + this.expandedGroups.delete(message.groupId) + } else { + this.expandedGroups.add(message.groupId) + } + this.render() } }) @@ -103,9 +123,6 @@ export class StackEventsWebviewProvider implements WebviewViewProvider, Disposab if (this.stackName) { void this.client.sendRequest(ClearStackEventsRequest, { stackName: this.stackName }) } - for (const d of this.disposables) { - d.dispose() - } this.coordinatorSubscription.dispose() } @@ -191,6 +208,52 @@ export class StackEventsWebviewProvider implements WebviewViewProvider, Disposab } } + private groupEvents(events: StackEventWithOperationId[]): GroupedEvent[] { + const operationGroups = new Map() + const eventsWithoutOperationId: StackEventWithOperationId[] = [] + + for (const event of events) { + if (event.OperationId) { + if (!operationGroups.has(event.OperationId)) { + operationGroups.set(event.OperationId, []) + } + operationGroups.get(event.OperationId)!.push(event) + } else { + eventsWithoutOperationId.push(event) + } + } + + const grouped: GroupedEvent[] = [] + + for (const [operationId, operationEvents] of operationGroups.entries()) { + const groupId = `op-${operationId}` + grouped.push({ + ...operationEvents[0], + groupId, + isParent: true, + }) + + for (const [index, event] of operationEvents.entries()) { + grouped.push({ + ...event, + groupId: `${groupId}-${index}`, + groupParentId: groupId, + isParent: false, + }) + } + } + + for (const [index, event] of eventsWithoutOperationId.entries()) { + grouped.push({ + ...event, + groupId: `flat-${index}`, + isParent: true, + }) + } + + return grouped + } + private renderError(message: string): void { if (!this.view || this.view.visible === false) { return @@ -215,14 +278,15 @@ export class StackEventsWebviewProvider implements WebviewViewProvider, Disposab } private render(notification?: string): void { - if (!this.view || this.view.visible === false) { + if (!this.view || !this.view.visible) { return } + const groupedEvents = this.groupEvents(this.allEvents) const start = this.currentPage * EventsPerPage const end = start + EventsPerPage - const pageEvents = this.allEvents.slice(start, end) - const totalPages = Math.ceil(this.allEvents.length / EventsPerPage) + const pageEvents = groupedEvents.slice(start, end) + const totalPages = Math.ceil(groupedEvents.length / EventsPerPage) const hasMore = this.nextToken !== undefined this.view.webview.html = this.getHtml( @@ -236,157 +300,222 @@ export class StackEventsWebviewProvider implements WebviewViewProvider, Disposab } private getHtml( - events: StackEvent[], + events: GroupedEvent[], currentPage: number, totalPages: number, hasMore: boolean, totalEvents: number, notification?: string ): string { - return ` - - - - + + +
+
+
+ ${this.stackName ?? ''} + ${this.stackArn + ? `${externalLinkSvg()}` + : ''} + (${totalEvents} events${hasMore ? ' loaded' : ''}) +
+ +
+
+ ${notification ? `
${notification}
` : ''} +
+ ${emptyMessage || + ` + + + + + + + + +${events.map((e) => this.renderEventRow(e)).join('')} + +
Operation IDTimestampLogical IDStatusStatus Reason
`} +
+ + + ` + } + + private renderEventRow(event: GroupedEvent): string { + if (event.isParent) { + const expanded = this.expandedGroups.has(event.groupId) + const chevron = event.OperationId ? `▶` : '' + const opUrl = + event.OperationId && this.stackArn + ? operationIdToConsoleUrl(this.stackArn, event.OperationId) + : undefined + const opIdDisplay = opUrl ? `${event.OperationId}` : (event.OperationId ?? '-') + + return ` +${chevron} ${opIdDisplay} +${event.Timestamp ? new Date(event.Timestamp).toLocaleString() : '-'} +${event.LogicalResourceId ?? '-'} +${event.ResourceStatus ?? '-'} +${event.ResourceStatusReason ?? '-'} +` } - - - -
-
-
- ${this.stackName ?? ''} - ${this.stackArn ? `${externalLinkSvg()}` : ''} - (${totalEvents} events${hasMore ? ' loaded' : ''}) -
- -
-
- ${notification ? `
${notification}
` : ''} -
- - - - - - - - - - - - ${events - .map( - (e) => ` - - - - - - - - ` - ) - .join('')} - -
TimestampResourceTypeStatusReason
${e.Timestamp ? new Date(e.Timestamp).toLocaleString() : '-'}${e.LogicalResourceId ?? '-'}${e.ResourceType ?? '-'}${e.ResourceStatus ?? '-'}${e.ResourceStatusReason ?? '-'}
-
- - -` + + const opUrl = + event.OperationId && this.stackArn ? operationIdToConsoleUrl(this.stackArn, event.OperationId) : undefined + const opIdDisplay = opUrl ? `${event.OperationId}` : (event.OperationId ?? '-') + + return ` +${opIdDisplay} +${event.Timestamp ? new Date(event.Timestamp).toLocaleString() : '-'} +${event.LogicalResourceId ?? '-'} +${event.ResourceStatus ?? '-'} +${event.ResourceStatusReason ?? '-'} +` } } diff --git a/packages/core/src/test/awsService/cloudformation/consoleLinksUtils.test.ts b/packages/core/src/test/awsService/cloudformation/consoleLinksUtils.test.ts new file mode 100644 index 00000000000..9f8dd774b90 --- /dev/null +++ b/packages/core/src/test/awsService/cloudformation/consoleLinksUtils.test.ts @@ -0,0 +1,76 @@ +/*! + * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +import * as assert from 'assert' +import { + arnToConsoleUrl, + arnToConsoleTabUrl, + operationIdToConsoleUrl, +} from '../../../awsService/cloudformation/consoleLinksUtils' + +describe('consoleLinksUtils', () => { + const testArn = 'arn:aws:cloudformation:us-west-2:123456789012:stack/test-stack/abc-123' + + describe('arnToConsoleUrl', () => { + it('should generate correct console URL', () => { + const url = arnToConsoleUrl(testArn) + assert.strictEqual( + url, + 'https://console.aws.amazon.com/go/view?arn=arn%3Aaws%3Acloudformation%3Aus-west-2%3A123456789012%3Astack%2Ftest-stack%2Fabc-123' + ) + }) + }) + + describe('arnToConsoleTabUrl', () => { + it('should generate correct events tab URL', () => { + const url = arnToConsoleTabUrl(testArn, 'events') + assert.strictEqual( + url, + 'https://us-west-2.console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/events?stackId=arn%3Aaws%3Acloudformation%3Aus-west-2%3A123456789012%3Astack%2Ftest-stack%2Fabc-123' + ) + }) + + it('should generate correct resources tab URL', () => { + const url = arnToConsoleTabUrl(testArn, 'resources') + assert.strictEqual( + url, + 'https://us-west-2.console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/resources?stackId=arn%3Aaws%3Acloudformation%3Aus-west-2%3A123456789012%3Astack%2Ftest-stack%2Fabc-123' + ) + }) + + it('should generate correct outputs tab URL', () => { + const url = arnToConsoleTabUrl(testArn, 'outputs') + assert.strictEqual( + url, + 'https://us-west-2.console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/outputs?stackId=arn%3Aaws%3Acloudformation%3Aus-west-2%3A123456789012%3Astack%2Ftest-stack%2Fabc-123' + ) + }) + }) + + describe('operationIdToConsoleUrl', () => { + it('should generate correct operation details URL', () => { + const operationId = '056a1310-6307-466a-a167-2cbbd353b29f' + const url = operationIdToConsoleUrl(testArn, operationId) + assert.strictEqual( + url, + 'https://us-west-2.console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/operations/info?stackId=arn%3Aaws%3Acloudformation%3Aus-west-2%3A123456789012%3Astack%2Ftest-stack%2Fabc-123&operationId=056a1310-6307-466a-a167-2cbbd353b29f' + ) + }) + + it('should handle different regions', () => { + const euArn = 'arn:aws:cloudformation:eu-west-1:123456789012:stack/test-stack/abc-123' + const operationId = 'op-456' + const url = operationIdToConsoleUrl(euArn, operationId) + assert.ok(url?.includes('eu-west-1.console.aws.amazon.com')) + assert.ok(url?.includes('region=eu-west-1')) + assert.ok(url?.includes('operationId=op-456')) + }) + + it('should return undefined for malformed ARN', () => { + const url = operationIdToConsoleUrl('not-a-valid-arn', 'op-123') + assert.strictEqual(url, undefined) + }) + }) +}) diff --git a/packages/core/src/test/awsService/cloudformation/ui/stackEventsWebviewProvider.test.ts b/packages/core/src/test/awsService/cloudformation/ui/stackEventsWebviewProvider.test.ts index ca53d1d5dcf..31969bb1789 100644 --- a/packages/core/src/test/awsService/cloudformation/ui/stackEventsWebviewProvider.test.ts +++ b/packages/core/src/test/awsService/cloudformation/ui/stackEventsWebviewProvider.test.ts @@ -26,6 +26,21 @@ describe('StackEventsWebviewProvider', () => { } } + function mockSingleEventWithOperationId() { + mockClient.sendRequest.resolves({ + events: [ + { + EventId: 'event-1', + StackName: 'test-stack', + Timestamp: new Date(), + ResourceStatus: 'CREATE_COMPLETE', + OperationId: 'op-123', + }, + ], + nextToken: undefined, + }) + } + beforeEach(() => { sandbox = sinon.createSandbox() mockClient = { @@ -61,6 +76,54 @@ describe('StackEventsWebviewProvider', () => { assert.strictEqual(mockClient.sendRequest.calledOnce, true) }) + it('should group events by operation ID', async () => { + mockClient.sendRequest.resolves({ + events: [ + { + EventId: 'event-1', + StackName: 'test-stack', + Timestamp: new Date(), + ResourceStatus: 'CREATE_COMPLETE', + OperationId: 'op-123', + }, + { + EventId: 'event-2', + StackName: 'test-stack', + Timestamp: new Date(), + ResourceStatus: 'CREATE_IN_PROGRESS', + OperationId: 'op-123', + }, + { + EventId: 'event-3', + StackName: 'test-stack', + Timestamp: new Date(), + ResourceStatus: 'UPDATE_COMPLETE', + }, + ], + nextToken: undefined, + }) + + const view = createMockView() + provider.resolveWebviewView(view as any) + await provider.showStackEvents('test-stack') + + const html = view.webview.html + assert.ok(html.includes('op-123')) + assert.ok(html.includes('parent-row')) + assert.ok(html.includes('child-row')) + }) + + it('should expand first operation group by default', async () => { + mockSingleEventWithOperationId() + + const view = createMockView() + provider.resolveWebviewView(view as any) + await provider.showStackEvents('test-stack') + + const html = view.webview.html + assert.ok(html.includes('expanded')) + }) + it('should stop auto-refresh on terminal state', async () => { const clock = sandbox.useFakeTimers() @@ -170,4 +233,21 @@ describe('StackEventsWebviewProvider', () => { assert.ok(html.includes('(50 events)')) assert.ok(!html.includes('(50 events loaded)')) }) + + it('should not hyperlink operation ID when stackArn is malformed', async () => { + mockSingleEventWithOperationId() + + const view = createMockView() + provider.resolveWebviewView(view as any) + + await coordinatorCallback({ + stackName: 'test-stack', + stackArn: 'not-a-valid-arn', + isChangeSetMode: false, + }) + + const html = view.webview.html + assert.ok(html.includes('op-123')) + assert.ok(!html.includes('href="https://') || !html.includes('operationId=op-123')) + }) }) diff --git a/packages/toolkit/.changes/next-release/Feature-abd545f4-f267-4bb5-8deb-012260756b62.json b/packages/toolkit/.changes/next-release/Feature-abd545f4-f267-4bb5-8deb-012260756b62.json new file mode 100644 index 00000000000..9ae28d2d486 --- /dev/null +++ b/packages/toolkit/.changes/next-release/Feature-abd545f4-f267-4bb5-8deb-012260756b62.json @@ -0,0 +1,4 @@ +{ + "type": "Feature", + "description": "CloudFormation: group stack events by operation id and display in stack events view" +}