Skip to content

Commit

Permalink
Network Explorer (#881)
Browse files Browse the repository at this point in the history
* fixed styled component

* dynamic colour for isSelected

* corrected type names

* wrapped nav for routing and positioning of main section and dynamic colour for selected section

* overview info panes added

* quick refactor break out components separately

* WorldMap implemented but not data

* map changed and updated to shades correctly

* live data in cards

* added any types for react simple map

* nested routing added but needs tidying and types refactored

* added tooltip to worldmap

* worldmap killed unused props

* updated MUI version to stable v5

* dark mode and ContentCard refactor complete

* refactor of DarkMode context and API into class and context setup

* context refactor for multiple APIs at top level

* mui typography used for error msging instead of jsx/html

* added typeDefs for node api types

* small changes to sx styling

* added types for api responses and main context

* promiseAll for better error handling of individual async calls

* switch out to live API for country nodes

* removal of unnecessary type any and shortening sx style block

* routing and basic mixnodes table and linking

* fixed TS error handling and ts exclude files

* refactor of class API fetch reqs

* renaming to more appropriate explorer-api

* broken - passing to Fouad

* fix for types in context main

* mixnode detail page

* rebasing back before fetch mixnode by ID was implemented

* added basic cache for huge dump of mixnode data

* broken mixnodes context

* fixed mixnode detail fetch

* added hardcoded BondBreakdown section

* added 2 col table for detail page and small refactor of ApiState type for consistent use throughout app

* basic chart with basic dark/theme implemented - no live data

* added scrollToTop useRef for Detail page

* tidied grid items

* media qry for smaller screens

* small changes

* added live data to bonds breakdown 1/2

* small changes/tweaks

* Bondbreakdown retrieves live data

* mixnode stats using live data

* added node status live data

* uptime story added with live data

* date formatting added

* mixnode map

* error handling for mixnode stats

* error handling for port stats

* improved error handling for table - unfinished

* error handling for mixnode table

* handle Loading state for 2colSmallTable

* Uptime story loading handling

* set up data grid component

* remove mixnode value check as handled inside MixnodesDataGrid component

* use loading prop in data grid component

* undo unintentional code formatting

* map blur and linkable data-grid added

* getting ready for gateways and removing con logs

* quickfix for map blur

* PR comment changes

* refactored data grid for reuseability

* Link to open Big Dipper for Blocks

* passing element to title instead of string for routing to Big Dipper

* quick fix for element passed as title for contentCard

* fix for colour coding nodes

* nuts and bolts of search and results per page are working

* media query for responsive search and no-per-page toolbar

* broke out search and pagesize to separate toolbar

* fix for going back to mixnodes datagrid and refetching

* corrected typings for WorldMap

* removed API for topojson

* Cleaner implementation of formatting inline for datagrid

* added Type to Datagrid Rows for mixnode

* removed optional from type for Datagrid

* added page listing the Gateway nodes

* adding clickable location to handleSearch

* tidying util functions and removing dead useEffect

* Add missing constant

* Validators link to Big Dipper

* added validators link to side nav as per Issues card

* SVG icons

* PR tweak to move logic to routes

* removed dead code post rebase

* fixed light dark mode for DataGrid

* light dark mode works on SVGs in Nav

* moving logic back to Nav to avoid window object issues

* neater ternary for SVG icons dark mode

* Better Linking/Styling for cells

* corrected prop/attr name in svg to Reactify it

* moved api url to constants

* SVGs dark now governed by context not props so reverting renderIcon method back to key value setup

* percentage for bond total added

* SVGs for Overview cards Mixnodes Gateways and Validators

* decimalised formatted punks and % of bond for BondBreakdown card

* number formatting via validator module

* adding cossmjs math pkg

* unfinished refactor BondBreakdown

* first few ui tweaks

* Adding google font Open Sans as per designs

* DataGrid unstylable in theme so nuking in css

* adding theming to Block Height card not hardcoded colours

* DataGrid styling

* Nav styling colours but without hover fix

* theme for bond breakdown

* killing con logs

* Datagrid styling

* Nav bar working

* added lines to nav

* removed cursive from fallback fonts

* trimming and refactoring

* removed dead isActive code from nav options

* Color correction for theme on 2col table

* Moved cell styles out to UniversalDatagrid for reuseability

* Nav colors moved to theme

* Removing comments and dead code

* DataGrid UI improvements

* theming for Overview content card

* Bonds updated from UPUNK to PUNK

* corrected SVG warning on stroke-width

* added Boolean class instead of ternary

* fixing up svg attr to jsx props

* merging UPUNK changes into ui-tweaks

* corrected SVG warning on stroke-width

* added Boolean class instead of ternary

* last instance of Boolean

* BondBreakdown handles 0 delegations

* formatting for webpack config and svgs

* Add `npm run lint` and `npm run lint:fix` targets to `package.json`

* Allow `.vscode` directories - exclude them individually like has been done already in the `.gitignore` directory

* Add `vscode` action to run `eslint` on save for the `/explorer/**` sub-directory

* eslint auto fix

* Fix some easy eslint issues

* removing grid pipes and pastel map colors

* Grid xl lg values to align with Search Toolbar

* GitHub Actions: do not trigger Rust actions when the paths are only `/explorer/**`

See https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#onpushpull_requestpaths for details.

* GitHub Actions: run eslint and annotate pull requests

* socials added to Appbar and Footer

* smaller darkmode icon for mobile

* cleaner code for nav dark light selector

* almost all lint fixes

* post linting Nav fix

* killed con log and removed unused dep

* ref type and removed 1x ts ignore from worldMap

* disabl nested tern w/ nav is refactored on diff br

* icons smaller put into mui List format

* Added hover effect to match DarkLight switch

* ts ignore for worldMap vs no ts decl

* parking changes

* Flipped to MUI SVGs

* re-added external links to Socials

* nav functionality working

* spacing on Mixnode detail page

* datagrid alignment & detail page spacing

* map but no datagrid yet

* killed old SVGs now using mui icons

* added palette instead of strings

* Mixnode Map page working still needs tidying

* better lg xl responsive on Overview and sanitized Page Titles

* removed typography from imports as unused now

* search, sort working & added LG XL responsiveness

* Routing root reqs direct to Overview

* basic 404 page and btn back to overview

* killed fragments and comments

* updated Bond total in column

* Change bond col to type number not text

* Added field to DataGrid and updated MixnodeToGridrow logic

* Added type number so sorting works properly.

* added %self to Detail page

* basic scroll working desktop

* delegations now popout and scroll according to designs

* added stickyHeader and killed dead code

* ExpandMore only renders if delegations exist

* killed old svg icons

* added theme to Overview SVGs

* bringing Title into other pages

* linting fix

* pagination and spacing of gateways cols

* linting fix

* style override for pagination

* added hamburger and changed appbar to fixed

* bringing in other lint fix to pass linting

* PR feedback changes

* Add README.md for theme customisation

* Add hook to get app state context

* Add Nym theme typings to MUI `Theme` types

* Use new theme provider

* Fixing up components to use theme typings
Updated Overview Footer and ContentCard
Footer and Nav socials
Title, Nav chevron and Nav SVGs
Overview SVGs
Light Dark switch
BondBreakdown and 2 col table
DataGrid and 2col Tables
WorldMap UptimeChart and theme changes
WorldMap colors
merge changes
added StatsCard for overview

* Bug fix: do no close drawer when clicking on mixnodes or gateways

* Theme primary colour set to orange highlight, so that default/primary actions are clear to the user. This fixes colours on the pagination page list.

* Fixing up map projection

* Map view uses stroke colour from theme

* added useTheme from correct pkg

* react types upgrade to kill SXProps issue

* SXProps fix removing dead mixins from fixed AppBar

* Scale of Map changed to see more countries

* return type for main Context required

* Fixed map so more countries show

* type for useMainContext hook added

* Remove unused file

* Tidy up imports

* Remove use of `any` by using strongly typed hook to get the app state

* Remove module declaration so that @types/react-simple-maps is used

* API map response changed to indexed object

* Map view uses correct typings from `@types/react-simple-maps` and `d3-scale`

* Make content responsive and fills the view when screen widest

* Link network explorer in title to overview page

* Increase size of card headers to differentiate

* Fix column widths

* Fixed icons showing incorrectly the stats card in mixnode detail view

* Set default sort on mixnodes and gateways to be `bond` descending.

There is an error in MUI data-grid that does not adjust the sort caret based on initial `sortModel` value. Needs investigation.

* GitHub Action for deployment: prefix with network explorer to stop collisions with other deployment projects

* Mixnode list: fix up header title for `host`

* Fix up notification URLs and tidy up readme

* Fix up license information

Co-authored-by: Adrian Thompson <adrian@nymtech.net>
Co-authored-by: Adrian Thompson <adrianthompson@Adrians-MacBook-Air.local>
Co-authored-by: fmtabbara <fmtabbara@hotmail.co.uk>
Co-authored-by: Aid19801 <adrianThompson19801@gmail.com>
  • Loading branch information
5 people committed Nov 8, 2021
1 parent 6ad5bad commit 5dadd73
Show file tree
Hide file tree
Showing 84 changed files with 74,740 additions and 8 deletions.
8 changes: 7 additions & 1 deletion .github/workflows/build.yml
@@ -1,6 +1,12 @@
name: Continuous integration

on: [push, pull_request]
on:
push:
paths-ignore:
- 'explorer/**'
pull_request:
paths-ignore:
- 'explorer/**'

jobs:
build:
Expand Down
5 changes: 4 additions & 1 deletion .github/workflows/clippy_check.yml
@@ -1,6 +1,9 @@
name: Clippy check

on: push
on:
push:
paths-ignore:
- 'explorer/**'

jobs:
clippy_check:
Expand Down
8 changes: 7 additions & 1 deletion .github/workflows/mixnet_contract.yml
@@ -1,6 +1,12 @@
name: Mixnet Contract

on: [push, pull_request]
on:
push:
paths-ignore:
- 'explorer/**'
pull_request:
paths-ignore:
- 'explorer/**'

jobs:
mixnet-contract:
Expand Down
23 changes: 23 additions & 0 deletions .github/workflows/network-explorer-lint.yml
@@ -0,0 +1,23 @@
name: Linting for Network Explorer (eslint/prettier)

on:
pull_request:
paths:
- 'explorer/**'

defaults:
run:
working-directory: explorer

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm install
- name: Run ESLint
# GitHub should automatically annotate the PR
run: npm run lint
3 changes: 2 additions & 1 deletion .github/workflows/network-explorer.yml
Expand Up @@ -35,7 +35,7 @@ jobs:
SOURCE: "explorer/dist/"
REMOTE_HOST: ${{ secrets.CI_WWW_REMOTE_HOST }}
REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/${{ env.GITHUB_REF_SLUG }}
TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/network-explorer-${{ env.GITHUB_REF_SLUG }}
EXCLUDE: "/dist/, /node_modules/"
- name: Keybase - Node Install
run: npm install
Expand All @@ -44,6 +44,7 @@ jobs:
env:
NYM_PROJECT_NAME: "Network Explorer"
NYM_CI_WWW_BASE: "${{ secrets.NYM_CI_WWW_BASE }}"
NYM_CI_WWW_LOCATION: "network-explorer-${{ env.GITHUB_REF_SLUG }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/support-files/messages/success
@@ -1,5 +1,5 @@
🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
> :rocket: {{ env.NYM_PROJECT_NAME }} ➡️➡️➡️➡️➡️ **View output:** https://{{ env.GITHUB_REF_SLUG }}.{{ env.NYM_CI_WWW_BASE }}/
> :rocket: {{ env.NYM_PROJECT_NAME }} ➡️➡️➡️➡️➡️ **View output:** https://{{ env.NYM_CI_WWW_LOCATION }}.{{ env.NYM_CI_WWW_BASE }}/
> ✅ **SUCCESS**
> `branch` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/tree/{{ env.GIT_BRANCH_NAME }}
> `commit` {{ env.GITHUB_SERVER_URL }}/{{ env.GITHUB_REPOSITORY }}/commit/{{ env.GITHUB_SHA }}
Expand Down
8 changes: 7 additions & 1 deletion .github/workflows/tauri-wallet-types.yml
@@ -1,6 +1,12 @@
name: Generate TS types

on: push
on:
push:
paths-ignore:
- 'explorer/**'
pull_request:
paths-ignore:
- 'explorer/**'

jobs:
tauri-wallet-types:
Expand Down
8 changes: 7 additions & 1 deletion .github/workflows/wasm_client_build.yml
@@ -1,6 +1,12 @@
name: Wasm Client

on: [push, pull_request]
on:
push:
paths-ignore:
- 'explorer/**'
pull_request:
paths-ignore:
- 'explorer/**'

jobs:
wasm:
Expand Down
1 change: 0 additions & 1 deletion .gitignore
Expand Up @@ -11,7 +11,6 @@ target
/.vscode/settings.json
validator/.vscode
sample-configs/validator-config.toml
.vscode
scripts/deploy_qa.sh
scripts/run_gate.sh
scripts/run_mix.sh
Expand Down
3 changes: 3 additions & 0 deletions explorer/.babelrc
@@ -0,0 +1,3 @@
{
"presets": ["@babel/env", "@babel/react"]
}
18 changes: 18 additions & 0 deletions explorer/.editorconfig
@@ -0,0 +1,18 @@
# See http://editorconfig.org/
# EditorConfig helps developers define and maintain consistent coding styles
# between different editors and IDEs. The EditorConfig project consists of a
# file format for defining coding styles and a collection of text editor plugins
# that enable editors to read the file format and adhere to defined styles.
# EditorConfig files are easily readable and they work nicely with version
# control systems.

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
103 changes: 103 additions & 0 deletions explorer/.eslintrc
@@ -0,0 +1,103 @@
{
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2019,
"sourceType": "module"
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"plugins": ["react", "react-hooks", "jsx-a11y", "prettier", "jest"],
"extends": ["plugin:react/recommended", "airbnb", "prettier", "plugin:jest/recommended", "plugin:jest/style"],
"rules": {
"jest/prefer-strict-equal": "error",
"jest/prefer-to-have-length": "warn",
"prettier/prettier": "error",
"import/prefer-default-export": "off",
"react/prop-types": "off",
"react/jsx-filename-extension": "off",
"react/jsx-props-no-spreading": "off",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.[jt]s",
"**/*.spec.[jt]s",
"**/*.test.[jt]sx",
"**/*.spec.[jt]sx"
]
}
],
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never",
"js": "never",
"jsx": "never"
}
]
},
"overrides": [
{
"files": "**/*.+(ts|tsx)",
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": ["@typescript-eslint/eslint-plugin"],
"extends": [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"rules": {
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-var-requires": "off",
"no-use-before-define": [0],
"@typescript-eslint/no-use-before-define": [1],
"import/no-unresolved": 0,
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.ts",
"**/*.spec.ts",
"**/*.test.tsx",
"**/*.spec.tsx"
]
}
],
"quotes": "off",
"@typescript-eslint/quotes": [
2,
"single",
{
"avoidEscape": true
}
],
"@typescript-eslint/no-unused-vars": [2, { "argsIgnorePattern": "^_" }]
}
}
],
"settings": {
"import/resolver": {
"root-import": {
"rootPathPrefix": "@",
"rootPathSuffix": "src",
"extensions": [".js", ".ts", ".tsx", ".jsx", ".mdx"]
}
}
}
}
3 changes: 3 additions & 0 deletions explorer/.gitignore
@@ -0,0 +1,3 @@
dist
.DS_Store
detailAPI.md
1 change: 1 addition & 0 deletions explorer/.nvmrc
@@ -0,0 +1 @@
14
6 changes: 6 additions & 0 deletions explorer/.prettierrc
@@ -0,0 +1,6 @@
{
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
5 changes: 5 additions & 0 deletions explorer/.vscode/settings.json
@@ -0,0 +1,5 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
50 changes: 50 additions & 0 deletions explorer/README.md
@@ -0,0 +1,50 @@
# Nym Network Explorer

The network explorer lets you explore the Nym network.

## Getting started

You will need:

- NodeJS (use `nvm install` to automatically install the correct version)
- `npm`

From the `explorer` directory of the `nym` monorepo, run:

```
npm install
npm run start
```

You can then open a browser to http://localhost:3000 and start development.

## Development

Documentation for developers [can be found here](./docs).

## Deployment

Build the UI with:

```
npm install
npm run build
```

The output will be in the `dist` directory. Serve this with `nginx` or `httpd`.

Make sure you have built the [explorer-api](./explorer-api) and are running it as a service proxied through
`nginx` or `httpd` so that both the UI and API are running on the same host.

## License

Please see the [project README](./README.md) and the [LICENSES directory](../LICENSES) for license details for all Nym software.

## Contributing

If you would like to contribute to the Network Explorer send us a PR or
[raise an issue on GitHub](https://github.com/nymtech/nym/issues) and tag them with `network-explorer`.

## Development

Please see [development docs](./docs) here for more information on the structure and design of this app.
46 changes: 46 additions & 0 deletions explorer/docs/README.md
@@ -0,0 +1,46 @@
# Nym Network Explorer - Development Docs

## Getting started

You will need:

- NodeJS
- `nvm`

We use the following:

- Typescript
- `eslint`
- `webpack`
- `jest`
- `react-material-ui`
- `react` 17

## Development mode

Run the following:

```
npm install
npm run start
```

A development server with hot reloading will be running on http://localhost:3000.

## Linting

`eslint` and `prettier` are configured.

You can lint the code by running:

```
npm run lint
```

> **Note:** this will only show linting errors and will not fix them
To fix all linting errors automatically run:

```
npm run lint:fix
```
5 changes: 5 additions & 0 deletions explorer/jest.config.js
@@ -0,0 +1,5 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};

0 comments on commit 5dadd73

Please sign in to comment.