Web Dashboard

[freyacodes]

Web Dashboard

20/03/2017 Update:

• Removed ID by email, now identifying by Discord OAuth2 App User ID
• Removed all views under Manage and removed the ManageController
• Work started on dashboard, trying to implement AJAX calls to update the display (thinking of using React.js for the dashboard connecting to an ASP.NET backend)

This is where I see the dashboard designed by @celanthe coming in (the React UI can call ASP.NET Core endpoints, which will organize the appropriate data and do the relevant calls etc)

• AJAX. Just AJAX.

[alperb]

I'm experienced about front end design and development. I can provide.

[freyacodes]

That'd be great! The site is coded with React.js. Got any experience with that? Otherwise, it's not too difficult to learn.

The repo for the web project is located at https://github.com/Frederikam/FredBoat-Web

Master is automatically built to https://fredboat.com/

[alperb]

I don't have any experience with React.

[freyacodes]

React is fairly easy to learn. Consider the fact that this is my first non-static website. https://facebook.github.io/react/

…

On 24 January 2017 at 10:32, Alper Berber ***@***.***> wrote: I don't have any experience with React. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-274753082>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWcvlvCq-5HH3Wkl62qw6Cm-h1zWDks5rVcVBgaJpZM4KGdGT> .

[celanthe]

@Frederikam If you're still in need of this, I know a bit of React and UI/UX design. I would love to help out with this.

[freyacodes]

Hey there @celanthe. Yes, this is still on the table and I would love some help, though I'm still wondering about how I am going to build the API gateway.

Be sure to ask if you need more info.

[celanthe]

@Frederikam I am wondering if https://github.com/celanthe/ReactJS-AdminLTE would be a good jumping off place to start for said dashboard?

Unsure as to the gateway!

[freyacodes]

The API gateway is backend territory so it's probably something I'll end up dealing with. It's just impossible to finish this issue without it.

That React based template looks really neat and could be a useful starting point if you choose to delve into that. We don't need to really worry about having user customizable widgets and things like that, though.

[celanthe]

@Frederikam Fantastic! I'll delve into this over the next couple of weeks.

[celanthe]

@Frederikam slow progress, but still some progress. ^_^ Curious as to how you want the server permissions handled? For the sake of missing the back-end piece, would the commands from Discord need to actually do anything at this point?

I am assuming that the permissions in question are those listed at: https://discordapp.com/developers/docs/topics/permissions#role-object

EG: If someone clicks on the 'Discord Permissions' page in the sidebar, from there would it be enough to list the permissions for now in a table/with icons or somesuch until the back end is figured out?

[freyacodes]

Looks like you're off to a good start!

Here's some quick feedback:

1. We don't need to tell users that they are online. This is not a social platform.
2. I don't plan for this dashboard to be able to handle Discord permissions. That would be tricky to implement and would require maintenance for each new Discord permission.
3. Overrides are quite low priority at the moment, but if we do wind up getting them, we'll want to use the same layout as Discord rather than having a separate tab.
4. Sync with Discord? Not sure what that is supposed to be. Do you mean account authentication? People will need to authenticate to even view the dashboard.
5. The user must have some way of switching the server they are looking at managing.

I'm not sure what you are asking in regards to how we handle role permissions. In essence, we are just cloning Discord's UI for permissions, only with our own set of permissions. I'll need to think about exactly which permissions we want.

The base URL of the gateway will be https://fredboat.com/api/

I currently only intend to use the identity and identity.guilds scopes for oauth. The latter allows us to retrieve a list of guilds the user is in, and which permissions they have there.

[celanthe]

@Frederikam Ohh I see. I was making this much harder than it has to be, for sure! Wonderful. I'll get back to this over the weekend, for sure. :) That makes this a lot simpler.

[celanthe]

@Frederikam just wanted to update--should have some time to work on this next weekend for a bit. I work f/t so I'll progress through as time allows! Look forward to working on it.

[freyacodes]

Sounds good! There's no need to rush it though. I got my studies (and currently also exams!) to worry about, so getting around to doing the gateway will take some time.

…

On 14 March 2017 at 21:23, Kiran ***@***.***> wrote: @Frederikam <https://github.com/Frederikam> just wanted to update--should have some time to work on this next weekend for a bit. I work f/t so I'll progress through as time allows! Look forward to working on it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-286548021>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWZCDtShMyHZKaqx1c91h-1iWyoOOks5rlvdagaJpZM4KGdGT> .

[freyacodes]

There are quite a few problems here:

• The avatar is too big and there's no form of padding.
• You're mixing the guild selection with the guild settings. It's really odd to have it there, seeing from a UX design perspective.
• You're not using react-router for this page. The route should be something like /guild/:guildId/manage.
• Why is the home tab on the bottom? Most designers would put it at the top of the list.
• The home page is a mess. Why have those big unpadded banners when you can just style some simple buttons? We have an about page btw.
• Please use the same checkboxes that we use on the master branch. They are identical to what Discord uses.

It may be simpler to simply just fork master and continue my work. We already have react-router and checkmark components in place

[celanthe]

@Frederikam Thanks for the feedback. I'll revisit this at a later date and follow your advice for forking the master repo.

So, because ASP.NET Core, I've made this:
http://imgur.com/a/5f2x3
(Note this is for anonymous users, the main page cuts straight to the dash for logged in users)

I've almost done setting it up with Discord OAuth2.
It runs on .NET Core (so multiplatform and performance gains ftw)
Uses Semantic UI

[freyacodes]

@averagenamespace looks really great! I particularly like the first image.

The system I had in mind is where the front-end is located on a CDN (namely netlify) and where API calls are made to https://fredboat.com/api/some_route.

Though a big problem with this is that it splits the stack into .NET and Java. Not completely sure how that is going to work. @Nanabell told me he would like to help if only he did Java.

@Frederikam Has anything happened on the API end? I was assuming the API was going to be hosted separately (Java/whatever API backend communicates with ASP/React frontend), but if nothing has happened I can easily add some API controllers to this project, for example:

Which produces a result like this:

The [HttpGet] attribute can be changed to HttpPost, HttpDelete, HttpPut etc

I see an application stack like this:

(Or we skip the middle layer and connect the dash straight to the FredBoat client?)

Notes:

1. Could seperate middle layer (Java)
2. Could cut the second layer and connect the FredBoat client directly to the web dashboard
3. At the moment the top and second layer are on the same application (FredBoatDashboard.sln, coming soon to a repository near you)

[freyacodes]

The problem with this is that FredBoat will eventually be dockerized into many different shards. My plan was for the API server to also manage those.

However, I'm not sure how your second layer fits in. By the third layer do you mean the bot itself?

Top layer: Front-end UI (logins, dashboard, etc...) Middle layer: ASP.NET API (sends data to FredBoat etc) Bottom layer: Existing FredBoat (FredBoat.jar, the actual bot that plays music and is awesome)

…

On Sun, 19 Mar 2017 at 12:23 PM, Frederik Ar. Mikkelsen < ***@***.***> wrote: The problem with this is that FredBoat will eventually be dockerized into many different shards. My plan was for the API server to also manage those. However, I'm not sure how your second layer fits in. By the third layer do you mean the bot itself? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287582327>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AY3edJcWEPOVKmM1D_r74hF-47XKjW2Jks5rnGeAgaJpZM4KGdGT> .

For now, I'll focus on building the web dashboard. Do you have a general idea of what the URLs are for the API endpoints?
For the requirements you stated in the first post:
I don't get what you mean by the first one, do you mean like a role editor? I don't think I can do that with the Discord API. If you mean roles like FredBoat-only roles (add a user to a role, user can only do X or cannot play music etc), then with appropriate API endpoints, yeah, I can.
I can sort out updating what the bot can and cannot do from the dashboard, I just need a URL I can call (POST preferred) with a data object containing the new permissions (that I would assume update your local DB).

Progress:




Notes: Today was slow, because OAuth2 was hard to set up. Firstly, it wouldn't show up in ExternalProviderSchemes. Then it wouldn't connect. But it works now 👍 I'm going to start working on the main dashboard (I'll just use a temporary fake data internal API for now, until the details for the API are done/whatever) but if you need anything changed just say.
I'm going to open-source it, but for now it's going to be on GitLab (because private repositories) because there is still some sensitive data (Discord app login data, for testing at the moment).
Written in Visual Studio 2017 and tested in Google Chrome

[freyacodes]

It is not desirable to add password/email auth. This makes the dashboard needlessly complicated. It would mean that we would have to ensure that passwords are safely hashed when stored, etc. Not to mention that we would need to re-authenticate a user if they choose to revoke access: https://cloud.githubusercontent.com/assets/2582617/24081998/a28d9a4a-0cbe-11e7-87f5-3f0d50f9411e.png A user should *only* have access to the dashboard if they have a valid bearer token stored in their browser. Additionally, I don't feel like we are on the same page in regards to the stack. https://cloud.githubusercontent.com/assets/2582617/24081999/a676936e-0cbe-11e7-9ae3-cadac4924b3a.png I plan to scale FredBoat with docker containers. At some point, we'll need a controller for these that can manage the shards (check if working properly, rolling restarts, etc). My initial thought was to make this the same program as the one serving API requests, but I don't see how that fits in with your .NET program. Ideas?

Yeah, I see what you're saying. I'll change it so that they are identified by OAuth2 bearer tokens. If you can provide endpoints, I can roll a socket manager into the middle layer?

…

On Mon, 20 Mar 2017 at 4:10 AM, Frederik Ar. Mikkelsen < ***@***.***> wrote: It is not desirable to add password/email auth. This makes the dashboard needlessly complicated. It would mean that we would have to ensure that passwords are safely hashed when stored, etc. Not to mention that we would need to re-authenticate a user if they choose to revoke access: [image: Inline images 1] A user should *only* have access to the dashboard if they have a valid bearer token stored in their browser. Additionally, I don't feel like we are on the same page in regards to the stack. [image: Inline images 2] I plan to scale FredBoat with docker containers. At some point, we'll need a controller for these that can manage the shards (check if working properly, rolling restarts, etc). My initial thought was to make this the same program as the one serving API requests, but I don't see how that fits in with your .NET program. Ideas? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287623020>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AY3edEzjrbBsUiEn00baPsz2erCw2gdMks5rnUVQgaJpZM4KGdGT> .

[freyacodes]

Socket manager? What do you mean by that? On 19 March 2017 at 20:34, averagenamespace <[email protected]> wrote:

…

Yeah, I see what you're saying. I'll change it so that they are identified by OAuth2 bearer tokens. If you can provide endpoints, I can roll a socket manager into the middle layer? On Mon, 20 Mar 2017 at 4:10 AM, Frederik Ar. Mikkelsen < ***@***.***> wrote: > It is not desirable to add password/email auth. This makes the dashboard > needlessly complicated. It would mean that we would have to ensure that > passwords are safely hashed when stored, etc. Not to mention that we would > need to re-authenticate a user if they choose to revoke access: > [image: Inline images 1] > > A user should *only* have access to the dashboard if they have a valid > bearer token stored in their browser. > > Additionally, I don't feel like we are on the same page in regards to the > stack. > [image: Inline images 2] > I plan to scale FredBoat with docker containers. At some point, we'll need > a controller for these that can manage the shards (check if working > properly, rolling restarts, etc). My initial thought was to make this the > same program as the one serving API requests, but I don't see how that fits > in with your .NET program. Ideas? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287623020 >, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ AY3edEzjrbBsUiEn00baPsz2erCw2gdMks5rnUVQgaJpZM4KGdGT> > . > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287641003>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWRpKPFni7-5EkK1ByeJgEb2lZIY8ks5rnYMwgaJpZM4KGdGT> .

Failed at phone typing, I meant docker. On Mon, 20 Mar 2017 at 8:35 AM, Frederik Ar. Mikkelsen < [email protected]> wrote:

…

Socket manager? What do you mean by that? On 19 March 2017 at 20:34, averagenamespace ***@***.***> wrote: > Yeah, I see what you're saying. I'll change it so that they are identified > by OAuth2 bearer tokens. > > If you can provide endpoints, I can roll a socket manager into the middle > layer? > > > On Mon, 20 Mar 2017 at 4:10 AM, Frederik Ar. Mikkelsen < > ***@***.***> wrote: > > > It is not desirable to add password/email auth. This makes the dashboard > > needlessly complicated. It would mean that we would have to ensure that > > passwords are safely hashed when stored, etc. Not to mention that we > would > > need to re-authenticate a user if they choose to revoke access: > > [image: Inline images 1] > > > > A user should *only* have access to the dashboard if they have a valid > > bearer token stored in their browser. > > > > Additionally, I don't feel like we are on the same page in regards to the > > stack. > > [image: Inline images 2] > > I plan to scale FredBoat with docker containers. At some point, we'll > need > > a controller for these that can manage the shards (check if working > > properly, rolling restarts, etc). My initial thought was to make this the > > same program as the one serving API requests, but I don't see how that > fits > > in with your .NET program. Ideas? > > > > — > > You are receiving this because you were mentioned. > > Reply to this email directly, view it on GitHub > > < https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287623020 > >, > > or mute the thread > > <https://github.com/notifications/unsubscribe-auth/ > AY3edEzjrbBsUiEn00baPsz2erCw2gdMks5rnUVQgaJpZM4KGdGT> > > . > > > > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287641003 >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/ACdoWRpKPFni7-5EkK1ByeJgEb2lZIY8ks5rnYMwgaJpZM4KGdGT > > . > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287641086>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AY3edNfCo7GQ3FLwSRlYWvvqq-LImFlfks5rnYN4gaJpZM4KGdGT> .

[freyacodes]

Sorry, but I fail to realize how that would work. API endpoints to control the swarm?

Endpoints for each docker so that I can ping it and receive an acknowledgement along with status details?

…

On Mon, 20 Mar 2017 at 8:39 AM, Frederik Ar. Mikkelsen < ***@***.***> wrote: Sorry, but I fail to realize how that would work. API endpoints to control the swarm? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287641485>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AY3edAByKgDSkc0R5ngPqPts6egEl_kWks5rnYSJgaJpZM4KGdGT> .

[freyacodes]

I could add endpoints on the shards, but how would you know which one of them to contact? Say you needed shard 23? Should I add an endpoint for that in the swarm controller?

@Frederikam Exactly. Example:
https://fredboat.com/api/shards/23?
Or
https://fredboat.com/api/shards/status?shard=23

I need some constants as well like:

• How often to ping each shard
• What a successful ping would look like
• What to do in case a shard doesn't return a successful ping (endpoints for restart etc)
  The ping reply would be in JSON preferably.
  Potential example: GET https://fredboat.com/api/shards/23/status? Do you want a dashboard just for you that shows the status and the ability to restart them (this endpoint would require a certain logged in Discord ID, of course, the endpoint would also need some kind of auth).

[freyacodes]

A shard would return one of the following statuses:
https://github.com/DV8FromTheWorld/JDA/blob/master/src/main/java/net/dv8tion/jda/core/JDA.java#L40-L70

Probably in a format like this:

{
    "shardId": 23,
    "status": "CONNECTED",
    "guildCount": 1008,
    "playersPlaying": 70,
    "baseUrl": "http://123:123:123:123:3523"
}

The endpoint would be /api/shard/:shardId. (note: shard is singular)

A dead shard is usually not playing anything or has no guilds. The status could be something like ATTEMPTING_TO_RECONNECT or LOADING_SUBSYSTEMS, but the shards should usually recover from this after a short while, but is sometimes not the case.

I'm not sure how a shard would be restarted. I'm no docker expert.

And if the shard sends no reply, is that a critical error (think red text), because the API should return data even if the bot is down? (This is for the owner dash)

[freyacodes]

If the shard doesn't respond it has likely crashed the JVM, or experiencing network issues. That should be considered critical.

I don't know how to manage docker containers, do you mean the FredBoat (the Java API) API will manage the docker containers and I can call an endpoint with relevant auth to restart a dshard (Docker shard)?

WebSockets perhaps?

[freyacodes]

I can probably take care of the docker swarm management, you'd just need to make sure you are getting info from the correct shards.

…

On 20 March 2017 at 01:27, averagenamespace ***@***.***> wrote: I don't know how to manage docker containers, do you mean the FredBoat (the Java API) API will manage the docker containers and I can call an endpoint with relevant auth to restart a dshard (Docker shard)? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-287660409>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWTYsPprxI_mSck4nEwCWvtnDN6Joks5rncfagaJpZM4KGdGT> .

For the meantime; is there any (any at all), any endpoints I can call right now to check if FredBoat is online?
Edit: For testing.

[freyacodes]

A status endpoint is currently available from http://host:1356/stats

I have made some changes to my scaling strategy. Instead of creating one huge swarm I'm now thinking of putting up buffering sender nodes around the globe, which would lessen the load on my machines in Paris while decreasing packet loss.

[freyacodes]

We haven't really decided on a solution for this problem yet. Perhaps it would be ideal to leave an option on the dashboard to allow third party bots to read the settings from a guild, but this can not really be accomplished with a direct database connection like I would prefer.

…

On 16 April 2017 at 19:31, Alkaris ***@***.***> wrote: This web dashboard do you HAVE to download and host the Web API or is there a publicly available Web Dashboard that you can use to sign-in to to configure FredBoat? because it sounds really tedious to just download and host your own accessible web host service just to use and customize this bot. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-294363766>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWY5HM_h86zH7wbgXRYUy90fKyT3Gks5rwlBsgaJpZM4KGdGT> .

[freyacodes]

Though you *will* need to set up an SQL database regardless.

…

On 16 April 2017 at 19:35, Frederik Mikkelsen ***@***.***> wrote: We haven't really decided on a solution for this problem yet. Perhaps it would be ideal to leave an option on the dashboard to allow third party bots to read the settings from a guild, but this can not really be accomplished with a direct database connection like I would prefer. On 16 April 2017 at 19:31, Alkaris ***@***.***> wrote: > This web dashboard do you HAVE to download and host the Web API or is > there a publicly available Web Dashboard that you can use to sign-in to to > configure FredBoat? because it sounds really tedious to just download and > host your own accessible web host service just to use and customize this > bot. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-294363766>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ACdoWY5HM_h86zH7wbgXRYUy90fKyT3Gks5rwlBsgaJpZM4KGdGT> > . >

[nobobo1234]

A little suggestion for this.

• Add smth like a dj role to the dashboard, so people can easily select a role from a dropdown menu
• Add a thing that people can select a music channel (with a dropdown menu) where the bot is only able to talk in
• Would like something to see like the dyno dashboard`
  Imgur link like this
  Also I would like (like dyno's dashboard) a dashboard that is avaible for everyone

[freyacodes]

I was thinking of something more flexible though, like the Discord permission system

[nobobo1234]

Okay. But i would be cool for the music bot itself, with or without web dashboard. Especially for the dj role. I would really love if you would add some sort of command to that

[freyacodes]

Though we may want to simplify permissions, as many admins are already having trouble managing Discord permissions.

…

On 3 May 2017 at 10:32, nobobo1234 ***@***.***> wrote: Okay. But i would be cool for the music bot itself, with or without web dashboard. Especially for the dj role. I would really love if you would add some sort of command to that — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-298851931>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWYeERJvnpe2qhFcPcqPqo484RTDdks5r2Du6gaJpZM4KGdGT> .

[nobobo1234]

Okay but would a command be nice, automatically adding a dj role and add dj's to it by saying ?dj add or ?adddj . That isn't hard for people to understand right?

[freyacodes]

FredBoat is not going to automatically add roles to people's servers, that's too intrusive.

…

On 3 May 2017 at 10:37, nobobo1234 ***@***.***> wrote: Okay but would a command be nice, automatically adding a dj role and add dj's to it by saying ?dj add or ?adddj . That isn't hard for people to understand right? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/Frederikam/FredBoat/issues/23#issuecomment-298852944>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACdoWd74pOxzdtQLGlpye6R4cJu3Xirfks5r2DzmgaJpZM4KGdGT> .

[nobobo1234]

Really? Many bots written in js and python have that. But if the user can create a role itself or through some other form of moderation bot and than add djs by doing some command? Or is that too hard?

[freyacodes]

Maybe FredBoat could implicitly allow anyone with the "DJ" role, but I am going to have to trust admins to assign and create that role.

[nobobo1234]

Is that possible right now? To only let people with a specific role talk to FredBoat?

[freyacodes]

Yes, the Patreon API has webhook support, but in which way is that related to the dashboard?