yashwin/VMS-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename production environments

Browse Source
This commit is contained in:
NlightN22 2024-03-03 15:36:01 +07:00
parent ea0c039e93
commit 6847493fbf
7 changed files with 29 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.docker
View File

@ -1,5 +1,3 @@
REACT_APP_HOST=localhost FRIGATE_PROXY=http://localhost:4000
REACT_APP_PORT=5173 OPENID_SERVER=https://your.server.com:443/realms/your-realm
REACT_APP_FRIGATE_PROXY=http://localhost:4000 CLIENT_ID=frontend-client
REACT_APP_OPENID_SERVER=https://your.server.com:443/realms/your-realm
REACT_APP_CLIENT_ID=frontend-client

4
Dockerfile
View File

@ -1,7 +1,7 @@
# syntax=docker/dockerfile:1 # syntax=docker/dockerfile:1
# Build commands: # Build commands:
# - rm build -r -Force ; yarn build # - $VERSION=0.4
# - $VERSION=0.2 # - rm build -r -Force ; rm ./node_modules/.cache/babel-loader -r -Force ; yarn build
# - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "." # - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "."
# - docker image push --all-tags oncharterliz/multi-frigate # - docker image push --all-tags oncharterliz/multi-frigate

8
README.md
View File

@ -8,11 +8,9 @@ services:
front: front:
image: oncharterliz/multi-frigate:latest image: oncharterliz/multi-frigate:latest
environment: environment:
REACT_APP_HOST: localhost FRIGATE_PROXY: http://localhost:4000
REACT_APP_PORT: 5173 OPENID_SERVER: https://server:port/realms/your-realm
REACT_APP_FRIGATE_PROXY: http://localhost:4000 CLIENT_ID: frontend-client
REACT_APP_OPENID_SERVER: https://server:port/realms/your-realm
REACT_APP_CLIENT_ID: frontend-client
ports: ports:
- 80:80 # set your port here - 80:80 # set your port here
``` ```

8
example/example.docker-compose.yml
View File

@ -4,10 +4,8 @@ services:
front: front:
image: oncharterliz/multi-frigate:latest image: oncharterliz/multi-frigate:latest
environment: environment:
REACT_APP_HOST: localhost FRIGATE_PROXY: http://localhost:4000
REACT_APP_PORT: 5173 OPENID_SERVER: https://server:port/realms/your-realm
REACT_APP_FRIGATE_PROXY: http://localhost:4000 CLIENT_ID: frontend-client
REACT_APP_OPENID_SERVER: https://server:port/realms/your-realm
REACT_APP_CLIENT_ID: frontend-client
ports: ports:
- 80:80 # set your port here - 80:80 # set your port here

31
src/App.tsx
View File

@ -20,7 +20,7 @@ const queryClient = new QueryClient({
}) })
function App() { function App() {
const maxErrorAuthConts = 2 const maxErrorAuthCounts = 2
const systemColorScheme = useColorScheme() const systemColorScheme = useColorScheme()
const [colorScheme, setColorScheme] = useState<ColorScheme>(getCookie('mantine-color-scheme') as ColorScheme || systemColorScheme) const [colorScheme, setColorScheme] = useState<ColorScheme>(getCookie('mantine-color-scheme') as ColorScheme || systemColorScheme)
const [authErrorCounter, setAuthErrorCounter] = useState(0) const [authErrorCounter, setAuthErrorCounter] = useState(0)
@ -35,33 +35,33 @@ function App() {
// automatically sign-in // automatically sign-in
useEffect(() => { useEffect(() => {
if (!hasAuthParams() && if (!hasAuthParams() &&
!auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading && authErrorCounter < maxErrorAuthConts) { !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading && authErrorCounter < maxErrorAuthCounts) {
console.log('Not authenticated! Redirect! ErrorCounter', authErrorCounter) console.error('Not authenticated! Redirect! ErrorCounter', authErrorCounter)
setAuthErrorCounter(prevCount => prevCount + 1) setAuthErrorCounter(prevCount => prevCount + 1)
auth.signinRedirect() auth.signinRedirect()
} }
}, [auth, auth.isAuthenticated, auth.activeNavigator, auth.isLoading, auth.signinRedirect]) }, [auth, auth.isAuthenticated, auth.activeNavigator, auth.isLoading, auth.signinRedirect, authErrorCounter])
if (auth.activeNavigator || auth.isLoading) { if (auth.activeNavigator || auth.isLoading) {
return <CenterLoader /> return <CenterLoader />
} }
if (authErrorCounter > maxErrorAuthConts) { if (authErrorCounter > maxErrorAuthCounts) {
console.log('maxErrorAuthConts authority', keycloakConfig.authority) console.error('maxErrorAuthCounts authority', keycloakConfig.authority)
console.log('maxErrorAuthConts client_id', keycloakConfig.client_id) console.error('maxErrorAuthCounts client_id', keycloakConfig.client_id)
console.log('maxErrorAuthConts redirect_uri', keycloakConfig.redirect_uri) console.error('maxErrorAuthCounts redirect_uri', keycloakConfig.redirect_uri)
return <RetryErrorPage backVisible={false} mainVisible={false} onRetry={() => auth.signinRedirect()} /> return <RetryErrorPage backVisible={false} mainVisible={false} onRetry={() => auth.signinRedirect()} />
} }
if (!auth.isAuthenticated && !auth.isLoading && authErrorCounter < maxErrorAuthConts) { if (!auth.isAuthenticated && !auth.isLoading && authErrorCounter < maxErrorAuthCounts) {
if (hasAuthParams()) { if (hasAuthParams()) {
console.log('auth.isAuthenticated', auth.isAuthenticated) console.warn('Not authenticated, isAuthenticated:', auth.isAuthenticated)
console.log('auth.isLoading', auth.isLoading) console.warn('Not authenticated, isLoading:', auth.isLoading)
return <RetryErrorPage backVisible={false} mainVisible={false} onRetry={() => auth.signinRedirect()} /> return <RetryErrorPage backVisible={false} mainVisible={false} onRetry={() => auth.signinRedirect()} />
} else { } else {
console.log('Not authenticated! Redirect! auth ErrorCounter', authErrorCounter) console.error('Not authenticated! Redirect! Error Counter:', authErrorCounter)
setAuthErrorCounter(prevCount => prevCount + 1); setAuthErrorCounter(prevCount => prevCount + 1);
auth.signinRedirect() auth.signinRedirect()
} }
@ -89,13 +89,6 @@ function App() {
radius: "xl", radius: "xl",
} }
}, },
// Image: {
// styles: (theme) => ({
// placeholder: {
// backgroundColor: 'transparent',
// }
// })
// },
} }
}} }}
> >

13
src/shared/env.const.ts
View File

@ -2,17 +2,16 @@ import { z } from "zod"
export const appMode = process.env.NODE_ENV export const appMode = process.env.NODE_ENV
export const isProduction = appMode === "production" export const isProduction = appMode === "production"
export const host = isProduction ? window.env?.REACT_APP_HOST : process.env.HOST
export const port = isProduction ? window.env?.REACT_APP_PORT : process.env.PORT const proxy = isProduction ? window.env?.FRIGATE_PROXY : process.env.REACT_APP_FRIGATE_PROXY
const proxyParsed = z.string().url().safeParse(proxy)
const proxy = isProduction ? window.env?.REACT_APP_FRIGATE_PROXY : process.env.REACT_APP_FRIGATE_PROXY if (!proxyParsed.success) throw Error(`FRIGATE_PROXY must be string and URL. FRIGATE_PROXY:${proxy}`)
export const proxyURL = new URL(proxy || '') export const proxyURL = new URL(proxy || '')
const oidpServer = isProduction ? window.env?.REACT_APP_OPENID_SERVER : process.env.REACT_APP_OPENID_SERVER const oidpServer = isProduction ? window.env?.OPENID_SERVER : process.env.REACT_APP_OPENID_SERVER
const oidpServerParsed= z.string().url().safeParse(oidpServer) const oidpServerParsed= z.string().url().safeParse(oidpServer)
if (!oidpServerParsed.success) throw Error('REACT_APP_OPENID_SERVER must be string and URL') if (!oidpServerParsed.success) throw Error(`OPENID_SERVER must be string and URL. OPENID_SERVER:${oidpServer}`)
const oidpClientId = isProduction ? window.env?.REACT_APP_CLIENT_ID : process.env.REACT_APP_CLIENT_ID const oidpClientId = isProduction ? window.env?.CLIENT_ID : process.env.REACT_APP_CLIENT_ID
export const oidpSettings = { export const oidpSettings = {
server: oidpServer || '', server: oidpServer || '',
clientId: oidpClientId || '', clientId: oidpClientId || '',

2
src/widgets/FrigateHostsTable.tsx
View File

@ -24,8 +24,6 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
const [reversed, setReversed] = useState(false) const [reversed, setReversed] = useState(false)
const [sortedName, setSortedName] = useState<string | null>(null) const [sortedName, setSortedName] = useState<string | null>(null)
console.log('data', data)
console.log('tableData', tableData)
useEffect(() => { useEffect(() => {
setTableData(data); setTableData(data);