diff --git a/dashboard-client/app/app/package.json b/dashboard-client/app/app/package.json
index 1e0b2e01ad..da43e3d9d7 100644
--- a/dashboard-client/app/app/package.json
+++ b/dashboard-client/app/app/package.json
@@ -10,7 +10,7 @@
},
"scripts": {
"start": "react-scripts start",
- "build": "react-scripts build",
+ "build": "react-scripts build && rm build/static/js/*.map && rm build/static/css/*.map",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
diff --git a/dashboard-client/app/app/src/App.js b/dashboard-client/app/app/src/App.js
index 1592c57f08..7fabcc00da 100644
--- a/dashboard-client/app/app/src/App.js
+++ b/dashboard-client/app/app/src/App.js
@@ -4,6 +4,14 @@ import styled from 'styled-components';
import Tabs from './components/Tabs';
import Search from './components/Search';
import Pareto from './components/Pareto';
+import Footer from './components/Footer';
+
+const PageContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`;
const Container = styled.div`
display: flex;
@@ -17,6 +25,21 @@ const Container = styled.div`
box-shadow: 0 0 4px 0 #777;
`;
+const Title = styled.h1`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: ${({ theme }) => theme.primary};
+ color: white;
+ width: 100%;
+ padding: 3px;
+`;
+
+const imgStyle = {
+ paddingRight: '20px',
+ paddingTop: '6px'
+};
+
class App extends Component {
state = {
view: 'search'
@@ -30,13 +53,15 @@ class App extends Component {
render() {
const { handleViewChange, state: { view } } = this;
return (
- <>
+
+
Moderator Tools
{ view === 'search' && }
{ view === 'reports' && }
- >
+
+
);
}
}
diff --git a/dashboard-client/app/app/src/components/Footer.js b/dashboard-client/app/app/src/components/Footer.js
new file mode 100644
index 0000000000..be85419ccd
--- /dev/null
+++ b/dashboard-client/app/app/src/components/Footer.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+ margin-top: 5px;
+ text-align: center;
+`;
+
+const Info = styled.div`
+ font-size: 14px;
+ padding: 2px;
+`;
+
+class Footer extends Component {
+ state = {
+ numPRs: null,
+ prRange: null,
+ lastUpdate: null
+ }
+
+ componentDidMount() {
+ const baseUrl = 'https://pr-relations.glitch.me/';
+ const fetchUrl = baseUrl + 'info';
+ fetch(fetchUrl)
+ .then((response) => response.json())
+ .then(({ ok, numPRs, prRange, lastUpdate }) => {
+ if (ok) {
+ this.setState((prevState) => ({ numPRs, prRange, lastUpdate }));
+ }
+ })
+ .catch(() => {
+ // do nothing
+ });
+ }
+
+ localTime(lastUpdate) {
+ const newTime = new Date(lastUpdate);
+ return newTime.toLocaleString();
+ }
+
+ render() {
+ const { numPRs, prRange, lastUpdate } = this.state;
+ return (
+
+ Last Update: {this.localTime(lastUpdate)}
+ # of open PRs: {numPRs} ({prRange})
+
+ );
+ }
+};
+
+export default Footer;
diff --git a/dashboard-client/app/app/src/components/Search.js b/dashboard-client/app/app/src/components/Search.js
index 604e71ddea..86c165395f 100644
--- a/dashboard-client/app/app/src/components/Search.js
+++ b/dashboard-client/app/app/src/components/Search.js
@@ -8,7 +8,8 @@ class Search extends Component {
state = {
searchValue: '',
selectedOption: 'pr',
- results: []
+ results: [],
+ message: ''
};
clearObj = { searchValue: '', results: [] };
@@ -35,7 +36,9 @@ class Search extends Component {
handleButtonClick = () => {
const { searchValue } = this.state;
- this.searchPRs(searchValue);
+ if (searchValue) {
+ this.searchPRs(searchValue);
+ }
}
handleOptionChange = (changeEvent) => {
@@ -49,14 +52,9 @@ class Search extends Component {
const fetchUrl = baseUrl + (selectedOption === 'pr' ? `pr/${value}` : `search/?value=${value}`);
fetch(fetchUrl)
.then((response) => response.json())
- .then((response) => {
- if (response.ok) {
- const { results } = response;
- const objArrName = selectedOption === 'pr' ? 'filenames' : 'prs';
- if (!results.length) {
- results.push({ searchValue: 'No matching results', [objArrName]: [] });
- }
- this.setState((prevState) => ({ results }));
+ .then(({ ok, message, results }) => {
+ if (ok) {
+ this.setState((prevState) => ({ message, results }));
}
else {
this.inputRef.current.focus();
@@ -69,7 +67,7 @@ class Search extends Component {
render() {
const { handleButtonClick, handleInputEvent, inputRef, handleOptionChange, state } = this;
- const { searchValue, results, selectedOption } = state;
+ const { searchValue, message, results, selectedOption } = state;
return (
<>
@@ -82,6 +80,7 @@ class Search extends Component {
+ {message}
{selectedOption === 'pr' && }
{selectedOption === 'filename' && }
>
diff --git a/dashboard-client/app/app/src/components/Tabs.js b/dashboard-client/app/app/src/components/Tabs.js
index 84433bca7a..c73c51dcbe 100644
--- a/dashboard-client/app/app/src/components/Tabs.js
+++ b/dashboard-client/app/app/src/components/Tabs.js
@@ -15,13 +15,13 @@ const Tab = styled.div`
padding: 5px;
border: 2px solid ${({ theme }) => theme.primary};
border-left: none;
- flex-basis: 200px;
+ width: 200px;
text-align: center;
&:hover {
cursor: pointer;
- background: rgba(0, 0, 255, 0.8);
- color: white;
+ background: #EEEEEE;
+ color: ${({ theme }) => theme.primary};
}
&:first-child {
diff --git a/dashboard-client/app/app/src/theme/index.js b/dashboard-client/app/app/src/theme/index.js
index 142142640c..44fb7d5011 100644
--- a/dashboard-client/app/app/src/theme/index.js
+++ b/dashboard-client/app/app/src/theme/index.js
@@ -1,5 +1,5 @@
const theme = {
- primary: 'blue'
+ primary: '#006400'
};
export default theme;