AWS Icon Sample

A React component demonstrating AWS service icons with dynamic resource counting and grouping capabilities. This component visualizes AWS resources with their corresponding icons and provides interactive controls to add or remove resources.

[Demo]

Features

• Dynamic Resource Management: Add or remove AWS resources dynamically
• Resource Grouping: Automatically groups similar resource types
• Badge Counting: Shows the number of resources per service type
• Tooltips: Displays detailed resource information on hover
• Scrollable Resource List: View all resources in a scrollable list

Example Usage

import AWSIcon from './AWSIcon';

// Sample resource data structure
const resources = [
  {
    resourceType: 'AWS-Lambda',
    resourceName: 'aaa/bbb/function1'
  },
  {
    resourceType: 'Amazon-DynamoDB',
    resourceName: 'aaa/bbb/table1'
  }
];

// Rendering AWS icons with badges
const AWSIconDisplay = ({ resources }) => {
  const mergedResources = mergeSameResourceType(resources);
  
  return (
    <div style={{ display: 'flex', gap: '15px' }}>
      {mergedResources.map((resource, index) => (
        <AWSIcon
          key={index}
          size="Size32"
          icon={{
            key: resource.resourceType,
            tooltip: resource.popupContents,
            badgeCount: resource.badgeCount
          }}
        />
      ))}
    </div>
  );
};

Supported AWS Services

• AWS Lambda
• Amazon DynamoDB
• Amazon Kinesis
• Amazon Athena
• Amazon Cognito

Resource Management

// Generate random AWS resources
const generateResources = (count) => {
  // Returns an array of resource objects with random types and paths
  return resources.map(() => ({
    resourceName: /* random path */,
    resourceType: /* random AWS service */
  }));
};

// Group resources by type
const mergeSameResourceType = (resources) => {
  // Returns grouped resources with counts and tooltip content
  return [{
    resourceType: /* AWS service type */,
    badgeCount: /* number of resources */,
    popupContents: /* tooltip content */
  }];
};

Technologies Used

• React: Component-based UI development
• Ant Design: UI components including List and Radio buttons
• SCSS: Styling for AWS icons
• Custom Icons: AWS service icons implementation