DynamoDB: Pagination in Query Panel (#5438)

* Pagination in query panel

* Query pagination changes

* Query pagination final changes

* Added items per page icon

* Added external link to dynamodb node

* Updated refreshed on to human readable format

* Added title on the vscode cell to view data on hover

* Edit item changes

* Fixing UI bugs

* Fixing tooltip issue

* Changes to to make Run button theme friendly.

* Fixed page number link

* fix for context menu truncated issue

* Changes related to no items to display

* Edit item changes

---------

Co-authored-by: Lokesh Dogga <[email protected]>

Author: Lokesh1302

package-lock.json

@@ -70,6 +70,7 @@
     "dependencies": {
         "@aws-toolkits/telemetry": "^1.0.229",
         "@vscode/webview-ui-toolkit": "^1.4.0",
+        "date-fns": "^3.6.0",
         "vscode-nls": "^5.2.0",
         "vscode-nls-dev": "^4.0.4"
     }

package.json

@@ -75,6 +75,13 @@
                     "maximum": 250,
                     "markdownDescription": "%AWS.configuration.description.iot.maxItemsPerPage%"
                 },
+                "aws.dynamodb.maxItemsPerPage": {
+                    "type": "number",
+                    "default": 100,
+                    "minimum": 10,
+                    "maximum": 250,
+                    "markdownDescription": "%AWS.configuration.description.dynamodb.maxItemsPerPage%"
+                },
                 "aws.s3.maxItemsPerPage": {
                     "type": "number",
                     "default": 300,
@@ -1224,6 +1231,10 @@
                 {
                     "command": "aws.dynamoDb.deleteTable",
                     "when": "false"
+                },
+                {
+                    "command": "aws.dynamoDb.openTableInConsole",
+                    "when": "false"
                 }
             ],
             "editor/title": [
@@ -2039,6 +2050,11 @@
                     "command": "aws.dynamoDb.deleteTable",
                     "group": "0@1",
                     "when": "view == aws.explorer && viewItem == awsDynamoDbTableNode"
+                },
+                {
+                    "command": "aws.dynamoDb.openTableInConsole",
+                    "group": "inline@1",
+                    "when": "view == aws.explorer && viewItem == awsDynamoDbTableNode"
                 }
             ],
             "aws.toolkit.auth": [
@@ -3637,6 +3653,18 @@
                         "category": "%AWS.title.cn%"
                     }
                 }
+            },
+            {
+                "command": "aws.dynamoDb.openTableInConsole",
+                "title": "%AWS.command.dynamoDb.openTableInConsole%",
+                "category": "%AWS.title%",
+                "enablement": "!aws.isWebExtHost",
+                "icon": "$(link-external)",
+                "cloud9": {
+                    "cn": {
+                        "category": "%AWS.title.cn%"
+                    }
+                }
             }
         ],
         "jsonValidation": [

packages/core/package.json

@@ -9,6 +9,7 @@
     "AWS.configuration.description.lambda.recentlyUploaded": "Recently selected Lambda upload targets.",
     "AWS.configuration.description.ecs.openTerminalCommand": "The command to run when starting a new interactive terminal session.",
     "AWS.configuration.description.iot.maxItemsPerPage": "Controls how many IoT Things, Certificates, or Policies are listed before showing a node to `Load More...`.",
+    "AWS.configuration.description.dynamodb.maxItemsPerPage": "Controls how many items to show per page in DynamoDB table view.",
     "AWS.configuration.description.s3.maxItemsPerPage": "Controls how many S3 items are listed before showing a node to `Load More...`.\nThis corresponds to the `MaxKeys` requested in a single call to S3. [Learn More](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjectsV2.html#AmazonS3-ListObjectsV2-response-MaxKeys)",
     "AWS.configuration.description.samcli.lambdaTimeout": "Maximum time (in milliseconds) to wait for SAM output while starting a Local Lambda session",
     "AWS.configuration.description.samcli.location": "Location of SAM CLI. SAM CLI is used to create, build, package, and deploy Serverless Applications. [Learn More](https://aws.amazon.com/serverless/sam/)",
@@ -266,7 +267,8 @@
     "AWS.amazonq.codewhisperer.title": "Amazon Q",
     "AWS.amazonq.toggleCodeSuggestion": "Toggle Auto-Suggestions",
     "AWS.amazonq.toggleCodeScan": "Toggle Auto-Scans",
-    "AWS.command.dynamoDb.searchTables": "Search Tables",
+    "AWS.command.dynamoDb.searchTables": "Search DynamoDB Tables",
     "AWS.command.dynamoDb.viewTable": "View Table",
-    "AWS.command.dynamoDb.deleteTable": "Delete Table"
+    "AWS.command.dynamoDb.deleteTable": "Delete Table",
+    "AWS.command.dynamoDb.openTableInConsole": "Open table in browser"
 }

packages/core/package.nls.json

@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as vscode from 'vscode'
 import { ExtContext } from '../shared/extensions'
 import { copyDynamoDbArn } from './utils/dynamodb'
 import { viewDynamoDbTable } from './vue/tableView'
+import { dynamoDbConsoleUrl } from './utils/dynamodb'
 import { Commands } from '../shared/vscode/commands2'
 import { DynamoDbTableNode } from './explorer/dynamoDbTableNode'
 import { deleteDynamoDbTable } from './commands/deleteDynamoDbTable'
@@ -34,6 +36,11 @@ export async function activate(context: ExtContext): Promise<void> {
 
         Commands.register('aws.dynamoDb.deleteTable', async (node: DynamoDbTableNode) => {
             await deleteDynamoDbTable(node)
+        }),
+
+        Commands.register('aws.dynamoDb.openTableInConsole', async (node: DynamoDbTableNode) => {
+            const url = dynamoDbConsoleUrl(node)
+            return vscode.env.openExternal(url)
         })
     )
 }

packages/core/src/dynamoDb/activation.ts

@@ -8,6 +8,7 @@ import { DynamoDbTableNode } from './dynamoDbTableNode'
 import { makeChildrenNodes } from '../../shared/treeview/utils'
 import { DynamoDbClient } from '../../shared/clients/dynamoDbClient'
 import { AWSTreeNodeBase } from '../../shared/treeview/nodes/awsTreeNodeBase'
+import { PlaceholderNode } from '../../shared/treeview/nodes/placeholderNode'
 import { toMap, toArrayAsync, updateInPlace } from '../../shared/utilities/collectionUtils'
 
 export class DynamoDbInstanceNode extends AWSTreeNodeBase {
@@ -29,6 +30,7 @@ export class DynamoDbInstanceNode extends AWSTreeNodeBase {
                 await this.updateChildren()
                 return [...this.dynamoDbTableNodes.values()]
             },
+            getNoChildrenPlaceholderNode: async () => new PlaceholderNode(this, this.placeHolderMessage),
         })
     }
 

packages/core/src/dynamoDb/explorer/dynamoDbInstanceNode.ts

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as vscode from 'vscode'
 import { DynamoDB } from 'aws-sdk'
+import { Settings } from '../../shared'
 import { copyToClipboard } from '../../shared/utilities/messages'
 import { DynamoDbTableNode } from '../explorer/dynamoDbTableNode'
 import { DynamoDbClient } from '../../shared/clients/dynamoDbClient'
@@ -33,6 +35,7 @@ export async function getTableContent(
     regionCode: string,
     client = new DynamoDbClient(regionCode)
 ) {
+    tableRequest.Limit = await getMaxItemsPerPage()
     const response = await client.scanTable(tableRequest)
     const { columnNames, tableHeader } = getTableColumnsNames(response)
     const tableItems = getTableItems(columnNames, response)
@@ -45,7 +48,7 @@ export async function getTableContent(
     return tableData
 }
 
-function getTableColumnsNames(items: DynamoDB.Types.ScanOutput): {
+export function getTableColumnsNames(items: DynamoDB.Types.ScanOutput): {
     columnNames: Set<string>
     tableHeader: RowData[]
 } {
@@ -66,7 +69,7 @@ function getTableColumnsNames(items: DynamoDB.Types.ScanOutput): {
     }
 }
 
-function getTableItems(tableColumnsNames: Set<string>, items: DynamoDB.Types.ScanOutput) {
+export function getTableItems(tableColumnsNames: Set<string>, items: DynamoDB.Types.ScanOutput) {
     const tableItems = []
     for (const item of items.Items ?? []) {
         const curItem: RowData = {}
@@ -99,9 +102,12 @@ export async function queryTableContent(
     queryRequest: { partitionKey: string; sortKey: string },
     regionCode: string,
     tableName: string,
+    lastEvaluatedKey?: Key,
     client = new DynamoDbClient(regionCode)
 ) {
     const queryRequestObject = await prepareQueryRequestObject(tableName, regionCode, client, queryRequest)
+    queryRequestObject.Limit = await getMaxItemsPerPage()
+    queryRequestObject.ExclusiveStartKey = lastEvaluatedKey
     const queryResponse = await client.queryTable(queryRequestObject)
     const { columnNames, tableHeader } = getTableColumnsNames(queryResponse)
     const tableItems = getTableItems(columnNames, queryResponse)
@@ -203,7 +209,7 @@ export async function getTableKeySchema(
     return tableSchema
 }
 
-function getAttributeValue(attribute: AttributeValue): { key: string; value: any } | undefined {
+export function getAttributeValue(attribute: AttributeValue): { key: string; value: any } | undefined {
     const keys = Object.keys(attribute) as (keyof AttributeValue)[]
     for (const key of keys) {
         const value = attribute[key]
@@ -242,3 +248,13 @@ export async function deleteItem(
     }
     return await client.deleteItem(deleteRequest)
 }
+
+async function getMaxItemsPerPage(): Promise<number> {
+    return Settings.instance.getSection('aws').get<number>('dynamodb.maxItemsPerPage', 100)
+}
+
+export function dynamoDbConsoleUrl(node: DynamoDbTableNode): vscode.Uri {
+    const service = 'dynamodb'
+    const resourcePath = `tables:selected=${node.dynamoDbtable}`
+    return vscode.Uri.parse(`https://console.aws.amazon.com/${service}/home?region=${node.regionCode}#/${resourcePath}`)
+}