๐Ÿคนโ€โ™‚๏ธ AWS CDK 101 Projects - ๐Ÿ„โ€โ™‚๏ธ Stacks-Dash - A console for monitoring multi account / cross region cloudformation deployments using Amplify Studio

๐Ÿคนโ€โ™‚๏ธ AWS CDK 101 Projects - ๐Ÿ„โ€โ™‚๏ธ Stacks-Dash - A console for monitoring multi account / cross region cloudformation deployments using Amplify Studio

ยท

9 min read

Realtime notifications using aws appsync subscriptions

Delighted to share my full stack project as part of the current amplify hackathon in hashnode, do read the full article and share your thoughts.

Before we go further let me clarify that this tool is more or less an extension to my early project with AWS CDK called event-forwarder which is publicly available.

For more details on that check out the below links to understand from where I sourced the data.

๐Ÿ” Original post at ๐Ÿ”— Dev Post aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

๐Ÿ” Reposted at ๐Ÿ”— dev to @aravindvcyber aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

About this project ๐Ÿšง

Here I will be trying to build a web-console to monitor the various deployments happening via cloud formation cross-region and in multiple accounts using a single page application built using amplify studio and Figma. The cloud formation events are sourced from my other public project (discussed above in the links). Hope this helps someone as well.

Plan ๐Ÿ„

In this application, I will be showing how I managed to forward the cloud formation events from multiple accounts across regions into a single web console with some deep links to identify the status of the various deployments in real time.

So here I will extend the event forwarder project by generating dynamodb streams to put data into my custom data model (GraphQL + Dynamodb) defined using a lambda handler.

data flow

Hence in simple words, the live data will be generated by dynamodb streams coming out of the event-forwarder master DB, which is temporarily used to send slack notifications.

We will extend this by creating a new stack that will be consuming the data dynamodb streams using a consumer lambda which puts the processed information to dynamodb, later we planned to move this via the graphql API using eventbridge integration.

table and events

As you can see that the external stack now emits events which would be used as the primary and the direct dynamodb integration will be obsolete.

events

Final Architecture ๐Ÿ—ฝ

stacks staging arch

Here you could find that the external eventbridge events are filtered and buffered with sqs and then connected to stacksDash function which we will be creating.

Further the eventbridge and sqs besides custom gql resolvers will be created and glue using amplify add custom feature which can help us use cdk stacks to provision the additional backends using amplify cli.

event pattern filter

event target

events from consumer stack connected to gql

stacks

Data Modelling in Amplify Studio โ›ท๏ธ

Here I have shown how I created a data model and set authorization rules to configure Cognito user pools as the default mode besides letting the owners access the data in the system for finer control of the data. Besides this, I have enabled the apiKey-based authentication to be used mostly for backend data inserting and processing for finer control

data

Lambda created using amplify cli ๐Ÿ„โ€โ™‚๏ธ

I quickly created a lambda (amplify add function) with the necessary graphql endpoint and key environment variables automatically inserted it also can have the event payload defined to quickly test using the amplify mock function. This lambda can now be used to perform mutations to the data model, and in the future, I have plans to connect the dynamodb streams via this lambda.

Authentication Enabled with Signup ๐Ÿคธ

It is very easy to set up authentication in amplify studio. I managed to spin up an email verification-based signup and was also able to set up groups to help with my real account and a sandbox profile for test and reviewing profiles with mock data.

email authentication

User group management

Signup is much easier ๐Ÿคผ

I can easily create new users from the studio as well as from the app, which will automatically create a Cognito user in the Cognito user pool with the required information I required. For the sandbox account, I managed to directly activate it from the studio.

Also, the OIDC mode is very much promising, and I hope I can quickly spin up that soon in the future to use social logins.

Since as you may know this project is only a demonstration and cannot be directly used by public users like the blog or other content-sharing sites, I stick to email-based authentication for now.

user creation

Integration with social providers for authentication ๐Ÿคบ

Here I have used google oauth to sign and access the application, so that I could use the app seamlessly in any device I have already signed in the browser securely and also stop remembering multiple accounts and credentials.

Image description

Prototyping the UI design with Figma ๐ŸŒ๏ธ

Now it is time to do some real design and prototyping in Figma, I managed to learn this last 2 weeks and I could create rich UI components as shown below. It is very much helpful as I could visually design and get the pixel-perfect components in my React front end through amplify studio.

Figma made this project work scale and be consistent, and I hope more such integration will be there in amplify studio soon.

figma 1

Studio UI Configuration ๐Ÿ‹๏ธ

From amplify studio, I managed to sync my Figma and commit the new changes to my components. Besides this cool features like creating the collection, configuring the properties, creating a slot for UI elements, and binding the data are much useful to get this into a useable mode when I pull this using amplify pull

collections

UI elements

UI workflow ๐Ÿคบ

Okay, let us see what we have got this web console.

Sandbox Home Page with Mocked data ๐Ÿ’ช

Using the credentials, for the sandbox user, I have created. I was able to log in to the home page easily by skipping the verification step which I confirmed in amplify studio itself for this user.

sandbox home

Real Account data demo ๐Ÿง—โ€โ™‚๏ธ

Okay now it is time to walk you through my real account, and for the data generation it is automatically taken care of as I build and deploy amplify again and again(Since it uses cloud formation to provision resources), it generates the data for me and now I can access them from a single dashboard and as shown in this clip below.

deployment completed

aravind

Search and Filters ๐ŸŠโ€โ™‚๏ธ

Here we have a sidebar that acts like a master filter that will refine the collection as we select them one after the other. It was a bit tricky since I have to prepare the icon and selectable into groups of frames and then dynamically link them to the state using in react. And finally, I managed to filter them as per my selection.

More the collection component bootstrapped from the amplify studio is also amazing with a search bar and pagination controls.

search filter

search

This project could have more features as I continuously refine it while I explore new features and implement them in the future.

Here specifically I was looking for buttons that could deep link me to the AWS console to the specific resource and it worked as expected as shown below. Hope it is helpful for someone. The rest is more of experiments to try out amplify studio and cli.

aravind navigation to cloudformation

Selecting any stack level event will also show a full list of all the resource level events associated with the full lifecycle of the CFN stacks as shown in the below video. This is achieved by creating a custom graphql resolver which could access the existing dynamodb table (this is the master dynamodb table in the event forwarder project) beyond the one which is directly created by this tool.

Using custom resource in amplify it is very easily to leverage and extend the existing resources to work seamless across your application.

deep link events

Appsync makes it easier with GraphQL ๐Ÿšตโ€โ™‚๏ธ

I managed to test my graphql endpoint in my studio of choice in apollo sandbox as well as used Cognito user ids to test the user level access in the aws appsync console easily throughout the project work.

graphql

GraphQL Transformer v2

Also the new graphql transfer v2 for amplify is really a simple and cool way to design and model the schema, capabilities regards to indexs and auth are tried part of this solution.

Also I also created a custom VTL based resolver using CDK which help me with easier hack whenever I need a new resolver for my specific query needs.

Using amplify add custom you can create a cloudformation or cdk resource. I created a custom resolver using cdk as shown below with VTL based template.

const retVal: AmplifyDependentResourcesAttributes =
      AmplifyHelpers.addResourceDependency(
        this,
        amplifyResourceProps.category,
        amplifyResourceProps.resourceName,
        [
          {
            category: "api",
            resourceName: "StacksDash",
          },
        ]
      );

    const resolver = new appsync.CfnResolver(
      this,
      "custom-resolver-custQuery",
      {

        apiId: cdk.Fn.ref(retVal.api.StacksDash.GraphQLAPIIdOutput),
        fieldName: "custQuery",
        typeName: "Query", // Query | Mutation | Subscription
        requestMappingTemplate: appsync.MappingTemplate.fromFile(
          path.join(__dirname, "..", "Query.custQuery.req.vtl")
        ).renderTemplate(),
        responseMappingTemplate: appsync.MappingTemplate.fromFile(
          path.join(__dirname, "..", "Query.custQuery.res.vtl")
        ).renderTemplate(),
        dataSourceName: "DeploymentsTable", // DataSource name
      }
    );

    resolver.applyRemovalPolicy(RemovalPolicy.DESTROY);

Sample Simple VTL template for request and response below

{
    "version": "2017-02-28",
    "operation": "GetItem",
    "key": {
        "id": $util.dynamodb.toDynamoDBJson($ctx.args.id),
    }
}

#set($ctx.result = $util.parseJson($ctx.result))

$util.toJson($ctx.result)

custom Query

Appsync subscriptions for live sync :rocket:

Besides that amplify api also comes with auto-generated mutations and subscriptions which are very much helpful to update the data items in the react dom as and when the cfn deployments events are emitted with any necessary page reload or refresh.

appsync subscriptions

Notification banners built with figma components with variants :rowing_woman:

The above appsync notifications also powers these handy banners displayed to identify the distinct updates without refreshing the screen in the user browser with amplify studio it is seamless to bring these updates then and there

figma banner

ui banner

AWS Amplify Hosting ๐Ÿšตโ€โ™‚๏ธ

Finally hosting the frontend is the missing piece and glad to full fill this with CI/CD approach using amplify hosting.

backend hosted

front end hosted

Also this gave really cool features to lock and secure my website with authentication for endpoint and synthetic canary to monitor the endpoint.

hosting settings

Branch level and global access control for hosting

This would definitely help me secure my app as I release it to test and for my own use privately as well.

access control

Synthetic Canaries for continuous monitoring

canary

canary 1

canary screenshot

Previews for pull requests to main branch

main branch preview pull requests

Conclusion ๐Ÿšฃโ€โ™€๏ธ

Due to time constraints, and steep learning sessions, I have to complete regards to Figma and amplify cli and studio, in a matter of few weekends to get my first amplify project. Hope you like it and I am open to reviews and suggestions. And I also hope I could explore new features and implement them to make this more useful in the future.

And I am still cleaning up the sandbox account, once it is ready I will be to share it for someone to inspect and check it in action. Or feel free to comment or connect with me to help you with the necessary access for the limited preview before I publish the working model.

For more details on that check out the below links to understand from where I sourced the data for cloud formation events.

๐Ÿ” Original project at ๐Ÿ”— Dev Post aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

๐Ÿ” Reposted project at ๐Ÿ”— dev to @aravindvcyber aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

Nonetheless, it is a great opportunity to learn and build and demo to everyone what I built using amplify studio.

๐ŸŽ‰ Thanks for supporting! ๐Ÿ™ and do follow and share this series for more such articles.

Would be great if you like to โ˜• Buy Me a Coffee, to help boost my efforts ๐Ÿ˜.

Buy Me a Coffee at ko-fi.com

๐Ÿ” Original post at ๐Ÿ”— Dev Post aws-cdk-101-projects-cdk-stackresourcedrift-events-forwarded-to-cool-slack-posts-event-forwarder

๐Ÿ” Reposted at ๐Ÿ”— dev to @aravindvcyber aws-builders/stacks-dash-a-console-for-monitoring-multi-account-cross-region-cloudformation-deployments-using-amplify-studio-1ik8

Did you find this article valuable?

Support Aravind V by becoming a sponsor. Any amount is appreciated!

ย