aligned version with kerberos-io/ui

2026-08-23 15:08:32 +00:00 · 2022-06-10 08:45:48 +02:00
parent e58172a08b
commit 1d1404a3ca
27 changed files with 233 additions and 72 deletions
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@

 Kerberos Agent is a cutting edge video surveillance management system made available as Open Source under the MIT License. This means that all the source code is available for you or your company, and you can use, transform and distribute the source code; as long you keep a reference of the original license. Kerberos Agent can be used for commercial usage (which was not the case for v2). Read more [about the license here](LICENSE).

-![login-ossag](https://user-images.githubusercontent.com/1546779/172066784-4d9cefc6-9599-4d2e-bc65-e1f2862b7409.png)    
+![login-agent](./assets/img/agent-login.png)
    
 ## Work In Progress

@@ -84,7 +84,7 @@ The `web` is a **React** project which is the main entry point for an end user t

 This will start a webserver and launches the web app on port `3000`.

-![signin-to-agent](https://user-images.githubusercontent.com/1546779/111135333-d02d4a00-857c-11eb-8426-e65076ed111c.gif)
+![login-agent](./assets/img/agent-login.gif)

 ### Machinery

--- a/assets/img/agent-login.gif
+++ b/assets/img/agent-login.gif
--- a/assets/img/agent-login.png
+++ b/assets/img/agent-login.png
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,7 +4,7 @@
  "private": false,
  "dependencies": {
    "@giantmachines/redux-websocket": "^1.5.1",
-    "@kerberos-io/ui": "1.59.0",
+    "@kerberos-io/ui": "1.60.0",
    "@material-ui/core": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
@@ -30,11 +30,12 @@
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "typeface-roboto": "^1.1.13",
+    "vott-ct": "^2.3.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
-    "build": "react-scripts build && mv build ../machinery/www",
+    "build": "react-scripts build && rm -rf ../machinery/www && mv build ../machinery/www",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --debug 'src/**/*.{js,jsx,ts,tsx}'",
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -29,7 +29,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>Kerberos Agent | Video surveillance</title>
+    <title>Kerberos Agent | Video surveillance for everyone </title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -39,14 +39,17 @@ class App extends React.Component {
          <Navigation>
            <NavigationSection title="management" />
            <NavigationGroup>
-              <NavigationItem title="Settings" icon="api" link="settings" />
              <NavigationItem
-                title="Cameras"
-                icon="cameras"
-                link="deployments"
+                title="Dashboard"
+                icon="dashboard"
+                link="dashboard"
+              />
+              <NavigationItem title="Recordings" icon="media" link="media" />
+              <NavigationItem
+                title="Settings"
+                icon="preferences"
+                link="settings"
              />
-              <NavigationItem title="Nodes" icon="counting" link="nodes" />
-              <NavigationItem title="Pods" icon="counting" link="pods" />
            </NavigationGroup>
            <NavigationSection title="help & support" />
            <NavigationGroup>
--- a/ui/src/config
+++ b/ui/src/config
@@ -1,31 +0,0 @@
-const { hostname } = window.location;
-const { protocol } = window.location;
-const websocketprotocol = protocol === 'http:' ? 'ws:' : 'wss:';
-
-const dev = {
-  ENV: 'dev',
-  HOSTNAME: hostname,
-  API_URL: `${protocol}//${hostname}:8082/`,
-  WS_URL: `${websocketprotocol}//${hostname}:8082/ws`,
-};
-
-const prod = {
-  ENV: 'prod',
-  HOSTNAME: hostname,
-  API_URL:
-    window.env.apiUrl !== ''
-      ? `${protocol}//${window.env.apiUrl}/`
-      : `${protocol}//api.${hostname}/`, // "https://staging-api.factory.kerberos.live", //
-  WS_URL:
-    window.env.apiUrl !== ''
-      ? `${websocketprotocol}//${window.env.apiUrl}/ws`
-      : `${websocketprotocol}//api.${hostname}/ws`,
-};
-
-const config = process.env.REACT_APP_STAGE === 'production' ? prod : dev;
-
-export default {
-  // Add common config values here
-  // MAX_ATTACHMENT_SIZE: 5000000,
-  ...config,
-};
--- a/ui/src/fonts/Inter/Inter-Medium.woff
+++ b/ui/src/fonts/Inter/Inter-Medium.woff
--- a/ui/src/fonts/Inter/Inter-Medium.woff2
+++ b/ui/src/fonts/Inter/Inter-Medium.woff2
--- a/ui/src/fonts/Inter/Inter-Regular.woff
+++ b/ui/src/fonts/Inter/Inter-Regular.woff
--- a/ui/src/fonts/Inter/Inter-Regular.woff2
+++ b/ui/src/fonts/Inter/Inter-Regular.woff2
--- a/ui/src/fonts/Inter/Inter-SemiBold.woff
+++ b/ui/src/fonts/Inter/Inter-SemiBold.woff
--- a/ui/src/fonts/Inter/Inter-SemiBold.woff2
+++ b/ui/src/fonts/Inter/Inter-SemiBold.woff2
--- a/ui/src/fonts/Inter/Inter-roman.var.woff2
+++ b/ui/src/fonts/Inter/Inter-roman.var.woff2
--- a/ui/src/index.jsx
+++ b/ui/src/index.jsx
@@ -12,9 +12,9 @@ import rootReducer from './reducers';
 import App from './App';
 import './index.scss';
 import Login from './pages/Login/Login';
-import Install from './pages/Install/Install';
 import Dashboard from './pages/Dashboard/Dashboard';
-import RequireInstall from './containers/RequireInstall';
+import Media from './pages/Media/Media';
+import Settings from './pages/Settings/Settings';
 import RequireAuth from './containers/RequireAuth';
 import RequireGuest from './containers/RequireGuest';

@@ -58,12 +58,13 @@ ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
-        <Route path="/install" component={RequireInstall(Install)} />
        <Route path="/login" component={RequireGuest(Login)} />
        <App>
          <Route exact path="/" component={RequireAuth(Dashboard)} />
          <Route exact path="/dashboard" component={RequireAuth(Dashboard)} />
          <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
+          <Route exact path="/media" component={RequireAuth(Media)} />
+          <Route exact path="/settings" component={RequireAuth(Settings)} />
        </App>
      </Switch>
    </ConnectedRouter>
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -88,6 +88,54 @@
 */


+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/Inter/Inter-Regular.woff2?v=3.18") format("woff2"),
+  url("/fonts/Inter/Inter-Regular.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/fonts/Inter/Inter-Medium.woff2?v=3.18") format("woff2"),
+  url("/fonts/Inter/Inter-Medium.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/fonts/Inter/Inter-SemiBold.woff2?v=3.18") format("woff2"),
+  url("/fonts/Inter/Inter-SemiBold.woff?v=3.18") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  body {
+    font-family: 'Inter', sans-serif; // use regular Inter font by default..
+    @supports (font-variation-settings: normal) {
+      font-family: 'Inter var', sans-serif; // ..but if supported, use variable Inter font instead (all-in-one)
+    }
+  }
+
+
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("/fonts/Inter/Inter-roman.var.woff2?v=3.18") format("woff2");
+}

 body {
  box-sizing: border-box;
--- a/ui/src/pages/Dashboard/Dashboard.jsx
+++ b/ui/src/pages/Dashboard/Dashboard.jsx
@@ -1,15 +1,26 @@
 import React from 'react';
-import styles from './Dashboard.module.scss';
-import Header from '../../components/Header/Header';
-import Warning from '../../components/Warning/Warning';
+import { Breadcrumb } from '@kerberos-io/ui';
+// import { Link } from 'react-router-dom';
+import styles from './Dashboard.scss';

 // eslint-disable-next-line react/prefer-stateless-function
 class Dashboard extends React.Component {
  render() {
    return (
      <div className={styles.dashboard}>
-        <Header />
-        <Warning />
+        <Breadcrumb
+          title="Dashboard"
+          level1="Overview of your video surveilance"
+          level1Link=""
+        >
+          {/* <Link to="/deployments">
+            <Button
+              label="Add Kerberos Agent"
+              icon="plus-circle"
+              type="default"
+            />
+    </Link> */}
+        </Breadcrumb>
      </div>
    );
  }
--- a/ui/src/pages/Dashboard/Dashboard.module.scss
+++ b/ui/src/pages/Dashboard/Dashboard.module.scss
--- a/ui/src/pages/Install/Install.jsx
+++ b/ui/src/pages/Install/Install.jsx
@@ -1,16 +0,0 @@
-import React from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Container from '@material-ui/core/Container';
-// import LoginForm from '../../components/LoginForm/LoginForm';
-import './Install.scss';
-
-export default function Install() {
-  return (
-    <Container className="login-body" component="main">
-      <CssBaseline />
-      <Container maxWidth="xs" className="login-container">
-        I&#39;ve been here.
-      </Container>
-    </Container>
-  );
-}
--- a/ui/src/pages/Login/Login.jsx
+++ b/ui/src/pages/Login/Login.jsx
@@ -15,7 +15,7 @@ import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { login, resetLogin } from '../../actions';
 import config from '../../config';
-import './Login.module.scss';
+import './Login.scss';

 class Login extends React.Component {
  constructor() {
@@ -52,7 +52,7 @@ class Login extends React.Component {
      <LandingLayout
        title="Kerberos Agent"
        version={config.VERSION}
-        description="Scale your Kerberos Agents"
+        description="Video surveillance for everyone"
      >
        <section className="login-body">
          <Block>
--- a/ui/src/pages/Login/Login.module.scss
+++ b/ui/src/pages/Login/Login.module.scss
--- a/ui/src/pages/Login/Login.scss
+++ b/ui/src/pages/Login/Login.scss
@@ -0,0 +1,45 @@
+@import "../../app.variables";
+
+.login-body {
+  display: flex;
+  justify-content: center;
+  padding: 0 0 size(10) 0;
+
+  .block-generic {
+    .block-header {
+      padding: 5px size(2);
+
+      div {
+        display: flex;
+        height: size(3);
+        align-items: center;
+
+        h4 {
+          margin: 0 0 0 size(1);
+          padding: 0;
+        }
+      }
+
+    }
+
+    .block-body {
+      padding: size(2) size(5) size(3) size(5);
+
+      .generic-input {
+        width: size(26);
+        cursor: auto;
+
+        &:first-child {
+          margin: 0 0 size(1) 0;
+        }
+      }
+    }
+
+    .block-footer {
+      padding: size(1) size(2);
+      min-height: 0;
+
+    }
+  }
+}
+
--- a/ui/src/pages/Media/Media.jsx
+++ b/ui/src/pages/Media/Media.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Breadcrumb } from '@kerberos-io/ui';
+// import { Link } from 'react-router-dom';
+import styles from './Media.scss';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class Media extends React.Component {
+  render() {
+    return (
+      <div className={styles.dashboard}>
+        <Breadcrumb
+          title="Recordings"
+          level1="All your recordings in a single place"
+          level1Link=""
+        >
+          {/* <Link to="/deployments">
+            <Button
+              label="Add Kerberos Agent"
+              icon="plus-circle"
+              type="default"
+            />
+    </Link> */}
+        </Breadcrumb>
+      </div>
+    );
+  }
+}
+export default Media;
--- a/ui/src/pages/Install/Install.scss
+++ b/ui/src/pages/Install/Install.scss
--- a/ui/src/pages/Settings/Settings.jsx
+++ b/ui/src/pages/Settings/Settings.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Breadcrumb } from '@kerberos-io/ui';
+// import { Link } from 'react-router-dom';
+import styles from './Settings.scss';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class Settings extends React.Component {
+  render() {
+    return (
+      <div className={styles.dashboard}>
+        <Breadcrumb title="Settings" level1="Onboard your camera" level1Link="">
+          {/* <Link to="/deployments">
+            <Button
+              label="Add Kerberos Agent"
+              icon="plus-circle"
+              type="default"
+            />
+    </Link> */}
+        </Breadcrumb>
+      </div>
+    );
+  }
+}
+export default Settings;
--- a/ui/src/pages/Settings/Settings.scss
+++ b/ui/src/pages/Settings/Settings.scss
@@ -0,0 +1,21 @@
+.install-body {
+  background-color: #2C3E50;
+  background-image: linear-gradient(163deg, #0f0101, #b4524e);
+  color: #606468;
+  height: 100vh;
+  width: 100vw;
+  max-width: 100vw !important;
+  margin: 0;
+  padding: 0;
+}
+
+.install-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border-radius: 20px;
+  padding: 50px 40px !important;
+  max-width: 600px;
+}
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1525,10 +1525,10 @@
    "@jridgewell/resolve-uri" "^3.0.3"
    "@jridgewell/sourcemap-codec" "^1.4.10"

-"@kerberos-io/ui@1.59.0":
-  version "1.59.0"
-  resolved "https://registry.yarnpkg.com/@kerberos-io/ui/-/ui-1.59.0.tgz#89370dab3c653a785bb3f54d8a017738ab4ef18b"
-  integrity sha512-RqCO2jIHg/nIaJSutKGqwRWIeWopOpIGGk8d4Xec3ESpV5jcLgKhn1O09uqsxlvXD81yL9r1NDOtpKphiWmtGg==
+"@kerberos-io/ui@1.60.0":
+  version "1.60.0"
+  resolved "https://registry.yarnpkg.com/@kerberos-io/ui/-/ui-1.60.0.tgz#36e831859e2a65362e1df3d917a4018c812b607f"
+  integrity sha512-loVX/5GroFA+ZWRIEZ/P7b9QtPoKuZYmxnIazwiBk1aIoddb6U2AHJuAWlRTjaGPFcbdyP1MiP4SSIad8hxKgg==
  dependencies:
    "@svgr/webpack" "^5.5.0"
    "@types/react-router-dom" "^5.1.7"
@@ -4689,6 +4689,11 @@ etag@~1.8.1:
  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==

+eve@~0.5.1:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/eve/-/eve-0.5.4.tgz#67d080b9725291d7e389e34c26860dd97f1debaa"
+  integrity sha512-aqprQ9MAOh1t66PrHxDFmMXPlgNO6Uv1uqvxmwjprQV50jaQ2RqO7O1neY4PJwC+hMnkyMDphu2AQPOPZdjQog==
+
 eventemitter3@^4.0.0:
  version "4.0.7"
  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -8825,6 +8830,20 @@ slice-ansi@^4.0.0:
    astral-regex "^2.0.0"
    is-fullwidth-code-point "^3.0.0"

+snapsvg-cjs@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz#3b2f56af2573d3d364c3ed5bf8885745f4d2dde1"
+  integrity sha512-7NNvoGrc3BQvWz5rWK1DsD5/Vni4STswz5B3JrBADboQWcN8OBVGjYVJFPT5JkUXb2iVnEflZANhufEpEcTHXw==
+  dependencies:
+    snapsvg "0.5.1"
+
+snapsvg@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/snapsvg/-/snapsvg-0.5.1.tgz#0caf52c79189a290746fc446cc5e863f6bdddfe3"
+  integrity sha512-CjwWYsL7+CCk1vCk9BBKGYS4WJVDfJAOMWU+Zhzf8wf6pAm/xT34wnpaMPAgcgCNkxuU6OkQPPd8wGuRCY9aNw==
+  dependencies:
+    eve "~0.5.1"
+
 sockjs@^0.3.24:
  version "0.3.24"
  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -9599,6 +9618,13 @@ vary@~1.1.2:
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=

+vott-ct@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/vott-ct/-/vott-ct-2.3.2.tgz#b26296068e05578048acee7f7f89c6402663e44f"
+  integrity sha512-58OYwRFmdc12bKVcoCgXo6Uk6vRMEh73bUCjqL4zxJyYa4BAKfL2vh4VHeHCGqmuO8Bj1KbLevSeqgVCuuC3vw==
+  dependencies:
+    snapsvg-cjs "0.0.6"
+
 w3c-hr-time@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"