From 5cee8b2f70ec7ffaf22112ce5c26766260c03522 Mon Sep 17 00:00:00 2001 From: Mohammed Abdi Date: Tue, 16 May 2023 16:26:18 -0400 Subject: [PATCH 1/2] dynamically change frontend env variables Signed-off-by: Mohammed Abdi --- Dockerfile.frontend-container | 30 ++- tornjak-frontend/.env | 1 + tornjak-frontend/.env.prod | 2 +- tornjak-frontend/.env.staging | 1 + tornjak-frontend/package-lock.json | 251 +++++++++++++++++- tornjak-frontend/package.json | 19 +- tornjak-frontend/public/index.html | 1 + tornjak-frontend/src/App.tsx | 3 +- tornjak-frontend/src/auth/KeycloakAuth.js | 3 +- .../src/components/RenderOnAdminRole.tsx | 3 +- tornjak-frontend/src/components/helpers.ts | 3 +- tornjak-frontend/src/components/is_manager.ts | 6 +- .../src/components/navbar-header-toolbar.tsx | 3 +- tornjak-frontend/src/components/navbar.tsx | 5 +- .../src/components/tornjak-api-helpers.tsx | 4 +- tornjak-frontend/src/env.ts | 12 + tornjak-frontend/src/index.tsx | 3 +- tornjak-frontend/src/tables/table-body.tsx | 4 +- tornjak-frontend/src/tables/table-toolbar.tsx | 4 +- 19 files changed, 318 insertions(+), 40 deletions(-) create mode 100644 tornjak-frontend/src/env.ts diff --git a/Dockerfile.frontend-container b/Dockerfile.frontend-container index 0435e4a9..555591c2 100644 --- a/Dockerfile.frontend-container +++ b/Dockerfile.frontend-container @@ -1,18 +1,22 @@ -FROM node:16-alpine - +## Build stage +FROM node:16-alpine3.14 AS build WORKDIR /usr/src/app -CMD ["npm", "start"] +COPY tornjak-frontend . +RUN npm install --omit=dev && \ + npm run build -# set env variables -ENV REACT_APP_API_SERVER_URI $REACT_APP_API_SERVER_URI \ - REACT_APP_AUTH_SERVER_URI $REACT_APP_AUTH_SERVER_URI \ - REACT_APP_SPIRE_HEALTH_CHECK_ENABLE $REACT_APP_SPIRE_HEALTH_CHECK_ENABLE \ - PORT_FE=3000 +## Runtime stage +FROM node:16-alpine3.14 AS runtime +WORKDIR /usr/src/app +COPY --from=build /usr/src/app/build ./build +COPY --from=build /usr/src/app/.env.prod . +# Install serve package and react-inject-env +RUN npm install --location=global serve && \ + npm install react-inject-env + +# Set dynamic port, defualt 3000 +ENV PORT_FE=3000 EXPOSE $PORT_FE -COPY tornjak-frontend . - -RUN npm install --omit=dev \ - npm prune --production - +ENTRYPOINT npx react-inject-env set && npx serve build -p $PORT_FE \ No newline at end of file diff --git a/tornjak-frontend/.env b/tornjak-frontend/.env index d6368a06..a00b5499 100644 --- a/tornjak-frontend/.env +++ b/tornjak-frontend/.env @@ -4,6 +4,7 @@ GENERATE_SOURCEMAP=false NODE_PATH=src/ SKIP_PREFLIGHT_CHECK=true REACT_APP_DEBUG_TORNJAK=true +REACT_APP_TORNJAK_MANAGER=false ##### Backend Server uri REACT_APP_API_SERVER_URI=http://localhost:10000/ diff --git a/tornjak-frontend/.env.prod b/tornjak-frontend/.env.prod index 65492a3f..6545a3c5 100644 --- a/tornjak-frontend/.env.prod +++ b/tornjak-frontend/.env.prod @@ -1,5 +1,5 @@ REACT_APP_DEBUG_TORNJAK=true - +REACT_APP_TORNJAK_MANAGER=false ##### Backend Server uri REACT_APP_API_SERVER_URI=http://localhost:10000/ diff --git a/tornjak-frontend/.env.staging b/tornjak-frontend/.env.staging index c859341c..e52e4bd4 100644 --- a/tornjak-frontend/.env.staging +++ b/tornjak-frontend/.env.staging @@ -1,3 +1,4 @@ +REACT_APP_TORNJAK_MANAGER=false REACT_APP_API_SERVER_URI=http://localhost:10000/ #REACT_APP_AUTH_SERVER_URI=http://localhost:8080/ ##### To check SPIRE health ##### diff --git a/tornjak-frontend/package-lock.json b/tornjak-frontend/package-lock.json index bad67b7c..d17da0df 100644 --- a/tornjak-frontend/package-lock.json +++ b/tornjak-frontend/package-lock.json @@ -67,6 +67,7 @@ "moxios": "^0.4.0", "nodemon": "^2.0.13", "puppeteer": "^20.1.2", + "react-inject-env": "^2.1.0", "react-test-renderer": "^17.0.2", "redux-mock-store": "^1.5.4" } @@ -77,6 +78,15 @@ "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==", "dev": true }, + "node_modules/@aelesia/commons": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@aelesia/commons/-/commons-0.5.0.tgz", + "integrity": "sha512-iaEw3cCgcRmbQEyg8fgAqzxpqXHMYGj7d2k3w17TObtfBRvv4yr19JNWF1QjiU9tQiyN30X95BMNz5URawRXnA==", + "dev": true, + "dependencies": { + "dayjs": "^1.8.28" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -4267,6 +4277,18 @@ "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz", "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==" }, + "node_modules/@rushstack/ts-command-line": { + "version": "4.13.2", + "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.13.2.tgz", + "integrity": "sha512-bCU8qoL9HyWiciltfzg7GqdfODUeda/JpI0602kbN5YH22rzTxyqYvv7aRLENCM7XCQ1VRs7nMkEqgJUOU8Sag==", + "dev": true, + "dependencies": { + "@types/argparse": "1.0.38", + "argparse": "~1.0.9", + "colors": "~1.2.1", + "string-argv": "~0.3.1" + } + }, "node_modules/@sinclair/typebox": { "version": "0.24.51", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz", @@ -4751,6 +4773,12 @@ "node": ">=10.13.0" } }, + "node_modules/@types/argparse": { + "version": "1.0.38", + "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", + "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==", + "dev": true + }, "node_modules/@types/aria-query": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz", @@ -7227,6 +7255,15 @@ "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==" }, + "node_modules/colors": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.2.5.tgz", + "integrity": "sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==", + "dev": true, + "engines": { + "node": ">=0.1.90" + } + }, "node_modules/colorspace": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz", @@ -8541,6 +8578,12 @@ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.8.1.tgz", "integrity": "sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg==" }, + "node_modules/dayjs": { + "version": "1.11.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", + "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==", + "dev": true + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -11698,6 +11741,15 @@ "node": ">=12" } }, + "node_modules/interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -17751,6 +17803,31 @@ "react": "*" } }, + "node_modules/react-inject-env": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-inject-env/-/react-inject-env-2.1.0.tgz", + "integrity": "sha512-f1j5EV/iOpjtDEV75QEHZ28X6uvbbvIURuMspTwcuyVPKRkcgfxBUDLCF5bNZLilOYfYPCSMlJzcZ8TAa1qhzQ==", + "dev": true, + "dependencies": { + "@aelesia/commons": "^0.5.0", + "@rushstack/ts-command-line": "^4.9.0", + "dotenv": "^8.2.0", + "replace-in-file": "^6.3.2", + "shelljs": "^0.8.4" + }, + "bin": { + "react-inject-env": "dist/cli.js" + } + }, + "node_modules/react-inject-env/node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -18110,6 +18187,18 @@ "node": ">=8.10.0" } }, + "node_modules/rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", + "dev": true, + "dependencies": { + "resolve": "^1.1.6" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", @@ -18345,6 +18434,134 @@ "entities": "^2.0.0" } }, + "node_modules/replace-in-file": { + "version": "6.3.5", + "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.3.5.tgz", + "integrity": "sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2", + "glob": "^7.2.0", + "yargs": "^17.2.1" + }, + "bin": { + "replace-in-file": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/replace-in-file/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/replace-in-file/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/replace-in-file/node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/replace-in-file/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/replace-in-file/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/replace-in-file/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/replace-in-file/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/replace-in-file/node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/replace-in-file/node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -19015,6 +19232,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/shelljs": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", + "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", + "dev": true, + "dependencies": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + }, + "bin": { + "shjs": "bin/shjs" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -19258,6 +19492,15 @@ "safe-buffer": "~5.2.0" } }, + "node_modules/string-argv": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", + "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==", + "dev": true, + "engines": { + "node": ">=0.6.19" + } + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -20145,16 +20388,16 @@ } }, "node_modules/typescript": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", - "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=12.20" + "node": ">=4.2.0" } }, "node_modules/ua-parser-js": { diff --git a/tornjak-frontend/package.json b/tornjak-frontend/package.json index ded8e8f9..5c9bd14f 100644 --- a/tornjak-frontend/package.json +++ b/tornjak-frontend/package.json @@ -3,8 +3,6 @@ "version": "0.1.0", "private": true, "dependencies": { - "@redux-devtools/extension": "^3.2.5", - "prop-types": "^15.6.0", "@babel/runtime": "^7.15.4", "@carbon/charts": "^0.41.80", "@carbon/charts-react": "^0.41.80", @@ -15,6 +13,12 @@ "@material-ui/icons": "^4.11.2", "@mui/material": "^5.12.3", "@react-keycloak/web": "^3.4.0", + "@redux-devtools/extension": "^3.2.5", + "@types/carbon__icons-react": "^10.31.2", + "@types/carbon-components-react": "^7.55.2", + "@types/file-saver": "^2.0.5", + "@types/react-dom": "^17.0.9", + "@types/react-router-dom": "^5.3.1", "axios": "^0.21.4", "bootstrap": "^4.5.3", "carbon-components": "^10.36.0", @@ -24,6 +28,7 @@ "jwt-decode": "^3.1.2", "keycloak-js": "^19.0.1", "moment": "^2.29.4", + "prop-types": "^15.6.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", @@ -34,12 +39,7 @@ "redux": "^4.1.1", "redux-thunk": "^2.3.0", "url-join": "^4.0.1", - "web-vitals": "^0.2.4", - "@types/react-dom": "^17.0.9", - "@types/carbon-components-react": "^7.55.2", - "@types/carbon__icons-react": "^10.31.2", - "@types/file-saver": "^2.0.5", - "@types/react-router-dom": "^5.3.1" + "web-vitals": "^0.2.4" }, "scripts": { "start": "PORT=$PORT_FE react-scripts start --openssl-legacy-provider", @@ -68,8 +68,8 @@ ] }, "devDependencies": { - "@babel/preset-env": "^7.15.6", "@babel/plugin-transform-runtime": "^7.15.0", + "@babel/preset-env": "^7.15.6", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.1.1", "@types/jest": "^27.0.2", @@ -88,6 +88,7 @@ "moxios": "^0.4.0", "nodemon": "^2.0.13", "puppeteer": "^20.1.2", + "react-inject-env": "^2.1.0", "react-test-renderer": "^17.0.2", "redux-mock-store": "^1.5.4" }, diff --git a/tornjak-frontend/public/index.html b/tornjak-frontend/public/index.html index aa069f27..4a901f87 100644 --- a/tornjak-frontend/public/index.html +++ b/tornjak-frontend/public/index.html @@ -2,6 +2,7 @@ + diff --git a/tornjak-frontend/src/App.tsx b/tornjak-frontend/src/App.tsx index b689bef5..ca63a9bd 100644 --- a/tornjak-frontend/src/App.tsx +++ b/tornjak-frontend/src/App.tsx @@ -20,9 +20,10 @@ import RenderOnAdminRole from 'components/RenderOnAdminRole' import './App.css'; import 'react-toastify/dist/ReactToastify.css'; import SpireHealthCheck from 'components/spire-health-check'; +import {env} from './env'; // to enable SPIRE health check component -const spireHealthCheck = (process.env.REACT_APP_SPIRE_HEALTH_CHECK_ENABLE === 'true') ?? false; // defualt value false +const spireHealthCheck = (env.REACT_APP_SPIRE_HEALTH_CHECK_ENABLE === 'true') ?? false; // defualt value false function App() { return ( diff --git a/tornjak-frontend/src/auth/KeycloakAuth.js b/tornjak-frontend/src/auth/KeycloakAuth.js index 885358c3..f42cd0f0 100644 --- a/tornjak-frontend/src/auth/KeycloakAuth.js +++ b/tornjak-frontend/src/auth/KeycloakAuth.js @@ -1,7 +1,8 @@ import Keycloak from "keycloak-js"; +import {env} from '../env'; const keycloakConfig = { "realm": "tornjak", - "url": process.env.REACT_APP_AUTH_SERVER_URI, + "url": env.REACT_APP_AUTH_SERVER_URI, "ssl-required": "external", "clientId": "Tornjak-React-auth", "public-client": true, diff --git a/tornjak-frontend/src/components/RenderOnAdminRole.tsx b/tornjak-frontend/src/components/RenderOnAdminRole.tsx index 75c51399..37dee5d7 100644 --- a/tornjak-frontend/src/components/RenderOnAdminRole.tsx +++ b/tornjak-frontend/src/components/RenderOnAdminRole.tsx @@ -3,8 +3,9 @@ import TornjakHelper from './tornjak-helper'; import AccessNotAllowed from './AccessNotAllowed' import { connect } from 'react-redux'; import { RootState } from 'redux/reducers'; +import {env} from '../env'; -const Auth_Server_Uri = process.env.REACT_APP_AUTH_SERVER_URI; +const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; type RenderOnAdminRoleProp = { // updated user roles diff --git a/tornjak-frontend/src/components/helpers.ts b/tornjak-frontend/src/components/helpers.ts index ed1a90f1..16a7f904 100644 --- a/tornjak-frontend/src/components/helpers.ts +++ b/tornjak-frontend/src/components/helpers.ts @@ -1,7 +1,8 @@ +import {env} from '../env'; var urljoin = require('url-join'); // API_SERVER_URL -const ApiServerUri = process.env["REACT_APP_API_SERVER_URI"]; +const ApiServerUri = env["REACT_APP_API_SERVER_URI"]; export default function GetApiServerUri (uri: string): string { return urljoin(ApiServerUri ? ApiServerUri : "/", uri) diff --git a/tornjak-frontend/src/components/is_manager.ts b/tornjak-frontend/src/components/is_manager.ts index 21bafa73..561adf4c 100644 --- a/tornjak-frontend/src/components/is_manager.ts +++ b/tornjak-frontend/src/components/is_manager.ts @@ -1,5 +1,7 @@ +import {env} from '../env'; + // Is Manager -console.log("IS_MANAGER:" + process.env.REACT_APP_TORNJAK_MANAGER) -const IsManager = process.env.REACT_APP_TORNJAK_MANAGER !== undefined && process.env.REACT_APP_TORNJAK_MANAGER.toUpperCase() !== "FALSE" +console.log("IS_MANAGER:" + env.REACT_APP_TORNJAK_MANAGER) +const IsManager = env.REACT_APP_TORNJAK_MANAGER !== undefined && env.REACT_APP_TORNJAK_MANAGER.toUpperCase() !== "FALSE" export default IsManager diff --git a/tornjak-frontend/src/components/navbar-header-toolbar.tsx b/tornjak-frontend/src/components/navbar-header-toolbar.tsx index a0e1a87a..096fd450 100644 --- a/tornjak-frontend/src/components/navbar-header-toolbar.tsx +++ b/tornjak-frontend/src/components/navbar-header-toolbar.tsx @@ -4,8 +4,9 @@ import { } from "carbon-components-react/lib/components/UIShell"; import { UserAvatar20, Notification20, Search20 } from "@carbon/icons-react"; import KeycloakService from "auth/KeycloakAuth"; +import {env} from '../env'; -const Auth_Server_Uri = process.env.REACT_APP_AUTH_SERVER_URI; +const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; type HeaderToolBarProp = {} diff --git a/tornjak-frontend/src/components/navbar.tsx b/tornjak-frontend/src/components/navbar.tsx index 7d21f178..882cc523 100644 --- a/tornjak-frontend/src/components/navbar.tsx +++ b/tornjak-frontend/src/components/navbar.tsx @@ -18,8 +18,9 @@ import { AccessToken } from './types'; import HeaderToolBar from './navbar-header-toolbar'; +import {env} from '../env'; -const Auth_Server_Uri = process.env.REACT_APP_AUTH_SERVER_URI; +const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; type NavigationBarProp = { // dispatches a payload if user is authenticated or not return type of void @@ -66,7 +67,7 @@ class NavigationBar extends Component { } render() { - const isAdmin = this.TornjakHelper.checkRolesAdminUser(this.props.globalUserRoles), withAuth = process.env.REACT_APP_AUTH_SERVER_URI; + const isAdmin = this.TornjakHelper.checkRolesAdminUser(this.props.globalUserRoles), withAuth = env.REACT_APP_AUTH_SERVER_URI; let managerNavs; managerNavs =
diff --git a/tornjak-frontend/src/components/tornjak-api-helpers.tsx b/tornjak-frontend/src/components/tornjak-api-helpers.tsx index 7153bebb..1ce26c51 100644 --- a/tornjak-frontend/src/components/tornjak-api-helpers.tsx +++ b/tornjak-frontend/src/components/tornjak-api-helpers.tsx @@ -14,7 +14,9 @@ import { import KeycloakService from "auth/KeycloakAuth"; import { logError } from './helpers'; import { displayResponseError } from './error-api'; -const Auth_Server_Uri = process.env.REACT_APP_AUTH_SERVER_URI; +import {env} from '../env'; + +const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; type TornjakApiProp = {} type TornjakApiState = {} diff --git a/tornjak-frontend/src/env.ts b/tornjak-frontend/src/env.ts new file mode 100644 index 00000000..2ba6c566 --- /dev/null +++ b/tornjak-frontend/src/env.ts @@ -0,0 +1,12 @@ +declare global { + interface Window { + env: any + } + } + type EnvType = { + REACT_APP_SPIRE_HEALTH_CHECK_ENABLE: string, + REACT_APP_AUTH_SERVER_URI: string, + REACT_APP_API_SERVER_URI: string, + REACT_APP_TORNJAK_MANAGER: string, + } + export const env: EnvType = { ...process.env, ...window.env } \ No newline at end of file diff --git a/tornjak-frontend/src/index.tsx b/tornjak-frontend/src/index.tsx index c3c47d15..1bacb302 100644 --- a/tornjak-frontend/src/index.tsx +++ b/tornjak-frontend/src/index.tsx @@ -4,10 +4,11 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import KeycloakService from "./auth/KeycloakAuth"; +import {env} from './env'; const renderApp = () => ReactDOM.render(, document.getElementById('root')); -if (process.env.REACT_APP_AUTH_SERVER_URI) { // with Auth for testing purposes +if (env.REACT_APP_AUTH_SERVER_URI) { // with Auth for testing purposes KeycloakService.initKeycloak(renderApp); } else { renderApp(); // without Auth diff --git a/tornjak-frontend/src/tables/table-body.tsx b/tornjak-frontend/src/tables/table-body.tsx index c323d38a..35f2a266 100644 --- a/tornjak-frontend/src/tables/table-body.tsx +++ b/tornjak-frontend/src/tables/table-body.tsx @@ -5,6 +5,8 @@ import { DataTable, DataTableCell, DataTableCustomSelectionData, DataTableCustom import WorkLoadAttestor from 'components/work-load-attestor-modal'; import { ShapeOf } from "carbon-components-react/typings/shared"; import TornjakHelper from 'components/tornjak-helper'; +import {env} from '../env'; + const { TableBody, TableRow, @@ -12,7 +14,7 @@ const { TableCell, } = DataTable; -const Auth_Server_Uri = process.env.REACT_APP_AUTH_SERVER_URI; +const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; // Body take in // entityType: type of entity diff --git a/tornjak-frontend/src/tables/table-toolbar.tsx b/tornjak-frontend/src/tables/table-toolbar.tsx index b52650f6..8e4330c9 100644 --- a/tornjak-frontend/src/tables/table-toolbar.tsx +++ b/tornjak-frontend/src/tables/table-toolbar.tsx @@ -5,6 +5,8 @@ import { DataTable, DataTableCustomBatchActionsData, DataTableCustomBatchActions import { IoBan, IoDownloadOutline, IoTrashOutline } from "react-icons/io5"; import { ReactDivAttr, ShapeOf } from "carbon-components-react/typings/shared"; import TornjakHelper from 'components/tornjak-helper'; +import {env} from '../env'; + const { TableToolbar, TableToolbarSearch, @@ -13,7 +15,7 @@ const { TableBatchAction, } = DataTable; -const Auth_Server_Uri = process.env.REACT_APP_AUTH_SERVER_URI; +const Auth_Server_Uri = env.REACT_APP_AUTH_SERVER_URI; // TableToolBar takes in // onInputChange: onInputChange function for the search functionality from DataTable From 6d70563dbb708f63626c53e6fa08cca812d7d68c Mon Sep 17 00:00:00 2001 From: Mohammed Abdi Date: Thu, 18 May 2023 13:13:11 -0400 Subject: [PATCH 2/2] minimizing health check realestate Signed-off-by: Mohammed Abdi --- tornjak-frontend/src/App.css | 9 - tornjak-frontend/src/App.tsx | 2 +- .../src/components/spire-health-check.tsx | 40 +- tornjak-frontend/src/components/style.css | 755 ++++++++++-------- .../src/redux/reducers/serversReducer.ts | 2 +- 5 files changed, 424 insertions(+), 384 deletions(-) diff --git a/tornjak-frontend/src/App.css b/tornjak-frontend/src/App.css index fc07c97a..2717a651 100644 --- a/tornjak-frontend/src/App.css +++ b/tornjak-frontend/src/App.css @@ -78,13 +78,4 @@ .carbon-toast .bx--toast-notification{ margin: 0; - } - - .health-check{ - float:right; - margin-right: 30px; - margin-top: 10px; - border: 0.1px solid black; - padding: 2px 10px 2px 10px; - background-color: rgb(233, 233, 233); } \ No newline at end of file diff --git a/tornjak-frontend/src/App.tsx b/tornjak-frontend/src/App.tsx index ca63a9bd..6ed9d41f 100644 --- a/tornjak-frontend/src/App.tsx +++ b/tornjak-frontend/src/App.tsx @@ -35,7 +35,7 @@ function App() {
{spireHealthCheck && -
+
} diff --git a/tornjak-frontend/src/components/spire-health-check.tsx b/tornjak-frontend/src/components/spire-health-check.tsx index dc8d3c99..f50d3728 100644 --- a/tornjak-frontend/src/components/spire-health-check.tsx +++ b/tornjak-frontend/src/components/spire-health-check.tsx @@ -3,7 +3,7 @@ import './style.css'; import { RootState } from 'redux/reducers'; import { connect } from 'react-redux'; import InlineLoading from 'carbon-components-react/lib/components/InlineLoading'; -import { Dropdown } from 'carbon-components-react'; +import { Dropdown, Tooltip } from 'carbon-components-react'; import TornjakApi from './tornjak-api-helpers'; import { spireHealthCheckFunc, @@ -14,14 +14,14 @@ import { SpireHealtCheckFreq } from './types'; const spireHealthCheckTimeOptions = [ - '10 Seconds', - '30 Seconds', - '1 Minute', - '2 Minutes', - '5 Minutes', - '10 Minutes', - '30 Minutes', - '1 Hour', + '10 Secs', + '30 Secs', + '1 Min', + '2 Mins', + '5 Mins', + '10 Mins', + '30 Mins', + '1 Hr', '1 Day', ]; @@ -86,12 +86,12 @@ class SpireHealthCheck extends Component
return ( -
+
+
+ +

SPIRE Health Refresh Frequency

+ +
-
- -
-
+
-
SPIRE Health Check :
+
SPIRE:
{!checking && diff --git a/tornjak-frontend/src/components/style.css b/tornjak-frontend/src/components/style.css index 416b1e4a..c737ebe1 100644 --- a/tornjak-frontend/src/components/style.css +++ b/tornjak-frontend/src/components/style.css @@ -14,358 +14,405 @@ .dropdown-container { margin-left: 200px; } + .dropbtn { - color: white; - padding: 30px; - font-size: 16px; - border: none; - } - - .dropdown { - position: relative; - display: inline-block; - padding: 15px; - } - - .dropdown-content { - margin-top: 10px; - position: absolute; - background-color: #f1f1f1; - display: none; - min-width: 130px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 3; - } - - .user-dropdown { - position: relative; - display: inline-block; - } - - .user-dropdown-content { - padding-top: 25px; - margin-top: 10px; - position: absolute; - background-color: #f1f1f1; - display: none; - min-width: 130px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 3; - font-weight: bold; - } - - .user-dropdown-content a { - color: black; - padding: 12px 16px; - z-index: 3; - } - - .dropdown-content a { - color: black; - padding: 12px 16px; - z-index: 3; - } - - .dropdown-content a:hover {background-color: #ddd;} - .dropdown:hover .dropdown-content {display: block;} - .dropdown:hover .dropbtn {color: #ffffff; text-decoration: none;} - - .user-dropdown-content a:hover {background-color: #ddd;} - .user-dropdown:hover .user-dropdown-content {display: block;} - .user-dropdown:hover .dropbtn {color: #ffffff; text-decoration: none;} - - .indvidual-list-table { - margin-top: 10px; - width: 98%; - margin-bottom: 20px; - } - - .create-entry-title { - margin-left: auto; - margin-right: auto; - } - - .entry-form { - margin-left: auto; - margin-right: auto; - width: 1000px; - border-width:1px; - border-style:solid; - border-color: rgb(180, 178, 178); - padding: 30px 30px 30px 30px; - } - - .accordion-entry-form { - padding: 30px 30px 30px 30px; - } - - .parentId-drop-down { - margin-bottom: 20px; - } - - .parentId-input-field { - margin-bottom: 20px; - } - - .parentId-drop-down-yaml { - margin-bottom: 20px; - border-width:1px; - border-style:solid; - border-color: rgb(180, 178, 178); - padding: 10px 10px 10px 10px; - } - - .clustertype-drop-down { - margin-bottom: 20px; - } - - .parentId-manual-input-field { - margin-bottom: 20px; - margin-left: 40px; - } - - .clustertype-manual-input-field { - margin-bottom: 20px; - margin-left: 40px; - } - - .spiffeId-input-field { - margin-bottom: 20px; - } - - .cluster-domain-name-input-field { - margin-bottom: 20px; - } - - .cluster-managed-by-input-field { - margin-bottom: 20px; - } - - .clustername-input-field { - margin-bottom: 20px; - } - - .parentId-helper { - font-size: 12px; - color:rgb(82, 79, 79); - margin-top: 2px; - } - - .cluster-helper { - font-size: 12px; - color:rgb(82, 79, 79); - margin-top: 2px; - } - .selectors-multiselect { - margin-bottom: 20px; - } - - .agents-multiselect { - margin-bottom: 20px; - } - .selectors-textArea { - margin-bottom: 20px; - } - - .ttl-input { - display: inline-block; - margin-right: 20px; - margin-bottom: 20px; - width: 160px - } - - .expiresAt-input { - margin-right: 20px; - margin-bottom: 20px; - width: 600px; - } - - .expiry-drop-down { - display: inline-block; - vertical-align: top; - margin-right: 20px; - width: 200px; - } - - .expiryEntryFields { - display: inline-block; - vertical-align: top; - width: 200px; - } - - .expiryOption-field { - display: inline-block; - vertical-align: top; - width: 500px; - } - - .expiryOption-entry { - margin-right: 20px; - display: inline-block; - vertical-align: top; - width: 200px; - } - - .federates-with-input-field { - margin-bottom: 20px; - width: 55%; - } - .dnsnames-input-field { - margin-bottom: 20px; - width: 55%; - } - - .servers-drp-dwn { - margin-top: 5px; - } - - .success-message { - font-weight: bold; - color: green; - } - - .failed-message { - font-weight: bold; - color:red; - } - - .no-data { - margin-top: 120px; - margin-left: 200px; - } - - .toast-entry-creation-notification { - width: 850px; - } - - .toast-messege { - width: 700px; - border-width:1px; - border-style:solid; - border-color: rgb(180, 178, 178); - padding: 30px 30px 30px 30px; - } - - .toast-messege-color { - color:white; - } - - .create-entry-button { - border-radius: 25px; - } - - .custom-entry-form-title { - display: inline-block; - } - - .edit-entry-container { - display: flex; - flex-direction: row; - width: 1100px - } - .entries-list-container { - height:500px; - float:left; - display: block; - width: 50%; - overflow-y: scroll; - background-color: rgb(215, 215, 215); - padding: 10px 30px 30px 30px; - } - - .entries-edit-form { - height:500px; - display: block; - width: 50%; - overflow-y: scroll; - margin-left: 20px; - margin-top: 10px; - } - - .federates-with-input-field-yaml { - margin-bottom: 20px; - } - .dnsnames-input-field-yaml { - margin-bottom: 20px; - } - - .modal_Entry_list_title { - text-transform: capitalize; - text-decoration: underline; - font-weight: bold; - margin-bottom: 5px; - font-size: 15px; - } - - .additional_info_entries_list { - font-size: 13px; - color:rgb(101, 99, 99); - } - - .yaml_view_modal_json { - padding: 5px 30px 30px 30px; - font-weight: bold; - background-color: rgb(213, 213, 213); - border-width:1px; - border-style:solid; - border-color: rgb(180, 178, 178); - } - - .view_entries_yaml_button { - display:inline-block; - } - - .selected-entry { - background-color: rgb(175, 175, 184); - } - - .header-toolbar { - position: relative; - display: inline; - float: right; - } - - .user-name { - position: relative; - display: inline-block; - color: aliceblue; - } - - .not-allowed { - color: rgb(6, 165, 165); - position: absolute; - left: 40%; - } - - .admin-toolbar-header { - position: relative; - display: inline; - padding: 15px; - color: white; - border: 0.1px solid white; - padding: 4px; - float: right; - margin-right: 70px; - margin-top: 7px; - } - - .health-status-check-title { - display: inline-block; - margin-right: 10px; - } - - .health-status-check-icon { - display: inline-block; - } - - .spire-health-check-refresh-dropdown { - width: 150px; - margin-top: 10px; - margin-bottom: 10px; - } - - .divider { - border-bottom: 1px solid black; - margin-left: -10px; - margin-right: -10px; - } \ No newline at end of file + color: white; + padding: 30px; + font-size: 16px; + border: none; +} + +.dropdown { + position: relative; + display: inline-block; + padding: 15px; +} + +.dropdown-content { + margin-top: 10px; + position: absolute; + background-color: #f1f1f1; + display: none; + min-width: 130px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 3; +} + +.user-dropdown { + position: relative; + display: inline-block; +} + +.user-dropdown-content { + padding-top: 25px; + margin-top: 10px; + position: absolute; + background-color: #f1f1f1; + display: none; + min-width: 130px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 3; + font-weight: bold; +} + +.user-dropdown-content a { + color: black; + padding: 12px 16px; + z-index: 3; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + z-index: 3; +} + +.dropdown-content a:hover { + background-color: #ddd; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.dropdown:hover .dropbtn { + color: #ffffff; + text-decoration: none; +} + +.user-dropdown-content a:hover { + background-color: #ddd; +} + +.user-dropdown:hover .user-dropdown-content { + display: block; +} + +.user-dropdown:hover .dropbtn { + color: #ffffff; + text-decoration: none; +} + +.indvidual-list-table { + margin-top: 10px; + width: 98%; + margin-bottom: 20px; +} + +.create-entry-title { + margin-left: auto; + margin-right: auto; +} + +.entry-form { + margin-left: auto; + margin-right: auto; + width: 1000px; + border-width: 1px; + border-style: solid; + border-color: rgb(180, 178, 178); + padding: 30px 30px 30px 30px; +} + +.accordion-entry-form { + padding: 30px 30px 30px 30px; +} + +.parentId-drop-down { + margin-bottom: 20px; +} + +.parentId-input-field { + margin-bottom: 20px; +} + +.parentId-drop-down-yaml { + margin-bottom: 20px; + border-width: 1px; + border-style: solid; + border-color: rgb(180, 178, 178); + padding: 10px 10px 10px 10px; +} + +.clustertype-drop-down { + margin-bottom: 20px; +} + +.parentId-manual-input-field { + margin-bottom: 20px; + margin-left: 40px; +} + +.clustertype-manual-input-field { + margin-bottom: 20px; + margin-left: 40px; +} + +.spiffeId-input-field { + margin-bottom: 20px; +} + +.cluster-domain-name-input-field { + margin-bottom: 20px; +} + +.cluster-managed-by-input-field { + margin-bottom: 20px; +} + +.clustername-input-field { + margin-bottom: 20px; +} + +.parentId-helper { + font-size: 12px; + color: rgb(82, 79, 79); + margin-top: 2px; +} + +.cluster-helper { + font-size: 12px; + color: rgb(82, 79, 79); + margin-top: 2px; +} + +.selectors-multiselect { + margin-bottom: 20px; +} + +.agents-multiselect { + margin-bottom: 20px; +} + +.selectors-textArea { + margin-bottom: 20px; +} + +.ttl-input { + display: inline-block; + margin-right: 20px; + margin-bottom: 20px; + width: 160px +} + +.expiresAt-input { + margin-right: 20px; + margin-bottom: 20px; + width: 600px; +} + +.expiry-drop-down { + display: inline-block; + vertical-align: top; + margin-right: 20px; + width: 200px; +} + +.expiryEntryFields { + display: inline-block; + vertical-align: top; + width: 200px; +} + +.expiryOption-field { + display: inline-block; + vertical-align: top; + width: 500px; +} + +.expiryOption-entry { + margin-right: 20px; + display: inline-block; + vertical-align: top; + width: 200px; +} + +.federates-with-input-field { + margin-bottom: 20px; + width: 55%; +} + +.dnsnames-input-field { + margin-bottom: 20px; + width: 55%; +} + +.servers-drp-dwn { + margin-top: 5px; +} + +.success-message { + font-weight: bold; + color: green; +} + +.failed-message { + font-weight: bold; + color: red; +} + +.no-data { + margin-top: 120px; + margin-left: 200px; +} + +.toast-entry-creation-notification { + width: 850px; +} + +.toast-messege { + width: 700px; + border-width: 1px; + border-style: solid; + border-color: rgb(180, 178, 178); + padding: 30px 30px 30px 30px; +} + +.toast-messege-color { + color: white; +} + +.create-entry-button { + border-radius: 25px; +} + +.custom-entry-form-title { + display: inline-block; +} + +.edit-entry-container { + display: flex; + flex-direction: row; + width: 1100px +} + +.entries-list-container { + height: 500px; + float: left; + display: block; + width: 50%; + overflow-y: scroll; + background-color: rgb(215, 215, 215); + padding: 10px 30px 30px 30px; +} + +.entries-edit-form { + height: 500px; + display: block; + width: 50%; + overflow-y: scroll; + margin-left: 20px; + margin-top: 10px; +} + +.federates-with-input-field-yaml { + margin-bottom: 20px; +} + +.dnsnames-input-field-yaml { + margin-bottom: 20px; +} + +.modal_Entry_list_title { + text-transform: capitalize; + text-decoration: underline; + font-weight: bold; + margin-bottom: 5px; + font-size: 15px; +} + +.additional_info_entries_list { + font-size: 13px; + color: rgb(101, 99, 99); +} + +.yaml_view_modal_json { + padding: 5px 30px 30px 30px; + font-weight: bold; + background-color: rgb(213, 213, 213); + border-width: 1px; + border-style: solid; + border-color: rgb(180, 178, 178); +} + +.view_entries_yaml_button { + display: inline-block; +} + +.selected-entry { + background-color: rgb(175, 175, 184); +} + +.header-toolbar { + position: relative; + display: inline; + float: right; +} + +.user-name { + position: relative; + display: inline-block; + color: aliceblue; +} + +.not-allowed { + color: rgb(6, 165, 165); + position: absolute; + left: 40%; +} + +.admin-toolbar-header { + position: relative; + display: inline; + padding: 15px; + color: white; + border: 0.1px solid white; + padding: 4px; + float: right; + margin-right: 70px; + margin-top: 7px; +} + +.health-check { + float: right; + margin-right: 220px; + padding-top: 10px; +} + +.health-status-check-container { + border: 0.1px solid black; + padding: 2px 10px 2px 10px; + background-color: rgb(233, 233, 233); + display: inline-block; + margin-left: 5px; + margin-top: 40px; + position: absolute; + top: 0; + margin-top: 85px; +} + +.health-status-check-title { + display: inline-block; + margin-right: 10px; +} + +.health-status-check-icon { + display: inline-block; +} + +.spire-health-check-refresh-dropdown { + width: 115px; + margin-bottom: 5px; + display: inline-block; +} + +.spire-health-refresh-tooltip { + display: inline-block; + margin-right: 10px; +} + +.spire-health-helper { + font-size: 8px; + color: rgb(252, 252, 252); + margin-top: 2px; +} \ No newline at end of file diff --git a/tornjak-frontend/src/redux/reducers/serversReducer.ts b/tornjak-frontend/src/redux/reducers/serversReducer.ts index 9b6e816b..c9585b7a 100644 --- a/tornjak-frontend/src/redux/reducers/serversReducer.ts +++ b/tornjak-frontend/src/redux/reducers/serversReducer.ts @@ -24,7 +24,7 @@ const initialState: ServersReducerState = { globalSpireHealthChecking: false, globalSpireHealthTime: { SpireHealtCheckTime: 120, - SpireHealtCheckFreqDisplay: '2 Minutes', + SpireHealtCheckFreqDisplay: '2 Mins', }, };