librerouterorg / soporteremoto-dashboard

Remote and community soport dashboard for LibreRouter and LibreMesh networks

Remote Support Platform

The goal of this project is to develop a platform to allow Community Networks members to interact with each other, to solve problems that may occur in their network.

Who can help whom?

Commonly at Community Networks, there are few people with expertise in networking that may have more means to solve technical issues. There are typical situations tough, in which anyone eager to collaborate can be helpful, such as aligning antennas, crimping cables, or simply telling what worked for her or him in the past at solving a similar issue. Moreover, this platform looks forward to facilitating tools and resources for those who want to learn more about solving networking issues. Then this platform is intended to be used by every community network member to receive and give support.

What have we done so far?

We have created a federated ticketing system in which all community members can create, navigate through, and comment tickets. There is no centralized server, but many little servers, synchronized with each other.

The ticket creation has the option for choosing between the more common issues we have encountered in our communities, as well as the possibility to create a free text ticket.

At least but not less important, each member can identify itself with a profile pic and a nickname ;)

What's next?

We have deployed the platform in QuintanaLibre Community Network and will be gathering feedback from the people in the days to come. That feedback will guide our roadmap. Even though there are some features that we expected will be very helpful and will be added on the next releases.

• Visualizing and monitoring the health of nodes and links.
• The ability to run testing tools on nodes from the user interface itself.

soporteremoto-dashboard's Issues

Integrate LastIssuePage component with the api.

LastIssuePage is the component showing the detail of an issue (aka, report). Implement the integration with the API so that the component takes the issueId from the propery:
props.location.state.issueId and ask the API for the issue's data.
Also, integrate the rendering of the comments with the comments api.

Integrate Login with new recover account API.

Ask the user if she is sure about having typed the seed phrase correctly, when there is no data about the recovered identity. If the answer is yer, continue to home. Otherwise let her type again.

account.recover is not actually checking if the account exists

In the actual behaviour, the api method account.recover allways return credentials (keys) for the words (seedPhrase) passed as argument.
It is necessary to know when the given seed phrase is actually associated with an account or not.

createAccount to return a Promise

Change the actual createAccount api method to return a promise resolving to the actual returned value.

Integrate LastIssuesPanel with the API

LastIssuesPanel shows a list with open and closed reports.
Make the component take the reports from the reports API.
Also, implement navigation to a report detail page when clicking on it.

Collapse map on middle/small viewport

Edit Account

Add an edit account page and a link to it at navbar.

Setup StoryBook Configuration

Build an image for raspberrypi or easy to deploy script

It should be simple to install a remote support service on a raspberrypi type device, either by a bash script or by an image already generated.

Add account to the app context

Add the current account to a general app context and update that context from account login/registration/edition

Include a title field at the creation of a report

Include an input field at the creation of a report and use it as the title for IssueSmallResume and IssuePage components.

Show node name at reports listing and report detail.

Node name isn't showing anywhere right now. Add it at IssueSmallResume and IssuePage since it is a valuable reference for all comunity members.

Add Avatar at Registration

Add an avatar input at registration form.

Reports api return to comply with the contract.

The actual contract is:

interface Report {
    timestamp: number,
    user: string,
    status: string,
    node: string,
    commonIssueId: string, // los Id de commonIssues están hardcodeados en la webapp,
    title: string,
    body: string,
    comments: Array(string), // Array de ids de comentarios.
}

error running the storybook server

@germanferrero wanted to try the progress and this is what I got:

Can you help me sort it out?

nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ nvm use v8.10.0
Now using node v8.10.0 (npm v5.6.0)
nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ yarn run storybook
yarn run v1.16.0
error Command "storybook" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ ls
config-overrides.js  node_modules  package.json  public  README.md  src  yarn.lock
nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ yarn run
yarn run v1.16.0
info Commands available from binary scripts: acorn, ansi-html, atob, autoprefixer, babylon, browserslist, build-storybook, css-blank-pseudo, css-has-pseudo, css-prefers-color-scheme, cssesc, detect, detect-port, errno, escodegen, esgenerate, eslint, esparse, esvalidate, handlebars, he, html-minifier, import-local-fixture, is-ci, jest, jest-runtime, js-yaml, jsesc, json5, loose-envify, marked, miller-rabin, mime, mkdirp, multicast-dns, parser, react-app-rewired, react-docgen, react-scripts, regexp-tree, regjsparser, rimraf, sane, semver, sha.js, shjs, sshpk-conv, sshpk-sign, sshpk-verify, start-storybook, storybook-server, svgo, terser, uglifyjs, uuid, watch, webpack, webpack-dev-server, which
info Project commands
   - build
      react-app-rewired build
   - eject
      react-scripts eject
   - start
      react-app-rewired start
   - test
      react-app-rewired test
question Which command would you like to run?: start-sorybook
error Command "start-sorybook" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ yarn run start-storybook
yarn run v1.16.0
$ /home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/.bin/start-storybook
info @storybook/react v5.1.9
info 
info => Loading presets
info => Loading presets

WARN Broken build, fix the error below.
WARN You may need to refresh the browser.

ERR! Error: => Create a storybook config file in "./.storybook/config.{ext}".
ERR!     at createPreviewEntry (/home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/@storybook/core/dist/server/preview/entries.js:21:11)
ERR!     at <anonymous>
ERR!     at process._tickCallback (internal/process/next_tick.js:188:7)
ERR!     at Function.Module.runMain (module.js:695:11)
ERR!     at startup (bootstrap_node.js:188:16)
ERR!     at bootstrap_node.js:609:3
ERR!  { Error: => Create a storybook config file in "./.storybook/config.{ext}".
ERR!     at createPreviewEntry (/home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/@storybook/core/dist/server/preview/entries.js:21:11)
ERR!     at <anonymous>
ERR!     at process._tickCallback (internal/process/next_tick.js:188:7)
ERR!     at Function.Module.runMain (module.js:695:11)
ERR!     at startup (bootstrap_node.js:188:16)
ERR!     at bootstrap_node.js:609:3
ERR!   stack: 'Error: => Create a storybook config file in "./.storybook/config.{ext}".\n    at createPreviewEntry (/home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/@storybook/core/dist/server/preview/entries.js:21:11)\n    at <anonymous>\n    at process._tickCallback (internal/process/next_tick.js:188:7)\n    at Function.Module.runMain (module.js:695:11)\n    at startup (bootstrap_node.js:188:16)\n    at bootstrap_node.js:609:3' }
Done in 7.44s.
nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ yarn run storybook-server
yarn run v1.16.0
$ /home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/.bin/storybook-server
info @storybook/react v5.1.9
info 
info => Loading presets
info => Loading presets

WARN Broken build, fix the error below.
WARN You may need to refresh the browser.

ERR! Error: => Create a storybook config file in "./.storybook/config.{ext}".
ERR!     at createPreviewEntry (/home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/@storybook/core/dist/server/preview/entries.js:21:11)
ERR!     at <anonymous>
ERR!     at process._tickCallback (internal/process/next_tick.js:188:7)
ERR!     at Function.Module.runMain (module.js:695:11)
ERR!     at startup (bootstrap_node.js:188:16)
ERR!     at bootstrap_node.js:609:3
ERR!  { Error: => Create a storybook config file in "./.storybook/config.{ext}".
ERR!     at createPreviewEntry (/home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/@storybook/core/dist/server/preview/entries.js:21:11)
ERR!     at <anonymous>
ERR!     at process._tickCallback (internal/process/next_tick.js:188:7)
ERR!     at Function.Module.runMain (module.js:695:11)
ERR!     at startup (bootstrap_node.js:188:16)
ERR!     at bootstrap_node.js:609:3
ERR!   stack: 'Error: => Create a storybook config file in "./.storybook/config.{ext}".\n    at createPreviewEntry (/home/nico/tmp/librerouterorg/soporteremoto-dashboard/web-app/node_modules/@storybook/core/dist/server/preview/entries.js:21:11)\n    at <anonymous>\n    at process._tickCallback (internal/process/next_tick.js:188:7)\n    at Function.Module.runMain (module.js:695:11)\n    at startup (bootstrap_node.js:188:16)\n    at bootstrap_node.js:609:3' }
Done in 6.64s.
nico@ingorian:~/tmp/librerouterorg/soporteremoto-dashboard/web-app$ 

server reports/list enpoint is returning state changes logs

When asking for the list of reports, the server is including logs of status change too.
This breaks formatReports and the view of reports listing.

Implement api .nodes

Implement the api for nodes. It should have a method called list() which takes no parameters and return the list of nodes retrieved from the backend as strings. Example: ['ql-roxa', 'ql-nicogesia']. By the moment it should be enough to return all the nodes in the same mesh network where the backend lives.

Scroll on list

Currently the scroll has effect on the whole web and should only be performed within the lists of issues or comments.

Implement .getDefaultNode()

Implement the api endpoint getDefaultNode which returns the mesh node from where the user is connected to the dashboard if there is any or null otherwise. The node should be a string, like 'ql-roxa'

Delay retrieving last report.

After submitting a new report at NewReportWizard, we wait for reports.create to resolve and navigate back to LastIssuesPanel where the list of reports is fetched from the api, expecting our report to be in the list, but it isn't.
Right know we are workarounding it with a setTimeout.

Offline first cross revision

Go through all the components and decide wether or not each of them should have an offline behaviour. If so, implement that behaviour.