UI (#15)

Adding new Admin UI. Updating Fredy to V3.0.0 as it has been a large rewrite. Thanks for all contributions and help on the way!

ui/src/components/headline/Headline.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Header } from 'semantic-ui-react';
+
+import './Headline.less';
+
+export default function Headline({ text, size = 'medium', className = '' } = {}) {
+  return (
+    <Header className={`headline ${className}`} size={size}>
+      {text}
+    </Header>
+  );
+}

ui/src/components/headline/Headline.less

@@ -0,0 +1,3 @@
+.headline{
+  color: #f1f1f1 !important;
+}

ui/src/components/logo/Logo.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import logo from '../../assets/logo.png';
+import logoWhite from '../../assets/logo_white.png';
+
+import './Logo.less';
+
+export default function Logo({ width = 350, white = false } = {}) {
+  return <img src={white ? logoWhite : logo} width={width} className="logo" />;
+}

ui/src/components/logo/Logo.less

@@ -0,0 +1,5 @@
+.logo {
+  position: absolute;
+  top: .1rem;
+  right: 2rem;
+}

ui/src/components/logout/Logout.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { xhrPost } from '../../services/xhr';
+
+const Logout = function Logout() {
+  return (
+    <Button
+      content="Logout"
+      labelPosition="left"
+      icon="user"
+      size="mini"
+      onClick={async () => {
+        await xhrPost('/api/login/logout');
+        location.reload();
+      }}
+      negative
+    />
+  );
+};
+
+export default Logout;

ui/src/components/menu/Menu.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Menu } from 'semantic-ui-react';
+
+import './Menu.less';
+import { useLocation } from 'react-router';
+
+const TopMenu = function TopMenu({ isAdmin }) {
+  const history = useHistory();
+  const location = useLocation();
+
+  const isActiveRoute = (name) => location.pathname.indexOf(name) !== -1;
+
+  return (
+    <Menu pointing secondary className="topMenu">
+      <Menu.Item
+        name="jobs"
+        active={isActiveRoute('jobs')}
+        className={isActiveRoute('jobs') ? 'topMenu__active' : 'topMenu__item'}
+        onClick={() => history.push('/jobs')}
+      >
+        Job Configuration
+      </Menu.Item>
+
+      {isAdmin && (
+        <Menu.Item
+          name="user"
+          active={isActiveRoute('users')}
+          className={isActiveRoute('users') ? 'topMenu__active' : 'topMenu__item'}
+          onClick={() => history.push('/users')}
+        >
+          User configuration
+        </Menu.Item>
+      )}
+    </Menu>
+  );
+};
+
+export default TopMenu;

ui/src/components/menu/Menu.less

@@ -0,0 +1,15 @@
+.topMenu {
+  border-bottom: 1px solid #b7b7b7f2 !important;
+
+  &__active {
+    border-bottom: 1px solid #06dcfff2 !important;
+    font-weight: 550 !important;
+    color: #78e5ff !important;
+    margin: 0 0 -1px !important;
+  }
+
+  &__item {
+    color: #fffffff2 !important;
+    border-color: transparent !important;
+  }
+}

ui/src/components/permission/InsufficientPermission.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from 'semantic-ui-react';
+import insufficientPermission from '../../assets/insufficient_permission.png';
+
+export default function InsufficientPermission() {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+      <img src={insufficientPermission} height={250} />
+      <br />
+      <Header as="h4" inverted>
+        Insufficient permission :(
+      </Header>
+    </div>
+  );
+}

ui/src/components/permission/PermissionAwareRoute.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Redirect } from 'react-router-dom';
+import { Route } from 'react-router';
+
+export default function PermissionAwareRoute({ currentUser, name, path, component }) {
+  /**
+   * Checks if given component should be rendered if current user has given permission enabled. If that's not the case,
+   * user is redirected to '/403'.
+   *
+   * @param permission
+   * @param component
+   * @param path
+   * @returns {*}
+   */
+  const checkIfAdmin = (component, path) => {
+    return currentUser != null && currentUser.isAdmin ? component : <Redirect from={path} to="/403" />;
+  };
+
+  return <Route name={name} path={path} render={() => checkIfAdmin(component, path)} />;
+}

ui/src/components/placeholder/Placeholder.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import './Placeholder.less';
+
+function getPlaceholder(rowCount, className) {
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(<div className="place__line" key={i} />);
+  }
+  const clazz = `place ${className == null ? '' : className}`;
+  return (
+    <div className={clazz}>
+      <div className="place__circle" />
+      <div className="place__place_lines_wrapper">{rows}</div>
+    </div>
+  );
+}
+
+export default function Placeholder({ rows = 3, ready = false, children, customPlaceholder, className }) {
+  if (!ready) {
+    if (customPlaceholder != null) {
+      return customPlaceholder;
+    }
+
+    return getPlaceholder(rows, className);
+  }
+
+  return children;
+}

ui/src/components/placeholder/Placeholder.less

@@ -0,0 +1,36 @@
+.place {
+  height: 100%;
+  width: 100%;
+  display:flex;
+
+  &__place_lines_wrapper{
+    width:100%;
+  }
+
+  &__line {
+    height: 10px;
+    margin: 10px;
+    animation: pulse 1s infinite ease-in-out;
+  }
+
+  &__circle {
+    height: 4rem;
+    width: 5rem;
+    margin: 10px;
+    border-radius: 360px;
+    animation: pulse 1s infinite ease-in-out;
+  }
+
+}
+
+@keyframes pulse {
+  0% {
+    background-color: rgba(165, 165, 165, 0.1)
+  }
+  50% {
+    background-color: rgba(165, 165, 165, 0.3)
+  }
+  100% {
+    background-color: rgba(165, 165, 165, 0.1)
+  }
+}

ui/src/components/table/JobTable.js

@@ -0,0 +1,66 @@
+import React, { Fragment } from 'react';
+
+import { Table, Button } from 'semantic-ui-react';
+import Switch from 'react-switch';
+
+const emptyTable = () => {
+  return (
+    <Table.Row>
+      <Table.Cell collapsing colSpan={6} style={{ textAlign: 'center' }}>
+        No Data
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+const content = (jobs, onJobRemoval, onJobStatusChanged, onJobEdit, onJobInsight) => {
+  return (
+    <Fragment>
+      {Object.keys(jobs).map((jobKey) => {
+        const job = jobs[jobKey];
+
+        return (
+          <Table.Row key={jobKey}>
+            <Table.Cell collapsing>
+              <Switch onChange={(checked) => onJobStatusChanged(job.id, checked)} checked={job.enabled} />
+            </Table.Cell>
+            <Table.Cell>{job.name}</Table.Cell>
+            <Table.Cell>{job.numberOfFoundListings || 0}</Table.Cell>
+            <Table.Cell>{job.provider.length || 0}</Table.Cell>
+            <Table.Cell>{job.notificationAdapter.length || 0}</Table.Cell>
+            <Table.Cell>
+              <div style={{ float: 'right' }}>
+                <Button circular color="teal" icon="chart line" onClick={() => onJobInsight(job.id)} />
+                <Button circular color="red" icon="trash" onClick={() => onJobRemoval(job.id)} />
+                <Button circular color="blue" icon="edit" onClick={() => onJobEdit(job.id)} />
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        );
+      })}
+    </Fragment>
+  );
+};
+
+export default function JobTable({ jobs = {}, onJobRemoval, onJobStatusChanged, onJobEdit, onJobInsight } = {}) {
+  return (
+    <Table singleLine inverted>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell />
+          <Table.HeaderCell>Job Name</Table.HeaderCell>
+          <Table.HeaderCell>Number of findings</Table.HeaderCell>
+          <Table.HeaderCell>Active provider</Table.HeaderCell>
+          <Table.HeaderCell>Active notification adapter</Table.HeaderCell>
+          <Table.HeaderCell></Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {Object.keys(jobs).length === 0
+          ? emptyTable()
+          : content(jobs, onJobRemoval, onJobStatusChanged, onJobEdit, onJobInsight)}
+      </Table.Body>
+    </Table>
+  );
+}

ui/src/components/table/NotificationAdapterTable.js

@@ -0,0 +1,49 @@
+import React, { Fragment } from 'react';
+
+import { Table, Button } from 'semantic-ui-react';
+
+const emptyTable = () => {
+  return (
+    <Table.Row>
+      <Table.Cell collapsing colSpan="3" style={{ textAlign: 'center' }}>
+        No Data
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+const content = (adapterData, onRemove) => {
+  return (
+    <Fragment>
+      {adapterData.map((data) => {
+        return (
+          <Table.Row key={data.id}>
+            <Table.Cell>{data.name}</Table.Cell>
+            <Table.Cell>
+              <div style={{ float: 'right' }}>
+                <Button circular color="red" icon="trash" onClick={() => onRemove(data.id)} />
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        );
+      })}
+    </Fragment>
+  );
+};
+
+export default function NotificationAdapterTable({ notificationAdapter = [], onRemove } = {}) {
+  return (
+    <Table singleLine inverted>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Notification Adapter Name</Table.HeaderCell>
+          <Table.HeaderCell></Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {notificationAdapter.length === 0 ? emptyTable() : content(notificationAdapter, onRemove)}
+      </Table.Body>
+    </Table>
+  );
+}

ui/src/components/table/ProviderTable.js

@@ -0,0 +1,53 @@
+import React, { Fragment } from 'react';
+
+import { Table, Button } from 'semantic-ui-react';
+
+const emptyTable = () => {
+  return (
+    <Table.Row>
+      <Table.Cell collapsing colSpan="3" style={{ textAlign: 'center' }}>
+        No Data
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+const truncate = (str, n) => {
+  return str.length > n ? str.substr(0, n - 1) + '…' : str;
+};
+
+const content = (providerData, onRemove) => {
+  return (
+    <Fragment>
+      {providerData.map((data) => {
+        return (
+          <Table.Row key={data.id}>
+            <Table.Cell>{data.name}</Table.Cell>
+            <Table.Cell>{truncate(data.url, 60)}</Table.Cell>
+            <Table.Cell>
+              <div style={{ float: 'right' }}>
+                <Button circular color="red" icon="trash" onClick={() => onRemove(data.id)} />
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        );
+      })}
+    </Fragment>
+  );
+};
+
+export default function ProviderTable({ providerData = [], onRemove } = {}) {
+  return (
+    <Table singleLine inverted>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Provider Name</Table.HeaderCell>
+          <Table.HeaderCell>Url</Table.HeaderCell>
+          <Table.HeaderCell></Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>{providerData.length === 0 ? emptyTable() : content(providerData, onRemove)}</Table.Body>
+    </Table>
+  );
+}

ui/src/components/table/UserTable.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Table, Button } from 'semantic-ui-react';
+import { format } from '../../services/time/timeService';
+
+const emptyTable = () => {
+  return (
+    <Table.Row>
+      <Table.Cell collapsing colSpan={4} style={{ textAlign: 'center' }}>
+        No Data
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+const content = (user, onUserRemoval, onUserEdit) => {
+  return user.map((user) => {
+    return (
+      <Table.Row key={user.id}>
+        <Table.Cell>{user.username}</Table.Cell>
+        <Table.Cell>{user.lastLogin == null ? '---' : format(user.lastLogin)}</Table.Cell>
+        <Table.Cell>{user.numberOfJobs}</Table.Cell>
+        <Table.Cell>
+          <div style={{ float: 'right' }}>
+            <Button circular color="red" icon="trash" onClick={() => onUserRemoval(user.id)} />
+            <Button circular color="blue" icon="edit" onClick={() => onUserEdit(user.id)} />
+          </div>
+        </Table.Cell>
+      </Table.Row>
+    );
+  });
+};
+
+export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {}) {
+  return (
+    <Table inverted>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Username</Table.HeaderCell>
+          <Table.HeaderCell>Last login</Table.HeaderCell>
+          <Table.HeaderCell>Number of jobs</Table.HeaderCell>
+          <Table.HeaderCell></Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>{user.length === 0 ? emptyTable() : content(user, onUserRemoval, onUserEdit)}</Table.Body>
+    </Table>
+  );
+}

ui/src/components/toasts/Toast.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import './Toasts.css';
+
+export default function Toast({ id, delay = 5500, message, onHide, backgroundColor, color, title }) {
+  const [className, setClassname] = React.useState('toast-container show-toast');
+
+  React.useEffect(() => {
+    let hideTimeout = null;
+    const timeout = setTimeout(() => {
+      setClassname('toast-container hide-toast');
+      hideTimeout = setTimeout(() => {
+        onHide && onHide(id);
+      }, 500);
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      clearTimeout(hideTimeout);
+    };
+  }, [id, delay, onHide]);
+  return (
+    <div className={className} style={{ backgroundColor, color }}>
+      <h5>{title}</h5>
+      {message}
+    </div>
+  );
+}

ui/src/components/toasts/ToastContainer.js

@@ -0,0 +1,12 @@
+import Toast from './Toast';
+import React from 'react';
+
+export default function ToastsContainer({ toasts, onToastFinished }) {
+  return (
+    <div className="toasts-container">
+      {toasts.map((toast, index) => (
+        <Toast key={index} {...toast} onHide={onToastFinished} />
+      ))}
+    </div>
+  );
+}

ui/src/components/toasts/ToastContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const CheckoutDrawerContext = createContext({
+  showToast: () => {},
+});
+
+export default CheckoutDrawerContext;

ui/src/components/toasts/Toasts.css

@@ -0,0 +1,63 @@
+.toasts-container {
+    position: fixed;
+    z-index: 65535;
+    right: 0;
+    max-width: 250px;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.toasts-container > .toast-container {
+    margin-bottom: 10px;
+}
+
+.toasts-container:last-child {
+    margin-bottom: 0;
+}
+
+.toast-container {
+    visibility: hidden;
+    position: relative;
+    z-index: 65535;
+    right: -1000px;
+
+    background-color: skyblue;
+    border-radius: 10px;
+    padding: 10px;
+
+    min-width: 10rem;
+    min-height: 3rem;
+}
+
+.toast-container.show-toast {
+    visibility: visible;
+    right: 24px;
+    animation: slidein 0.5s;
+}
+
+.toast-container.hide-toast {
+    visibility: visible;
+    animation: slideout 0.5s;
+}
+
+@keyframes slidein {
+    from {
+        right: -1000px;
+        opacity: 0;
+    }
+    to {
+        right: 24px;
+        opacity: 1;
+    }
+}
+
+@keyframes slideout {
+    from {
+        right: 24px;
+        opacity: 1;
+    }
+    to {
+        right: -1000px;
+        opacity: 0;
+    }
+}

ui/src/components/toasts/useToast.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function useToast() {
+  const [toasts, setToasts] = React.useState([]);
+
+  const showToast = ({ message, delay, color, backgroundColor, title }) => {
+    const toast = {
+      id: toasts.length,
+      message,
+      delay,
+      backgroundColor,
+      color,
+      title,
+    };
+    setToasts([...toasts, toast].reverse());
+  };
+
+  const onToastFinished = (id) => {
+    setToasts(toasts.filter((toast) => toast.id !== id));
+  };
+
+  return [showToast, onToastFinished, toasts];
+}