Skip to content

Commit eb0a97a

Browse files
breezewishbreezewish
authored
Add Layouts for FrontEnd (#8)
Signed-off-by: Breezewish <[email protected]>
1 parent cf6df9c commit eb0a97a

20 files changed

+1294
-1125
lines changed

‎ui/.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/utils/dashboard_client

‎ui/.github_release_version

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# This file contains a version number which will be used to release assets to
22
# GitHub. To trigger a new asset release, simply increase this version number.
3-
20200108_2
3+
20200109_1

‎ui/config-overrides.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
const { override, fixBabelImports, addLessLoader, addWebpackPlugin } = require('customize-cra');
1+
const path = require('path');
2+
const { override, fixBabelImports, addLessLoader, addWebpackResolve, addWebpackPlugin } = require('customize-cra');
23
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
34

5+
const enableEslintIgnore = () => config => {
6+
const eslintRule = config.module.rules.filter(
7+
r => r.use && r.use.some(u => u.options && u.options.useEslintrc !== void 0)
8+
)[0];
9+
eslintRule.use[0].options.ignore = true;
10+
return config;
11+
}
12+
413
module.exports = override(
514
fixBabelImports('import', {
615
libraryName: 'antd',
@@ -9,7 +18,15 @@ module.exports = override(
918
}),
1019
addLessLoader({
1120
javascriptEnabled: true,
12-
modifyVars: { '@primary-color': '#3351ff' },
21+
modifyVars: {
22+
'@primary-color': '#3351ff',
23+
'@body-background': '#f0f2f5',
24+
},
25+
localIdentName: '[local]--[hash:base64:5]',
1326
}),
1427
addWebpackPlugin(new AntdDayjsWebpackPlugin()),
28+
addWebpackResolve({
29+
alias: { '@': path.resolve(__dirname, 'src') },
30+
}),
31+
enableEslintIgnore(),
1532
);

‎ui/package.json

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,14 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^4.2.4",
7-
"@testing-library/react": "^9.3.2",
8-
"@testing-library/user-event": "^7.1.2",
6+
"@pingcap-incubator/pd-client-js": "^0.1.5",
97
"antd": "^3.26.5",
10-
"antd-dayjs-webpack-plugin": "^0.0.7",
118
"axios": "^0.19.0",
12-
"babel-plugin-import": "^1.13.0",
13-
"customize-cra": "^0.9.1",
14-
"less": "^3.10.3",
15-
"less-loader": "^5.0.0",
169
"react": "^16.12.0",
17-
"react-app-rewired": "^2.1.5",
1810
"react-dom": "^16.12.0",
19-
"react-scripts": "3.3.0",
20-
"typescript": "^3.7.4",
21-
"@pingcap-incubator/pd-client-js": "^0.1.5"
11+
"react-router-dom": "^5.1.2",
12+
"single-spa": "^4.4.2",
13+
"single-spa-react": "^2.11.0"
2214
},
2315
"scripts": {
2416
"start": "react-app-rewired start",
@@ -44,6 +36,15 @@
4436
]
4537
},
4638
"devDependencies": {
47-
"@openapitools/openapi-generator-cli": "^1.0.8-4.2.2"
39+
"@openapitools/openapi-generator-cli": "^1.0.8-4.2.2",
40+
"@types/react-router-dom": "^5.1.3",
41+
"antd-dayjs-webpack-plugin": "^0.0.8",
42+
"babel-plugin-import": "^1.13.0",
43+
"customize-cra": "^0.9.1",
44+
"less": "^3.10.3",
45+
"less-loader": "^5.0.0",
46+
"react-app-rewired": "^2.1.5",
47+
"react-scripts": "3.1.x",
48+
"typescript": "^3.7.4"
4849
}
4950
}

‎ui/public/index.html

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,13 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="TiDB Dashboard"
11-
/>
7+
<meta name="description" content="TiDB Dashboard"/>
8+
<style>body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f0f2f5}#dashboard_page_spinner{font-size:10px;text-indent:-9999em;width:8em;height:8em;position:fixed;margin-left:-4em;margin-top:-4em;left:50%;top:50%;border-radius:50%;background:#a1d8f8;background:-moz-linear-gradient(left,#a1d8f8 10%,rgba(161,216,248,0) 42%);background:-webkit-linear-gradient(left,#a1d8f8 10%,rgba(161,216,248,0) 42%);background:-o-linear-gradient(left,#a1d8f8 10%,rgba(161,216,248,0) 42%);background:-ms-linear-gradient(left,#a1d8f8 10%,rgba(161,216,248,0) 42%);background:linear-gradient(to right,#a1d8f8 10%,rgba(161,216,248,0) 42%);-webkit-animation:load3 1.4s infinite linear;animation:load3 1.4s infinite linear;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}#dashboard_page_spinner:before{width:50%;height:50%;background:#a1d8f8;border-radius:100% 0 0 0;position:absolute;top:0;left:0;content:''}#dashboard_page_spinner:after{background:#f0f2f5;width:75%;height:75%;border-radius:50%;content:'';margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@-webkit-keyframes load3{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load3{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style>
129
<title>TiDB Dashboard</title>
1310
</head>
1411
<body>
1512
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="dashboard_page_spinner"></div>
1614
<div id="root"></div>
17-
<!--
18-
This HTML file is a template.
19-
If you open it directly in the browser, you will see an empty page.
20-
21-
You can add webfonts, meta tags, or analytics to this file.
22-
The build step will place the bundled scripts into the <body> tag.
23-
24-
To begin the development, run `npm start` or `yarn start`.
25-
To create a production bundle, use `npm run build` or `yarn build`.
26-
-->
2715
</body>
2816
</html>

‎ui/src/App.css

Whitespace-only changes.

‎ui/src/App.js renamed to ‎ui/src/apps/demo/RootComponent.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React from 'react';
22
import { Button } from 'antd';
3-
import './App.css';
3+
import { Link } from 'react-router-dom';
4+
import { HashRouter as Router } from 'react-router-dom';
45

5-
import client from './utils/client';
6+
import client from '@/utils/client';
67

78
const App = () => (
8-
<div className="App">
9+
<Router>
910
<Button type="primary" onClick={handleClick}>Button</Button>
10-
</div>
11+
<Link to="/home">
12+
<Button type="primary">Go To Home</Button>
13+
</Link>
14+
</Router>
1115
);
1216

1317
async function handleClick() {

‎ui/src/apps/demo/app.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import singleSpaReact from 'single-spa-react';
4+
import RootComponent from './RootComponent.js';
5+
6+
const reactLifecycles = singleSpaReact({
7+
React,
8+
ReactDOM,
9+
rootComponent: RootComponent,
10+
domElementGetter,
11+
});
12+
13+
export const bootstrap = [
14+
reactLifecycles.bootstrap,
15+
];
16+
export const mount = [
17+
reactLifecycles.mount,
18+
];
19+
export const unmount = [
20+
reactLifecycles.unmount,
21+
];
22+
23+
function domElementGetter() {
24+
return document.getElementById('__spa_content__');
25+
}

‎ui/src/apps/demo/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
id: 'demo',
3+
loader: () => import('./app.js'),
4+
routerPrefix: '/demo',
5+
icon: 'pie-chart',
6+
menuTitle: 'Demo 2', // TODO: I18N
7+
}

‎ui/src/apps/home/RootComponent.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import { Menu } from 'antd';
3+
import { HashRouter as Router, Switch, Route, Link } from 'react-router-dom';
4+
5+
const App = () => (
6+
<Router>
7+
<p>Hello World</p>
8+
<p>Sample child navigation</p>
9+
<Menu mode="horizontal">
10+
<Menu.Item>
11+
<Link to="/home/">Home</Link>
12+
</Menu.Item>
13+
<Menu.Item>
14+
<Link to="/home/about">Home/About</Link>
15+
</Menu.Item>
16+
<Menu.Item>
17+
<Link to="/home/users">Home/Users</Link>
18+
</Menu.Item>
19+
<Menu.Item>
20+
<Link to="/demo">Demo</Link>
21+
</Menu.Item>
22+
</Menu>
23+
<Switch>
24+
<Route path="/home/about">
25+
<About />
26+
</Route>
27+
<Route path="/home/users">
28+
<Users />
29+
</Route>
30+
<Route path="/demo">
31+
<Home />
32+
</Route>
33+
</Switch>
34+
</Router>
35+
);
36+
37+
function Home() {
38+
return <h2>Home</h2>;
39+
}
40+
41+
function About() {
42+
return <h2>About</h2>;
43+
}
44+
45+
function Users() {
46+
return <h2>Users</h2>;
47+
}
48+
49+
export default App;

0 commit comments

Comments
 (0)