beenull/flame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Created separate settings for Docker

Browse source
This commit is contained in:
Paweł Malak 2021-11-10 16:45:30 +01:00
parent 5805c708d2
commit 1571981252
11 changed files with 167 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env
View file

@ -1,5 +1,5 @@
PORT=5005
NODE_ENV=development
VERSION=1.7.4
PASSWORD=flame
PASSWORD=flame_password
SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

6
README.md
View file

@ -4,7 +4,7 @@
## Description
Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own application hub in no time - no file editing necessary.
Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors, it allows you to setup your very own application hub in no time - no file editing necessary.
## Technology
@ -151,7 +151,7 @@ labels:
# - flame.icon=custom to make changes in app. ie: custom icon upload
```
> "Use Docker API" option must be enabled for this to work. You can find it in Settings > Other > Docker section
> "Use Docker API" option must be enabled for this to work. You can find it in Settings > Docker
You can also set up different apps in the same label adding `;` between each one.
@ -199,7 +199,7 @@ metadata:
- flame.pawelmalak/icon=icon-name # optional, default is "kubernetes"
```
> "Use Kubernetes Ingress API" option must be enabled for this to work. You can find it in Settings > Other > Kubernetes section
> "Use Kubernetes Ingress API" option must be enabled for this to work. You can find it in Settings > Docker
### Import HTML Bookmarks (Experimental)

122
client/src/components/Settings/DockerSettings/DockerSettings.tsx Normal file
View file

@ -0,0 +1,122 @@
import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { DockerSettingsForm } from '../../../interfaces';
// UI
import { InputGroup, Button, SettingsHeadline } from '../../UI';
// Utils
import { inputHandler, dockerSettingsTemplate } from '../../../utility';
export const DockerSettings = (): JSX.Element => {
const { loading, config } = useSelector((state: State) => state.config);
const dispatch = useDispatch();
const { updateConfig } = bindActionCreators(actionCreators, dispatch);
// Initial state
const [formData, setFormData] = useState<DockerSettingsForm>(
dockerSettingsTemplate
);
// Get config
useEffect(() => {
setFormData({
...config,
});
}, [loading]);
// Form handler
const formSubmitHandler = async (e: FormEvent) => {
e.preventDefault();
// Save settings
await updateConfig(formData);
};
// Input handler
const inputChangeHandler = (
e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
options?: { isNumber?: boolean; isBool?: boolean }
) => {
inputHandler<DockerSettingsForm>({
e,
options,
setStateHandler: setFormData,
state: formData,
});
};
return (
<form onSubmit={(e) => formSubmitHandler(e)}>
<SettingsHeadline text="Docker" />
{/* CUSTOM DOCKER SOCKET HOST */}
<InputGroup>
<label htmlFor="dockerHost">Docker Host</label>
<input
type="text"
id="dockerHost"
name="dockerHost"
placeholder="dockerHost:port"
value={formData.dockerHost}
onChange={(e) => inputChangeHandler(e)}
/>
</InputGroup>
{/* USE DOCKER API */}
<InputGroup>
<label htmlFor="dockerApps">Use Docker API</label>
<select
id="dockerApps"
name="dockerApps"
value={formData.dockerApps ? 1 : 0}
onChange={(e) => inputChangeHandler(e, { isBool: true })}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
{/* UNPIN DOCKER APPS */}
<InputGroup>
<label htmlFor="unpinStoppedApps">
Unpin stopped containers / other apps
</label>
<select
id="unpinStoppedApps"
name="unpinStoppedApps"
value={formData.unpinStoppedApps ? 1 : 0}
onChange={(e) => inputChangeHandler(e, { isBool: true })}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
{/* KUBERNETES SETTINGS */}
<SettingsHeadline text="Kubernetes" />
{/* USE KUBERNETES */}
<InputGroup>
<label htmlFor="kubernetesApps">Use Kubernetes Ingress API</label>
<select
id="kubernetesApps"
name="kubernetesApps"
value={formData.kubernetesApps ? 1 : 0}
onChange={(e) => inputChangeHandler(e, { isBool: true })}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
<Button>Save changes</Button>
</form>
);
};

2
client/src/components/Settings/SearchSettings/SearchSettings.tsx
View file

@ -16,6 +16,8 @@ import { inputHandler, searchSettingsTemplate } from '../../../utility';
// Data
import { queries } from '../../../utility/searchQueries.json';
// Redux
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';

6
client/src/components/Settings/Settings.tsx
View file

@ -9,10 +9,11 @@ import classes from './Settings.module.css';
// Components
import { Themer } from '../Themer/Themer';
import { WeatherSettings } from './WeatherSettings/WeatherSettings';
import { OtherSettings } from './OtherSettings/OtherSettings';
import { UISettings } from './UISettings/UISettings';
import { AppDetails } from './AppDetails/AppDetails';
import { StyleSettings } from './StyleSettings/StyleSettings';
import { SearchSettings } from './SearchSettings/SearchSettings';
import { DockerSettings } from './DockerSettings/DockerSettings';
// UI
import { Container, Headline } from '../UI';
@ -46,7 +47,8 @@ export const Settings = (): JSX.Element => {
<Route exact path="/settings" component={Themer} />
<Route path="/settings/weather" component={WeatherSettings} />
<Route path="/settings/search" component={SearchSettings} />
<Route path="/settings/other" component={OtherSettings} />
<Route path="/settings/interface" component={UISettings} />
<Route path="/settings/docker" component={DockerSettings} />
<Route path="/settings/css" component={StyleSettings} />
<Route path="/settings/app" component={AppDetails} />
</Switch>

68
client/src/components/Settings/OtherSettings/OtherSettings.tsx → client/src/components/Settings/UISettings/UISettings.tsx
View file

@ -2,6 +2,9 @@ import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { OtherSettingsForm } from '../../../interfaces';
@ -11,11 +14,8 @@ import { InputGroup, Button, SettingsHeadline } from '../../UI';
// Utils
import { otherSettingsTemplate, inputHandler } from '../../../utility';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
export const OtherSettings = (): JSX.Element => {
export const UISettings = (): JSX.Element => {
const { loading, config } = useSelector((state: State) => state.config);
const dispatch = useDispatch();
@ -277,66 +277,6 @@ export const OtherSettings = (): JSX.Element => {
</select>
</InputGroup>
{/* DOCKER SETTINGS */}
<SettingsHeadline text="Docker" />
{/* CUSTOM DOCKER SOCKET HOST */}
<InputGroup>
<label htmlFor="dockerHost">Docker Host</label>
<input
type="text"
id="dockerHost"
name="dockerHost"
placeholder="dockerHost:port"
value={formData.dockerHost}
onChange={(e) => inputChangeHandler(e)}
/>
</InputGroup>
{/* USE DOCKER API */}
<InputGroup>
<label htmlFor="dockerApps">Use Docker API</label>
<select
id="dockerApps"
name="dockerApps"
value={formData.dockerApps ? 1 : 0}
onChange={(e) => inputChangeHandler(e, { isBool: true })}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
{/* UNPIN DOCKER APPS */}
<InputGroup>
<label htmlFor="unpinStoppedApps">
Unpin stopped containers / other apps
</label>
<select
id="unpinStoppedApps"
name="unpinStoppedApps"
value={formData.unpinStoppedApps ? 1 : 0}
onChange={(e) => inputChangeHandler(e, { isBool: true })}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
{/* KUBERNETES SETTINGS */}
<SettingsHeadline text="Kubernetes" />
{/* USE KUBERNETES */}
<InputGroup>
<label htmlFor="kubernetesApps">Use Kubernetes Ingress API</label>
<select
id="kubernetesApps"
name="kubernetesApps"
value={formData.kubernetesApps ? 1 : 0}
onChange={(e) => inputChangeHandler(e, { isBool: true })}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
<Button>Save changes</Button>
</form>
);

2
client/src/components/Settings/WeatherSettings/WeatherSettings.tsx
View file

@ -5,6 +5,7 @@ import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
import { State } from '../../../store/reducers';
// Typescript
import { ApiResponse, Weather, WeatherForm } from '../../../interfaces';
@ -14,7 +15,6 @@ import { InputGroup, Button } from '../../UI';
// Utils
import { inputHandler, weatherSettingsTemplate } from '../../../utility';
import { State } from '../../../store/reducers';
export const WeatherSettings = (): JSX.Element => {
const { loading, config } = useSelector((state: State) => state.config);

8
client/src/components/Settings/settings.json
View file

@ -13,8 +13,12 @@
"dest": "/settings/search"
},
{
"name": "Other",
"dest": "/settings/other"
"name": "Interface",
"dest": "/settings/interface"
},
{
"name": "Docker",
"dest": "/settings/docker"
},
{
"name": "CSS",

11
client/src/interfaces/Forms.ts
View file

@ -22,13 +22,16 @@ export interface OtherSettingsForm {
useOrdering: string;
appsSameTab: boolean;
bookmarksSameTab: boolean;
dockerApps: boolean;
dockerHost: string;
kubernetesApps: boolean;
unpinStoppedApps: boolean;
useAmericanDate: boolean;
greetingsSchema: string;
daySchema: string;
monthSchema: string;
showTime: boolean;
}
export interface DockerSettingsForm {
dockerApps: boolean;
dockerHost: string;
kubernetesApps: boolean;
unpinStoppedApps: boolean;
}

5
client/src/store/action-creators/config.ts
View file

@ -11,6 +11,7 @@ import axios from 'axios';
import {
ApiResponse,
Config,
DockerSettingsForm,
OtherSettingsForm,
Query,
SearchForm,
@ -49,7 +50,9 @@ export const getConfig = () => async (dispatch: Dispatch<GetConfigAction>) => {
};
export const updateConfig =
(formData: WeatherForm | OtherSettingsForm | SearchForm) =>
(
formData: WeatherForm | OtherSettingsForm | SearchForm | DockerSettingsForm
) =>
async (dispatch: Dispatch<UpdateConfigAction>) => {
try {
const res = await axios.put<ApiResponse<Config>>('/api/config', formData);

18
client/src/utility/templateObjects/settingsTemplate.ts
View file

@ -1,4 +1,9 @@
import { OtherSettingsForm, SearchForm, WeatherForm } from '../../interfaces';
import {
DockerSettingsForm,
OtherSettingsForm,
SearchForm,
WeatherForm,
} from '../../interfaces';
export const otherSettingsTemplate: OtherSettingsForm = {
customTitle: document.title,
@ -10,10 +15,6 @@ export const otherSettingsTemplate: OtherSettingsForm = {
useOrdering: 'createdAt',
appsSameTab: false,
bookmarksSameTab: false,
dockerApps: true,
dockerHost: 'localhost',
kubernetesApps: true,
unpinStoppedApps: true,
useAmericanDate: false,
greetingsSchema: 'Good evening!;Good afternoon!;Good morning!;Good night!',
daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday',
@ -35,3 +36,10 @@ export const searchSettingsTemplate: SearchForm = {
defaultSearchProvider: 'l',
disableAutofocus: false,
};
export const dockerSettingsTemplate: DockerSettingsForm = {
dockerApps: true,
dockerHost: 'localhost',
kubernetesApps: true,
unpinStoppedApps: true,
};