# NDP Dashboard
This module reperesent the FrontEnd for the NDP Project. this application can show statistics for visits and reading from distint type of data: Overview, Platforms, Articles, Authors, Sections and Apple News
This NDP module is developed using:
- Javascript
- NextJS
- Highcharts
This NDP Dashboard is hosted in AWS using the next technologies:
- Cloudfront
- Used to receive and route traffic into S3 Bucket
- S3
- Used to store the static application
- Route
- Used to configure the DNS for the PROD or NON-PROD environments
## Getting started
Set your working directory in <project>/dashboard/
### Configure environment
#### Create a copy from `.npmrc.example` into `.npmrc`
- Make sure to replace `authToken` in your `.npmrc` file with your own github auth token. (To create a token, refer to [these instructions](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line). Be sure to enable `read:packages` under Github Settings > Developer settings > Personal access tokens.)
#### Create a copy from `.env.example` into `.env`
- Make sure to replace `NEXT_PUBLIC_AUTH_REDIRECT_URI` in your `.env` file with your DNS that will be used for OKTA callback, if you're using for testing without mobile environment you should use: http://localhost:3000 if you will use for test with mobile envirnonment you can use one of the next values:
- https://dashboard-local-1.dev.archimedes.dowjones.io
- https://dashboard-local-2.dev.archimedes.dowjones.io
- https://dashboard-local-3.dev.archimedes.dowjones.io
- https://dashboard-local-4.dev.archimedes.dowjones.io
#### Install dashboard dependecies
```bash
yarn
```
## Run dashboard
The execution for the dashboard can be in 2 different environments, the firts one is for desktop only, means the dashboard can be tested in a browser locally, and the second one is a desktop + mobile environment, this mean that you can test your development also from any mobile device using a mobile browser in the device.
### Run dashboard for desktop testing
```bash
yarn dev
```
> Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Run dashboard for desktop + mobile testing
First, we need to execute a [workflow](https://github.com/newscorp-ghfb/wsj-archimedes/actions) in GitHub repository to update the DNS entry for the desired domain, execute the Workflow identified by `Update DNS for local mobile testing`.
In this example we're updating the subdomain `dashboard-local-1` with the value of the IP address of our development laptop `192.168.5.14`
Once the workflow is executed sucessfully, we need to perform a `ping` comand in our terminal to confirm that the public DNS is currently responding with the assigned value
After confirm that the DNS is updated (can take some minutes) then we can start our server, eg. if you agreed to use the subdomain #1 for testing
```bash
yarn dev-ssl
```
> Open [https://dashboard-local-1.dev.archimedes.dowjones.io](https://dashboard-local-1.dev.archimedes.dowjones.io) in your mobile browser to see the result.
You will se a warning about the validation of the certificate, you need to agree to continue to the insecure site, this is because for this process a `self signed` certificate is used
> Browser on mobile device
## How to contribute to the project
If you are working in a new Next.js page, and you need to create several PRs, or need to perform more testing before deploying to production, it's possible to skip pages from being deployed to prod by adding the name of your page to `EXCLUDE_IN_PROD` in the `next.config.js` file. This will cause your page to be replaced by a 404 screen, and your page will be removed from th Side nav (if it's listed in `worksheets.js`).
### Removing components from production builds
Similarly, to remove components from a production build, you can use the `IS_PROD` flag to conditionally render a component at build time:
```javascript
<SomeComponent>
{!process.env.IS_PROD && <ExperimentalComponent />}
...
</SomeComponent>
```
> Note: IS_PROD env variable is only available at build time, not during execution in the browser.
###New Relic Integration
You can find our app in one.newrelic as `NDP-dashboard` under `Browser`, and our dashboard as `Newsroom Data Platform Overall Insights` under `Dashboards`. Access to New Relic needs to be requested to `MyIT`for `DJ-SS-djcs`.
In order for the build to succeed, an environment variable named `NEW_RELIC_PUBLIC_LICENSE_KEY` must exists at run time and its value should correspond to the NewRelic license key.
For testing purposes and to avoid looking through the whole script, the tag will have an ID that we will specify at build time as en environment variable. `NEW_RELIC_ENVIRONMENT` needs to be either `ndp-dev` or `ndp-prod`.
1.- Add the license key to your `.env` file.
2.- Wait for app to compile and use as normal. Try to visit different pages.
3.- Check the dashboard for results. Pageviews, visited URLs and user email. All should match your activity and email.
One error that could appear is `Unable to connect to collector`, either on app startup or when there's an error that would stop the app. New Relic will retry this until succesful, and it needs the app running to be able to establish a connection. If it persists or makes it so the app doesn't compile, check your license key and new relic's logs for more info on the error.
The most active users for this module are
- Rye Zupancis
- Florencia Silva
- EstefanÃa Jacobo
Feel free to reach them to know how to collaborate
## Perform QA test in the project
Sign in with Wallet
Connect another wallet