Overview
The following information will help you get the client up and running. You can find more resources and information about the client project or open mct framework at
Table of Contents
Exercise Goals
The Primary objective of this project were to create a single page javascript application capable of preforming the following goals
| Goal # | Description |
|---|---|
| 1 | Query the given telemetry server for the last 15 minutes of historical telemetry data for either or both of the “pwr.v” and “pwr.c” telemetry points. The telemetry points should be selectable by the user. Changing the selected telemetry points should result in only data from the selected telemetry points being shown in the table. ie. data for a deselected telemetry point should be cleared from the table. |
| 2 | Display the returned telemetry data in an HTML table sorted ascending or descending by timestamp. The sort order should be selectable by the user. |
| 3 | Subscribe for new telemetry from the selected telemetry points and add rows to the table as new data becomes available, maintaining the selected sort order. When the user changes the selected telemetry point, you should only maintain subscriptions to selected telemetry points, and any telemetry data for a deselected telemetry point should be removed. |
Exercise Restrictions
Like all other coding exercises of this nature there are a few restrictions.
| Restriction # | Description |
|---|---|
| 1 | No External Dependencies |
| 2 | Use Native ES6, javascript, html, and css |
| 3 | Time Limit (4 hours) requested |
Technology List
While it is common for other technologies to sneak in when putting together these projects the main focus of this exercise were the following technologies
| Technology # | Focus |
|---|---|
| 1 | Websockets |
| 2 | ES6 Javascript |
| 3 | Rest API Methods |
Running the project Locally
There are two parts you will need to have in order to run this project.
- Download and run the openmct telementry server
- Downloading and Open the SPA
Downloading and running the openmct telementry server
First we will set up the openmct tutorial test server. You will need the following items installed on your machine in order to run the telementry server.
Requirements
- Node.js
- Git
Steps tl:dr;
- Clone and Install Open MCT
- Setup CORS headers
- start the server
Clone and Install Open MCT
Open command and navigate to the directory you want to clone the openmct tutorial repository in.
Run the following commands in order
git clone https://github.com/nasa/openmct-tutorial.git
cd openmct-tutorial
npm install
npm start
Leave your terminal open, as we will use it again shortly.
Setup CORS headers
Because we are creating and running our project on another port locally, we need to set up cross-origin-resource sharing rules to get around browser restrictions. We can accomplish this by adding a short snippet to our local openmct project.
Adding the snippet
Open the open mct project with your favorite IDE, and navigate to 'example-server/server.js'
Add the following code before var port = process.env.PORT || 8080
//example-server/server.js
app.use(function (req, res, next) {
console.log(req)
res.header("Access-Control-Allow-Origin", "http://localhost:5500"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
var port = process.env.PORT || 8080
2
3
4
5
6
7
8
9
10
set http://localhost:5500 to the port you will be opening the project package from, for instance if you are using vs code live server your default port would be http://localhost:5500
start the server
After saving and closing the modified server.js open your terminal and issue the following command to start the telemetry server.
npm run start
2
3
Congrats
The server is now running, while we wont need it for this project you can now navigate to http://localhost:8080 to see the sweet dashboard, and live data in the tutorial server.
Downloading and Open the SPA
There are many ways to open and run a local webserver for this sort of application, though due to the time constraints, and the primary focus placed elsewhere I choose to create my local server by using the visual studio Live Server Extension. To get up and running all you will need to do is install the extension, open the downloaded project from github and click the "Go Live" button that will appear at the bottom of your screen.