Environment setup with Docker<\/h2>\n
In my last tutorial<\/a>, I explained how to set up a Node & Express API connected to GridDB. I used a Docker container as this makes it really easy to spin up GridDB on any OS.<\/p>\n In this tutorial, we’ll be using that Docker boilerplate again so we can quickly get started. I recommend you refer to the previous tutorial<\/a> if you need to understand the setup further.<\/p>\n Unless you’ve followed the previous tutorial, clone this repo<\/a> on your computer:<\/p>\n Now, enter the newly-created directory and run Docker Compose to install and launch the virtual environment:<\/p>\n Once that has finished installing, you will have an Express server set up and running alongside a GridDB database instance.<\/p>\n Confirm everything is working by making a request to the Express server using Curl<\/p>\n You should see the “Hello, World” message in your console.<\/p>\n Our objective is to create an app that measures free memory on our server and makes that data available as an API.<\/p>\n We can easily get the amount of free memory on our server using the Node package Let’s begin by installing that:<\/p>\n We’ll now need to restart the Docker container, as we’ve added a new NPM dependency. Use Let’s use Node OS Utils to make it so our Express API returns the amount of free memory at the path server.js<\/em><\/p>\n You can test this using Curl in the terminal again. This time, you’ll see stats about system memory in the response.<\/p>\n If we’re going to create a monitor, we want to store time-series values in a database so they can be viewed over a particular interval.<\/p>\n To do this, we’ll take a reading every second after our server is activated. Let’s use server.js<\/em><\/p>\n How do we now get this data into our database? The first thing we’ll need to do is create a container.<\/p>\n To do this, we’ll define a schema for a GridDB time-series container called “FreeMemoryPercentage”. This will be a container with two columns – We’ll then call the So where do we put this code in our project? Let’s head over to our database file and create a function If the container is With that done, we’ll call and return this method from our db.js<\/em><\/p>\n We’ve now created a container for our data. How do we store free memory readings in it?<\/p>\n To do this, we’ll create another function in our database file, In the returned function, we’ll first create a timestamp – noting that we round it to the nearest second as seconds are the base interval – and we’ll put that timestamp, and whatever value is supplied to the function, into the container using db.js<\/em><\/p>\n We’re now going to return the inner function of db.js<\/em><\/p>\n Let’s now get access to our server container in our server file. To do this, we’ll declare a variable We’ll then call the server.js<\/em><\/p>\n Now, in our interval callback, we can use our API method The next step in creating our app is to return the latest readings. To do this, we’ll go back to our database file and create another function, In this function, we create a query for our GridDB container using the TQL syntax. This query will retrieve any entries where the timestamp is from the last 5 minutes.<\/p>\n We’ll then process each returned row and return the data in a single array.<\/p>\n This new method will be called from our db.js<\/em><\/p>\n Back in our server file, we can call this new method within our Express route handler and return the data.<\/p>\n server.js<\/em><\/p>\n To test this you can use Curl again. You should see a block of data that is ready to be consumed by a frontend app.<\/p>\n Let’s now begin creating a frontend app to visualize our free memory data.<\/p>\n We’ll first get our Express server to return an HTML document at the root path rather than a Hello, World message:<\/p>\n server.js<\/em><\/p>\n We’ll now need to create the index.html<\/em> file. You can use this basic HTML boilerplate.<\/p>\n index.html<\/em><\/p>\n I recommend you change your Now, as you make changes to index.html<\/em> in development, the server will automatically restart.<\/p>\n package.json<\/em><\/p>\n With that done, you’ll need to kill your Docker container and restart it again using Now, open your browser, and go to http:\/\/localhost:3000<\/em>. You should see the HTML document loaded though there won’t be any content yet.<\/p>\n We’re now going to add four scripts to our HTML document head: Moment.js, Vue.js, Chart.js, and VueChart.js. These are all required to display a time-series visualization.<\/p>\n index.html<\/em><\/p>\n In the document body, create a mount element for the Vue app with ID index.html<\/em><\/p>\n The first thing we’ll do in our app is retrieve the server monitor data in the index.html<\/em><\/p>\n We’ll now declare a new Vue component In the For more information about configuring VueChart.js, see the docs<\/a>.<\/p>\n index.html<\/em><\/p>\n\n$ git clone https:\/\/github.com\/anthonygore\/node-griddb-docker.git<\/code><\/pre>\n<\/div>\n\n$ cd node-griddb-docker\n$ docker-compose up --build<\/code><\/pre>\n<\/div>\n\n$ curl http:\/\/localhost:3000<\/code><\/pre>\n<\/div>\nGetting a reading of system memory<\/h2>\n
node-os-utils<\/code>.<\/p>\n\n$ npm i -S node-os-utils<\/code><\/pre>\n<\/div>\nCtrl+C<\/code> to kill the current container, and then run docker build --rm .<\/code> to re-build the image with the new dependency and remove the previous image. Then run docker-compose up<\/code> to restart the container.<\/p>\n\/data<\/code>.<\/p>\n\nconst osu = require('node-os-utils')\n\n...\n\napp.get('\/data', async (req, res) => {\n const info = await osu.mem.info()\n res.send(info);\n});<\/code><\/pre>\n<\/div>\n\n$ curl http:\/\/localhost:3000\/data\n\n# {\"totalMemMb\":1986.16,\"usedMemMb\":848.47,\"freeMemMb\":1137.69,\"usedMemPercentage\":42.72,\"freeMemPercentage\":57.28}<\/code><\/pre>\n<\/div>\nInterval memory readings<\/h2>\n
setInterval<\/code> for this. For now, we’ll just print those values to the console.<\/p>\n\nsetInterval(async() => {\n const info = await osu.mem.info();\n console.log(info.freeMemPercentage);\n}, 1000);<\/code><\/pre>\n<\/div>\nCreating a container<\/h2>\n
timestamp<\/code>, which will obviously be a TIMESTAMP<\/code> type, and freeMemPercentage<\/code>, which will be a DOUBLE<\/code> type.<\/p>\nputContainer<\/code> method of the store to create the container.<\/p>\n\nconst containerName =\"FreeMemoryPercentage\";\nconst schema = new griddb.ContainerInfo({\n name: containerName,\n columnInfoList: [\n [\"timestamp\", griddb.Type.TIMESTAMP],\n [\"freeMemPercentage\", griddb.Type.DOUBLE]\n ],\n type: griddb.ContainerType.TIME_SERIES,\n rowKey: true\n});\nconst container = await store.putContainer(schema, false);<\/code><\/pre>\n<\/div>\ncreateContainer<\/code>. Here, we’ll first attempt to retrieve the container (on the assumption it may already have been created) by calling store.getContainer<\/code>.<\/p>\nnull<\/code>, we’ll create it with the code above.<\/p>\nconnect<\/code> method. This allow us to pass in the store to the container and begin creating an API for database access as will be explained further below.<\/p>\n\nconst createContainer = async (store) => {\n let container = await store.getContainer(containerName);\n if (container === null) {\n try {\n const schema = new griddb.ContainerInfo({\n name: containerName,\n columnInfoList: [\n [\"timestamp\", griddb.Type.TIMESTAMP],\n [\"freeMemPercentage\", griddb.Type.DOUBLE]\n ],\n type: griddb.ContainerType.TIME_SERIES,\n rowKey: true\n });\n container = await store.putContainer(schema, false);\n } catch (err) {\n console.log(err);\n }\n }\n}\n\nconst connect = async () => {\n ...\n createContainer(store);\n};<\/code><\/pre>\n<\/div>\nStore memory readings in container<\/h2>\n
putRow<\/code>. We’ll make this a higher-order function so we can automatically pass in the container without the consumer having to worry about it.<\/p>\ncontainer.put<\/code>.<\/p>\n\nconst putRow = (container) => async (val) => {\n try {\n const p = 1000;\n const now = new Date();\n const time = new Date(Math.round(now.getTime() \/ p ) * p);\n await container.put([time, val]);\n } catch (err) {\n console.log(err);\n }\n}<\/code><\/pre>\n<\/div>\nputRow<\/code> from our createContainer<\/code> method so that we have a simple API that can be used by our main server file.<\/p>\n\nconst createContainer = async (store) => {\n ...\n return {\n putRow: putRow(container)\n }\n}<\/code><\/pre>\n<\/div>\nStoring memory readings from the Express server<\/h2>\n
container<\/code> but we won’t initialize it just yet.<\/p>\ndb.connect<\/code> method which returns our database API. Since it’s an async function, we’ll need to wait until the promise resolves, then assign the value to the variable we just created.<\/p>\n\nlet container;\ndb.connect().then(c => container = c);<\/code><\/pre>\n<\/div>\ncontainer.putRow<\/code> to store memory readings each second.<\/p>\n\nsetInterval(async() => {\n const info = await osu.mem.info();\n await container.putRow(info.freeMemPercentage);\n}, 1000);<\/code><\/pre>\n<\/div>\nGet latest readings<\/h2>\n
getLatestRows<\/code>. Again, this will be a higher-order function allowing us to pass the container instance neatly.<\/p>\ncreateContainer<\/code> method as well, providing another API.<\/p>\n\nconst getLatestRows = (container) => async () => {\n try {\n const query = container.query(\n \"select * where timestamp > TIMESTAMPADD(MINUTES, NOW(), -5)\"\n );\n const rowset = await query.fetch();\n const data = [];\n while (rowset.hasNext()) {\n data.push(rowset.next());\n }\n return data;\n } catch(err) {\n console.log(err);\n }\n}\n\nconst createContainer = async (store) => {\n ...\n return {\n putRow: putRow(container),\n getLatestRows: getLatestRows(container)\n }\n}<\/code><\/pre>\n<\/div>\n\napp.get('\/data', async (req, res) => {\n const rows = await container.getLatestRows();\n res.send(rows);\n});<\/code><\/pre>\n<\/div>\n\n$ curl http:\/\/localhost:3000\/data\n\n# [[\"2021-10-22T07:05:52.000Z\",57.53],...]<\/code><\/pre>\n<\/div>\nServing an index.html file<\/h2>\n
\nconst path = require('path');\n\n...\n\napp.get('\/', async (req, res) => {\n res.sendFile(path.join(__dirname, '\/index.html'));\n});<\/code><\/pre>\n<\/div>\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>Server Monitor<\/title>\n <meta name=\"description\" content=\"Node and GridDB server monitor\">\n<\/head>\n<body>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\nnpm start<\/code> script so that Nodemon will watch this HTML file as by default, it only watches JavaScript.<\/p>\n\n\"scripts\": {\n \"start\": \"nodemon server.js -e js,html\"\n},<\/code><\/pre>\n<\/div>\ndocker-compose up --build<\/code>.<\/p>\nCreating the frontend app<\/h2>\n
<head>\n ...\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.29.1\/moment.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.14\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.7.1\/Chart.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/vue-chartjs\/dist\/vue-chartjs.min.js\"><\/script>\n <\/head><\/code><\/pre>\n<\/div>\napp<\/code>. Then let’s create a script tag where we’ll declare our Vue app.<\/p>\n<div id=\"app\"><\/div>\n<script type=\"text\/javascript\">\n new Vue({\n el: \"#app\"\n });\n<\/script><\/code><\/pre>\n<\/div>\nmounted<\/code> lifecycle hook using fetch<\/code>. We’ll assign this to a data property serverData<\/code> after mapping it to objects of x<\/code> and y<\/code> values.<\/p>\n\nnew Vue({\n el: \"#app\",\n data: () => ({\n serverData: []\n }),\n async mounted () {\n const res = await fetch(\"\/data\");\n const data = await res.json();\n this.serverData = data.map(row => ({ x: row[0], y: row[1] }))\n }\n});<\/code><\/pre>\n<\/div>\nChart component<\/h2>\n
server-monitor<\/code>. This will extend the VueChartJs Line<\/code> component. Give this component a prop serverData<\/code> which we’ll pass in from the app shortly.<\/p>\nmounted<\/code> lifecycle hook we’ll create the config necessary for VueChart.js to display a nice visualization of our time-series data.<\/p>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2021\/10\/server_monitor.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"