@ -22,15 +22,18 @@ module.exports = {
|
||||
updateSetting: (dispatch, getState) => {
|
||||
const current = getState()
|
||||
|
||||
const userScheme = current.Authenticated?.user?.TEMPLATE?.FIREEDGE?.SCHEME
|
||||
const userLang = current.Authenticated?.user?.TEMPLATE?.FIREEDGE?.LANG
|
||||
const userSetting = current.Authenticated?.user?.TEMPLATE?.FIREEDGE
|
||||
|
||||
if (!userSetting) return
|
||||
|
||||
const mapSetting = Object.entries(userSetting)
|
||||
.reduce((res, [key, value]) =>
|
||||
({ ...res, [String(key).toLowerCase()]: value })
|
||||
, {})
|
||||
|
||||
dispatch(({
|
||||
type: CHANGE_SETTINGS,
|
||||
payload: {
|
||||
scheme: userScheme,
|
||||
lang: userLang
|
||||
}
|
||||
payload: mapSetting
|
||||
}))
|
||||
},
|
||||
selectFilterGroup: payload => ({
|
||||
|
@ -1,18 +1,21 @@
|
||||
import Color from 'client/constants/color'
|
||||
|
||||
export default {
|
||||
export default (scheme = 'dark') => ({
|
||||
palette: {
|
||||
type: 'dark',
|
||||
common: { black: '#000', white: '#ffffff' },
|
||||
type: scheme,
|
||||
common: {
|
||||
black: '#000000',
|
||||
white: '#ffffff'
|
||||
},
|
||||
background: {
|
||||
paper: '#2a2d3d',
|
||||
default: '#222431'
|
||||
paper: scheme === 'dark' ? '#2a2d3d' : '#ffffff',
|
||||
default: scheme === 'dark' ? '#222431' : '#f2f4f8'
|
||||
},
|
||||
primary: {
|
||||
light: '#2a2d3d',
|
||||
main: '#222431',
|
||||
dark: '#191924',
|
||||
contrastText: '#fff'
|
||||
contrastText: '#ffffff'
|
||||
},
|
||||
secondary: {
|
||||
light: 'rgba(191, 230, 242, 1)',
|
||||
@ -22,4 +25,4 @@ export default {
|
||||
},
|
||||
...Color
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -1,15 +1,15 @@
|
||||
import Color from 'client/constants/color'
|
||||
|
||||
export default (mode = 'dark') => ({
|
||||
export default (scheme = 'dark') => ({
|
||||
palette: {
|
||||
type: mode,
|
||||
type: scheme,
|
||||
common: {
|
||||
black: '#000000',
|
||||
white: '#ffffff'
|
||||
},
|
||||
background: {
|
||||
paper: mode === 'dark' ? '#2a2d3d' : '#ffffff',
|
||||
default: mode === 'dark' ? '#222431' : '#f2f4f8'
|
||||
paper: scheme === 'dark' ? '#2a2d3d' : '#ffffff',
|
||||
default: scheme === 'dark' ? '#222431' : '#f2f4f8'
|
||||
},
|
||||
primary: {
|
||||
light: '#2a2d3d',
|
||||
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
|
||||
|
||||
import clsx from 'clsx'
|
||||
import { Paper, Typography, makeStyles, lighten, darken } from '@material-ui/core'
|
||||
|
||||
import { addOpacityToColor } from 'client/utils'
|
||||
|
||||
const useStyles = makeStyles(theme => {
|
||||
@ -55,8 +56,8 @@ const WavesCard = React.memo(({ text, value, bgColor, icon: Icon }) => {
|
||||
<Paper className={classes.root}>
|
||||
<Typography variant='h6'>{text}</Typography>
|
||||
<Typography variant='h4'>{value}</Typography>
|
||||
<span className={clsx(classes.wave, classes.wave1)}></span>
|
||||
<span className={clsx(classes.wave, classes.wave2)}></span>
|
||||
<span className={clsx(classes.wave, classes.wave1)} />
|
||||
<span className={clsx(classes.wave, classes.wave2)} />
|
||||
{Icon && <Icon className={classes.icon} />}
|
||||
</Paper>
|
||||
)
|
||||
|
@ -15,7 +15,7 @@ import { Tr } from 'client/components/HOC/Translate'
|
||||
const CheckboxController = memo(
|
||||
({ control, cy, name, label, tooltip, error, fieldProps }) => (
|
||||
<Controller
|
||||
render={({ onChange, value }) => (
|
||||
render={({ onChange, value = false }) => (
|
||||
<Tooltip title={Tr(tooltip) ?? ''}>
|
||||
<FormControl error={Boolean(error)}>
|
||||
<FormControlLabel
|
||||
@ -23,7 +23,7 @@ const CheckboxController = memo(
|
||||
<Checkbox
|
||||
onChange={e => onChange(e.target.checked)}
|
||||
name={name}
|
||||
checked={value}
|
||||
checked={Boolean(value)}
|
||||
color="secondary"
|
||||
inputProps={{ 'data-cy': cy }}
|
||||
{...fieldProps}
|
||||
|
@ -50,6 +50,7 @@ module.exports = {
|
||||
ConfigureTiers: 'Configure Tiers',
|
||||
ConfigurePolicies: 'Configure policies',
|
||||
ConfigureTemplate: 'Configure template',
|
||||
|
||||
/* steps form - provision */
|
||||
ProviderOverview: 'Provider overview',
|
||||
ProvisionOverview: 'Provision overview',
|
||||
@ -61,12 +62,16 @@ module.exports = {
|
||||
|
||||
/* sections */
|
||||
Dashboard: 'Dashboard',
|
||||
|
||||
/* sections - settings */
|
||||
Settings: 'Settings',
|
||||
Schema: 'Schema',
|
||||
Dark: 'Dark',
|
||||
Light: 'Light',
|
||||
System: 'System',
|
||||
Language: 'Language',
|
||||
DisableDashboardAnimations: 'Disable dashboard animations',
|
||||
|
||||
/* sections - system */
|
||||
User: 'User',
|
||||
Users: 'Users',
|
||||
@ -76,6 +81,7 @@ module.exports = {
|
||||
VDCs: 'VDCs',
|
||||
ACL: 'ACL',
|
||||
ACLs: 'ACLs',
|
||||
|
||||
/* sections - infrastructure */
|
||||
Zone: 'Zone',
|
||||
Zones: 'Zones',
|
||||
@ -83,6 +89,7 @@ module.exports = {
|
||||
Clusters: 'Clusters',
|
||||
Host: 'Host',
|
||||
Hosts: 'Hosts',
|
||||
|
||||
/* sections - network */
|
||||
Network: 'Network',
|
||||
Networks: 'Networks',
|
||||
@ -90,6 +97,7 @@ module.exports = {
|
||||
VirtualsNetworks: 'Virtuals networks',
|
||||
NetworkTopology: 'Network topology',
|
||||
NetworksTopologies: 'Networks topologies',
|
||||
|
||||
/* sections - storage */
|
||||
Datastore: 'Datastore',
|
||||
Datastores: 'Datastores',
|
||||
@ -101,6 +109,7 @@ module.exports = {
|
||||
Marketplaces: 'Marketplaces',
|
||||
App: 'App',
|
||||
Apps: 'Apps',
|
||||
|
||||
/* sections - templates & instances */
|
||||
VM: 'VM',
|
||||
VMs: 'VMs',
|
||||
@ -108,11 +117,13 @@ module.exports = {
|
||||
VirtualRouters: 'VirtualRouters',
|
||||
VMGroup: 'VMGroup',
|
||||
VMGroups: 'VMGroups',
|
||||
|
||||
/* sections - flow */
|
||||
ApplicationsTemplates: 'Applications templates',
|
||||
ApplicationsInstances: 'Applications instances',
|
||||
Tier: 'Tier',
|
||||
Tiers: 'Tiers',
|
||||
|
||||
/* sections - provision */
|
||||
Provider: 'Provider',
|
||||
Providers: 'Providers',
|
||||
@ -143,8 +154,5 @@ module.exports = {
|
||||
/* ownership */
|
||||
Ownership: 'Ownership',
|
||||
Owner: 'Owner',
|
||||
Other: 'Other',
|
||||
|
||||
Language: 'Language',
|
||||
Response: 'Response'
|
||||
Other: 'Other'
|
||||
}
|
||||
|
@ -1,20 +1,30 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import clsx from 'clsx'
|
||||
import { Container, Box, Grid } from '@material-ui/core'
|
||||
|
||||
import { useFetchAll, useProvision } from 'client/hooks'
|
||||
import { useAuth, useFetchAll, useProvision } from 'client/hooks'
|
||||
import * as Widgets from 'client/components/Widgets'
|
||||
import dashboardStyles from 'client/containers/Dashboard/Provision/styles'
|
||||
|
||||
function Dashboard () {
|
||||
const { settings: { disableanimations } = {} } = useAuth()
|
||||
const { getProviders, getProvisions } = useProvision()
|
||||
const { fetchRequestAll } = useFetchAll()
|
||||
|
||||
const classes = dashboardStyles({ disableanimations })
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchRequestAll([getProviders(), getProvisions()])
|
||||
}, [])
|
||||
|
||||
const withoutAnimations = String(disableanimations).toUpperCase() === 'YES'
|
||||
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Container
|
||||
disableGutters
|
||||
className={clsx({ [classes.withoutAnimations]: withoutAnimations })}
|
||||
>
|
||||
<Box py={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
|
@ -1,6 +1,9 @@
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
root: {},
|
||||
title: { color: theme.palette.common.black }
|
||||
export default makeStyles(() => ({
|
||||
withoutAnimations: {
|
||||
'& *, & *::before, & *::after': {
|
||||
animation: 'none !important'
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
@ -28,6 +28,7 @@ import { Tr } from 'client/components/HOC'
|
||||
import { T } from 'client/constants'
|
||||
|
||||
import { FORM_FIELDS, FORM_SCHEMA } from 'client/containers/Settings/schema'
|
||||
import { mapUserInputs } from 'client/utils'
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
header: {
|
||||
@ -55,7 +56,7 @@ const useStyles = makeStyles(theme => ({
|
||||
const Settings = () => {
|
||||
const classes = useStyles()
|
||||
|
||||
const { updateUser, settings } = useAuth()
|
||||
const { updateUser, settings = {} } = useAuth()
|
||||
|
||||
const { handleSubmit, setError, reset, formState, ...methods } = useForm({
|
||||
reValidateMode: 'onSubmit',
|
||||
@ -65,16 +66,20 @@ const Settings = () => {
|
||||
|
||||
React.useEffect(() => {
|
||||
// set user settings values
|
||||
reset(settings, { isSubmitted: false, error: false })
|
||||
}, [settings])
|
||||
reset(
|
||||
FORM_SCHEMA.cast(settings),
|
||||
{ isSubmitted: false, error: false }
|
||||
)
|
||||
}, [])
|
||||
|
||||
const onSubmit = dataForm => {
|
||||
const values = Object.entries(dataForm)
|
||||
const inputs = mapUserInputs(dataForm)
|
||||
|
||||
const values = Object.entries(inputs)
|
||||
.map(([key, value]) => `\n ${String(key).toUpperCase()} = "${value}"`)
|
||||
.join(',')
|
||||
|
||||
return updateUser({ template: `FIREEDGE = [${values}]\n` })
|
||||
// .then(() => context.changeLang(dataForm.lang))
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -2,26 +2,22 @@ import * as yup from 'yup'
|
||||
import { T, INPUT_TYPES, SCHEMES, DEFAULT_SCHEME, DEFAULT_LANGUAGE } from 'client/constants'
|
||||
import { getValidationFromFields } from 'client/utils'
|
||||
|
||||
const SCHEME_VALUES = [
|
||||
{ text: T.System, value: SCHEMES.SYSTEM },
|
||||
{ text: T.Dark, value: SCHEMES.DARK },
|
||||
{ text: T.Light, value: SCHEMES.LIGHT }
|
||||
]
|
||||
|
||||
const LANGUAGE_VALUES =
|
||||
window?.langs?.map(({ key, value }) => ({ text: value, value: key })) ?? []
|
||||
|
||||
const SCHEME = {
|
||||
name: 'scheme',
|
||||
label: T.Schema,
|
||||
type: INPUT_TYPES.SELECT,
|
||||
values: SCHEME_VALUES,
|
||||
values: [
|
||||
{ text: T.System, value: SCHEMES.SYSTEM },
|
||||
{ text: T.Dark, value: SCHEMES.DARK },
|
||||
{ text: T.Light, value: SCHEMES.LIGHT }
|
||||
],
|
||||
validation: yup
|
||||
.string()
|
||||
.trim()
|
||||
.required('Scheme field is required')
|
||||
.default(DEFAULT_SCHEME),
|
||||
grid: { md: 12 },
|
||||
native: true,
|
||||
fieldProps: { variant: 'outlined' }
|
||||
}
|
||||
|
||||
@ -29,7 +25,8 @@ const LANGUAGES = {
|
||||
name: 'lang',
|
||||
label: T.Language,
|
||||
type: INPUT_TYPES.SELECT,
|
||||
values: LANGUAGE_VALUES,
|
||||
values: () =>
|
||||
window?.langs?.map(({ key, value }) => ({ text: value, value: key })) ?? [],
|
||||
validation: yup
|
||||
.string()
|
||||
.trim()
|
||||
@ -40,7 +37,22 @@ const LANGUAGES = {
|
||||
fieldProps: { variant: 'outlined' }
|
||||
}
|
||||
|
||||
export const FORM_FIELDS = [SCHEME, LANGUAGES]
|
||||
const DISABLE_ANIMATIONS = {
|
||||
name: 'disableanimations',
|
||||
label: T.DisableDashboardAnimations,
|
||||
type: INPUT_TYPES.CHECKBOX,
|
||||
validation: yup
|
||||
.boolean()
|
||||
.transform(value => {
|
||||
if (typeof value === 'boolean') return value
|
||||
|
||||
return String(value).toUpperCase() === 'YES'
|
||||
})
|
||||
.default(false),
|
||||
grid: { md: 12 }
|
||||
}
|
||||
|
||||
export const FORM_FIELDS = [SCHEME, LANGUAGES, DISABLE_ANIMATIONS]
|
||||
|
||||
export const FORM_SCHEMA = yup.object(
|
||||
getValidationFromFields(FORM_FIELDS)
|
||||
|
@ -12,14 +12,14 @@ const MuiProvider = ({ theme: appTheme, children }) => {
|
||||
const { settings: { scheme } = {} } = useAuth()
|
||||
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
|
||||
|
||||
const changeThemeType = () => {
|
||||
const changeScheme = () => {
|
||||
const prefersScheme = prefersDarkMode ? DARK : LIGHT
|
||||
const newScheme = scheme === SYSTEM ? prefersScheme : scheme
|
||||
|
||||
return createTheme(appTheme(newScheme))
|
||||
}
|
||||
|
||||
const [muitheme, setTheme] = React.useState(changeThemeType)
|
||||
const [muitheme, setTheme] = React.useState(changeScheme)
|
||||
|
||||
React.useEffect(() => {
|
||||
const jssStyles = document.querySelector('#jss-server-side')
|
||||
@ -28,7 +28,9 @@ const MuiProvider = ({ theme: appTheme, children }) => {
|
||||
}
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => setTheme(changeThemeType), [scheme, prefersDarkMode])
|
||||
React.useEffect(() => {
|
||||
setTheme(changeScheme)
|
||||
}, [scheme, prefersDarkMode])
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={muitheme}>
|
||||
|
@ -36,7 +36,8 @@ const initial = {
|
||||
filterPool: FILTER_POOL.ALL_RESOURCES,
|
||||
settings: {
|
||||
scheme: DEFAULT_SCHEME,
|
||||
lang: DEFAULT_LANGUAGE
|
||||
lang: DEFAULT_LANGUAGE,
|
||||
disableanimations: 'YES'
|
||||
},
|
||||
isLoginInProcess: false,
|
||||
isLoading: false,
|
||||
@ -70,7 +71,10 @@ const authentication = (state = initial, action) => {
|
||||
case UserActions.CHANGE_SETTINGS:
|
||||
return {
|
||||
...state,
|
||||
settings: action.payload
|
||||
settings: {
|
||||
...initial.settings,
|
||||
...action.payload
|
||||
}
|
||||
}
|
||||
case UserActions.FAILURE_AUTH:
|
||||
return {
|
||||
|