16 | {prefix}
17 |
20 | );
21 | };
22 |
23 | export default Stat;
24 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "2.0.0",
3 | "tasks": [
4 | {
5 | "type": "npm",
6 | "label": "Start Webpack Dev",
7 | "script": "start:renderer",
8 | "options": {
9 | "cwd": "${workspaceFolder}"
10 | },
11 | "isBackground": true,
12 | "problemMatcher": {
13 | "owner": "custom",
14 | "pattern": {
15 | "regexp": "____________"
16 | },
17 | "background": {
18 | "activeOnStart": true,
19 | "beginsPattern": "Compiling\\.\\.\\.$",
20 | "endsPattern": "(Compiled successfully|Failed to compile)\\.$"
21 | }
22 | }
23 | }
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/src/main/utils/resolveHtmlPath.ts:
--------------------------------------------------------------------------------
1 | /* eslint import/prefer-default-export: off, import/no-mutable-exports: off */
2 | import { URL } from 'url';
3 | import path from 'path';
4 |
5 | export let resolveHtmlPath: (htmlFileName: string) => string;
6 |
7 | if (process.env.NODE_ENV === 'development') {
8 | const port = process.env.PORT || 1212;
9 | resolveHtmlPath = (htmlFileName: string) => {
10 | const url = new URL(`http://localhost:${port}`);
11 | url.pathname = htmlFileName;
12 | return url.href;
13 | };
14 | } else {
15 | resolveHtmlPath = (htmlFileName: string) => {
16 | return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/src/renderer/components/base/CreateEnvironmentButton.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/require-default-props */
2 | import { FiPlus } from 'react-icons/fi';
3 | import { Link } from 'react-router-dom';
4 |
5 | import '../../assets/styles/components/CreateEnvironmentButton.scss';
6 |
7 | type CreateEnvironmentButtonProps = {
8 | isExpanded?: boolean;
9 | };
10 |
11 | export default function CreateEnvironmentButton({
12 | isExpanded = false,
13 | }: CreateEnvironmentButtonProps) {
14 | return (
15 |
19 | {heading}
18 | {suffix && {suffix}} 19 |
37 | {expanded
38 | ? t(`global.environmentKinds.${kind}`)
39 | : t(`global.environmentKindsShort.${kind}`)}
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/src/common/utils/formatBytes.ts:
--------------------------------------------------------------------------------
1 | import log from 'electron-log';
2 |
3 | /* eslint-disable no-restricted-properties */
4 | /**
5 | * Formats a giver number of bytes to a human readable format.
6 | * @since 0.2
7 | * @param bytes number of bytes to format
8 | * @param decimals amount of decimals to use (defaults to 2)
9 | * @returns a string containing the formatted bytes in human readable format
10 | * @example formatBytes(1073741824) -> "1 GB"
11 | */
12 | export default function formatBytes(
13 | bytes: number | null,
14 | decimals = 2
15 | ): string {
16 | try {
17 | if (!bytes || !+bytes) return '0 Bytes';
18 |
19 | const k = 1024;
20 | const dm = decimals < 0 ? 0 : decimals;
21 | const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
22 |
23 | const i = Math.floor(Math.log(bytes) / Math.log(k));
24 |
25 | return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
26 | } catch (error) {
27 | log.error(`formatBytes -> Could not format bytes: ${error}`);
28 | return '0 Bytes';
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/renderer/assets/styles/components/ProgressBar.scss:
--------------------------------------------------------------------------------
1 | .pb-container {
2 | width: 100%;
3 | margin-top: 1rem;
4 |
5 | .values {
6 | display: flex;
7 | justify-content: space-between;
8 | font-size: 0.75rem;
9 | }
10 |
11 | .indicator {
12 | text-align: end;
13 | }
14 |
15 | .progress-bar {
16 | width: 100%;
17 | height: 0.7rem;
18 |
19 | border-radius: 0.5rem;
20 |
21 | background: var(--background);
22 | position: relative;
23 |
24 | .progress {
25 | height: 100%;
26 | border-radius: 0.5rem;
27 |
28 | &.progress-gradient {
29 | -webkit-mask: linear-gradient(#fff 0 0);
30 | mask: linear-gradient(#fff 0 0);
31 |
32 | &::before {
33 | content: '';
34 | position: absolute;
35 | top: 0;
36 | left: 0;
37 | right: 0;
38 | bottom: 0;
39 |
40 | background: linear-gradient(
41 | 90deg,
42 | #34d399 0%,
43 | #fcd34d 50%,
44 | #ef4444 100%
45 | );
46 | }
47 | }
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-present Electron React Boilerplate
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/renderer/utils/getServiceName.ts:
--------------------------------------------------------------------------------
1 | enum FluigServices {
2 | MSOffice = 'MS Office',
3 | analytics = 'Analytics',
4 | licenseServer = 'License Server',
5 | mailServer = 'Mail Server',
6 | openOffice = 'Open Office',
7 | realTime = 'Fluig Realtime',
8 | solrServer = 'Solr Server',
9 | viewer = 'Fluig Viewer',
10 | unknown = 'UNKNOWN',
11 | }
12 |
13 | /**
14 | * Returns a string with the name of a Fluig Server service.
15 | * @since 0.1.0
16 | */
17 | export default function getServiceName(id: string): FluigServices {
18 | switch (id) {
19 | case 'MSOffice':
20 | return FluigServices.MSOffice;
21 | case 'analytics':
22 | return FluigServices.analytics;
23 | case 'licenseServer':
24 | return FluigServices.licenseServer;
25 | case 'mailServer':
26 | return FluigServices.mailServer;
27 | case 'openOffice':
28 | return FluigServices.openOffice;
29 | case 'realTime':
30 | return FluigServices.realTime;
31 | case 'solrServer':
32 | return FluigServices.solrServer;
33 | case 'viewer':
34 | return FluigServices.viewer;
35 | default:
36 | return FluigServices.unknown;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/.erb/configs/webpack.paths.ts:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const rootPath = path.join(__dirname, '../..');
4 |
5 | const dllPath = path.join(__dirname, '../dll');
6 |
7 | const srcPath = path.join(rootPath, 'src');
8 | const srcMainPath = path.join(srcPath, 'main');
9 | const srcRendererPath = path.join(srcPath, 'renderer');
10 |
11 | const releasePath = path.join(rootPath, 'release');
12 | const appPath = path.join(releasePath, 'app');
13 | const appPackagePath = path.join(appPath, 'package.json');
14 | const appNodeModulesPath = path.join(appPath, 'node_modules');
15 | const srcNodeModulesPath = path.join(srcPath, 'node_modules');
16 |
17 | const distPath = path.join(appPath, 'dist');
18 | const distMainPath = path.join(distPath, 'main');
19 | const distRendererPath = path.join(distPath, 'renderer');
20 |
21 | const buildPath = path.join(releasePath, 'build');
22 |
23 | export default {
24 | rootPath,
25 | dllPath,
26 | srcPath,
27 | srcMainPath,
28 | srcRendererPath,
29 | releasePath,
30 | appPath,
31 | appPackagePath,
32 | appNodeModulesPath,
33 | srcNodeModulesPath,
34 | distPath,
35 | distMainPath,
36 | distRendererPath,
37 | buildPath,
38 | };
39 |
--------------------------------------------------------------------------------
/src/renderer/components/base/DynamicImageLoad.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import SpinnerLoader from './Loaders/Spinner';
3 |
4 | interface Props {
5 | imgSrc: string;
6 | altName: string;
7 | fallback: string;
8 | }
9 |
10 | export default function DynamicImageLoad({ imgSrc, altName, fallback }: Props) {
11 | const [imageIsLoaded, setImageIsLoaded] = useState(false);
12 | const [hasError, setHasError] = useState(false);
13 |
14 | return (
15 | <>
16 | {t('views.AppSettingsView.title')}
17 |
18 |
28 |
19 |
24 |
25 |
27 |
20 |
36 |
21 |
34 |
29 |
32 |
42 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/renderer/contexts/EnvironmentListContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, ReactNode, useContext, useState } from 'react';
2 | import { EnvironmentWithRelatedData } from '../../common/interfaces/EnvironmentControllerInterface';
3 | import { getAllEnvironments } from '../ipc/environmentsIpcHandler';
4 |
5 | interface EnvironmentListContextProviderProps {
6 | children: ReactNode;
7 | }
8 |
9 | interface EnvironmentListContextData {
10 | environmentList: EnvironmentWithRelatedData[];
11 | updateEnvironmentList: () => Promise
25 |
26 |
29 |
30 |
33 |
34 |
35 |
42 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/common/classes/AuthKeysEncoder.ts:
--------------------------------------------------------------------------------
1 | import * as forge from 'node-forge';
2 | import log from 'electron-log';
3 | import AuthObject from '../interfaces/AuthObject';
4 |
5 | interface EncryptedPayload {
6 | encrypted: string;
7 | key: string;
8 | iv: string;
9 | }
10 |
11 | export default class AuthKeysEncoder {
12 | /**
13 | * The pain oAuth object
14 | */
15 | authObject: AuthObject;
16 |
17 | /**
18 | * The encrypted auth object as a string
19 | */
20 | encryptedAuthObject: EncryptedPayload | null = null;
21 |
22 | /**
23 | * The verification hash string
24 | */
25 | hashString: string = '';
26 |
27 | constructor(auth: AuthObject) {
28 | this.authObject = auth;
29 | }
30 |
31 | encode(): EncryptedPayload | null {
32 | try {
33 | const key = forge.random.getBytesSync(32);
34 | const iv = forge.random.getBytesSync(32);
35 |
36 | const cipher = forge.cipher.createCipher('AES-CBC', key);
37 | cipher.start({ iv });
38 | cipher.update(forge.util.createBuffer(JSON.stringify(this.authObject)));
39 | cipher.finish();
40 |
41 | const encrypted = cipher.output.data;
42 |
43 | this.encryptedAuthObject = {
44 | encrypted: forge.util.encode64(String(encrypted)),
45 | key: forge.util.encode64(String(key)),
46 | iv: forge.util.encode64(String(iv)),
47 | };
48 |
49 | return this.encryptedAuthObject;
50 | } catch (error) {
51 | log.error('Could not encode the authentication keys:');
52 | log.error(error);
53 |
54 | return null;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/renderer/assets/styles/components/EnvironmentServices.scss:
--------------------------------------------------------------------------------
1 | #environment-services {
2 | .service-list {
3 | display: flex;
4 | flex-direction: column;
5 |
6 | .service-item {
7 | display: flex;
8 | justify-content: space-between;
9 |
10 | padding-bottom: 0.5rem;
11 | margin-bottom: 0.5rem;
12 | border-bottom: 2px solid var(--border-light);
13 |
14 | .service-name {
15 | font-size: 0.9rem;
16 | }
17 |
18 | .service-status {
19 | font-size: 0.6rem;
20 | text-transform: uppercase;
21 |
22 | .status-indicator {
23 | margin-left: 0.25rem;
24 |
25 | &::before {
26 | content: '';
27 |
28 | height: 0.5rem;
29 | width: 0.5rem;
30 | border-radius: 100%;
31 | display: inline-block;
32 | background-color: #a7a7a7;
33 | }
34 | }
35 |
36 | &.is-operational {
37 | color: var(--green);
38 | .status-indicator {
39 | &::before {
40 | background-color: var(--green);
41 | }
42 | }
43 | }
44 | &.is-unused {
45 | color: var(--purple);
46 | .status-indicator {
47 | &::before {
48 | background-color: var(--purple);
49 | }
50 | }
51 | }
52 | &.is-failed {
53 | color: var(--red);
54 | .status-indicator {
55 | &::before {
56 | background-color: var(--red);
57 | }
58 | }
59 | }
60 | }
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/renderer/components/container/Navbar/EnvironmentList.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'framer-motion';
2 | import { Environment } from '../../../../main/generated/client';
3 | import EnvironmentListItem from './EnvironmentListItem';
4 |
5 | type EnvironmentListProps = {
6 | environmentList: Environment[];
7 | };
8 |
9 | function EnvironmentList({ environmentList }: EnvironmentListProps) {
10 | let renderList = [] as Environment[];
11 |
12 | if (environmentList.length > 0) {
13 | renderList = environmentList.filter((env) => env.isFavorite);
14 | }
15 |
16 | if (renderList.length === 0) {
17 | renderList = environmentList;
18 | }
19 |
20 | return renderList.length === 0 ? (
21 | <>
22 | ) : (
23 | <>
24 | {renderList.map((environment: Environment, idx: number) => {
25 | return (
26 | 43 | {environmentName} Fluig {release} 44 |
45 |
36 | {showValues ? (
37 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/renderer/assets/styles/components/FloatingNotification.scss:
--------------------------------------------------------------------------------
1 | .floatingNotificationContainer {
2 | width: 100%;
3 | box-shadow: var(--card-shadow);
4 | border-radius: var(--card-border-radius);
5 |
6 | display: flex;
7 |
8 | .iconContainer {
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | padding: 1rem;
13 | border-radius: 1rem 0 0 1rem;
14 |
15 | svg {
16 | font-size: 1.5rem;
17 | }
18 | }
19 |
20 | .messageContainer {
21 | padding: 1rem;
22 | display: flex;
23 | justify-content: flex-start;
24 | width: inherit;
25 | align-items: center;
26 | background-color: var(--card);
27 | border-radius: 0 1rem 1rem 0;
28 |
29 | max-height: 10rem;
30 | overflow-y: auto;
31 |
32 | color: var(--font-primary);
33 | }
34 |
35 | .closeButtonContainer {
36 | background-color: var(--background);
37 | border-radius: 0 1rem 1rem 0;
38 | padding: 1rem;
39 | }
40 |
41 | &.has-info {
42 | border: 2px solid var(--purple);
43 | .iconContainer {
44 | background-color: var(--light-purple);
45 | color: var(--purple);
46 | }
47 | }
48 |
49 | &.has-success {
50 | border: 2px solid var(--green);
51 | .iconContainer {
52 | background-color: var(--light-green);
53 | color: var(--green);
54 | }
55 | }
56 |
57 | &.has-warning {
58 | border: 2px solid var(--yellow);
59 | .iconContainer {
60 | background-color: var(--light-yellow);
61 | color: var(--yellow);
62 | }
63 | }
64 |
65 | &.has-error {
66 | border: 2px solid var(--red);
67 | .iconContainer {
68 | background-color: var(--light-red);
69 | color: var(--red);
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/renderer/classes/EnvironmentFormValidator.ts:
--------------------------------------------------------------------------------
1 | import log from 'electron-log';
2 | import FormValidator from './FormValidator';
3 |
4 | interface EnvironmentFormData {
5 | name: string;
6 | baseUrl: string;
7 | kind: string;
8 | auth: {
9 | consumerKey: string;
10 | consumerSecret: string;
11 | accessToken: string;
12 | tokenSecret: string;
13 | };
14 | updateSchedule: {
15 | scrapeFrequency: string;
16 | pingFrequency: string;
17 | };
18 | }
19 |
20 | export default class EnvironmentFormValidator extends FormValidator {
21 | validate(formData: EnvironmentFormData) {
22 | log.info('EnvironmentFormValidator: Validating form data');
23 |
24 | if (formData) {
25 | if (formData.name === '') {
26 | this.lastMessage = 'nameIsRequired';
27 | } else if (formData.baseUrl === '') {
28 | this.lastMessage = 'baseUrlIsRequired';
29 | } else if (formData.auth.consumerKey === '') {
30 | this.lastMessage = 'consumerKeyIsRequired';
31 | } else if (formData.auth.consumerSecret === '') {
32 | this.lastMessage = 'consumerSecretIsRequired';
33 | } else if (formData.auth.accessToken === '') {
34 | this.lastMessage = 'accessTokenIsRequired';
35 | } else if (formData.auth.tokenSecret === '') {
36 | this.lastMessage = 'tokenSecretIsRequired';
37 | } else if (formData.updateSchedule.scrapeFrequency === '') {
38 | this.lastMessage = 'scrapeFrequencyIsRequired';
39 | } else if (formData.updateSchedule.pingFrequency === '') {
40 | this.lastMessage = 'pingFrequencyIsRequired';
41 | } else {
42 | this.isValid = true;
43 | }
44 | }
45 |
46 | return { isValid: this.isValid, lastMessage: this.lastMessage };
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/main/utils/trayBuilder.ts:
--------------------------------------------------------------------------------
1 | import { app, Menu, shell, Tray } from 'electron';
2 | import log from 'electron-log';
3 | import path from 'path';
4 | import i18n from '../../common/i18n/i18n';
5 | import getAssetPath from './getAssetPath';
6 | import { version } from '../../../package.json';
7 |
8 | export default function trayBuilder(
9 | instance: Tray | null,
10 | reopenFunction: () => void
11 | ): Tray {
12 | if (instance !== null) instance.destroy();
13 |
14 | const newInstance = new Tray(path.join(getAssetPath(), 'icon.ico'));
15 | newInstance.setToolTip(i18n.t('menu.systemTray.running'));
16 | newInstance.on('click', reopenFunction);
17 | newInstance.setContextMenu(
18 | Menu.buildFromTemplate([
19 | {
20 | type: 'normal',
21 | label: `Fluig Monitor - v${version}`,
22 | enabled: false,
23 | },
24 | { type: 'separator' },
25 | {
26 | type: 'normal',
27 | label: i18n.t('menu.systemTray.open'),
28 | click: reopenFunction,
29 | },
30 | {
31 | type: 'normal',
32 | label: i18n.t('menu.systemTray.reportABug'),
33 | click: () =>
34 | shell.openExternal(
35 | 'https://github.com/luizf-lf/fluig-monitor/issues/new/choose'
36 | ),
37 | },
38 | {
39 | type: 'normal',
40 | label: i18n.t('menu.systemTray.dropBombs'),
41 | enabled: false,
42 | },
43 | {
44 | type: 'normal',
45 | label: i18n.t('menu.systemTray.quit'),
46 | click: () => {
47 | log.info(
48 | 'App will be closed since the system tray option has been clicked.'
49 | );
50 | app.quit();
51 | },
52 | },
53 | ])
54 | );
55 |
56 | return newInstance;
57 | }
58 |
--------------------------------------------------------------------------------
/src/renderer/components/container/SettingsPage/LanguageSettings.tsx:
--------------------------------------------------------------------------------
1 | import { ipcRenderer } from 'electron';
2 | import { useTranslation } from 'react-i18next';
3 | import { FiCompass } from 'react-icons/fi';
4 |
5 | import DefaultMotionDiv from '../../base/DefaultMotionDiv';
6 |
7 | export default function LanguageSettings() {
8 | const { t, i18n } = useTranslation();
9 |
10 | // sends an ipc signal, since the i18n language must be changed on the main process to also
11 | // update the language on the database
12 | function dispatchLanguageChange(lang: string) {
13 | ipcRenderer.invoke('updateLanguage', lang);
14 | }
15 |
16 | return (
17 |
38 | 0
39 | {total}
40 |
41 | ) : (
42 | <>
43 | )}
44 | {showIndicator ? (
45 |
46 | {showPercentage ? `${percentage.toPrecision(3)}%` : current}
47 |
48 | ) : (
49 | <>
50 | )}
51 |
52 |
59 |
60 |
19 |
20 |
24 | {t('components.LanguageSettings.helperText')}
25 | 26 |
27 |
37 |
47 |
48 |
22 |
50 | );
51 | }
52 |
53 | return null;
54 | }
55 |
--------------------------------------------------------------------------------
/src/renderer/components/base/FloatingNotification.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/require-default-props */
2 | import { motion } from 'framer-motion';
3 | import {
4 | FiAlertCircle,
5 | FiAlertOctagon,
6 | FiCheck,
7 | FiInfo,
8 | FiX,
9 | } from 'react-icons/fi';
10 | import '../../assets/styles/components/FloatingNotification.scss';
11 |
12 | type FloatingNotificationProps = {
13 | type?: string;
14 | message: string;
15 | mustManuallyClose?: boolean;
16 | };
17 |
18 | function FloatingNotification({
19 | type = 'info',
20 | message,
21 | mustManuallyClose = false,
22 | }: FloatingNotificationProps) {
23 | let icon = <>;
24 | const animationVariants = {
25 | hidden: {
26 | opacity: 0,
27 | x: '50vw',
28 | },
29 | visible: {
30 | opacity: 1,
31 | x: 0,
32 | transition: { ease: 'easeInOut', duration: 0.5 },
33 | },
34 | exit: {
35 | opacity: 0,
36 | x: '50vw',
37 | transition: { ease: 'easeInOut', duration: 0.5 },
38 | },
39 | };
40 |
41 | switch (type) {
42 | case 'success':
43 | icon = {new Date(content.label).toLocaleString()}
23 |
24 | {content.payload?.map((item) => {
25 | if (item.dataKey) {
26 | let dataKeyTitle = '';
27 | switch (unit) {
28 | case 'ms':
29 | dataKeyTitle = t('components.GraphTooltip.unitTitles.ms');
30 | break;
31 | case 'bytes':
32 | dataKeyTitle = t('components.GraphTooltip.unitTitles.bytes');
33 | break;
34 | default:
35 | break;
36 | }
37 | return (
38 |
39 | {dataKeyTitle}:{' '}
40 | {unit === 'bytes'
41 | ? formatBytes(item.payload[item.dataKey])
42 | : `${item.payload[item.dataKey]}${unit}`}
43 |
44 | );
45 | }
46 | return null;
47 | })}
48 |
49 | {icon}
64 | {message}
65 | {mustManuallyClose ? (
66 |
69 | ) : (
70 | <>
71 | )}
72 |
29 |
39 | );
40 |
41 | return (
42 |
30 |
32 |
33 | 
34 |
35 | {t('views.HomeEnvironmentListView.createEnvironmentHelper')}
36 |
37 |
38 | {t('views.HomeEnvironmentListView.header')}
44 |
45 |
55 |
29 |
31 |
32 | {/* */}
33 |
34 |
45 |
46 |
47 |
48 |
15 |
16 |
20 |
22 | 
28 |
30 | Release {version}
29 |{t('components.AboutSection.title')}
31 |32 | {t('components.AboutSection.developedBy')} 33 | 40 | . 41 |
42 |
43 |
46 | {t('components.AboutSection.disclosure')}
44 |{t('components.AboutSection.usageDisclosure')}
45 |
47 |
61 | 48 | {t('components.AboutSection.learnMoreAt')} 49 | 58 | . 59 |
60 |
27 |
51 |
35 |
50 |
45 |
49 |
17 |
18 |
22 | {t('components.ThemeSettings.helperText')}
23 | 24 |
25 |
66 |
26 |
44 |
45 |
46 |
64 |
65 |
41 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/test/utils/commonUtils.spec.ts:
--------------------------------------------------------------------------------
1 | import parseBoolean from '../../src/common/utils/parseBoolean';
2 | import relativeTime from '../../src/common/utils/relativeTime';
3 | import formatBytes from '../../src/common/utils/formatBytes';
4 | import byteSpeed from '../../src/common/utils/byteSpeed';
5 | import compareSemver from '../../src/common/utils/compareSemver';
6 |
7 | describe('Common util functions', () => {
8 | describe('Parse boolean util', () => {
9 | it('Parses falsy values', () => {
10 | expect(parseBoolean('false')).toBeFalsy();
11 | expect(parseBoolean('FALSE')).toBeFalsy();
12 | expect(parseBoolean(0)).toBeFalsy();
13 | });
14 | it('Parses truthy values', () => {
15 | expect(parseBoolean('true')).toBeTruthy();
16 | expect(parseBoolean('TRUE')).toBeTruthy();
17 | expect(parseBoolean(1)).toBeTruthy();
18 | });
19 | it('Returns false to unknown values', () => {
20 | expect(parseBoolean(null)).toBeFalsy();
21 | expect(parseBoolean(undefined)).toBeFalsy();
22 | expect(parseBoolean([1, 2, 3])).toBeFalsy();
23 | expect(parseBoolean('Sample value')).toBeFalsy();
24 | });
25 | });
26 |
27 | describe('Relative time util', () => {
28 | it('Calculates seconds', () => {
29 | expect(relativeTime(35)).toHaveProperty('seconds', 35);
30 | });
31 | it('Calculates minutes', () => {
32 | expect(relativeTime(130)).toHaveProperty('minutes', 2);
33 | });
34 | it('Calculates hours', () => {
35 | expect(relativeTime(11000)).toHaveProperty('hours', 3);
36 | });
37 | it('Calculates days', () => {
38 | expect(relativeTime(300000)).toHaveProperty('days', 3);
39 | });
40 | });
41 |
42 | describe('Format data size util', () => {
43 | it('Formats common data sizes', () => {
44 | expect(formatBytes(1)).toBe('1 Bytes');
45 | expect(formatBytes(1024)).toBe('1 KB');
46 | expect(formatBytes(1048576)).toBe('1 MB');
47 | expect(formatBytes(1073741824)).toBe('1 GB');
48 | expect(formatBytes(1099511627776)).toBe('1 TB');
49 | expect(formatBytes(1125899906842624)).toBe('1 PB');
50 | });
51 | });
52 |
53 | describe('Bytes per seconds util', () => {
54 | it('Calculates data speed', () => {
55 | expect(byteSpeed(1024, 1000)).toBe('1 KB/s');
56 | expect(byteSpeed(1048576, 1000)).toBe('1 MB/s');
57 | });
58 | });
59 |
60 | describe('Compare semantic version util', () => {
61 | it('Compares versions correctly', () => {
62 | expect(compareSemver('1.7.0', '1.6.5')).toBe(1);
63 | expect(compareSemver('1.6.1', '1.6.5')).toBe(-1);
64 | expect(compareSemver('1.8.0', '1.8.0')).toBe(0);
65 | expect(compareSemver('1.8.0', '1.7.1')).toBe(1);
66 | expect(compareSemver('1.5.7', '1.5.14')).toBe(-1);
67 | });
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/src/renderer/contexts/NotificationsContext.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatePresence } from 'framer-motion';
2 | import { createContext, ReactNode, useContext, useState } from 'react';
3 | import FloatingNotification from '../components/base/FloatingNotification';
4 |
5 | interface NotificationInterface {
6 | id: number;
7 | type: string;
8 | message: string;
9 | }
10 |
11 | interface NotificationsContextProviderProps {
12 | children: ReactNode;
13 | }
14 | interface NotificationsContextData {
15 | notificationList: NotificationInterface[];
16 | createNotification: ({ id, type, message }: NotificationInterface) => void;
17 | createShortNotification: (
18 | { id, type, message }: NotificationInterface,
19 | timeout?: number
20 | ) => void;
21 | removeNotification: (id: number) => void;
22 | }
23 |
24 | export const NotificationsContext = createContext(
25 | {} as NotificationsContextData
26 | );
27 |
28 | export function NotificationsContextProvider({
29 | children,
30 | }: NotificationsContextProviderProps) {
31 | const [notificationList, setNotificationList] = useState(
32 | [] as NotificationInterface[]
33 | );
34 |
35 | function createNotification({ id, type, message }: NotificationInterface) {
36 | setNotificationList((prevNotifications) => [
37 | ...prevNotifications,
38 | {
39 | id,
40 | type,
41 | message,
42 | },
43 | ]);
44 | }
45 |
46 | function removeNotification(id: number) {
47 | const notificationIndex = notificationList.findIndex(
48 | (item) => item.id === id
49 | );
50 | if (notificationIndex > -1) {
51 | setNotificationList(notificationList.splice(notificationIndex));
52 | }
53 | }
54 |
55 | function createShortNotification(
56 | { id, type, message }: NotificationInterface,
57 | timeout = 5000
58 | ) {
59 | createNotification({ id, type, message });
60 | setTimeout(() => {
61 | // removeNotification(id);
62 | setNotificationList(notificationList.slice(1, notificationList.length));
63 | }, timeout);
64 | }
65 |
66 | return (
67 | {t('components.EnvironmentLicenses.title')}
42 |
43 | {licenses === null ? (
44 | {t('components.global.noData')}
45 | ) : (
46 | <>
47 |
48 | {t('components.EnvironmentLicenses.usedLicenses')
49 | .replace('%active%', String(licenses.activeUsers))
50 | .replace('%total%', String(licenses.totalLicenses))}
51 |
52 |
53 | 54 | {t('components.EnvironmentLicenses.remainingLicenses').replace( 55 | '%remaining%', 56 | String(licenses.remainingLicenses) 57 | )} 58 | 59 |
73 | 53 | 54 | {t('components.EnvironmentLicenses.remainingLicenses').replace( 55 | '%remaining%', 56 | String(licenses.remainingLicenses) 57 | )} 58 | 59 |
77 |
78 | {notificationList.map(({ id, type, message }) => {
79 | return (
80 |
84 |
85 |
32 |
76 | );
77 | }
78 |
79 | export default HomeEnvironmentCard;
80 |
--------------------------------------------------------------------------------
/src/main/controllers/LicenseHistoryController.ts:
--------------------------------------------------------------------------------
1 | import log from 'electron-log';
2 | import { HTTPResponse, LicenseHistory } from '../generated/client';
3 | import prismaClient from '../database/prismaContext';
4 | import HttpResponseController from './HttpResponseController';
5 | import HttpResponseResourceType from '../../common/interfaces/HttpResponseResourceTypes';
6 |
7 | interface LogLicenseProps {
8 | environmentId: number;
9 | statusCode: number;
10 | statusMessage: string;
11 | timestamp: string;
12 | endpoint?: string;
13 | responseTimeMs: number;
14 | licenseData: {
15 | activeUsers: number;
16 | remainingLicenses: number;
17 | tenantId: number;
18 | totalLicenses: number;
19 | };
20 | }
21 |
22 | export interface EnvironmentLicenseData {
23 | id: number;
24 | activeUsers: number;
25 | remainingLicenses: number;
26 | totalLicenses: number;
27 | tenantId: number;
28 | httpResponse: HTTPResponse;
29 | }
30 |
31 | export default class LicenseHistoryController {
32 | created: LicenseHistory | null;
33 |
34 | constructor() {
35 | this.created = null;
36 | }
37 |
38 | async new({
39 | environmentId,
40 | statusCode,
41 | statusMessage,
42 | timestamp,
43 | endpoint,
44 | responseTimeMs,
45 | licenseData,
46 | }: LogLicenseProps): Promise
33 |
49 |
34 |
35 |
39 | {environment.name}
36 | {environment.baseUrl} 37 | 38 |
40 |
48 |
50 | {environment.httpResponses.length >= 2 ? (
51 |
52 |
53 | 0
61 | ? 'var(--blue)'
62 | : 'var(--red)'
63 | }
64 | strokeWidth={2}
65 | />
66 |
67 |
68 | ) : (
69 | <>
70 | )}
71 |
72 |
73 |
75 | {environmentInitials}
60 |
61 |
72 |
73 | );
74 | }
75 |
76 | return (
77 |
82 | {environmentInitials}
83 | {data.name}
62 |
63 |
71 |
64 |
65 |
69 |
66 | {isOnline ? 'Online' : 'Offline'}
67 |
68 |
84 |
85 |
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/main/utils/globalConstants.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This constants file should be used only on the main process, since it creates an error on the renderer
3 | * where the "app" gets undefined on the renderer
4 | */
5 |
6 | /* eslint-disable global-require */
7 | import path from 'path';
8 | import { app } from 'electron';
9 | import getAppDataFolder from './fsUtils';
10 |
11 | export const isDevelopment =
12 | process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
13 |
14 | if (isDevelopment) {
15 | require('dotenv').config();
16 | }
17 |
18 | export const logStringFormat =
19 | '{y}-{m}-{d} {h}:{i}:{s}.{ms} [{level}] ({processType}) {text}';
20 |
21 | export const scrapeSyncInterval = 900000; // 15 minutes
22 | export const scrapeSyncIntervalCron = '* */15 * * * *';
23 | export const pingInterval = 15000; // 15 seconds
24 | export const pingIntervalCron = '*/15 * * * * *';
25 |
26 | export const legacyDbName = 'app.db';
27 | export const dbName = 'fluig-monitor.db';
28 | export const dbPath = isDevelopment
29 | ? path.resolve(__dirname, '../../../', 'prisma')
30 | : path.resolve(getAppDataFolder());
31 | export const dbUrl =
32 | (isDevelopment
33 | ? process.env.DATABASE_URL
34 | : `file:${path.resolve(dbPath, dbName)}`) || '';
35 |
36 | // Must be updated every time a migration is created
37 | export const latestMigration = '20221205230300_create_resource_type_field';
38 |
39 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
40 | export const platformToExecutables: any = {
41 | win32: {
42 | migrationEngine:
43 | 'node_modules/@prisma/engines/migration-engine-windows.exe',
44 | queryEngine: 'node_modules/@prisma/engines/query_engine-windows.dll.node',
45 | },
46 | linux: {
47 | migrationEngine:
48 | 'node_modules/@prisma/engines/migration-engine-debian-openssl-3.0.x',
49 | queryEngine:
50 | 'node_modules/@prisma/engines/libquery_engine-debian-openssl-3.0.x.so.node',
51 | },
52 | darwin: {
53 | migrationEngine: 'node_modules/@prisma/engines/migration-engine-darwin',
54 | queryEngine:
55 | 'node_modules/@prisma/engines/libquery_engine-darwin.dylib.node',
56 | },
57 | darwinArm64: {
58 | migrationEngine:
59 | 'node_modules/@prisma/engines/migration-engine-darwin-arm64',
60 | queryEngine:
61 | 'node_modules/@prisma/engines/libquery_engine-darwin-arm64.dylib.node',
62 | },
63 | };
64 |
65 | export const extraResourcesPath = isDevelopment
66 | ? path.resolve(__dirname, '../../../')
67 | : app.getAppPath().replace('app.asar', '');
68 |
69 | function getPlatformName(): string {
70 | const isDarwin = process.platform === 'darwin';
71 | if (isDarwin && process.arch === 'arm64') {
72 | return `${process.platform}Arm64`;
73 | }
74 |
75 | return process.platform;
76 | }
77 |
78 | const platformName = getPlatformName();
79 |
80 | export const mePath = path.join(
81 | extraResourcesPath,
82 | platformToExecutables[platformName].migrationEngine
83 | );
84 | export const qePath = path.join(
85 | extraResourcesPath,
86 | platformToExecutables[platformName].queryEngine
87 | );
88 |
--------------------------------------------------------------------------------
/src/renderer/assets/styles/pages/EnvironmentView.scss:
--------------------------------------------------------------------------------
1 | #center-view-container {
2 | width: 100%;
3 | height: 100%;
4 | }
5 |
6 | .empty-server-view {
7 | display: flex;
8 | height: 80vh;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 |
13 | img.icon {
14 | height: 5rem;
15 | margin: 2rem;
16 | }
17 | }
18 |
19 | .environment-data-container {
20 | display: flex;
21 | gap: 1rem;
22 | justify-content: flex-start;
23 | height: 100%;
24 |
25 | .side-menu {
26 | display: flex;
27 | align-items: flex-start;
28 | justify-content: space-between;
29 | flex-direction: column;
30 | height: 90%;
31 |
32 | min-width: 13rem;
33 | transition: all var(--transition);
34 |
35 | margin-left: -1rem;
36 | padding-left: 1rem;
37 |
38 | &.closed {
39 | min-width: 0rem;
40 |
41 | .menu-items,
42 | .last-menu-items {
43 | .item-text {
44 | font-size: 0rem;
45 | }
46 | }
47 | }
48 |
49 | .menu-items,
50 | .last-menu-items {
51 | display: flex;
52 | align-items: flex-start;
53 | justify-content: space-between;
54 | flex-direction: column;
55 |
56 | gap: 0.5rem;
57 |
58 | width: 100%;
59 | }
60 |
61 | a,
62 | button {
63 | .item-text {
64 | transition: all var(--transition);
65 | color: var(--font-primary);
66 | }
67 | color: var(--font-primary);
68 | font-size: 0.9rem;
69 | border-radius: 0.5rem;
70 | padding: 0.5rem 1.5rem 0.5rem 0rem;
71 | width: 100%;
72 |
73 | display: flex;
74 | align-items: center;
75 |
76 | transition: all var(--transition);
77 |
78 | svg {
79 | margin-right: 0.75rem;
80 | font-size: 1.3rem;
81 | }
82 |
83 | &::before {
84 | width: 0.3rem;
85 | height: 100%;
86 | border-radius: 4px;
87 | content: '';
88 | background-color: transparent;
89 |
90 | transform: translateX(-0.7rem);
91 |
92 | transition: background-color var(--transition);
93 | }
94 |
95 | &:hover,
96 | &.active {
97 | .item-text {
98 | color: var(--purple);
99 | }
100 |
101 | background-color: var(--card);
102 | color: var(--purple);
103 | box-shadow: var(--card-shadow);
104 |
105 | padding: 0.75rem;
106 |
107 | &::before {
108 | background-color: var(--purple);
109 | }
110 | }
111 | }
112 | }
113 |
114 | #menu-content {
115 | height: inherit;
116 | width: 100%;
117 | overflow: auto;
118 | }
119 |
120 | #environment-edit-form-container {
121 | max-width: 800px;
122 | margin: auto;
123 | padding: 0 1rem;
124 | }
125 |
126 | #environment-summary-container {
127 | display: flex;
128 | justify-content: space-between;
129 | gap: 2rem;
130 |
131 | #server-data {
132 | width: 100%;
133 | }
134 |
135 | #server-info {
136 | min-width: 18rem;
137 | }
138 | }
139 | }
140 |
--------------------------------------------------------------------------------
/src/renderer/components/container/DatabasePanel.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useTranslation } from 'react-i18next';
3 | import { useLocation } from 'react-router';
4 | import { ipcRenderer } from 'electron';
5 | import { FiArrowDownRight, FiArrowUpRight, FiDatabase } from 'react-icons/fi';
6 |
7 | import { DbStatistic } from '../../../main/controllers/StatisticsHistoryController';
8 | import { getLastDatabaseStatistic } from '../../ipc/environmentsIpcHandler';
9 | import formatBytes from '../../../common/utils/formatBytes';
10 | import TimeIndicator from '../base/TimeIndicator';
11 |
12 | /**
13 | * Responsive and environment aware database panel component.
14 | * Uses the useLocation hook to identify the current environment in view.
15 | * @since 0.5
16 | */
17 | export default function DatabasePanel() {
18 | const [dbInfo, setDbInfo] = useState
42 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/renderer/components/container/EnvironmentServicesPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 | import { useTranslation } from 'react-i18next';
4 | import { ipcRenderer } from 'electron';
5 |
6 | import '../../assets/styles/components/EnvironmentServices.scss';
7 | import { EnvironmentServices } from '../../../common/interfaces/EnvironmentControllerInterface';
8 | import TimeIndicator from '../base/TimeIndicator';
9 | import { getEnvironmentServices } from '../../ipc/environmentsIpcHandler';
10 | import getServiceName from '../../utils/getServiceName';
11 |
12 | export default function EnvironmentServicesPanel() {
13 | const { t } = useTranslation();
14 |
15 | const location = useLocation();
16 | const environmentId = location.pathname.split('/')[2];
17 |
18 | const [environmentServices, setEnvironmentServices] =
19 | useState
43 |
50 | {dbInfo === null ? (
51 |
44 |
46 |
47 | {t('components.SystemResources.Database.title')}
48 |
49 | {t('components.global.noData')}
52 | ) : ( 53 | <> 54 |
55 |
60 | 56 | {t('components.SystemResources.Database.size')} 57 |
58 |{formatBytes(Number(dbInfo.dbSize))}
59 |
61 | {Number(dbInfo.dbTraficRecieved) === -1 ? (
62 |
85 |
86 | )}
87 | 63 | {t('components.SystemResources.Database.trafficNotAllowed')} 64 |
65 | ) : ( 66 | <> 67 |68 | {t('components.SystemResources.Database.traffic')} 69 |
70 |
71 |
80 |
81 | )}
82 |
83 |
72 |
75 |
76 |
79 |
46 | {Object.entries(environmentServices.monitorHistory[0]).map(
47 | (item) => {
48 | let status = t('components.EnvironmentServices.failed');
49 | let className = 'is-failed';
50 |
51 | if (item[1] === 'OK') {
52 | status = t('components.EnvironmentServices.operational');
53 | className = 'is-operational';
54 | } else if (item[1] === 'NONE') {
55 | status = t('components.EnvironmentServices.unused');
56 | className = 'is-unused';
57 | }
58 |
59 | if (getServiceName(item[0]) !== 'UNKNOWN') {
60 | return (
61 |
76 |
62 |
63 | {getServiceName(item[0])}
64 |
65 |
66 | {status}
67 |
68 |
69 | );
70 | }
71 |
72 | return null;
73 | }
74 | )}
75 |
88 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/src/common/classes/FluigAPIClient.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import axios from 'axios';
3 | import OAuth from 'oauth-1.0a';
4 | import crypto from 'crypto';
5 | import log from 'electron-log';
6 |
7 | interface AuthKeys {
8 | consumerKey: string;
9 | consumerSecret: string;
10 | accessToken: string;
11 | tokenSecret: string;
12 | }
13 |
14 | interface RequestData {
15 | url: string;
16 | method: string;
17 | }
18 |
19 | interface ConstructorProps {
20 | oAuthKeys: AuthKeys;
21 | requestData: RequestData;
22 | }
23 |
24 | export default class FluigAPIClient {
25 | /**
26 | * The Http request status code (ex.: 200, 404, 500)
27 | */
28 | httpStatus: number | null;
29 |
30 | /**
31 | * The http request status code message (Ex.: If it's 200: 'Ok', if it's 500: 'Internal Server Error')
32 | */
33 | httpStatusText: string;
34 |
35 | /**
36 | * The http response data from the API (Usually a JSON)
37 | */
38 | httpResponse: any;
39 |
40 | /**
41 | * The decoded auth keys passed as an argument on the constructor
42 | */
43 | decodedKeys: AuthKeys;
44 |
45 | /**
46 | * The RequestData object containing the url endpoint and method (Currently only GET is supported)
47 | */
48 | requestData: RequestData;
49 |
50 | /**
51 | * The oAuth helper from the oAuth-1.0a library
52 | */
53 | oAuth: OAuth;
54 |
55 | /**
56 | * If the fluig client class has an error
57 | */
58 | hasError: boolean;
59 |
60 | /**
61 | * The error stack, if the fluig client class has an error
62 | */
63 | errorStack: string;
64 |
65 | constructor({ oAuthKeys, requestData }: ConstructorProps) {
66 | this.httpStatus = null;
67 | this.httpStatusText = '';
68 | this.httpResponse = null;
69 |
70 | this.decodedKeys = oAuthKeys;
71 | this.requestData = requestData;
72 |
73 | this.oAuth = new OAuth({
74 | consumer: {
75 | key: this.decodedKeys.consumerKey,
76 | secret: this.decodedKeys.consumerSecret,
77 | },
78 | signature_method: 'HMAC-SHA1',
79 | hash_function(base_string, key) {
80 | return crypto
81 | .createHmac('sha1', key)
82 | .update(base_string)
83 | .digest('base64');
84 | },
85 | });
86 |
87 | this.hasError = false;
88 | this.errorStack = '';
89 | }
90 |
91 | /**
92 | * Makes a GET request
93 | * @param silent if the request should not write logs (defaults to false)
94 | */
95 | async get(silent?: boolean, timeout?: number | null) {
96 | try {
97 | const token = {
98 | key: this.decodedKeys.accessToken,
99 | secret: this.decodedKeys.tokenSecret,
100 | };
101 |
102 | if (!silent) {
103 | log.info('FluigAPIClient: GET endpoint', this.requestData.url);
104 | }
105 |
106 | const response = await axios.get(this.requestData.url, {
107 | headers: {
108 | ...this.oAuth.toHeader(this.oAuth.authorize(this.requestData, token)),
109 | },
110 | timeout: timeout || 60000, // defaults the timeout to 60 seconds
111 | });
112 |
113 | this.httpStatus = response.status;
114 | this.httpStatusText = response.statusText;
115 | this.httpResponse = response.data;
116 | } catch (e: any) {
117 | if (e.response) {
118 | this.httpStatus = e.response.status;
119 | this.httpStatusText = e.response.statusText;
120 | }
121 | this.hasError = true;
122 | this.errorStack = e.stack;
123 | }
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/renderer/assets/styles/global.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=Righteous&display=swap');
2 |
3 | :root {
4 | --font-primary: #1e293b;
5 | --font-secondary: #334155;
6 | --font-soft: #9ca3af;
7 | --background: #f1f5f9;
8 | --card: #ffffff;
9 | --border: #9ca3af;
10 | --border-light: #e5e7eb;
11 |
12 | --green: #10b981;
13 | --light-green: #dcfce7;
14 | --yellow: #f59e0b;
15 | --light-yellow: #fef9c3;
16 | --red: #ef4444;
17 | --light-red: #fee2e2;
18 | --purple: #6366f1;
19 | --light-purple: #e0e7ff;
20 | --blue: #60a5fa;
21 | --light-blue: #7dd3fc;
22 |
23 | --card-shadow: 0px 0px 40px rgba(0, 0, 0, 0.05);
24 | --card-shadow-sm: 0px 0px 10px rgba(0, 0, 0, 0.05);
25 | --card-border-radius-md: 0.75rem;
26 | --card-border-radius: 1rem;
27 | --transition: 300ms;
28 |
29 | --brand-light: #ff884d;
30 | --brand-medium: #ff4d4d;
31 | --brand-dark: #cc295f;
32 | --brand-gradient: linear-gradient(
33 | 45deg,
34 | var(--brand-light) 0%,
35 | var(--brand-medium) 50%,
36 | var(--brand-dark) 100%
37 | );
38 | }
39 |
40 | .dark-theme {
41 | --font-primary: #fafafa;
42 | --font-secondary: #e4e4e4;
43 | --font-soft: #9ca3af;
44 | --background: #111827;
45 | --card: #1f2937;
46 | --border: #374151;
47 | --border-light: #374151;
48 |
49 | #logo-container {
50 | img {
51 | filter: brightness(0.9);
52 | }
53 | }
54 | }
55 |
56 | * {
57 | font-family: 'Inter';
58 | font-size: 16px;
59 | font-weight: 500;
60 |
61 | margin: 0;
62 | padding: 0;
63 | border: 0;
64 | box-sizing: border-box;
65 | transition: background-color var(--transition);
66 | }
67 |
68 | body {
69 | background-color: var(--background);
70 | }
71 |
72 | button {
73 | background-color: transparent;
74 | cursor: pointer;
75 |
76 | &:focus-visible {
77 | outline: 3px solid var(--light-blue);
78 | }
79 |
80 | &:disabled {
81 | cursor: not-allowed;
82 | filter: opacity(0.75);
83 | }
84 | }
85 |
86 | a {
87 | text-decoration: none;
88 |
89 | &:visited {
90 | color: unset;
91 | }
92 | }
93 |
94 | h1,
95 | h2,
96 | h3,
97 | h4,
98 | h5,
99 | h6,
100 | span,
101 | p,
102 | div,
103 | label {
104 | color: var(--font-primary);
105 | }
106 |
107 | h1,
108 | h2,
109 | h3 {
110 | margin-bottom: 1.25rem;
111 | }
112 |
113 | h1 {
114 | font-size: 1.6rem;
115 | }
116 |
117 | h2 {
118 | font-size: 1.4rem;
119 | }
120 |
121 | h3 {
122 | font-size: 1.2rem;
123 | }
124 |
125 | b {
126 | font-weight: 700;
127 | }
128 |
129 | #mainWindow {
130 | display: flex;
131 | align-items: flex-start;
132 | justify-content: center;
133 | width: 100%;
134 | height: 100vh;
135 |
136 | padding: 1rem;
137 | padding-top: 6rem;
138 |
139 | overflow-x: auto;
140 | }
141 |
142 | #appWrapper {
143 | display: flex;
144 | flex-direction: row;
145 | }
146 |
147 | #environment-form-container {
148 | max-width: 991px;
149 | width: 100%;
150 | padding: 1rem;
151 | }
152 |
153 | #floatingNotificationsContainer {
154 | position: fixed;
155 | top: 6rem;
156 | right: 2rem;
157 | max-width: 50vw;
158 |
159 | display: flex;
160 | flex-direction: column;
161 | gap: 1rem;
162 | z-index: 30;
163 | }
164 |
165 | /*/ Scroll Bar /*/
166 | ::-webkit-scrollbar {
167 | width: 0.5rem;
168 | height: 0.5rem;
169 | }
170 |
171 | ::-webkit-scrollbar-track {
172 | background: var(--card);
173 | }
174 |
175 | ::-webkit-scrollbar-thumb {
176 | background: #3f3f46;
177 | border-radius: 0.5rem;
178 |
179 | &:hover {
180 | background: #52525b;
181 | }
182 | }
183 |
--------------------------------------------------------------------------------
/src/renderer/components/container/SettingsPage/UpdatesSettings.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useTranslation } from 'react-i18next';
3 | import { FiInfo, FiPackage } from 'react-icons/fi';
4 | import {
5 | getAppSettingsAsObject,
6 | updateAppSettings,
7 | } from '../../../ipc/settingsIpcHandler';
8 | import parseBoolean from '../../../../common/utils/parseBoolean';
9 | import DefaultMotionDiv from '../../base/DefaultMotionDiv';
10 |
11 | export default function UpdatesSettings() {
12 | const { t } = useTranslation();
13 |
14 | const [enableAutoDownload, setEnableAutoDownload] = useState(true);
15 | const [enableAutoInstall, setEnableAutoInstall] = useState(true);
16 |
17 | async function loadSettings() {
18 | const { ENABLE_AUTO_DOWNLOAD_UPDATE, ENABLE_AUTO_INSTALL_UPDATE } =
19 | await getAppSettingsAsObject();
20 |
21 | setEnableAutoDownload(parseBoolean(ENABLE_AUTO_DOWNLOAD_UPDATE.value));
22 | setEnableAutoInstall(parseBoolean(ENABLE_AUTO_INSTALL_UPDATE.value));
23 | }
24 |
25 | function handleEnableUpdateAutoInstall(checked: boolean) {
26 | setEnableAutoInstall(checked);
27 | updateAppSettings([
28 | {
29 | settingId: 'ENABLE_AUTO_INSTALL_UPDATE',
30 | value: String(checked),
31 | },
32 | ]);
33 | }
34 |
35 | function handleEnableUpdateAutoDownload(checked: boolean) {
36 | setEnableAutoDownload(checked);
37 | if (!checked) {
38 | handleEnableUpdateAutoInstall(false);
39 | }
40 | updateAppSettings([
41 | {
42 | settingId: 'ENABLE_AUTO_DOWNLOAD_UPDATE',
43 | value: String(checked),
44 | },
45 | ]);
46 | }
47 | useEffect(() => {
48 | loadSettings();
49 | }, []);
50 |
51 | return (
52 | {t('components.EnvironmentServices.title')}
89 |{cardData}
90 |
54 |
55 |
59 | {t('components.UpdatesSettings.helperText')}
60 | 61 |
62 |
75 |
76 |
77 | {t('components.UpdatesSettings.enableAutoDownload.helper')}
78 |
79 |
80 |
81 |
82 |
96 |
97 |
98 | {t('components.UpdatesSettings.enableAutoInstall.helper')}
99 |
100 |
101 |
102 |
103 |
65 |
66 |
70 |
71 | {t('components.SystemTraySettings.helperText')}
72 | 73 |
74 |
87 |
88 |
89 | {t('components.SystemTraySettings.minimizeToSystemTrayHelper')}
90 |
91 |
92 |
93 |
94 |
107 |
108 |
109 | {t('components.SystemTraySettings.disableNotificationHelper')}
110 |
111 |
112 |
49 |
100 | );
101 | }
102 |
103 | export default DiskPanel;
104 |
--------------------------------------------------------------------------------
/src/renderer/components/container/MemoryPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useLocation } from 'react-router';
3 | import { useTranslation } from 'react-i18next';
4 | import { ipcRenderer } from 'electron';
5 | import { FiServer } from 'react-icons/fi';
6 | import log from 'electron-log';
7 |
8 | import formatBytes from '../../../common/utils/formatBytes';
9 | import { MemoryStats } from '../../../main/controllers/StatisticsHistoryController';
10 | import { getMemoryInfo } from '../../ipc/environmentsIpcHandler';
11 | import SpinnerLoader from '../base/Loaders/Spinner';
12 | import ProgressBar from '../base/ProgressBar';
13 | import TimeIndicator from '../base/TimeIndicator';
14 |
15 | /**
16 | * Environment aware self loading memory panel component.
17 | * Uses the useLocation hook to identify the current environment in view.
18 | * @since 0.5
19 | */
20 | export default function MemoryPanel() {
21 | const [memoryInfo, setMemoryInfo] = useState
50 |
57 | {diskInfo === null ? (
58 |
51 |
53 |
54 | {t('components.SystemResources.Disk.title')}
55 |
56 | {t('components.global.noData')}
63 | ) : ( 64 | <> 65 |
66 |
80 | 67 | {t('components.SystemResources.Disk.used')} 68 |
69 |70 | {formatBytes( 71 | Number(diskInfo[0].systemServerHDSize) - 72 | Number(diskInfo[0].systemServerHDFree) 73 | )} 74 |
75 |76 | {t('components.SystemResources.Disk.outOf')}{' '} 77 | {formatBytes(Number(diskInfo[0].systemServerHDSize))} 78 |
79 |
81 |
95 |
96 | )}
97 |
98 | )}
99 |
49 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/renderer/components/container/Navbar/NavActionButtons.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | import { useEffect, useState } from 'react';
3 | import { ipcRenderer } from 'electron';
4 | import { Link } from 'react-router-dom';
5 | import {
6 | FiAirplay,
7 | FiBell,
8 | FiDownload,
9 | FiDownloadCloud,
10 | FiMoon,
11 | FiSettings,
12 | FiSun,
13 | } from 'react-icons/fi';
14 | import '../../../assets/styles/components/RightButtons.scss';
15 | import { useTranslation } from 'react-i18next';
16 | import { useTheme } from '../../../contexts/ThemeContext';
17 | import SpinnerLoader from '../../base/Loaders/Spinner';
18 |
19 | export default function NavActionButtons() {
20 | const { t } = useTranslation();
21 | const { theme, setFrontEndTheme } = useTheme();
22 | const [themeIcon, setThemeIcon] = useState(
23 | theme === 'DARK' ?
50 |
57 | {memoryInfo === null ? (
58 |
51 |
53 |
54 | {t('components.SystemResources.Memory.title')}
55 |
56 | {t('components.global.noData')}
63 | ) : ( 64 | <> 65 |
66 |
80 | 67 | {t('components.SystemResources.Memory.used')} 68 |
69 |70 | {formatBytes( 71 | Number(memoryInfo[0].systemServerMemorySize) - 72 | Number(memoryInfo[0].systemServerMemoryFree) 73 | )} 74 |
75 |76 | {t('components.SystemResources.Memory.outOf')}{' '} 77 | {formatBytes(Number(memoryInfo[0].systemServerMemorySize))} 78 |
79 |
81 |
95 |
96 | )}
97 |
98 | )}
99 |