hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-16 14:33:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix /jsx with prettifier

Browse Source
This commit is contained in:
Nathan Barber
2021-04-08 15:50:54 -04:00
parent 89a430cc13
commit c7dcb4db85
12 changed files with 4883 additions and 4125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.yml vendored
View File

@@ -225,4 +225,4 @@ jobs:
cd jsx && yarn && yarn test
- name: Submit codecov report
run: |
codecov
codecov

1
.prettierignore
View File

@@ -1 +1,2 @@
share/jupyterhub/templates/
share/jupyterhub/static/js/admin-react.js

72
jsx/.eslintrc.json
View File

@@ -1,41 +1,33 @@
{
"extends": [
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": [
"eslint-plugin-react",
"prettier"
],
"env": {
"es6": true,
"browser": true
},
"rules": {
"semi": "off",
"quotes": "off",
"prettier/prettier": "warn"
},
"overrides": [
{
"files": [
"**/*.test.js",
"**/*.test.jsx"
],
"env": {
"jest": true
}
}
]
}
"extends": ["plugin:react/recommended"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": ["eslint-plugin-react", "prettier"],
"env": {
"es6": true,
"browser": true
},
"rules": {
"semi": "off",
"quotes": "off",
"prettier/prettier": "warn"
},
"overrides": [
{
"files": ["**/*.test.js", "**/*.test.jsx"],
"env": {
"jest": true
}
}
]
}

2
jsx/.gitignore vendored
View File

@@ -1,2 +1,2 @@
node_modules
build/admin-react.js
build/admin-react.js

24
jsx/README.md
View File

@@ -1,12 +1,14 @@
# Jupyterhub Admin Dashboard - React Variant
This repository contains current updates to the Jupyterhub Admin Dashboard service,
reducing the complexity from a mass of templated HTML to a simple React web application.
This will integrate with Jupyterhub, speeding up client interactions while simplifying the
admin dashboard codebase.
# Jupyterhub Admin Dashboard - React Variant
### Build Commands
- `yarn build`: Installs all dependencies and bundles the application
- `yarn hot`: Bundles the application and runs a mock (serverless) version on port 8000
- `yarn lint`: Lints JSX with ESLint
- `yarn lint --fix`: Lints and fixes errors JSX with ESLint / formats with Prettier
- `yarn place`: Copies the transpiled React bundle to /share/jupyterhub/static/js/admin-react.js for use.
This repository contains current updates to the Jupyterhub Admin Dashboard service,
reducing the complexity from a mass of templated HTML to a simple React web application.
This will integrate with Jupyterhub, speeding up client interactions while simplifying the
admin dashboard codebase.
### Build Commands
- `yarn build`: Installs all dependencies and bundles the application
- `yarn hot`: Bundles the application and runs a mock (serverless) version on port 8000
- `yarn lint`: Lints JSX with ESLint
- `yarn lint --fix`: Lints and fixes errors JSX with ESLint / formats with Prettier
- `yarn place`: Copies the transpiled React bundle to /share/jupyterhub/static/js/admin-react.js for use.

6
jsx/build/index.html
View File

@@ -1,6 +1,6 @@
<!DOCTYPE html>
<head></head>
<body>
<div id="admin-react-hook"></div>
<script src="admin-react.js"></script>
</body>
<div id="admin-react-hook"></div>
<script src="admin-react.js"></script>
</body>

2
jsx/src/App.jsx
View File

@@ -17,7 +17,7 @@ import EditUser from "./components/EditUser/EditUser";
import "./style/root.css";
const store = createStore(reducers, initialState)
const store = createStore(reducers, initialState);
const App = (props) => {
useEffect(() => {

44
jsx/src/components/Multiselect/multi-select.css
View File

@@ -1,40 +1,40 @@
@import url(../../style/root.css);
.multi-container {
width: 100%;
position: relative;
padding: 5px;
overflow-x: scroll;
width: 100%;
position: relative;
padding: 5px;
overflow-x: scroll;
}
.multi-container div {
display: inline-block;
display: inline-block;
}
.multi-container .item {
padding: 3px;
padding-left: 6px;
padding-right: 6px;
border-radius: 3px;
font-size: 14px;
margin-left: 4px;
margin-right: 4px;
transition: 30ms ease-in all;
cursor: pointer;
user-select: none;
border: solid 1px #dfdfdf;
padding: 3px;
padding-left: 6px;
padding-right: 6px;
border-radius: 3px;
font-size: 14px;
margin-left: 4px;
margin-right: 4px;
transition: 30ms ease-in all;
cursor: pointer;
user-select: none;
border: solid 1px #dfdfdf;
}
.multi-container .item.unselected {
background-color: #f7f7f7;
color: #777;
background-color: #f7f7f7;
color: #777;
}
.multi-container .item.selected {
background-color: orange;
color: white;
background-color: orange;
color: white;
}
.multi-container .item:hover {
opacity: 0.7;
}
opacity: 0.7;
}

28
jsx/src/components/ServerDashboard/server-dashboard.css
View File

@@ -1,32 +1,32 @@
@import url(../../style/root.css);
.server-dashboard-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.server-dashboard-container .add-users-button {
border: 1px solid #ddd;
border: 1px solid #ddd;
}
.server-dashboard-container tbody {
color: #626262;
color: #626262;
}
.admin-table-head {
user-select: none;
user-select: none;
}
.sort-icon {
display: inline-block;
top: .125em;
position: relative;
user-select: none;
cursor: pointer;
display: inline-block;
top: 0.125em;
position: relative;
user-select: none;
cursor: pointer;
}
tr.noborder > td {
border: none !important;
}
border: none !important;
}

30
jsx/src/style/root.css
View File

@@ -1,35 +1,35 @@
:root {
--red: #d7191e;
--orange: #f1ad4e;
--blue: #2e7ab6;
--white: #ffffff;
--gray: #f7f7f;
--red: #d7191e;
--orange: #f1ad4e;
--blue: #2e7ab6;
--white: #ffffff;
--gray: #f7f7f;
}
/* Color Classes */
.red {
background-color: var(--red);
background-color: var(--red);
}
.orange {
background-color: var(--orange);
background-color: var(--orange);
}
.blue {
background-color: var(--blue);
background-color: var(--blue);
}
.white {
background-color: var(--white);
background-color: var(--white);
}
/* Resets */
.resets .modal {
display: block;
visibility: visible;
z-index: 2000
display: block;
visibility: visible;
z-index: 2000;
}
/* Global Util Classes */
.adjacent-span-spacing {
margin-right: 5px;
margin-left: 5px;
}
margin-right: 5px;
margin-left: 5px;
}

155
jsx/webpack.config.js
View File

@@ -1,66 +1,97 @@
const webpack = require("webpack")
const path = require("path")
const express = require("express")
const webpack = require("webpack");
const path = require("path");
const express = require("express");
module.exports = {
entry: path.resolve(__dirname, "src", "App.jsx"),
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.(css)/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpe?g|gif|svg|woff2?|ttf)$/i,
exclude: /node_modules/,
use: "file-loader"
}
]
},
output: {
publicPath: "/",
filename: "admin-react.js",
path: path.resolve(__dirname, "build"),
},
resolve: {
extensions: [".css", ".js", ".jsx"]
},
plugins: [
new webpack.HotModuleReplacementPlugin
entry: path.resolve(__dirname, "src", "App.jsx"),
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.(css)/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|woff2?|ttf)$/i,
exclude: /node_modules/,
use: "file-loader",
},
],
devServer: {
contentBase: path.resolve(__dirname, "build"),
port: 9000,
before: (app, server) => {
var user_data = JSON.parse('[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]')
var group_data = JSON.parse('[{"kind":"group","name":"testgroup","users":[]}, {"kind":"group","name":"testgroup2","users":["foo", "bar"]}]')
app.use(express.json())
},
output: {
publicPath: "/",
filename: "admin-react.js",
path: path.resolve(__dirname, "build"),
},
resolve: {
extensions: [".css", ".js", ".jsx"],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.resolve(__dirname, "build"),
port: 9000,
before: (app, server) => {
var user_data = JSON.parse(
'[{"kind":"user","name":"foo","admin":true,"groups":[],"server":"/user/foo/","pending":null,"created":"2020-12-07T18:46:27.112695Z","last_activity":"2020-12-07T21:00:33.336354Z","servers":{"":{"name":"","last_activity":"2020-12-07T20:58:02.437408Z","started":"2020-12-07T20:58:01.508266Z","pending":null,"ready":true,"state":{"pid":28085},"url":"/user/foo/","user_options":{},"progress_url":"/hub/api/users/foo/server/progress"}}},{"kind":"user","name":"bar","admin":false,"groups":[],"server":null,"pending":null,"created":"2020-12-07T18:46:27.115528Z","last_activity":"2020-12-07T20:43:51.013613Z","servers":{}}]'
);
var group_data = JSON.parse(
'[{"kind":"group","name":"testgroup","users":[]}, {"kind":"group","name":"testgroup2","users":["foo", "bar"]}]'
);
app.use(express.json());
// get user_data
app.get("/hub/api/users", (req, res) => { res.set("Content-Type", "application/json").send(JSON.stringify(user_data)) })
// get group_data
app.get("/hub/api/groups", (req, res) => { res.set("Content-Type", "application/json").send(JSON.stringify(group_data)) })
// add users to group
app.post("/hub/api/groups/*/users", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
// remove users from group
app.delete("/hub/api/groups/*", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
// add users
app.post("/hub/api/users", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
// delete user
app.delete("/hub/api/users", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
// start user server
app.post("/hub/api/users/*/server", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
// stop user server
app.delete("/hub/api/users/*/server", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
// shutdown hub
app.post("/hub/api/shutdown", (req, res) => { console.log(req.url, req.body); res.status(200).end() })
}
}
}
// get user_data
app.get("/hub/api/users", (req, res) => {
res
.set("Content-Type", "application/json")
.send(JSON.stringify(user_data));
});
// get group_data
app.get("/hub/api/groups", (req, res) => {
res
.set("Content-Type", "application/json")
.send(JSON.stringify(group_data));
});
// add users to group
app.post("/hub/api/groups/*/users", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
// remove users from group
app.delete("/hub/api/groups/*", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
// add users
app.post("/hub/api/users", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
// delete user
app.delete("/hub/api/users", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
// start user server
app.post("/hub/api/users/*/server", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
// stop user server
app.delete("/hub/api/users/*/server", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
// shutdown hub
app.post("/hub/api/shutdown", (req, res) => {
console.log(req.url, req.body);
res.status(200).end();
});
},
},
};

8642
share/jupyterhub/static/js/admin-react.js
View File

File diff suppressed because one or more lines are too long