Skip to content

Commit

Permalink
add demo environment mode
Browse files Browse the repository at this point in the history
  • Loading branch information
cedricve committed Jun 14, 2023
1 parent 84e532b commit 913bd1b
Show file tree
Hide file tree
Showing 10 changed files with 286 additions and 156 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ Next to attaching the configuration file, it is also possible to override the co

| Name | Description | Default Value |
| --------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------ |
| `AGENT_MODE` | You can choose to run this in 'release' for production, and or 'demo' for showcasing. | "release" |
| `AGENT_USERNAME` | The username used to authenticate against the Kerberos Agent login page. | "root" |
| `AGENT_PASSWORD` | The password used to authenticate against the Kerberos Agent login page. | "root" |
| `AGENT_KEY` | A unique identifier for your Kerberos Agent, this is auto-generated but can be overriden. | "" |
Expand Down
13 changes: 13 additions & 0 deletions machinery/src/routers/http/Server.go
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
package http

import (
"os"

jwt "github.com/appleboy/gin-jwt/v2"
"github.com/gin-contrib/pprof"
"github.com/gin-gonic/contrib/static"
Expand Down Expand Up @@ -57,6 +59,17 @@ func StartServer(configuration *models.Configuration, communication *models.Comm
// Add all routes
AddRoutes(r, authMiddleware, configuration, communication)

// Update environment variables
environmentVariables := "./www/env.js"
if os.Getenv("AGENT_MODE") == "demo" {
demoEnvironmentVariables := "./www/env.demo.js"
// Move demo environment variables to environment variables
err := os.Rename(demoEnvironmentVariables, environmentVariables)
if err != nil {
log.Fatal(err)
}
}

// Add static routes to UI
r.Use(static.Serve("/", static.LocalFile("./www", true)))
r.Use(static.Serve("/dashboard", static.LocalFile("./www", true)))
Expand Down
1 change: 1 addition & 0 deletions ui/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"react/forbid-prop-types": "off",
"no-case-declarations": "off",
"camelcase": "off",
"dot-notation": "off",
"jsx-a11y/media-has-caption": "off",
"jsx-a11y/anchor-is-valid": "off",
"jsx-a11y/click-events-have-key-events": "off",
Expand Down
5 changes: 5 additions & 0 deletions ui/public/env.demo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
(function (window) {
window['env'] = window['env'] || {};
// Environment variables
window['env']['mode'] = 'demo';
})(this);
5 changes: 5 additions & 0 deletions ui/public/env.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
(function (window) {
window['env'] = window['env'] || {};
// Environment variables
window['env']['mode'] = 'release';
})(this);
2 changes: 1 addition & 1 deletion ui/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="assets/env.js"></script>
<script src="%PUBLIC_URL%/env.js"></script>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Expand Down
213 changes: 112 additions & 101 deletions ui/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,111 +93,122 @@ class App extends React.Component {
const { children, username, dashboard, dispatchLogout } = this.props;
const cloudOnline = this.getCurrentTimestamp() - dashboard.cloudOnline < 30;
return (
<div id="page-root">
<Sidebar logo={logo} title="Kerberos Agent" version="v1-beta" mobile>
<Profilebar
username={username}
email="[email protected]"
userrole={t('navigation.admin')}
logout={dispatchLogout}
/>
<Navigation>
<NavigationSection title={t('navigation.management')} />
<NavigationGroup>
<NavigationItem
title={t('navigation.dashboard')}
icon="dashboard"
link="dashboard"
/>
<NavigationItem
title={t('navigation.recordings')}
icon="media"
link="media"
/>
<NavigationItem
title={t('navigation.settings')}
icon="preferences"
link="settings"
/>
</NavigationGroup>
<NavigationSection title={t('navigation.help_support')} />
<NavigationGroup>
<NavigationItem
title={t('navigation.swagger')}
icon="api"
external
link={`${config.URL}/swagger/index.html`}
/>
<NavigationItem
title={t('navigation.documentation')}
icon="book"
external
link="https://doc.kerberos.io/agent/announcement"
/>
<NavigationItem
title="Kerberos Hub"
icon="cloud"
external
link="https://app.kerberos.io"
/>
<NavigationItem
title={t('navigation.ui_library')}
icon="paint"
external
link="https://ui.kerberos.io/"
/>
<NavigationItem
title="Github"
icon="github-nav"
external
link="https://github.com/kerberos-io/agent"
/>
</NavigationGroup>
<NavigationSection title={t('navigation.layout')} />
<NavigationGroup>
<LanguageSelect />
</NavigationGroup>

<NavigationSection title="Websocket" />
<NavigationGroup>
<div className="websocket-badge">
<Badge
title={connected ? 'connected' : 'disconnected'}
status={connected ? 'success' : 'warning'}
<>
{config.MODE !== 'release' && (
<div className={`environment ${config.MODE}`}>
Environment: {config.MODE}
</div>
)}
<div id="page-root">
<Sidebar logo={logo} title="Kerberos Agent" version="v1-beta" mobile>
<Profilebar
username={username}
email="[email protected]"
userrole={t('navigation.admin')}
logout={dispatchLogout}
/>
<Navigation>
<NavigationSection title={t('navigation.management')} />
<NavigationGroup>
<NavigationItem
title={t('navigation.dashboard')}
icon="dashboard"
link="dashboard"
/>
</div>
</NavigationGroup>
</Navigation>
</Sidebar>
<Main>
<Gradient />

{!cloudOnline && (
<a href="https://app.kerberos.io" target="_blank" rel="noreferrer">
<div className="cloud-not-installed">
<div>
<Icon label="cloud" />
Activate Kerberos Hub, and make your cameras and recordings
available through a secured cloud!
<NavigationItem
title={t('navigation.recordings')}
icon="media"
link="media"
/>
<NavigationItem
title={t('navigation.settings')}
icon="preferences"
link="settings"
/>
</NavigationGroup>
<NavigationSection title={t('navigation.help_support')} />
<NavigationGroup>
<NavigationItem
title={t('navigation.swagger')}
icon="api"
external
link={`${config.URL}/swagger/index.html`}
/>
<NavigationItem
title={t('navigation.documentation')}
icon="book"
external
link="https://doc.kerberos.io/agent/announcement"
/>
<NavigationItem
title="Kerberos Hub"
icon="cloud"
external
link="https://app.kerberos.io"
/>
<NavigationItem
title={t('navigation.ui_library')}
icon="paint"
external
link="https://ui.kerberos.io/"
/>
<NavigationItem
title="Github"
icon="github-nav"
external
link="https://github.com/kerberos-io/agent"
/>
</NavigationGroup>
<NavigationSection title={t('navigation.layout')} />
<NavigationGroup>
<LanguageSelect />
</NavigationGroup>

<NavigationSection title="Websocket" />
<NavigationGroup>
<div className="websocket-badge">
<Badge
title={connected ? 'connected' : 'disconnected'}
status={connected ? 'success' : 'warning'}
/>
</div>
</NavigationGroup>
</Navigation>
</Sidebar>
<Main>
<Gradient />

{!cloudOnline && (
<a
href="https://app.kerberos.io"
target="_blank"
rel="noreferrer"
>
<div className="cloud-not-installed">
<div>
<Icon label="cloud" />
Activate Kerberos Hub, and make your cameras and recordings
available through a secured cloud!
</div>
</div>
</div>
</a>
)}

{dashboard.offlineMode === 'true' && (
<Link to="/settings">
<div className="offline-mode">
<div>
<Icon label="info" />
Attention! Kerberos is currently running in Offline mode.
</a>
)}

{dashboard.offlineMode === 'true' && (
<Link to="/settings">
<div className="offline-mode">
<div>
<Icon label="info" />
Attention! Kerberos is currently running in Offline mode.
</div>
</div>
</div>
</Link>
)}
</Link>
)}

<MainBody>{children}</MainBody>
</Main>
</div>
<MainBody>{children}</MainBody>
</Main>
</div>
</>
);
}
}
Expand Down
2 changes: 2 additions & 0 deletions ui/src/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const dev = {
API_URL: `${protocol}//${hostname}:8080/api`,
URL: `${protocol}//${hostname}:8080`,
WS_URL: `${websocketprotocol}//${hostname}:8080/ws`,
MODE: window['env']['mode'],
// Uncomment, and comment the above lines, when using codespaces or other special DNS names (which you can't control)
// HOSTNAME: externalHost,
// API_URL: `${protocol}//${externalHost}/api`,
Expand All @@ -25,6 +26,7 @@ const prod = {
API_URL: `${protocol}//${host}/api`,
URL: `${protocol}//${host}`,
WS_URL: `${websocketprotocol}//${host}/ws`,
MODE: window['env']['mode'],
};

const config = process.env.REACT_APP_ENVIRONMENT === 'production' ? prod : dev;
Expand Down
54 changes: 54 additions & 0 deletions ui/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -144,3 +144,57 @@ body {
padding: 0;
font-family: 'Inter', sans-serif; // use regular Inter font by default..
}

.environment.develop {
background: repeating-linear-gradient(
-55deg,
#222,
#222 10px,
#035e1f 10px,
#035e1f 20px
);
text-align: center;
color: rgba(255, 255, 255, 0.75);
padding: size(1) 0;
}
.environment {
padding: 15px 0;
}
.environment.demo {
background: repeating-linear-gradient(
-55deg,
#222,
#222 10px,
#035e1f 10px,
#035e1f 20px
);
text-align: center;
color: rgba(255, 255, 255, 0.75);
padding: size(1) 0;
}

.environment.staging {
background: repeating-linear-gradient(
-55deg,
#222,
#222 10px,
#6d0e0e 10px,
#6d0e0e 20px
);
text-align: center;
color: white;
padding: size(1) 0;
}

.environment.acceptance {
background: repeating-linear-gradient(
-55deg,
#222,
#222 10px,
#8b8203 10px,
#8b8203 20px
);
text-align: center;
color: white;
padding: size(1) 0;
}
Loading

0 comments on commit 913bd1b

Please sign in to comment.