Forem: Vimalraj Selvam

Collect Failed Task Details in Ansible

Vimalraj Selvam — Mon, 05 Jul 2021 15:08:12 +0000

Recently, I've started working on Ansible to help our organization to roll out Node Exporter in a wide scale. I've had few struggles during this journey and I believe each struggles teaches something. Hence I'll be starting few series about my struggles and what I learnt from that.

I know, first of all a big apologies to all of you, my dear readers. It's been quite a while I didn't blog. Lately, I've got busy with my day-to-day work and seriously didn't get much time (reason below). I'll try to blog as much as possible. Hope you all doing well during this pandemic. Let's jump on to the topic

Today, I would like to share a very useful tip which I struggled a lot to find it online. This is about collecting some useful information about failures in ansible, so that it will help you to perform some post validation after the execution across many servers.

For an example, in my case, we had to roll out Node Exporter across 60k+ linux servers. And it was a nightmare if something failes and try to perform validation on why the failure was. Hence, we need some kind of reporting which can tell us some details about the server and the task which was failed with failure reason. I'm glad we nailed this as follows:

tasks:
  - block:
      # Intentionally failing here
      - name: Deploy Node Exporter
        fail:
          msg: Failed intentionally
    rescue:
      - name: Record failure
        lineinfile:
          path: /tmp/execution-failures.csv
          line: '"{{ inventory_hostname }}","{{ tower_job_id }}","{{ ansible_failed_task[''name''] }}","{{ ansible_failed_result[''module_stderr''] }}","{{ ansible_failed_result[''stdout''] }}"'
          create: yes
        delegate_to: centralized.host.com

The trick here is block...rescue and in rescue capture some required key details for the validation. Here I'm capturing the following details:

inventory_hostname: The destination host where the playbook is executed.
tower_job_id: The ansible tower job id. Recording this in case if any ansible issues found, we'll report to ansible team with this detail for them to debug and help.
ansible_failed_task['name']: Name of the failed task.
ansible_failed_result['module_stderr']: Captures the stderr of the failed task. This is more important for us because this gives us details about the failure reason.
ansible_failed_result['stdout']: This will be empty in most of the cases as the failed task will contain only stderr, not stdout. Keeping this for any unexpected.

Hope this helps. Shoot me with your questions here: https://github.com/email2vimalraj/site/issues/new

Originally published here: https://vimalselvam.com/post/ansible-collect-failed-tasks/

Capturing Username in Process Exporter with Prometheus

Vimalraj Selvam — Sun, 06 Dec 2020 22:31:19 +0000

Originally posted in: https://vimalselvam.com/post/prometheus-capturing-username-in-process-exporter/

Recently, stumbled upon a task where we wanted to capture the username of the process with the process exporter and store as a label in prometheus. There is no clear documentation around this on how to accomplish. So I thought let's share what I've learnt which I believe might be useful for someone.

Let's see how to capture the username in the process exporter.

Pre-requisite

You should be having prometheus running. In case you want to know how to setup, head here.
To setup the process exporter, refer here.

Process Exporter Config

To make process exporter mine a required process, I've the following sample config yaml file:

process_names:
  - name: "{{.ExeBase}}"
    cmdline:
      - crond'

The ExeBase is the basename of the executable which I wanted to capture. Now I would like to know the user who is executing the crond process. So I'll change the yaml to:

process_names:
  - name: "{{.ExeBase}};{{.Username}}"
    cmdline:
      - crond'

Notice that I've added ;{{.Username}}, the Username captures the user of the given process, here it is crond. The reason that I've added semicolon(;) is because I'll use the metric_relabel_configs in prometheus scrape config to split and store username as a separate label.

I've stored the file as proc-config.yaml and will start the process exporter as:

> process-exporter -config.path proc-config.yaml

For now, if you scrape the process exporter (http://localhost:9256/metrics), you will get the metrics in the following format:

namedprocess_namegroup_num_procs{groupname='crond;vimalraj'} 1

Here, the groupname says the crond process and triggered by user vimalraj.

Now, let's look at how we configure prometheus to store the user as a separate label.

Prometheus Config

Open up the prometheus.yml file and add the new scrape target as follows:

scrape_configs:
  - job_name: 'process_exporter'
    scrape_interval: 15s
    static_configs:
      - targets: 
        - localhost:9256
    metric_relabel_configs:
      - source_labels: ["groupname"]  # the label which needs to be filtered
        regex: "(.*);(.*)"            # the regex to find the expected match
        target_label: "processname"   # add a new label
        replacement: "$1"             # substitute with the 1st match
      - source_labels: ["groupname"]  # the label which needs to be filtered
        regex: "(.*);(.*)"            # the regex to find the expected match
        target_label: "username"      # add a new label
        replacement: "$2"             # substitute with the 2nd match

To know more about the metric_relabel_configs, refer prometheus documentation here.

Now reload the config and query for namedprocess_namegroup_num_procs. You should be seeing the following result:

namedprocess_namegroup_num_procs{groupname='crond;vimalraj', processname='crond', username='vimalraj'} 1

Please note that I kept groupname as it is, in case you want to remove, you can use action to drop that label.

In case you found this post useful, please do share it. For any questions, feel free to open an issue here to discuss further.

Cancel / Unsubscribe GraphQL Subscription

Vimalraj Selvam — Fri, 24 Jul 2020 07:00:50 +0000

GraphQL is one of my favourite topic to work with. At my work, as a Site Reliability Engineer, I often work on Visualisation products and the backend is powered with GraphQL. When it comes to Visualisation, the real-time data is the user need and the GraphQL has something called Subscription which works on top of Web Sockets protocol.

A subscription is needed when you wanted to publish the data set to all the clients who subscribed / expressed their wish to receive updates. Here the client won't be polling for the data, rather server will be sending the data to all the subscribed clients whenever new data available.

Problem Statement

We use GraphQL subscriptions for the real-time metrics data and show some graphs. When a user clicks on any graph panel, the modal will open up to perform slices and dices on the data. So the requirement is to cancel the subscription (aka. unsubscribe) when a user opens the modal. And re-subscribe when user closes the modal. Interesting, isn't it? Let's see how we can do this.

Creating a GraphQL Subscription server

To demonstrate, I'm going to create a simple GraphQL Subscription server.

Currently I'm on a directory called, graphql-subscription-demo, and I'm going to create a new directory here and setup the required npm packages:

mkdir server
cd server
npm init -y
npm i -S graphql express apollo-server apollo-server-express
touch index.js

And in index.js I'm going to create the following code snippet.

const http = require('http')
const { ApolloServer, PubSub, gql } = require('apollo-server-express')
const express = require('express')

// Required constants
const COUNT_INCREMENTED = 'COUNT_INCREMENTED'
const PORT = 4000

// Express app instance
const app = express()

// Create pubsub instance
const pubsub = new PubSub()

// initiate counter
let count = 1

// Keep incrementing the counter for every 3 seconds
const interval = setInterval(() => {
  count += 1
    // Publish the incremented counter value
  pubsub.publish(COUNT_INCREMENTED, { count })
}, 3000)

const typeDefs = gql`
  type Query {
    """
    Get the current counter value
    """
    count: Int
  }

  type Subscription {
    """
    Publish the count value whenever it increments
    """
    count: Int
  }
`

// GraphQL Resolver
const resolvers = {
  Query: {
    count: () => count
  },

  Subscription: {
    count: {
      // This is where we listen to an event called COUNT_INCREMENTED and publish when an event triggered
      subscribe: () => pubsub.asyncIterator([COUNT_INCREMENTED])
    }
  }
}

// Create apollo server
const server = new ApolloServer({ typeDefs, resolvers })
server.applyMiddleware({ app })

const httpServer = http.createServer(app)
server.installSubscriptionHandlers(httpServer)

// Start the http and websocket server on our port
httpServer.listen(PORT, () => {
  console.log(`Server on http://localhost:${PORT}${server.graphqlPath}`)
  console.log(
    `Subscriptions on ws://localhost:${PORT}${server.subscriptionsPath}`
  )
})

In this snippet, I do the following things:

Importing the required packages
Defining constants:
- COUNT_INCREMENTED - A string constant to use it as a identifier for our event
- PORT - A port number where our server will run
Creating an instance for the express app and the PubSub to manage our GraphQL subscriptions
Initialising a counter variable with value as 1
Incrementing the counter by 1 for every 3 seconds and also publishing the incremented value using our constant identifier
Defined a GraphQL document with Query to get the current count value and Subscription to publish the count value whenever it is incremented
Defined a GraphQL resolver
- In subscribe, we listen to a variable called COUNT_INCREMENTED ****and publishes to subscribed clients if the payload changes
Creating a Apollo server and HTTP server with required subscription handlers
Starting the HTTP and Websocket server on the defined port

Once you have the above code in place, just run:

node index.js

This will start the server and you can access the GraphQL playground from: http://localhost:4000/graphql. You can play around with the query and subscription here before starting our real client.

Creating a GraphQL Client application

I'm going to use React to create a GraphQL client application. To create a react app and install required packages (remember I was inside server directory),

cd ..
npx create-react-app client --use-npm
cd client
npm i -S graphql @apollo/client subscriptions-transport-ws
npm start

P.S: I'm using the recently announced Apollo Client @ 3.x version. Apart from the package name, the implementation holds same even for Apollo Client @ 2.x version.

Now straightaway go to App.js and remove everything. You follow me from this onwards:

First import the required packages:

import React from 'react'
// I'm a big fan of Ant Design, but you can use any design system
import { Layout, Row, Col, Modal } from 'antd'
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  gql,
  useQuery,
  HttpLink,
  split
} from '@apollo/client'
import { WebSocketLink } from '@apollo/client/link/ws'
import { getMainDefinition } from '@apollo/client/utilities'

Create a http link to send our Query / Mutation using the HTTP Protocol:

const httpLink = new HttpLink({
    // Server GraphQL endpoint
  uri: 'http://localhost:4000/graphql'
})

Next, create a Websocket link for our subscription handler:

const subscriptionLink = new WebSocketLink({
    // Server GraphQL Subscription endpoint
  uri: 'ws://localhost:4000/graphql',
  options: {
        // Reconnect in case client disconnects and connects again
    reconnect: true
  }
})

Now merge both the links and create a Apollo client out of the merged link:

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query)
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    )
  },
  subscriptionLink,
  httpLink
)

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache() // In memory cache
})

Now we define our Query and Subscription:

const COUNT_QUERY = gql`
  query CountQuery {
    count
  }
`

const COUNT_SUBSCRIPTION = gql`
  subscription CountSubscription {
    count
  }
`

Let's define our App functional component:

function App() {
  return (
    <ApolloProvider client={client}>
      <Layout style={{ height: '100vh' }}>
        <Layout.Content
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Row>
            <Col span={24} style={{ textAlign: 'center', padding: '16px 0' }}>
              <Counter />
            </Col>
          </Row>
        </Layout.Content>
      </Layout>
    </ApolloProvider>
  )
}

export default App

Here we're wrapping everything with ApolloProvider and initiating with the client. It is the React's context where any changes to the client object will re-render the child components. And also this is very much required, because we will be using the Apollo Client's hooks in the child components.

If you notice, we have a missing component <Counter />, let's define that. Create a function called Counter and put the following code:

function Counter() {
  const { loading, error, data } = useQuery(COUNT_QUERY)
  const [modalVisible, setModalVisible] = React.useState(false)

  return (
    <>
      <h1
        style={{ fontSize: 54, cursor: 'pointer' }}
        onClick={() => setModalVisible(!modalVisible)}
      >
        {loading ? 'Loading' : error ? 'Error :(' : data.count}
      </h1>
      <Modal
        title="Drill down"
        visible={modalVisible}
        onOk={() => setModalVisible(false)}
        onCancel={() => setModalVisible(false)}
      >
        <p>Drill down here</p>
      </Modal>
    </>
  )
}

In this component, we trigger a GraphQL query COUNT_QUERY at the time of rendering this component and show the current count value using data.count. If user clicks on the count, it will open up the modal and show some dummy content.

Now head to your browser and see http://localhost:3000. If you notice, even though the count is incremented at the server side, the client is not updating. Reason is we haven't hooked up the subscription part yet. Let's do that now!

Add subscribeToMore field in the useQuery hook as follows. The reason I'm using subscribeToMore rather than useSubscription hook is because I want to show the current value once the user loads the page and doesn't really want to show the loading indicator for the 3 seconds when the subscription has not published the new value yet.

const { loading, error, data, subscribeToMore } = useQuery(COUNT_QUERY)

Then define the useEffect to initiate the subscription during the component rendering. To know more about useEffect, read this.

React.useEffect(() => {
  subscribeToMore({
    document: COUNT_SUBSCRIPTION,
    updateQuery: (prev, { subscriptionData }) => {
      if (!subscriptionData.data) return prev

      return {
        count: subscriptionData.data.count
      }
    }
  })
}, [subscribeToMore])

Here I'm calling a subscribeToMore method with the COUNT_SUBSCRIPTION graphQL document and client gets subscribed to the stream. Please note that I've added a useEffect dependence for subscribeToMore object.

Now look in your browser and you can see the count gets updated every 3 seconds whenever server increments. Voila! Our subscription works.

Small tip: Open Developer console, and head on to Network tab, select WS to see the websocket messages, you should see something like this:

So you can see that the payload is continuously sent to client by the server. Now we're going to see the real problem. Just click on the counter, and you see the modal and the subscription still receiving data. This is where we have to unsubscribe.

Let's modify our useEffect method little bit as follows:

React.useEffect(() => {
  let unsubscribe

    // If modal is not visible, run the subscription and store the identifier in the `unsubscribe` variable
  if (!modalVisible) {
    unsubscribe = subscribeToMore({
      document: COUNT_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev

        return {
          count: subscriptionData.data.count
        }
      }
    })
  }

    // Unsubscribe here
  if (unsubscribe) return () => unsubscribe()
}, [modalVisible, subscribeToMore])

So if you look at this we're subscribing to event when the modal is not visible and store that in a variable called unsubscribe. In the clean up method of useEffect, we just call the unsubscribe to cancel our graphql subscription. Also, remember to add modalVisible as another dependency to our hook. This does the magic. Let's head on to our browser to validate this.

In the browser, when the real time update is happening and your Developer console is opened, just click on the count value and let the modal open. And notice the messages and you see a stop type which means cancel the GraphQL subscription, the client won't be receiving any updates from the server until we close the modal.

The entire running code is available in Github: https://github.com/email2vimalraj/graphql-subscription-demo (If you have any questions, open up an issue here and also make sure you star the repo if you liked this article).

Last year I talked about Scaling GraphQL Subscriptions @ GraphQL Conf happened in Berlin (in case you're interested to watch): https://youtu.be/k4rX8wUYjmU

References

https://graphql.org/

https://www.apollographql.com/docs/

https://ant.design/docs/react/introduce

Originally published in my blog

Asynchronous processing of data in Expressjs

Vimalraj Selvam — Thu, 23 Apr 2020 06:57:39 +0000

I've an Express route which receives some data and process it, then insert into mongo (using mongoose).

This is working well if I return a response after the following steps are done:

Receive request
Process the request data
Insert the processed data into Mongo
Return 204 response

But client will be calling this API concurrently for millions of records. Hence the requirement is not to block the client for processing the data. Hence I made a small change in the code:

Receive request
Return response immediately with 204
Process the requested data
Insert the processed data into Mongo

The above is working fine for the first few requests (say 1000s), after that client is getting socket exception: connection reset peer error. I guess it is because server is blocking the connection as the port is not free and at some point of time, I notice my nodejs process is throwing out Out of memory error.

Sample code is as follows:

async function enqueue(data) {
    // 1. Process the data
    // 2. Insert the data in mongo
}

async function expressController(request, response) {
    logger.info('received request')
    response.status(204).send()

    try {
        await enqueue(request.body)
    } catch (err) {
        throw new Error(err)
    }
}

Am I doing something wrong here?

Codemod with jscodeshift help needed

Vimalraj Selvam — Mon, 02 Sep 2019 15:38:21 +0000

I'm trying to write a small codemod to refactor some of the code. Consider I've somethihng like this:

import { mod1, mod2, mod3 } from 'package1'
import localMod from 'package2'

and I wanted to change this to:

import { mod1, mod3 } from 'package1'
import * as mod2 from 'new-package'
import localMod from 'package2'

As a first step, I'm trying to remove mod2 from the 1st line of import which I did successfully, but I'm not able to remove the comma after mod1.

My code snippet so far look like this:

Please help.

Introducing Test GraphQL Java

Vimalraj Selvam — Sat, 01 Jun 2019 23:21:04 +0000

I was recently asked by one of my friend how can we test the GraphQL APIs in Java. He is currently exploring Karate's capability, however, he doesn’t want to use Karate just for this as they’re already using TestNG based framework. And there is a graphql-java library which let’s you to implement GraphQL in Java and test, but using Spring Boot. My main goal is not to introduce Spring Boot just for the sake of testing the GraphQL API. I wanted to keep it simple!

Goals were:

Should not bring various dependencies (this library currently depends only on jackson).
Should just turn the graphql file into request payload string.
Should be able to use any HTTP client library.
Should be able to use any Java testing framework.

That is how this library born. Let’s directly jump in how can we use it.

Getting Started

Adding maven dependency:

<dependency>
    <groupId>com.vimalselvam</groupId>
    <artifactId>test-graphql-java</artifactId>
    <version>1.0.0</version>
</dependency>

I don’t use Gradle, but it should be straight forward to add this library as a Gradle dependency.

Let’s test the Pokemon GraphQL API. We’re going to test the following query:

query pokemon {
  pokemon(name: "Pikachu") {
    name
  }
}

We’ll trigger this query and assert the successful response code and the response body where the name key contains Pikachu.

Take the above query and put it into a pokemon.graphql under src/test/resources/graphql/ in your maven project directory.

We can load this file in our test using either of the following two ways:

using InputStream:

InputStream iStream = getClass().getResourceAsStream("/graphql/pokemon.graphql");

using File:

File file = new File("src/test/resources/graphql/pokemon.graphql");

For this example, I’m using the 2nd approach, File.

Once you read the file, just pass it to GraphqlTemplate class to parse as follows:

String graphqlPayload = GraphqlTemplate.parseGraphql(file, null);

The 2nd argument is variables which is used to parameterize your GraphQL query. I’ll show you how to use that in a short while, till that let’s keep it null.

That’s it! You now have the graphql query string which you can directly pass as a request payload on your preferred HTTP client library.

Let’s talk about variables. The GraphQL has a feature to set some variables and pass those variables at run time during execution of query. For that, we’ll modify our Pokemon query.

Open the pokemon.graphql file and change it as:

query pokemon($name:String!) {
  pokemon(name: $name) {
    name
  }
}

Here $name is the variable and it accepts only String. The ! operator denotes that this is mandatory variable. Let’s see how we can handle this variables scenario in our code.

Before converting the GraphQL query to the plain string, let’s create the variables:

ObjectNode variables = new ObjectMapper().createObjectNode();
variables.put("name", "Pikachu");

Here we’re using com.fasterxml.jackson.databind.node.ObjectNode to create variables. This ObjectNode can be passed as 2nd parameter in our GraphqlTemplate class.

String graphqlPayload = GraphqlTemplate.parseGraphql(file, variables);

That simple it is!

I’ve open sourced this library and can be found here: https://github.com/vimalrajselvam/test-graphql-java.

Contributions are welcome. If you have any thoughts or issues, kindly open an issue in the above github link.

Let’s see the full example code:

package com.vimalselvam.graphql;

import java.io.*;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;

import org.testng.Assert;
import org.testng.annotations.Test;

import okhttp3.*;

public class TestClass {
    private static final OkHttpClient client = new OkHttpClient();
    private final String graphqlUri = "https://graphql-pokemon.now.sh/graphql";

    private Response prepareResponse(String graphqlPayload) throws IOException {
        RequestBody body = RequestBody.create(MediaType.get("application/json; charset=utf-8"), graphqlPayload);
        Request request = new Request.Builder().url(graphqlUri).post(body).build();
        return client.newCall(request).execute();
    }

    @Test
    public void testGraphqlWithInputStream() throws IOException {
        // Read a graphql file as an input stream
        InputStream iStream = TestClass.class.getResourceAsStream("/graphql/pokemon.graphql");

        // Create a variables to pass to the graphql query
        ObjectNode variables = new ObjectMapper().createObjectNode();
        variables.put("name", "Pikachu");

        // Now parse the graphql file to a request payload string
        String graphqlPayload = GraphqlTemplate.parseGraphql(iStream, variables);

        // Build and trigger the request
        Response response = prepareResponse(graphqlPayload);

        Assert.assertEquals(response.code(), 200, "Response Code Assertion");

        String jsonData = response.body().string();
        JsonNode jsonNode = new ObjectMapper().readTree(jsonData);
        Assert.assertEquals(jsonNode.get("data").get("pokemon").get("name").asText(), "Pikachu");
    }

    @Test
    public void testGraphqlWithFile() throws IOException {
        // Read a graphql file
        File file = new File("src/test/resources/graphql/pokemon.graphql");

        // Create a variables to pass to the graphql query
        ObjectNode variables = new ObjectMapper().createObjectNode();
        variables.put("name", "Pikachu");

        // Now parse the graphql file to a request payload string
        String graphqlPayload = GraphqlTemplate.parseGraphql(file, variables);

        // Build and trigger the request
        Response response = prepareResponse(graphqlPayload);

        Assert.assertEquals(response.code(), 200, "Response Code Assertion");

        String jsonData = response.body().string();
        JsonNode jsonNode = new ObjectMapper().readTree(jsonData);
        Assert.assertEquals(jsonNode.get("data").get("pokemon").get("name").asText(), "Pikachu");
    }

    @Test
    public void testGraphqlWithNoVariables() throws IOException {
        // Read a graphql file
        File file = new File("src/test/resources/graphql/pokemon-with-no-variable.graphql");

        // Now parse the graphql file to a request payload string
        String graphqlPayload = GraphqlTemplate.parseGraphql(file, null);

        // Build and trigger the request
        Response response = prepareResponse(graphqlPayload);

        Assert.assertEquals(response.code(), 200, "Response Code Assertion");

        String jsonData = response.body().string();
        JsonNode jsonNode = new ObjectMapper().readTree(jsonData);
        Assert.assertEquals(jsonNode.get("data").get("pokemon").get("name").asText(), "Pikachu");
    }
}

Test the Theme toggle app

Vimalraj Selvam — Wed, 29 May 2019 15:20:15 +0000

In my previous article we’ve built an app with Theme toggling capability. In this article, let’s test that feature.

I’ll be using react-testing-library and jest-dom as a partner library for the react-testing-library for leveraging custom DOM element matchers for Jest.

Let’s install both the libraries as dev dependencies.

npm install -D react-testing-library jest-dom

Since we used create-react-app, there is a nice article to get started with running tests in their doc site here. I highly recommend my readers to read through the doc once.

As mentioned here, let’s create a setupTests.js under the src directory.

import "react-testing-library/cleanup-after-each";
import "jest-dom/extend-expect";

The 1st import ensures the rendered component by react-testing-library is removed after every test ran.
The 2nd import let’s us use the jest-dom‘s custom matchers mainly we use it for assertion.

Before writing our tests, let’s add an attribute data-testid in the header and button component in our App.js component as like follows:

<header className="App-header" style={{ backgroundColor: theme.backgroundColor,
color: theme.color }} data-testid="header">
  <button type="button"
    onClick={toggle} style={{ backgroundColor: theme.backgroundColor, color: theme.color, outline: 'none' }} data-testid="toggle-theme-btn" > 
...

We’ll be using the data-testid attribute to find the elements in our tests.

Now let’s create a new test. Go and delete everything on App.test.js and have the following test:

import React from "react";
import { render } from "react-testing-library";
import App from "./App";

test("renders with light mode default", () => {
  const { getByTestId } = render(<App />);
  expect(getByTestId("toggle-theme-btn")).toBeInTheDocument();
  expect(getByTestId("header")).toHaveStyle("background-color: white");
});

In our 1st line, we render our App component and then we assert whether there is a Toggle theme button and the default background color is white using the respective data-testids.

Let’s run the test and see whether the run is success.

npm run test

Hoorah!!! The test ran successfully!

Now, let’s add another test to validate whether clicking on the toggle button changes the background color.

test("toggles the theme", () => {
  const { getByTestId } = render(<App />);
  const toggleBtn = getByTestId("toggle-theme-btn");
  fireEvent.click(toggleBtn);
  expect(getByTestId("header")).toHaveStyle("background-color: black");
  fireEvent.click(toggleBtn);
  expect(getByTestId("header")).toHaveStyle("background-color: white");
});

Make sure you import fireEvent from the react-testing-library.

Let’s see the run result. The newly added test failed . Why?

✕ toggles the theme (29ms)

  ● toggles the theme

    expect(element).toHaveStyle()

    - Expected

    - background-color: black;
    + background-color: white;

      13 | const toggleBtn = getByTestId('toggle-theme-btn')
      14 | fireEvent.click(toggleBtn)
    > 15 | expect(getByTestId('header')).toHaveStyle('background-color: black')
         | ^
      16 | fireEvent.click(toggleBtn)
      17 | expect(getByTestId('header')).toHaveStyle('background-color: white')
      18 | })

      at Object.toHaveStyle (src/App.test.js:15:33)

The execution stack trace says that the background-color is still white. That means after firing a click event, the localStorage‘s setItem method is not properly triggered.

To make this work, we should mock our localStorage since the test doesn’t execute on the real browser and don’t have the Storage. Now open up your setupTests.js and append the following lines:

let store = {};

// Mock the `localStorage.getItem` method to return the value stored in the given key
jest.spyOn(Storage.prototype, "getItem").mockImplementation(key => {
  return store[key];
});

// Mock the `localStorage.setItem` method to insert a given value into the given key
jest.spyOn(Storage.prototype, "setItem").mockImplementation((key, value) => {
  return (store[key] = value + "");
});

// Mock the `localStorage.clear` method to clear the `store`
jest.spyOn(Storage.prototype, "clear").mockImplementation(() => {
  store = {};
});

Now let’s run our test and see the results. Still failing for the same reason. Let’s add some debug points with our famous console.log statements in our theme-context.js.

I have added the following statement in our toggle method within our ThemeProvider function:

console.log(">>> clicked");

Let’s see the run results and notice whether that statement is printed. Surprisingly, not!

The reason is our App component in the test is not wrapped with ThemeProvider. We should wrap it. Let’s do that.

Once you wrapped, your test must pass and the added console.log statement should print twice!!!

Great work. But do we need to wrap the App component with ThemeProvider in every single test. I heard you saying that’s a pain. But we have a solution for that too.

So I’ve asked this question to Kent in twitter here. And I got immediate responses.

Yep. I recommend wrapping, but moving works too. Learn more about wrapping without the pain here: https://testing-library.com/docs/react-testing-library/setup#custom-render

So as per the above, let’s create a test utility file to define our own render method. Create a file called src/test-util.js and add the following:

import React from "react";
import { render } from "react-testing-library";
import { ThemeProvider } from "./theme-context";

const AllMyProviders = ({ children }) => {
  return <ThemeProvider>{children}</ThemeProvider>;
};

const MyCustomRender = (component, options) =>
  render(component, { wrapper: AllMyProviders, ...options });

// re-export everything from the `react-testing-library`
export * from "react-testing-library";

// export our custom render method
export { MyCustomRender as render };

Let’s go to our test and make few changes:

Replace

import { render, fireEvent } from "react-testing-library";

with

import { render, fireEvent } from "./test-utils";

And then, remove the ThemeProvider wrapping for the App component in all the tests. Now execute your test and see.

The tests should run fine. That’s it for today. If you found this post useful, please hit like and share it.

Toggle theme using React Hooks

Vimalraj Selvam — Tue, 28 May 2019 15:49:29 +0000

Originally published in my blog: http://www.vimalselvam.com

I was trying to implement the Dark mode to one of the application which I was working. Most of the examples available in Internet uses either styled-components or any other css-in-js concepts. The application which I’m working on doesn’t have the css-in-js yet. So I want to keep it very simple. Hence, the very first thing that came up is to use React’s Context API. Why Context? As per the react documentation:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Yes, the definition is very self explanatory. We don’t have to pass the props to every component and down the component tree. Think of this maintains a global state.

To create a context object, we should use React’s createContext method and pass the default value to it (i.e., initial state).

const ThemeContext = React.createContext(initialState)

The ThemeContext object contains a ThemeContext.Provider component, so that the children component can consume the changes / state.

We’ve pretty much covered the basic of what we need to do further. Let’s build the application which can toggle between light and dark mode. Please note that once I toggle to a particular mode, next time I visit the application, it should retain the same mode. That is, if I toggled to Light mode, next time I visit, it should display the application in Light mode only. So we’ll be using the localStorage to persist the theme selected.

Create a react app:

create-react-app my-app
cd my-app
npm start

Open it in your favorite editor.

Create a file called theme-context.js under src directory.

const themes = {
  dark: {
    backgroundColor: 'black',
    color: 'white'
  },
  light: {
    backgroundColor: 'white',
    color: 'black'
  }
}

I’m keeping it simple. I’m maintaining two theme types dark and light with some simple background and foreground colors respectively. So if I toggled to dark mode, then I should my page’s backgound color is changed to black and foreground color to white and if light, the other way around.

Next, let me put in my initial state to put it in createContext.

const initialState = {
  dark: false,
  theme: themes.light,
  toggle: () => {}
}
const ThemeContext = React.createContext(initialState)

Then, let’s create a method which wraps all children with ThemeContext.Provider component and export this method and the actual ThemeContext object that we created just before.

function ThemeProvider({ children }) {
  const [dark, setDark] = React.useState(false) // Default theme is light

  // On mount, read the preferred theme from the persistence
  React.useEffect(() => {
    const isDark = localStorage.getItem('dark') === 'true'
    setDark(isDark)
  }, [dark])

  // To toggle between dark and light modes
  const toggle = () => {
    const isDark = !dark
    localStorage.setItem('dark', JSON.stringify(isDark))
    setDark(isDark)
  }

  // Filter the styles based on the theme selected
  const theme = dark ? themes.dark : themes.light

  return (
    <ThemeContext.Provider value={{theme, dark, toggle}}>
      {children}
    </ThemeContext.Provider>
  )
}

export { ThemeProvider }

So the final theme-context.js look like this:

import React from 'react'

const themes = {
  dark: {
    backgroundColor: 'black',
    color: 'white'
  },
  light: {
    backgroundColor: 'white',
    color: 'black'
  }
}

const initialState = {
  dark: false,
  theme: themes.light,
  toggle: () => {}
}
const ThemeContext = React.createContext(initialState)

function ThemeProvider({ children }) {
  const [dark, setDark] = React.useState(false) // Default theme is light

  // On mount, read the preferred theme from the persistence
  React.useEffect(() => {
    const isDark = localStorage.getItem('dark') === 'true'
    setDark(isDark)
  }, [dark])

  // To toggle between dark and light modes
  const toggle = () => {
    const isDark = !dark
    localStorage.setItem('dark', JSON.stringify(isDark))
    setDark(isDark)
  }

  const theme = dark ? themes.dark : themes.light

  return (
    <ThemeContext.Provider value={{ theme, dark, toggle }}>
      {children}
    </ThemeContext.Provider>
  )
}

export { ThemeProvider, ThemeContext }

Open index.js and wrap the App component with our ThemeProvider. So that the theme state can be shared with all the children available within App component.

The modified index.js look like:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
import { ThemeProvider } from './theme-context'

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister()

Let’s go to App.js and add the following before the return statement:

const { theme, toggle, dark } = React.useContext(ThemeContext)

The useContext is the React’s Hook api which is equivalent to ThemeContext.Consumer component. Read more about it here.

Then add a button before the <img> tag to toggle the theme:

<button
  type="button"
  onClick={toggle}
  style={{
    backgroundColor: theme.backgroundColor,
    color: theme.color,
    outline: 'none'
  }}
>
  Toggle to {!dark ? 'Dark' : 'Light'} theme
</button>

Now in the header tag, add the following attribute:

style={{ backgroundColor: theme.backgroundColor, color: theme.color }}

Take a look at your application (mostly it should be running at http://localhost:3000). You can see the background color changed to white and the foreground color in black.

Click on the button to toggle between Dark and Light mode. You can close and re-open the tab or open a new tab of the same application, the theme mode is persisted.

The entire code of App.js:

import React from 'react'
import logo from './logo.svg'
import './App.css'
import { ThemeContext } from './theme-context'

function App() {
  const { theme, toggle, dark } = React.useContext(ThemeContext)

  return (
    <div className="App">
      <header
        className="App-header"
        style={{ backgroundColor: theme.backgroundColor, color: theme.color }}
      >
        <button
          type="button"
          onClick={toggle}
          style={{
            backgroundColor: theme.backgroundColor,
            color: theme.color,
            outline: 'none'
          }}
        >
          Toggle to {!dark ? 'Dark' : 'Light'} theme
        </button>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Demo:

Form in Modal using React hooks – mistakes and lesson learnt

Vimalraj Selvam — Mon, 08 Apr 2019 14:28:50 +0000

Recently, I’ve stumbled upon a problem while building a Form in the Modal box. I would like to share that experience and believe it might help.

Modal and Portals

I wanted to create a modal which can show some content or the form. The best way to create a modal in React is to use Portal. Because, the modal should always be a individual component outside the DOM hierarchy. The Portal let you do this. Kindly read through the react’s documentation to know more about the Portal and the benefits. Additionally, this post might help you to understand better.

So, we know what is Portal! Let’s build our Modal component and render as a Portal. I’m using create-react-app CLI tool to generate my react project. Before creating the portal, let’s make sure our ./public/index.html has the outer DOM hierarchy.

Before:

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

After:

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

I’ve added another div with the value of id attribute as modal-root. That is where we render all our modals.

Let’s create our Modal component with Portal support. I’ve created this under components/modal/index.js

import React, { useEffect } from "react";
import { createPortal } from "react-dom";
import { StyledModal } from "./style";

// Creates a portal outside the DOM hierarchy
function Portal({ children }) {
  const modalRoot = document.getElementById("modal-root"); // A div with id=modal-root in the index.html
  const element = document.createElement("div"); // Create a div element which will be mounted within modal-root

  // useEffect bible: https://overreacted.io/a-complete-guide-to-useeffect/
  useEffect(() => {
    modalRoot.appendChild(element);

    // cleanup method to remove the appended child
    return function cleanup() {
      modalRoot.removeChild(element);
    };
  });

  return createPortal(children, element);
}

// A modal component which will be used by other components / pages
function Modal({ children, toggle, open }) {
  return (
    <Portal>
      {open && (
        <StyledModal.ModalWrapper onClick={toggle}>
          <StyledModal.ModalBody onClick={event => event.stopPropagation()}>
            <StyledModal.CloseButton onClick={toggle}>
              &times;
            </StyledModal.CloseButton>
            {children}
          </StyledModal.ModalBody>
        </StyledModal.ModalWrapper>
      )}
    </Portal>
  );
}

export default Modal;

Here, the Portal method creates the portal and uses the useEffect hook to append the div element to the modal-root element and removes while unmounting. Here is the problem I faced, but wait till we uncover the issue.

The StyledModal is the styled component and the code is below (created under /components/modal/style.js):

import styled from "styled-components";

const ModalWrapper = styled.div`
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
`;

const ModalBody = styled.div`
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 30%;
`;

const CloseButton = styled.span`
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;

  &:hover,
  &:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
`;

export const StyledModal = {
  ModalWrapper,
  ModalBody,
  CloseButton
};

If you notice our Modal component, there are 3 props:

open: A boolean prop to decide whether to show the modal or not.
toggle: A method prop to toggle open from true to false or vice-versa.
children: A children component to render within modal. This is usually a modal content.

To toggle the Modal's state, let’s create a new custom hook and call it as useToggle. I’m creating useToggle.js in the src directory:

import { useState, useCallback } from "react";

// Toggles between true or false
function useToggle(initialValue = false) {
  const [toggle, setToggle] = useState(initialValue);

  return [toggle, useCallback(() => setToggle(status => !status), [])];
}

export default useToggle;

In this user can toggle between true or false. This will be used in our App component.

Let’s rewrite our App component in the index.js:

function App() {
  const [open, setOpen] = useToggle(false);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button type="button" onClick={() => setOpen()}>
        Open Modal
      </button>

      {open && (
        <Modal open={open} toggle={setOpen}>
          <h1>Hello Modal</h1>
        </Modal>
      )}
    </div>
  );
}

The useToggle hook gives the state of toggle through a parameter called open and the setOpen let you to toggle the value of the open. The rest of the code is self-explanatory.

When you run, you don’t see any problem. Great! We’ve built the Modal which shows the heading. Let’s extend it and add a form to our modal component with one input box.

I’ve modified my App component with an input element under the form.

function App() {
  const [open, setOpen] = useToggle(false);
  const [username, setUsername] = useState("");

  const onChangeUsername = e => setUsername(e.target.value);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button type="button" onClick={() => setOpen()}>
        Open Modal
      </button>

      {open && (
        <Modal open={open} toggle={setOpen}>
          <h1>Hello Modal</h1>

          <form onSubmit={e => e.preventDefault()}>
            <input
              type="text"
              name="username"
              value={username}
              onChange={e => onChangeUsername(e)}
            />
          </form>
        </Modal>
      )}
    </div>
  );
}

Now run the code and open up the modal. Try to enter more than one character in the displayed input box. Gosh, it is broken!!! For every character, the modal re-renders. Did you see that?

Okay, how to fix that now? I’ve spent ample of time to understand the issue. With some help of reddit users and useEffect bible, I’ve found an issue in our Portal component.

In our Portal component, we’ve to put the div element into the state and add modal-root and div as dependencies for the useEffect. So that it doesn’t re-render. Let’s do this:

function Portal({ children }) {
  const modalRoot = document.getElementById("modal-root"); // A div with id=modal-root in the index.html
  const [element] = useState(document.createElement("div")); // Create a div element which will be mounted within modal-root

  // useEffect bible: https://overreacted.io/a-complete-guide-to-useeffect/
  useEffect(() => {
    modalRoot.appendChild(element);

    // cleanup method to remove the appended child
    return function cleanup() {
      modalRoot.removeChild(element);
    };
  }, [modalRoot, element]);

  return createPortal(children, element);
}

Now run, and try the same which caused the problem. Voila! now it worked.

So always to remember, make sure useEffect has the dependencies set properly to avoid re-rendering.

The sample code sandbox can be found here:

I hope my experience could help someone. If you like this article, kindly hit the Like button and Share.

React Hooks: Lift up / pass down state using useContext and useReducer

Vimalraj Selvam — Wed, 13 Mar 2019 23:45:39 +0000

This post was published in my Blog.

I've ran into a situation where I had many child and sibling components trying to share the state between them. Earlier, I used prop to send a method to share the updated states between the components. At one point of time, the number of props kept increasing and I hated that.

Then came a context based approach to store the state in a global store and share it across. But even with the context API, you had to have a render props to consume the stored state from the global context. You will soon realise that your component becomes a nested, non-maintainable and haunting to look back.

Now this post talks about how we can leverage the latest React's hooks concepts to achieve the same with a cleaner code.

Let's first build the sample UI with some child & sibling components.

Let's UI

Head on to the CodeSandbox to quickly experiment. Make sure that you create a React code sandbox.

Replace the index.js with the following:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <h1>Lift up / Pass down state</h1>

      <UserList />
      <AddGenderToUser />
      <AddAgeToUser />
    </div>
  );
}

function UserList() {
  return (
    <ul>
      <li>
        <span>Vimalraj Selvam</span>
        <button type="button">Edit</button>
      </li>

      <li>
        <span>Bhuvaneswari Vimalraj</span>
        <button type="button">Edit</button>
      </li>
    </ul>
  );
}

function AddGenderToUser({ username }) {
  return (
    <div>
      <h2>Add gender to {username}</h2>
      <button type="button">Add Age</button>
    </div>
  );
}

function AddAgeToUser({ username }) {
  return (
    <div>
      <h2>Add Age to {username}</h2>
      <button type="button">Submit</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here I've 3 child components to parent App component: UserList, AddGenderToUser and AddAgeToUser.

This is very simple example. So don't think much about the usecase of this application.

I wanted to show the AddGenderToUser component only when the Edit button for a particular user is clicked and update the title of the of the component with selected username.

The same thing goes for AddAgeToUser component, upon clicking the Add Age button from the AddGenderToUser component.

First, let create a initial state of the application when no user is selected.

const initialState = {
  username: null,
  gender: null,
  age: null
};

Then create our reducer method to perform different actions. The actions which I can think of are:

Update the user
Set the gender for the current user
Set the age for the current user

Let's put this in a reducer function:

const UPDATE_USER = "UPDATE_USER";
const SET_GENDER = "SET_GENDER";
const SET_AGE = "SET_AGE";

function reducer(state, action) {
  switch (action.type) {
    case UPDATE_USER:
      return {
        username: action.username,
        gender: null,
        age: null
      };
    case SET_GENDER:
      return {
        username: state.username,
        gender: action.gender,
        age: null
      };
    case SET_AGE:
      return {
        username: state.username,
        gender: state.gender,
        age: action.age
      };
    default:
      return initialState;
  }
}

Our reducer method is very simple. It takes values from the action parameter and sets it to current state.

Now let's use this reducer function in our parent App component using useReducer hook from the react. So that we can consume the properties of reducer through the context.

Let's add the below line just before the return statement of App component.

const [user, dispatch] = React.useReducer(reducer, initialState);

Here user is the current state and dispatch is the method through which we trigger various actions defined on the reducer. To do that, we have to pass the dispatch method to down the line and also if any updates happens at the state object, the parent / other children of parent should also be aware about.

To achieve the above objective, we have to leverage context API from react to store our state and dispatch.

Let's initialize the context with the following line. This line should be before your App function (it really doesn't matter).

const MyContext = React.createContext(null);

I've initialized the context with null. We've to put our state and dispatch into the context. To do that, let's edit our App component by wrapping all the childrens with context's provider. The updated App component should look like below:

<MyContext.Provider value={{ user, dispatch }}>
  <UserList />
  {user.username && <AddGenderToUser />}
  {user.gender && <AddAgeToUser />}
</MyContext.Provider>

Great, now we can access the user state and the corresponding dispatch method down the line. Also, I've added a conditional rendering of few child elements based on the user state properties username & gender.

Let's update our UserList component to trigger the UPDATE_USER action upon clicking on Edit button for a particular user. To do that, we've to get the dispatch method from the context using useContext hook from React.

The rewritten UserList component:

function UserList() {
  const { dispatch } = useContext(MyContext);
  return (
    <ul>
      <li>
        <span>Vimalraj Selvam</span>
        <button
          type="button"
          onClick={() => dispatch({ type: UPDATE_USER, username: "Vimalraj" })}
        >
          Edit
        </button>
      </li>

      {/* Removed for brevity */}
    </ul>
  );
}

We're dispatching UPDATE_USER action and sending the username along with to update the property of the state. Now when you click on the Edit button for a particular user, you can see the AddGenderToUser component appears. But we still don't see the username in the appeared component. Let's fix that!

function AddGenderToUser() {
  const { user, dispatch } = useContext(MyContext);

  return (
    <div>
      <h2>Add gender to {user.username}</h2>
      <button
        type="button"
        onClick={() => dispatch({ type: SET_GENDER, gender: "??" })}
      >
        Add Age
      </button>
    </div>
  );
}

We're getting the current user state and dispatch method. We extract the username property to display in a title and trigger SET_GENDER action upon clicking on Add Age button.

You can repeat the same for the AddAgeToUser function as well.

The completed version is available in the code sandbox, please feel free to view here.

In the code sandbox, I've slightly updated the App component to show the details once the age is updated.

If this post helped you, please hit like and share.

Dynamic form fields using React with hooks

Vimalraj Selvam — Wed, 13 Mar 2019 14:11:12 +0000

I'm trying to create a form where I'm letting user to add as many number of input fields and also giving an ability to remove any particular added input field.

Adding a field works fine, however, the remove always removes the last field, not the one which I wanted to remove.

function App() {
  const [fields, setFields] = useState([{ value: null }]);

  function handleChange(i, event) {
    const values = [...fields];
    values[i].value = event.target.value;
    setFields(values);
  }

  function handleAdd() {
    const values = [...fields];
    values.push({ value: null });
    setFields(values);
  }

  function handleRemove(i) {
    const values = [...fields];
    values.splice(i, 1);
    setFields(values);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <button type="button" onClick={() => handleAdd()}>
        +
      </button>

      {fields.map((field, idx) => {
        return (
          <div key={`${field}-${idx}`}>
            <input
              type="text"
              placeholder="Enter text"
              onChange={e => handleChange(idx, e)}
            />
            <button type="button" onClick={() => handleRemove(idx)}>
              X
            </button>
          </div>
        );
      })}
    </div>
  );
}

The code sandbox is here: https://codesandbox.io/s/q555kp8jj?fontsize=14

The same thing works with Class component, here is the code sandbox: https://codesandbox.io/s/wznq443xl?fontsize=14

To reproduce the issue, follow these steps:

Add some text in the 1st input text field
Add a new text field by clicking on + button
Click on X button next to the 1st text field

You can see that the above step removes the 2nd field, not the 1st field.

When I inspect, the fields state is properly updating when I click remove button. Kindly help.

Update: The issue has been solved after making the input to controlled component. Thanks to a reddit user to find the issue. Refer more here

Python: Module Management

Vimalraj Selvam — Mon, 04 Mar 2019 10:19:34 +0000

Originally published in my blog.

This post is the continuation of my previous post: Python Package Management with Pipenv. I’ve package / dependency management in place, now I would like to setup the folder structure and get the scripts executed.

My problem statement is that I don’t have any main script which can call any modules to trigger. Time to time, I execute any scripts from any folder individually and I should not have any hard dependencies with any file. Let me show you an example which can easily explain my problem.

Consider the following folder structure I have in place now:

The __init__.py is the special file which helps python to treat the folders / files as module. For example, the __init__.py file in the common/ directory makes it as a module, so that user can import this as a module anywhere. And the content of the __init__.py file is just empty.

The content of my constant.py is very simple:

ENDPOINT = "http://vimalselvam.com"

and the start.py in the src/datastore/ directory:

import common.constant as constant

def run():
    print(constant.ENDPOINT)

if __name__ == " __main__":
    run()

Just by looking at the above code, you think there is no problem in executing, right? That was wrong. Let’s execute and see what’s happening:

~ pipenv run python src/datastore/start.py
Traceback (most recent call last):
  File "src/datastore/start.py", line 1, in <module>
    import common.constant as constant
ModuleNotFoundError: No module named 'common'

What happened! The problem is that Python doesn’t resolve the module dependencies if you execute the file which is not relative to the current directory. So you’ve to execute the start.py file as a module. Let’s do that:

~ pipenv run python -m src.datastore.start
http://vimalselvam.com

Gotcha! I’ve spent some time to figure this out and hence this as a post. If you found this useful, please like and share.