85 | """ % (S3.PkgInfo.long_description),
86 |
87 | classifiers = [
88 | 'Development Status :: 5 - Production/Stable',
89 | 'Environment :: Console',
90 | 'Environment :: MacOS X',
91 | 'Environment :: Win32 (MS Windows)',
92 | 'Intended Audience :: End Users/Desktop',
93 | 'Intended Audience :: System Administrators',
94 | 'License :: OSI Approved :: GNU General Public License v2 or later (GPLv2+)',
95 | 'Natural Language :: English',
96 | 'Operating System :: MacOS :: MacOS X',
97 | 'Operating System :: Microsoft :: Windows',
98 | 'Operating System :: POSIX',
99 | 'Operating System :: Unix',
100 | 'Programming Language :: Python :: 2',
101 | 'Programming Language :: Python :: 2.6',
102 | 'Programming Language :: Python :: 2.7',
103 | 'Programming Language :: Python :: 3',
104 | 'Programming Language :: Python :: 3.3',
105 | 'Programming Language :: Python :: 3.4',
106 | 'Programming Language :: Python :: 3.5',
107 | 'Programming Language :: Python :: 3.6',
108 | 'Topic :: System :: Archiving',
109 | 'Topic :: Utilities',
110 | ],
111 |
112 | install_requires = ["python-dateutil", "python-magic"]
113 | )
114 |
115 | # vim:et:ts=4:sts=4:ai
116 |
--------------------------------------------------------------------------------
/dashboard-ui/src/actions/AuthActions.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 |
3 | var AuthActions = Reflux.createActions({
4 | login: {children: ['completed', 'failed']},
5 | registration: {children: ['completed', 'failed']},
6 | logout: {}
7 | });
8 |
9 | export default AuthActions;
10 |
--------------------------------------------------------------------------------
/dashboard-ui/src/actions/CoordinatorActions.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 |
3 | var CoordinatorActions = Reflux.createActions({
4 | fetchCoordinatorStatus: {children: ['completed', 'failed'], asyncResult: true},
5 | });
6 |
7 | export default CoordinatorActions;
8 |
--------------------------------------------------------------------------------
/dashboard-ui/src/actions/DashboardActions.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 |
3 | var DashboardActions = Reflux.createActions({
4 | fetchAllRepos: {children: ['completed', 'failed'], asyncResult: true}
5 | });
6 |
7 | export default DashboardActions;
8 |
--------------------------------------------------------------------------------
/dashboard-ui/src/actions/RepoDataActions.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 |
3 | var RepoDataActions = Reflux.createActions({
4 | createNewRepo: {children: ['completed', 'failed'], asyncResult: true},
5 | fetchRepoData: {children: ['completed', 'failed'], asyncResult: true},
6 | fetchReposRemaining: {children: ['completed', 'failed'], asyncResult: true},
7 | resetState: {},
8 | });
9 |
10 | export default RepoDataActions;
11 |
--------------------------------------------------------------------------------
/dashboard-ui/src/actions/RepoLogsActions.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 |
3 | var RepoLogsActions = Reflux.createActions({
4 | fetchRepoLogs: {children: ['completed', 'failed'], asyncResult: true},
5 | });
6 |
7 | export default RepoLogsActions;
8 |
--------------------------------------------------------------------------------
/dashboard-ui/src/actions/initializeActions.js:
--------------------------------------------------------------------------------
1 | import Dispatcher from '../dispatcher/appDispatcher';
2 | import ActionTypes from '../constants/actionTypes';
3 |
4 | var InitializeActions = {
5 | initApp: function() {
6 |
7 | Dispatcher.dispatch({
8 | actionType: ActionTypes.INITIALIZE,
9 | initialData: {
10 |
11 | }
12 | });
13 |
14 | }
15 | };
16 |
17 | export default InitializeActions;
18 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/app.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable strict */ // Disabling check because we can't run strict mode. Need global vars.
2 | import React, { Component } from 'react'
3 | import Header from './common/header';
4 | import Routes from './../routes';
5 |
6 | import './common/app.css';
7 |
8 | class App extends Component {
9 | render() {
10 | return (
11 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/common/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | background-color: #f8f9fa !important;
6 | }
7 |
8 | .margin-top-sm {
9 | margin-top: 20px;
10 | }
11 |
12 | .margin-top {
13 | margin-top: 40px;
14 | }
15 |
16 | .margin-bottom {
17 | margin-bottom: 40px;
18 | }
19 |
20 | .btn-transparent {
21 | color: #fff !important;
22 | background-color: #007bff00;
23 | border-color: #fff !important;
24 | border-radius: 0px !important;
25 | }
26 |
27 | .btn-transparent:hover {
28 | color: #dadada;
29 | background-color: #00000038;
30 | border-color: #ffffffc2 !important;
31 | }
32 |
33 | .btn-dark-alt {
34 | color: #000 !important;
35 | background-color: #007bff00;
36 | border-color: #000 !important;
37 | border-radius: 0px !important;
38 | }
39 |
40 | .btn-dark-alt:hover {
41 | opacity: 0.75 !important;
42 | }
43 |
44 | .btn-red-alt {
45 | color: white !important;
46 | background-color: red;
47 | border-color: red !important;
48 | border-radius: 0px !important;
49 | opacity: 0.75 !important;
50 | }
51 |
52 | .btn-red-alt:hover {
53 | opacity: 1 !important;
54 | }
55 |
56 | .btn-xs {
57 | padding: 0.25rem 0.5rem !important;
58 | font-size: 0.7125rem !important;
59 | line-height: 1.25 !important;
60 | border-radius: 0.15rem !important;
61 | }
62 |
63 | .text-black {
64 | color: black;
65 | }
66 |
67 | .badge-success {
68 | background-color: #62ca7a !important;
69 | }
70 |
71 | .text-success {
72 | color: #62ca7a !important;
73 | }
74 |
75 | .badge-primary, .btn-primary.disabled, .btn-primary:disabled {
76 | color: #fff !important;
77 | background-color: #304ffe !important;
78 | border-color: #304ffe !important;
79 | }
80 |
81 | .text-primary {
82 | color: #304ffe !important;
83 | }
84 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/common/header.css:
--------------------------------------------------------------------------------
1 | .header-logo {
2 | height: 80px;
3 | }
4 |
5 | .navbar {
6 | background: #1cc4c4;
7 | background: linear-gradient(90deg,#1cc4c4 0%,#520ab4 100%);
8 | opacity: 0.95;
9 | }
10 |
11 | .navbar-dark .navbar-nav .nav-link {
12 | color: hsla(0,0%,100%,.75) !important;
13 | }
14 |
15 | .navbar-dark .navbar-nav .nav-link:hover {
16 | color: hsla(0,0%,100%,.90) !important;
17 | }
18 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/common/header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Reflux from 'reflux';
3 | import { Link } from 'react-router-dom';
4 | import AuthStore from './../../stores/AuthStore';
5 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
6 |
7 |
8 | import logo from './white-logo.png';
9 | import './header.css';
10 |
11 | class Header extends Reflux.Component {
12 | constructor(props) {
13 | super(props);
14 | this.store = AuthStore;
15 | }
16 |
17 | render() {
18 | var rightElement;
19 | if (this.state.isAuthenticated) {
20 | let companyName = this.state.claims["company"];
21 |
22 | rightElement = (
23 |
24 | -
25 | New repo
26 |
27 | -
28 |
{"@" + companyName}
29 |
30 | -
31 |
32 |
33 |
34 | );
35 | } else {
36 | rightElement = (
37 |
38 | -
39 | Sign In
40 |
41 |
42 | );
43 | }
44 |
45 | return (
46 |
61 | );
62 | }
63 | }
64 |
65 | export default Header;
66 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/common/white-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DiscreetAI/dashboard-ui/371291831f6757ab06e8b45f9ec9260982560679/dashboard-ui/src/components/common/white-logo.png
--------------------------------------------------------------------------------
/dashboard-ui/src/components/common/white-logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DiscreetAI/dashboard-ui/371291831f6757ab06e8b45f9ec9260982560679/dashboard-ui/src/components/common/white-logo2.png
--------------------------------------------------------------------------------
/dashboard-ui/src/components/dashboard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import RepoList from './dashboard/repoList';
3 |
4 |
5 | class Dashboard extends Component {
6 | render() {
7 | return (
8 |
9 |
10 |
11 | );
12 | }
13 | }
14 |
15 | export default Dashboard;
16 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/dashboard/repoList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Reflux from 'reflux';
3 | import { Link, withRouter } from "react-router-dom";
4 |
5 | import RepoStatus from './../repo/repoStatus';
6 |
7 | import DashboardStore from './../../stores/DashboardStore';
8 | import DashboardActions from './../../actions/DashboardActions';
9 |
10 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
11 |
12 | var username = null;
13 | var repo_id = null;
14 |
15 | class RepoList extends Reflux.Component {
16 |
17 | constructor(props) {
18 | super(props);
19 | this.store = DashboardStore;
20 | }
21 |
22 | componentDidMount() {
23 | DashboardActions.fetchAllRepos();
24 | }
25 |
26 | render() {
27 | if (this.state.error !== false) {
28 | return Error: {this.state.error}
34 |
35 |
36 | );
37 | }
38 |
39 | if (this.state.repos.length === 0) {
40 | return (
41 |
42 |
You don't own any repos yet.
43 |
44 | Start by creating a new repo.
45 |
46 |
52 |
53 | {this.state.repos.map(function(repo, index) {
54 | let createdLessThan10MinutesAgo = Math.floor(Date.now()/1000) < (repo.CreatedAt + 60*10);
55 | repo_id = repo;
56 | return (
57 |
58 |
59 |
60 |
{repo.Name}
61 |
62 |
63 |
64 |
65 | )
66 | })}
67 |
68 |
8 | );
9 | }
10 | }
11 |
12 | export default Home;
13 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/newRepo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Reflux from 'reflux';
3 | import ReactDOM from 'react-dom';
4 | import { Link } from 'react-router-dom';
5 |
6 | import RepoDataStore from './../stores/RepoDataStore';
7 | import RepoDataActions from './../actions/RepoDataActions';
8 |
9 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
10 |
11 |
12 | class NewRepo extends Reflux.Component {
13 |
14 | constructor(props) {
15 | super(props);
16 | this.store = RepoDataStore;
17 | }
18 |
19 | componentDidMount() {
20 | RepoDataActions.fetchReposRemaining();
21 | }
22 |
23 | _handleSubmit(event) {
24 | event.preventDefault();
25 | let repoName = ReactDOM.findDOMNode(this.refs.repoName).value.replace(/[^a-zA-Z0-9-]/g,'-');
26 | document.getElementById("wait").hidden = false;
27 | RepoDataActions.createNewRepo(
28 | repoName,
29 | ReactDOM.findDOMNode(this.refs.repoDescription).value
30 | );
31 | }
32 |
33 | _handleContinue(event) {
34 | event.preventDefault();
35 | RepoDataActions.resetState();
36 | this.props.history.push("/repo/" + this.state.creationState.repoId);
37 | }
38 |
39 | render() {
40 | // Get number of repos left.
41 | if (this.state.creationState.loading === true) {
42 | return (
43 |
44 |
45 |
46 | );
47 | }
48 |
49 | if (this.state.creationState.created) {
50 | return (
51 |
52 |
53 |
54 |
55 |
Important!
56 |
The new repo was created and your API Key is shown below.
57 |
Please save it!
58 |
You won't be able to access it again and you will need it to hook up clients to this repo.
59 |
60 |
{this.state.creationState.apiKey}
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
76 |
Sorry, but you have no more repos left.
77 |
If you want to upgrade your account to support more repos, please email us.
78 |
Back to dashboard
79 |
84 |
85 |
86 |
Create a new repo
87 |
A repo is a link to a network of devices, history of training, and resulting models.
88 |
Create a new repository to start doing private federated learning. Repos are private by default.
89 |
105 |
106 |
8 |
Page Not Found
9 |
Whoops! Sorry, there is nothing to see here.
10 |
Back to Home
11 |
124 | // Error: {this.state.error}
125 | //
132 |
133 |
134 | );
135 | }
136 |
137 | if (!this.state.repoWasFound) {
138 | return
139 | }
140 | let createdLessThan10MinutesAgo = Math.floor(Date.now()/1000) < (this.state.repoData.CreatedAt + 60*10);
141 | return (
142 |
143 |
144 |
145 |
146 |
{this.state.repoData.Name}
147 |
{this.state.repoData.Description}
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
Click here to use Explora and start your session.
159 |
Sign in with the username {username} and leave the password blank.
160 |
Open a new terminal, and clone this GitHub repo. Open the folder and open the notebook called Explora.ipynb
161 |
Your repo ID is: {this.state.repoData.Id} .
162 |
163 |
164 |
165 |
166 |
167 |
11 |
No model has been trained yet.
12 |
Train a new model
13 |
19 |
20 |
21 | | SessionId |
22 | Time |
23 | Action |
24 | Log Content |
25 |
26 |
27 |
28 |
29 | {this.props.logs.map((log, index) => {
30 | return
31 | | {log.SessionId} |
32 | {this._formatTime(log.Timestamp)} |
33 | {log.ContentType} |
34 | {log.Content} |
35 |
36 | })}
37 |
38 |
39 | );
40 | }
41 |
42 | return (
43 |
44 |
45 |
46 |
47 |
48 |
Logs
49 |
History of training sessions for this repo. You can debug your environment from here.
50 |
51 |
52 | {content}
53 |
54 |
55 |
56 |
56 |
57 |
58 | | SessionId |
59 | Round |
60 | Time |
61 | Download Model |
62 |
63 |
64 |
65 |
66 | {this.props.logs.map((log, index) => {
67 | return
68 | | {log.SessionId} |
69 | {JSON.parse(log.Content).round} |
70 | {this._formatTime(log.Timestamp)} |
71 |
72 | Download
73 | |
74 |
75 | })}
76 |
77 |
78 | );
79 | }
80 |
81 | return (
82 |
83 |
84 |
85 |
86 |
87 |
Model Hub
88 |
Download your resulting models from here.
89 |
90 |
91 | {content}
92 |
93 |
94 |
95 |
8 |
9 |
10 | );
11 | }
12 | }
13 |
14 | export default SignIn;
15 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/signin/common.css:
--------------------------------------------------------------------------------
1 | .form-link, .form-link:hover {
2 | margin-left: 7.5px;
3 | color: white;
4 | font-weight: 700;
5 | text-decoration: none;
6 | }
7 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/signin/loginForm.js:
--------------------------------------------------------------------------------
1 | // Generated by https://pagedraw.io/pages/7992
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import { Link, withRouter } from "react-router-dom";
5 | import Reflux from 'reflux';
6 |
7 | import AuthStore from './../../stores/AuthStore';
8 | import AuthActions from './../../actions/AuthActions';
9 |
10 | import './common.css';
11 |
12 | class LoginForm extends Reflux.Component {
13 |
14 | constructor(props) {
15 | super(props);
16 | this.store = AuthStore;
17 | }
18 |
19 | componentWillUpdate(nextProps, nextState) {
20 | var isAuthenticated = nextState['isAuthenticated'];
21 | if (isAuthenticated) {
22 | this.props.history.push("dashboard");
23 | }
24 | }
25 |
26 | _handleSubmit(event) {
27 | event.preventDefault();
28 |
29 | AuthActions.login(
30 | ReactDOM.findDOMNode(this.refs.email).value,
31 | ReactDOM.findDOMNode(this.refs.password).value
32 | );
33 | }
34 |
35 | render() {
36 | var errorMessage = "";
37 | if (this.state.error) {
38 | errorMessage = (
39 |
40 | { this.state.error }
41 |
42 | );
43 | }
44 |
45 | return (
46 |
71 | );
72 | }
73 | }
74 |
75 | export default withRouter(LoginForm);
76 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/signin/registrationForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Link, withRouter } from "react-router-dom";
4 | import Reflux from 'reflux';
5 |
6 | import AuthStore from './../../stores/AuthStore';
7 | import AuthActions from './../../actions/AuthActions';
8 |
9 | import './common.css';
10 |
11 | class RegistationForm extends Reflux.Component {
12 |
13 | constructor(props) {
14 | super(props);
15 | this.store = AuthStore;
16 | }
17 |
18 | componentWillUpdate(nextProps, nextState) {
19 | var isAuthenticated = nextState['isAuthenticated'];
20 | if (isAuthenticated) {
21 | this.props.history.push("dashboard");
22 | }
23 | }
24 |
25 | _handleSubmit(event) {
26 | event.preventDefault();
27 |
28 | var registrationObject = {
29 | "first_name": ReactDOM.findDOMNode(this.refs.fname).value,
30 | "last_name": ReactDOM.findDOMNode(this.refs.lname).value,
31 | "company": ReactDOM.findDOMNode(this.refs.organization).value,
32 | "occupation": ReactDOM.findDOMNode(this.refs.position).value,
33 | "email": ReactDOM.findDOMNode(this.refs.email).value,
34 | "password1": ReactDOM.findDOMNode(this.refs.password1).value,
35 | "password2": ReactDOM.findDOMNode(this.refs.password2).value
36 | };
37 |
38 | AuthActions.registration(registrationObject);
39 | }
40 |
41 | render() {
42 | var errorMessage = "";
43 | if (this.state.error) {
44 | errorMessage = (
45 |
46 |
×
47 | { this.state.error }
48 |
15 |
16 | Signing out...
17 |
18 | );
19 | }
20 | }
21 |
22 | export default SignOut;
23 |
--------------------------------------------------------------------------------
/dashboard-ui/src/components/signup.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import RegistrationForm from './signin/registrationForm';
3 |
4 | class SignIn extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 | }
13 |
14 | export default SignIn;
15 |
--------------------------------------------------------------------------------
/dashboard-ui/src/constants/actionTypes.js:
--------------------------------------------------------------------------------
1 | import keyMirror from 'keymirror';
2 |
3 | var actionTypes = keyMirror({
4 | INITIALIZE: null,
5 | });
6 |
7 | export default actionTypes;
8 |
--------------------------------------------------------------------------------
/dashboard-ui/src/constants/endpoints.js:
--------------------------------------------------------------------------------
1 | var Endpoints = {
2 | 'eauthLogin': 'https://eauth.dataagora.com/auth/login/',
3 | 'eauthUser': 'https://eauth.dataagora.com/auth/user/',
4 | 'eauthRegistration': 'https://eauth.dataagora.com/auth/registration/',
5 | 'eauthLogout': 'https://eauth.dataagora.com/auth/logout/', // Not used with JWT.
6 |
7 | 'dashboardFetchReposRemaining': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/userdata',
8 | 'dashboardCreateNewRepo': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/repo',
9 | 'dashboardFetchAllRepos': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/repos',
10 | 'dashboardFetchRepoData': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/repo/',
11 | 'dashboardFetchRepoLogs': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/logs/',
12 | 'dashboardDeleteRepo': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/delete/',
13 | 'dashboardFetchCoordinatorStatus': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/coordinator/status/',
14 | 'dashboardGetDownloadModelURL': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/model',
15 | 'dashboardGetExploraURL': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/get_username/',
16 | 'dashboardResetCloudNode': 'https://fwkebecb19.execute-api.us-west-1.amazonaws.com/dev/reset_state/'
17 | };
18 |
19 | export default Endpoints;
20 |
--------------------------------------------------------------------------------
/dashboard-ui/src/dispatcher/appDispatcher.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * AppDispatcher
4 | *
5 | * A singleton that operates as the central hub for application updates.
6 | *
7 | */
8 |
9 | var Dispatcher = require('flux').Dispatcher;
10 |
11 | module.exports = new Dispatcher();
12 |
--------------------------------------------------------------------------------
/dashboard-ui/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom'
3 | import { BrowserRouter } from 'react-router-dom';
4 | import App from './components/app';
5 | import InitializeActions from './actions/initializeActions';
6 | import registerServiceWorker from './utils/registerServiceWorker';
7 |
8 | import 'jquery/dist/jquery.js';
9 | import 'bootstrap/dist/css/bootstrap.css';
10 | import 'bootstrap/dist/js/bootstrap.js';
11 |
12 |
13 | import { library } from '@fortawesome/fontawesome-svg-core'
14 | import { faSignOutAlt, faPlus, faSync } from '@fortawesome/free-solid-svg-icons'
15 |
16 | library.add(faPlus, faSignOutAlt, faSync);
17 |
18 | InitializeActions.initApp();
19 | render((
20 |
21 |
22 |
23 | ), document.getElementById('app'));
24 | registerServiceWorker();
25 |
--------------------------------------------------------------------------------
/dashboard-ui/src/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Route } from 'react-router-dom';
3 |
4 | import PrivateRoute from './utils/PrivateRoute';
5 | import AuthRoute from './utils/AuthRoute';
6 |
7 | import Home from './components/homePage';
8 | import SignIn from './components/signin';
9 | import SignUp from './components/signup';
10 | import SignOut from './components/signout';
11 | import Dashboard from './components/dashboard';
12 | import Repo from './components/repo'
13 | import NewRepo from './components/newRepo'
14 | import NotFoundPage from './components/notFoundPage';
15 |
16 |
17 | var Routes = () => (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 |
30 | export default Routes;
31 |
--------------------------------------------------------------------------------
/dashboard-ui/src/stores/AuthStore.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 | import cookie from 'react-cookies';
3 | import AuthActions from './../actions/AuthActions';
4 | import Endpoints from './../constants/endpoints.js';
5 |
6 |
7 | // TODO: Implement session keep-alive logic.
8 | class AuthStore extends Reflux.Store {
9 | constructor () {
10 | super();
11 | this.init();
12 | this.listenables = AuthActions;
13 | }
14 |
15 | init () {
16 | if (!this._isAuthenticated()) {
17 | this._resetState();
18 | } else {
19 | // Pull cached token if one exists...
20 | this.state = {
21 | error: false,
22 | loading: false,
23 | jwt: this._getJWT(),
24 | claims: this._getClaims(),
25 | isAuthenticated: true
26 | };
27 | }
28 | }
29 |
30 | onLogin (email, password) {
31 | this._resetState();
32 | this.state.loading = true;
33 | this._changed();
34 |
35 | var endpoint = Endpoints["eauthLogin"];
36 | fetch(
37 | endpoint, {
38 | method: 'POST',
39 | headers: {
40 | 'Content-Type':'application/json',
41 | 'Accept': 'application/json',
42 | },
43 | body: JSON.stringify({"email": email, "password": password}),
44 | }
45 | ).then(response => {
46 | this._handleLoginRegistrationResponse(response, AuthActions.login);
47 | });
48 | }
49 |
50 | onLoginCompleted (jwt) {
51 | this.state.jwt = jwt;
52 | localStorage.setItem('jwt', jwt);
53 | this.state.claims = this._getClaims();
54 | this.state.error = false;
55 | this.state.isAuthenticated = true;
56 | this.state.loading = false;
57 | this._deleteCookies();
58 | this._changed();
59 | }
60 |
61 | onLoginFailed (errorMessage) {
62 | this._resetState();
63 | this.state.error = errorMessage;
64 | this._changed();
65 | }
66 |
67 | onRegistration (registrationObject) {
68 | this._resetState();
69 | this.state.loading = true;
70 | this._changed();
71 |
72 | fetch(
73 | Endpoints["eauthRegistration"], {
74 | method: 'POST',
75 | headers: {
76 | 'Content-Type':'application/json',
77 | 'Accept': 'application/json',
78 | },
79 | body: JSON.stringify(registrationObject),
80 | }
81 | ).then(response => {
82 | this._handleLoginRegistrationResponse(response, AuthActions.registration);
83 | });
84 | }
85 |
86 | onRegistrationCompleted (jwt) {
87 | this.state.jwt = jwt;
88 | localStorage.setItem('jwt', jwt);
89 | this.state.claims = this._getClaims();
90 | this.state.error = false;
91 | this.state.isAuthenticated = true;
92 | this.state.loading = false;
93 | this._deleteCookies();
94 | this._changed();
95 | }
96 |
97 | onRegistrationFailed(errorMessage) {
98 | this._resetState();
99 | this.state.error = errorMessage;
100 | this._changed();
101 | }
102 |
103 | onLogout () {
104 | // Clear it all!
105 | this._resetState();
106 | this._changed();
107 | }
108 |
109 | _handleLoginRegistrationResponse(response, refluxAction) {
110 | response.json().then(serverResponse => {
111 | if (serverResponse && "token" in serverResponse) {
112 | var jwt = serverResponse['token'];
113 | refluxAction.completed(jwt);
114 | } else {
115 | // TODO: Use error returned by server.
116 | refluxAction.failed(JSON.stringify(serverResponse));
117 | }
118 | });
119 | }
120 |
121 | _isAuthenticated () {
122 | return this._getJWT();
123 | }
124 |
125 | _getClaims() {
126 | var jwt = this._getJWT();
127 | if (jwt === null) {
128 | return null;
129 | }
130 | return JSON.parse(atob(jwt.split('.')[1]));
131 | }
132 |
133 | _getJWT() {
134 | var jwt = localStorage.getItem("jwt");
135 | if (!jwt) {
136 | return null;
137 | }
138 | return jwt;
139 | }
140 |
141 | _changed () {
142 | this.trigger(this.state);
143 | }
144 |
145 | _resetState () {
146 | this.state = {
147 | error: false,
148 | loading: false,
149 | jwt: null,
150 | isAuthenticated: false,
151 | claims: {},
152 | };
153 |
154 | localStorage.removeItem('jwt');
155 |
156 | this._deleteCookies();
157 | }
158 |
159 | _deleteCookies() {
160 | cookie.remove('csrftoken', { path: '/' });
161 | cookie.remove('sessionid', { path: '/' });
162 | }
163 |
164 | }
165 |
166 | export default AuthStore;
167 |
--------------------------------------------------------------------------------
/dashboard-ui/src/stores/CoordinatorStore.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 | import CoordinatorActions from './../actions/CoordinatorActions';
3 | import AuthStore from './AuthStore';
4 | import Endpoints from './../constants/endpoints.js';
5 |
6 |
7 | class CoordinatorStore extends Reflux.Store {
8 |
9 | constructor () {
10 | super();
11 | this.init();
12 | this.listenables = CoordinatorActions;
13 | }
14 |
15 | init () {
16 | this.state = {
17 | loading: true, // not used
18 | error: false, // not used
19 | coordinatorStatuses: {},
20 | };
21 | }
22 |
23 | onFetchCoordinatorStatus(repoId) {
24 | if (AuthStore.state.isAuthenticated) {
25 | let jwtString = AuthStore.state.jwt;
26 |
27 | this.state.loading = true;
28 | this._changed();
29 |
30 | fetch(
31 | Endpoints["dashboardFetchCoordinatorStatus"] + repoId, {
32 | method: 'GET',
33 | headers: {
34 | 'Content-Type':'application/json',
35 | 'Accept': 'application/json',
36 | 'Authorization': 'Bearer ' + jwtString,
37 | },
38 | }
39 | ).then(response => {
40 | this._handleResponse(repoId, response, CoordinatorActions.fetchCoordinatorStatus);
41 | });
42 | }
43 | }
44 |
45 | _handleResponse(repoId, response, refluxAction) {
46 | response.json().then(serverResponse => {
47 | if (response.status === 200) {
48 | refluxAction.completed(repoId, serverResponse);
49 | } else {
50 | // TODO: Use error returned by server.
51 | refluxAction.failed(repoId, serverResponse);
52 | }
53 | });
54 | }
55 |
56 | onFetchCoordinatorStatusCompleted (repoId, status) {
57 | this.state.coordinatorStatuses[repoId] = status;
58 | this.state.loading = false;
59 | this._changed();
60 | }
61 |
62 | onFetchCoordinatorStatusFailed (repoId, errorObject) {
63 | this.state.coordinatorStatuses[repoId] = {};
64 | this.state.error = errorObject["message"];
65 | this.state.loading = false;
66 | this._changed();
67 | }
68 |
69 | _changed () {
70 | this.trigger(this.state);
71 | }
72 |
73 | }
74 |
75 | export default CoordinatorStore;
76 |
--------------------------------------------------------------------------------
/dashboard-ui/src/stores/DashboardStore.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 | import DashboardActions from './../actions/DashboardActions';
3 | import AuthStore from './AuthStore';
4 | import Endpoints from './../constants/endpoints.js';
5 |
6 |
7 | class DashboardStore extends Reflux.Store {
8 |
9 | constructor () {
10 | super();
11 | this.init();
12 | this.listenables = DashboardActions;
13 | }
14 |
15 | init () {
16 | this.state = {
17 | repos: [],
18 | loading: true,
19 | error: false,
20 | };
21 | }
22 |
23 | onFetchAllRepos() {
24 | if (AuthStore.state.isAuthenticated) {
25 | let jwtString = AuthStore.state.jwt;
26 |
27 | this.state.loading = true;
28 | this._changed();
29 |
30 | fetch(
31 | Endpoints["dashboardFetchAllRepos"], {
32 | method: 'GET',
33 | headers: {
34 | 'Content-Type':'application/json',
35 | 'Accept': 'application/json',
36 | 'Authorization': 'Bearer ' + jwtString,
37 | },
38 | }
39 | ).then(response => {
40 | this._handleFetchAllReposResponse(response);
41 | });
42 | }
43 | }
44 |
45 | _handleFetchAllReposResponse(response) {
46 | response.json().then(serverResponse => {
47 | if (response.status === 200) {
48 | DashboardActions.fetchAllRepos.completed(serverResponse);
49 | } else {
50 | // TODO: Use error returned by server.
51 | DashboardActions.fetchAllRepos.failed(serverResponse);
52 | }
53 | });
54 | }
55 |
56 | onFetchAllReposCompleted (repoList) {
57 | this.state.repos = repoList;
58 | this.state.repos.sort((a,b) =>{
59 | if (a.Name < b.Name) return -1;
60 | if (a.Name > b.Name) return 1;
61 | return 0;
62 | });
63 | this.state.loading = false;
64 | this._changed();
65 | }
66 |
67 | onFetchAllReposFailed (errorObject) {
68 | this.state.repos = {};
69 | this.state.error = errorObject["message"];
70 | this.state.loading = false;
71 | this._changed();
72 | }
73 |
74 | _changed () {
75 | this.trigger(this.state);
76 | }
77 |
78 | }
79 |
80 | export default DashboardStore;
81 |
--------------------------------------------------------------------------------
/dashboard-ui/src/stores/RepoDataStore.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 | import RepoDataActions from './../actions/RepoDataActions';
3 | import AuthStore from './AuthStore';
4 | import Endpoints from './../constants/endpoints.js';
5 |
6 |
7 | class RepoDataStore extends Reflux.Store {
8 |
9 | constructor () {
10 | super();
11 | this.init();
12 | this.listenables = RepoDataActions;
13 | }
14 |
15 | init () {
16 | this.state = {
17 | loading: true,
18 | error: false,
19 |
20 | repoWasFound: false,
21 | repoData: {},
22 | repoStatus: {},
23 | repoLogs: [],
24 |
25 | creationState: {
26 | reposRemaining: false,
27 | repoName: null,
28 | repoId: null,
29 | apiKey: null,
30 | loading: true,
31 | creating: false,
32 | created: false,
33 | error: false,
34 | },
35 | };
36 | }
37 |
38 | onShowModal() {
39 | this.state.creationState.created = true;
40 | this._changed();
41 | console.log(this.state.creationState);
42 | }
43 |
44 | onFetchRepoData(repoId) {
45 | if (AuthStore.state.isAuthenticated) {
46 | let jwtString = AuthStore.state.jwt;
47 |
48 | this.state.loading = true;
49 | this._changed();
50 |
51 | fetch(
52 | Endpoints["dashboardFetchRepoData"] + repoId, {
53 | method: 'GET',
54 | headers: {
55 | 'Content-Type':'application/json',
56 | 'Accept': 'application/json',
57 | 'Authorization': 'Bearer ' + jwtString,
58 | },
59 | }
60 | ).then(response => {
61 | this._handleResponse(response, RepoDataActions.fetchRepoData);
62 | });
63 | }
64 | }
65 |
66 | onFetchRepoDataCompleted (repoData) {
67 | this.state.repoWasFound = true;
68 | this.state.repoData = repoData;
69 | this.state.loading = false;
70 | this._changed();
71 | }
72 |
73 | onFetchRepoDataFailed (errorObject) {
74 | this.state.repoWasFound = false;
75 | this.state.repoData = {};
76 | this.state.error = errorObject["Message"];
77 | this.state.loading = false;
78 | this._changed();
79 | }
80 |
81 |
82 | onCreateNewRepo(repoName, repoDescription) {
83 | if (AuthStore.state.isAuthenticated) {
84 | let jwtString = AuthStore.state.jwt;
85 |
86 | this.state.creationState.creating = true;
87 | this._changed();
88 |
89 | fetch(
90 | Endpoints["dashboardCreateNewRepo"], {
91 | method: 'POST',
92 | headers: {
93 | 'Content-Type':'application/json',
94 | 'Accept': 'application/json',
95 | 'Authorization': 'Bearer ' + jwtString,
96 | },
97 | body: JSON.stringify({
98 | "RepoName": repoName,
99 | "RepoDescription": repoDescription,
100 | })
101 | }
102 | ).then(response => {
103 | this._handleResponse(response, RepoDataActions.createNewRepo);
104 | });
105 | }
106 | }
107 |
108 | onCreateNewRepoCompleted(results) {
109 | console.log(results)
110 | this.state.creationState.repoId = results["Results"]["RepoId"];
111 | this.state.creationState.apiKey = results["Results"]["TrueApiKey"];
112 | this.state.creationState.creating = false;
113 | this.state.creationState.created = true;
114 | this._changed();
115 | }
116 |
117 | onCreateNewRepoFailed(errorObject) {
118 | this.state.creationState.repoId = null;
119 | this.state.creationState.apiKey = null;
120 | this.state.creationState.creating = false;
121 | this.state.creationState.created = false;
122 | this.state.creationState.error = errorObject["Message"];
123 | this._changed();
124 | }
125 |
126 |
127 | onFetchReposRemaining() {
128 | if (AuthStore.state.isAuthenticated) {
129 | let jwtString = AuthStore.state.jwt;
130 |
131 | this.state.creationState.loading = true;
132 | this._changed();
133 |
134 | fetch(
135 | Endpoints["dashboardFetchReposRemaining"], {
136 | method: 'GET',
137 | headers: {
138 | 'Content-Type':'application/json',
139 | 'Accept': 'application/json',
140 | 'Authorization': 'Bearer ' + jwtString,
141 | }
142 | }
143 | ).then(response => {
144 | this._handleResponse(response, RepoDataActions.fetchReposRemaining);
145 | });
146 | }
147 | }
148 |
149 | onFetchReposRemainingCompleted(results) {
150 | this.state.creationState.loading = false;
151 | this.state.creationState.reposRemaining = results["ReposRemaining"];
152 | this._changed();
153 | }
154 |
155 | onFetchReposRemainingFailed(errorObject) {
156 | this.state.creationState.loading = false;
157 | this.state.creationState.error = errorObject["Message"];
158 | this._changed();
159 | }
160 |
161 | onResetState() {
162 | this.init();
163 | }
164 |
165 |
166 | _handleResponse(response, refluxAction) {
167 | response.json().then(serverResponse => {
168 | if (response.status === 200) {
169 | refluxAction.completed(serverResponse);
170 | } else {
171 | // TODO: Use error returned by server.
172 | refluxAction.failed(serverResponse);
173 | }
174 | });
175 | }
176 |
177 | _changed () {
178 | this.trigger(this.state);
179 | }
180 |
181 | }
182 |
183 | export default RepoDataStore;
184 |
--------------------------------------------------------------------------------
/dashboard-ui/src/stores/RepoLogsStore.js:
--------------------------------------------------------------------------------
1 | import Reflux from 'reflux';
2 | import RepoLogsActions from './../actions/RepoLogsActions';
3 | import AuthStore from './AuthStore';
4 | import Endpoints from './../constants/endpoints.js';
5 |
6 |
7 | class RepoLogsStore extends Reflux.Store {
8 |
9 | constructor () {
10 | super();
11 | this.init();
12 | this.listenables = RepoLogsActions;
13 | }
14 |
15 | init () {
16 | this.state = {
17 | loadingLogs: true,
18 | errorLogs: false,
19 | repoLogs: [],
20 | };
21 | }
22 |
23 | onFetchRepoLogs(repoId) {
24 | if (AuthStore.state.isAuthenticated) {
25 | let jwtString = AuthStore.state.jwt;
26 |
27 | this.state.loadingLogs = true;
28 | this._changed();
29 |
30 | fetch(
31 | Endpoints["dashboardFetchRepoLogs"] + repoId, {
32 | method: 'GET',
33 | headers: {
34 | 'Content-Type':'application/json',
35 | 'Accept': 'application/json',
36 | 'Authorization': 'Bearer ' + jwtString,
37 | },
38 | }
39 | ).then(response => {
40 | this._handleResponse(response, RepoLogsActions.fetchRepoLogs);
41 | });
42 | }
43 | }
44 |
45 | _handleResponse(response, refluxAction) {
46 | response.json().then(serverResponse => {
47 | if (response.status === 200) {
48 | refluxAction.completed(serverResponse);
49 | } else {
50 | // TODO: Use error returned by server.
51 | refluxAction.failed(serverResponse);
52 | }
53 | });
54 | }
55 |
56 | onFetchRepoLogsCompleted (repoLogs) {
57 | this.state.repoLogs = repoLogs;
58 | this.state.loadingLogs = false;
59 | this._changed();
60 | }
61 |
62 | onFetchRepoLogsFailed (errorObject) {
63 | this.state.repoLogs = {};
64 | this.state.errorLogs = errorObject["Message"];
65 | this.state.loadingLogs = false;
66 | this._changed();
67 | }
68 |
69 | _changed () {
70 | this.trigger(this.state);
71 | }
72 |
73 | }
74 |
75 | export default RepoLogsStore;
76 |
--------------------------------------------------------------------------------
/dashboard-ui/src/utils/AuthRoute.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Redirect } from 'react-router-dom';
3 | import AuthStore from './../stores/AuthStore';
4 |
5 | const AuthRoute = ({ component: Component, ...rest }) => (
6 |
9 | !AuthStore.state.isAuthenticated ? (
10 |
11 | ) : (
12 |
18 | )
19 | }
20 | />
21 | );
22 |
23 | export default AuthRoute;
24 |
--------------------------------------------------------------------------------
/dashboard-ui/src/utils/PrivateRoute.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Redirect } from 'react-router-dom';
3 | import AuthStore from './../stores/AuthStore';
4 |
5 | const PrivateRoute = ({ component: Component, ...rest }) => (
6 |
9 | AuthStore.state.isAuthenticated ? (
10 |
11 | ) : (
12 |
18 | )
19 | }
20 | />
21 | );
22 |
23 | export default PrivateRoute;
24 |
--------------------------------------------------------------------------------
/dashboard-ui/src/utils/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ'
45 | );
46 | });
47 | } else {
48 | // Is not local host. Just register service worker
49 | registerValidSW(swUrl);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then(registration => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | installingWorker.onstatechange = () => {
62 | if (installingWorker.state === 'installed') {
63 | if (navigator.serviceWorker.controller) {
64 | // At this point, the old content will have been purged and
65 | // the fresh content will have been added to the cache.
66 | // It's the perfect time to display a "New content is
67 | // available; please refresh." message in your web app.
68 | console.log('New content is available; please refresh.');
69 | } else {
70 | // At this point, everything has been precached.
71 | // It's the perfect time to display a
72 | // "Content is cached for offline use." message.
73 | console.log('Content is cached for offline use.');
74 | }
75 | }
76 | };
77 | };
78 | })
79 | .catch(error => {
80 | console.error('Error during service worker registration:', error);
81 | });
82 | }
83 |
84 | function checkValidServiceWorker(swUrl) {
85 | // Check if the service worker can be found. If it can't reload the page.
86 | fetch(swUrl)
87 | .then(response => {
88 | // Ensure service worker exists, and that we really are getting a JS file.
89 | if (
90 | response.status === 404 ||
91 | response.headers.get('content-type').indexOf('javascript') === -1
92 | ) {
93 | // No service worker found. Probably a different app. Reload the page.
94 | navigator.serviceWorker.ready.then(registration => {
95 | registration.unregister().then(() => {
96 | window.location.reload();
97 | });
98 | });
99 | } else {
100 | // Service worker found. Proceed as normal.
101 | registerValidSW(swUrl);
102 | }
103 | })
104 | .catch(() => {
105 | console.log(
106 | 'No internet connection found. App is running in offline mode.'
107 | );
108 | });
109 | }
110 |
111 | export function unregister() {
112 | if ('serviceWorker' in navigator) {
113 | navigator.serviceWorker.ready.then(registration => {
114 | registration.unregister();
115 | });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------