shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-21 14:50:08 +03:00
Code Releases Wiki Activity

M #~: Change package icons in fireedge gui (#1268)

Browse Source
This commit is contained in:
Sergio Betanzos 2021-06-03 11:04:22 +02:00 committed by GitHub
parent bfd4aa548a
commit fd0ebeffd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
54 changed files with 716 additions and 618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

937
src/fireedge/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
src/fireedge/package.json
View File

@ -58,7 +58,6 @@
"@loadable/server": "5.14.2",
"@loadable/webpack-plugin": "5.14.2",
"@material-ui/core": "4.11.0",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "4.0.0-alpha.58",
"@reduxjs/toolkit": "1.5.1",
"ace-builds": "1.4.12",
@ -84,6 +83,7 @@
"http": "0.0.1-security",
"http-proxy-middleware": "1.0.5",
"https": "1.0.0",
"iconoir-react": "1.1.0",
"immutable": "4.0.0-rc.12",
"intersection-observer": "0.11.0",
"jsonschema": "1.2.7",
@ -98,7 +98,7 @@
"path": "0.12.7",
"prop-types": "15.7.2",
"qrcode": "1.4.4",
"react": "16.13.1",
"react": "16.14.0",
"react-ace": "9.1.4",
"react-dom": "16.13.1",
"react-flow-renderer": "5.11.1",
@ -129,4 +129,4 @@
"yup": "0.32.9",
"zeromq": "5.2.0"
}
}
}

8
src/fireedge/src/client/apps/flow/routes.js
View File

@ -1,8 +1,8 @@
import {
Dashboard as DashboardIcon,
FormatListBulleted as TemplatesIcons,
Apps as InstancesIcons
} from '@material-ui/icons'
ReportColumns as DashboardIcon,
List as TemplatesIcons,
Cell4x4 as InstancesIcons
} from 'iconoir-react'
import loadable from '@loadable/component'

8
src/fireedge/src/client/apps/provision/routes.js
View File

@ -1,9 +1,9 @@
import {
Dashboard as DashboardIcon,
Public as ProvidersIcon,
SettingsSystemDaydream as ProvisionsIcon,
ReportColumns as DashboardIcon,
DatabaseSettings as ProvidersIcon,
SettingsCloud as ProvisionsIcon,
Settings as SettingsIcon
} from '@material-ui/icons'
} from 'iconoir-react'
import loadable from '@loadable/component'

4
src/fireedge/src/client/components/AutoScrollBox/index.js
View File

@ -2,7 +2,7 @@ import React, { memo, useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Chip, Slide } from '@material-ui/core'
import ArrowBottomIcon from '@material-ui/icons/VerticalAlignBottom'
import { Download as GoToBottomIcon } from 'iconoir-react'
const useStyles = makeStyles(theme => ({
scrollable: {
@ -95,7 +95,7 @@ const AutoScrollBox = memo(({
<Slide in={!autoScroll} direction="down" mountOnEnter unmountOnExit>
<div className={classes.wrapperButton}>
<Chip
avatar={<ArrowBottomIcon style={{ backgroundColor: 'transparent' }} />}
avatar={<GoToBottomIcon />}
color='secondary'
className={classes.button}
label={autoButtonText}

2
src/fireedge/src/client/components/Cards/ApplicationCard.js
View File

@ -9,7 +9,7 @@ import {
CardActions,
Chip
} from '@material-ui/core'
import FileIcon from '@material-ui/icons/Description'
import { Page as FileIcon } from 'iconoir-react'
import SelectCard from 'client/components/Cards/SelectCard'
import { Tr } from 'client/components/HOC'

10
src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js
View File

@ -9,9 +9,11 @@ import {
CardContent,
CardActions
} from '@material-ui/core'
import FileIcon from '@material-ui/icons/Description'
import HostIcon from '@material-ui/icons/Computer'
import AccountTreeIcon from '@material-ui/icons/AccountTree'
import {
Page as FileIcon,
HardDrive as HostIcon,
Network as NetworkIcon
} from 'iconoir-react'
import SelectCard from 'client/components/Cards/SelectCard'
import { Tr } from 'client/components/HOC'
@ -61,7 +63,7 @@ const ApplicationTemplateCard = memo(
badgeContent={numberOfNetworks}
anchorOrigin={badgePosition}
>
<AccountTreeIcon />
<NetworkIcon />
</Badge>
</Box>
</CardContent>

12
src/fireedge/src/client/components/Cards/ClusterCard.js
View File

@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
import { makeStyles, Badge, Box, CardContent } from '@material-ui/core'
import {
Storage as ClusterIcon,
Computer as HostIcon,
AccountTree as NetworkIcon,
FolderOpen as DatastoreIcon
} from '@material-ui/icons'
Server as ClusterIcon,
HardDrive as HostIcon,
NetworkAlt as NetworkIcon,
Folder as DatastoreIcon
} from 'iconoir-react'
import SelectCard from 'client/components/Cards/SelectCard'
import { SelectCard } from 'client/components/Cards'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'

2
src/fireedge/src/client/components/Cards/DatastoreCard.js
View File

@ -2,7 +2,7 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Typography } from '@material-ui/core'
import DatastoreIcon from '@material-ui/icons/FolderOpen'
import { Folder as DatastoreIcon } from 'iconoir-react'
import SelectCard, { Action } from 'client/components/Cards/SelectCard'
import { StatusBadge, StatusChip, LinearProgressWithLabel } from 'client/components/Status'

2
src/fireedge/src/client/components/Cards/HostCard.js
View File

@ -2,7 +2,7 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Typography } from '@material-ui/core'
import { Computer as HostIcon } from '@material-ui/icons'
import { HardDrive as HostIcon } from 'iconoir-react'
import SelectCard, { Action } from 'client/components/Cards/SelectCard'
import { StatusBadge, StatusChip, LinearProgressWithLabel } from 'client/components/Status'

2
src/fireedge/src/client/components/Cards/NetworkCard.js
View File

@ -1,7 +1,7 @@
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import NetworkIcon from '@material-ui/icons/AccountTree'
import { NetworkAlt as NetworkIcon } from 'iconoir-react'
import SelectCard, { Action } from 'client/components/Cards/SelectCard'
import { LinearProgressWithLabel } from 'client/components/Status'

3
src/fireedge/src/client/components/Cards/ProvisionCard.js
View File

@ -1,8 +1,7 @@
import React, { memo, useMemo } from 'react'
import PropTypes from 'prop-types'
import ProviderIcon from '@material-ui/icons/Public'
import ProvisionIcon from '@material-ui/icons/Cloud'
import { Db as ProviderIcon, Cloud as ProvisionIcon } from 'iconoir-react'
import SelectCard, { Action } from 'client/components/Cards/SelectCard'
import { StatusBadge } from 'client/components/Status'

8
src/fireedge/src/client/components/Cards/ProvisionTemplateCard.js
View File

@ -1,10 +1,10 @@
import React, { memo, useMemo } from 'react'
import PropTypes from 'prop-types'
import * as Types from 'client/types/provision'
import { Db as ProviderIcon, SettingsCloud as ProvisionIcon } from 'iconoir-react'
import ProvidersIcon from '@material-ui/icons/Public'
import SelectCard from 'client/components/Cards/SelectCard'
import * as Types from 'client/types/provision'
import { SelectCard } from 'client/components/Cards'
import Image from 'client/components/Image'
import { isExternalURL } from 'client/utils'
@ -29,7 +29,7 @@ const ProvisionTemplateCard = memo(
dataCy={isProvider ? 'provider' : 'provision'}
disableFilterImage={isExternalImage}
handleClick={handleClick}
icon={<ProvidersIcon />}
icon={isProvider ? <ProviderIcon /> : <ProvisionIcon />}
cardActionAreaProps={{ disabled: !isValid }}
isSelected={isSelected}
mediaProps={{

4
src/fireedge/src/client/components/Cards/TierCard.js
View File

@ -2,7 +2,7 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Button, CardActions, Badge } from '@material-ui/core'
import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows'
import { AppleImac2021 as TierIcon } from 'iconoir-react'
import SelectCard from 'client/components/Cards/SelectCard'
import { Tr } from 'client/components/HOC'
@ -24,7 +24,7 @@ const TierCard = memo(
horizontal: 'left'
}}
>
<DesktopWindowsIcon />
<TierIcon />
</Badge>
}
title={name}

11
src/fireedge/src/client/components/Cards/WavesCard.js
View File

@ -21,8 +21,9 @@ const useStyles = makeStyles(theme => {
position: 'absolute',
top: 0,
right: 0,
fontSize: '10em',
fill: addOpacityToColor(theme.palette.common.white, 0.2)
'& > svg': {
color: addOpacityToColor(theme.palette.common.white, 0.2)
}
},
wave: {
display: 'block',
@ -58,7 +59,11 @@ const WavesCard = React.memo(({ text, value, bgColor, icon: Icon }) => {
<Typography variant='h4'>{value}</Typography>
<span className={clsx(classes.wave, classes.wave1)} />
<span className={clsx(classes.wave, classes.wave2)} />
{Icon && <Icon className={classes.icon} />}
{Icon && (
<span className={classes.icon}>
<Icon size='9em' />
</span>
)}
</Paper>
)
}, (prev, next) => prev.value === next.value)

7
src/fireedge/src/client/components/DebugLog/message.js
View File

@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core'
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import { NavArrowRight as CollapseIcon, NavArrowDown as ExpandMoreIcon } from 'iconoir-react'
import { DEBUG_LEVEL } from 'client/constants'
import AnsiHtml from 'client/components/DebugLog/ansiHtml'
@ -57,9 +56,9 @@ const Message = memo(({ timestamp, severity, message }) => {
>
<span>
{isMoreThanMaxChars && (isCollapsed ? (
<ChevronRightIcon fontSize='small' />
<CollapseIcon size={18} />
) : (
<ExpandMoreIcon fontSize='small' />
<ExpandMoreIcon size={18} />
))}
</span>
<div>{timestamp}</div>

4
src/fireedge/src/client/components/Dialogs/DialogConfirmation.js
View File

@ -11,7 +11,7 @@ import {
IconButton,
makeStyles
} from '@material-ui/core'
import { Close as CloseIcon } from '@material-ui/icons'
import { Cancel as CancelIcon } from 'iconoir-react'
import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
@ -73,7 +73,7 @@ const DialogConfirmation = memo(
data-cy='dg-cancel-button'
{...cancelButtonProps}
>
<CloseIcon />
<CancelIcon />
</IconButton>
)}
</DialogTitle>

15
src/fireedge/src/client/components/FormControl/ErrorHelper.js
View File

@ -2,7 +2,7 @@ import React, { memo } from 'react'
import { string } from 'prop-types'
import { Box, makeStyles, Typography } from '@material-ui/core'
import { Info as InfoIcon } from '@material-ui/icons'
import { WarningCircledOutline as WarningIcon } from 'iconoir-react'
import { Tr } from 'client/components/HOC/Translate'
const useStyles = makeStyles(theme => ({
@ -11,9 +11,6 @@ const useStyles = makeStyles(theme => ({
display: 'flex',
alignItems: 'center'
},
icon: {
fontSize: 16
},
text: {
...theme.typography.body1,
paddingLeft: theme.spacing(1),
@ -25,13 +22,9 @@ const ErrorHelper = memo(({ label, ...rest }) => {
const classes = useStyles()
return (
<Box component="span" className={classes.root} {...rest}>
<InfoIcon className={classes.icon} />
<Typography
className={classes.text}
component="span"
data-cy="error-text"
>
<Box component='span' className={classes.root} {...rest}>
<WarningIcon size={18} />
<Typography className={classes.text} component='span' data-cy='error-text'>
{Tr(label)}
</Typography>
</Box>

4
src/fireedge/src/client/components/FormControl/FileController.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles, FormControl, FormHelperText } from '@material-ui/core'
import { Check, InsertDriveFile } from '@material-ui/icons'
import { Check as CheckIcon, Page as FileIcon } from 'iconoir-react'
import { Controller } from 'react-hook-form'
import { ErrorHelper, SubmitButton } from 'client/components/FormControl'
@ -104,7 +104,7 @@ const FileController = memo(
component='span'
data-cy={`${cy}-button`}
isSubmitting={isLoading}
label={success ? <Check /> : <InsertDriveFile />}
label={success ? <CheckIcon /> : <FileIcon />}
className={clsx({
[classes.buttonSuccess]: success
})}

2
src/fireedge/src/client/components/FormControl/PasswordController.js
View File

@ -1,8 +1,8 @@
import React, { memo, useState, useCallback } from 'react'
import PropTypes from 'prop-types'
import { Visibility, VisibilityOff } from '@material-ui/icons'
import { InputAdornment, IconButton } from '@material-ui/core'
import { EyeEmpty as Visibility, EyeOff as VisibilityOff } from 'iconoir-react'
import { TextController } from 'client/components/FormControl'

9
src/fireedge/src/client/components/FormStepper/MobileStepper.js
View File

@ -2,8 +2,11 @@ import * as React from 'react'
import PropTypes from 'prop-types'
import { Button, MobileStepper, Typography, Box } from '@material-ui/core'
import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons'
import { makeStyles, fade } from '@material-ui/core/styles'
import {
NavArrowLeft as PreviousIcon,
NavArrowRight as NextIcon
} from 'iconoir-react'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
@ -64,13 +67,13 @@ const CustomMobileStepper = ({
onClick={handleBack}
disabled={disabledBack}
>
<KeyboardArrowLeft /> {Tr(T.Back)}
<PreviousIcon /> {Tr(T.Back)}
</Button>
}
nextButton={
<Button className={classes.button} size="small" onClick={handleNext}>
{activeStep === lastStep ? Tr(T.Finish) : Tr(T.Next)}
<KeyboardArrowRight />
<NextIcon />
</Button>
}
/>

7
src/fireedge/src/client/components/Header/Group.js
View File

@ -1,8 +1,7 @@
import * as React from 'react'
import { Button } from '@material-ui/core'
import FilterIcon from '@material-ui/icons/FilterDrama'
import SelectedIcon from '@material-ui/icons/FilterVintage'
import { Group as GroupIcon, VerifiedBadge as SelectIcon } from 'iconoir-react'
import { useAuth, useAuthApi } from 'client/features/Auth'
import Search from 'client/components/Search'
@ -38,7 +37,7 @@ const Group = () => {
}}
>
{NAME}
{isSelected && <SelectedIcon className={classes.groupSelectedIcon} />}
{isSelected && <SelectIcon size='1rem' />}
</Button>
)
}
@ -59,7 +58,7 @@ const Group = () => {
return (
<HeaderPopover
id="group-list"
icon={<FilterIcon />}
icon={<GroupIcon />}
buttonProps={{ 'data-cy': 'header-group-button', variant: 'outlined' }}
headerTitle="Switch group"
>

2
src/fireedge/src/client/components/Header/Popover.js
View File

@ -9,7 +9,7 @@ import {
Typography,
Button
} from '@material-ui/core'
import CloseIcon from '@material-ui/icons/Close'
import { Cancel as CloseIcon } from 'iconoir-react'
import clsx from 'clsx'
import { Tr } from 'client/components/HOC'

4
src/fireedge/src/client/components/Header/User.js
View File

@ -1,7 +1,7 @@
import * as React from 'react'
import { MenuItem, MenuList, Link } from '@material-ui/core'
import AccountCircleIcon from '@material-ui/icons/AccountCircle'
import { ProfileCircled as UserIcon } from 'iconoir-react'
import { useAuth, useAuthApi } from 'client/features/Auth'
import HeaderPopover from 'client/components/Header/Popover'
@ -20,7 +20,7 @@ const User = React.memo(() => {
<HeaderPopover
id='user-menu'
buttonLabel={user?.NAME}
icon={<AccountCircleIcon />}
icon={<UserIcon />}
buttonProps={{ 'data-cy': 'header-user-button', variant: 'outlined' }}
disablePadding
>

11
src/fireedge/src/client/components/Header/Zone.js
View File

@ -1,7 +1,7 @@
import React, { memo } from 'react'
import { MenuItem, MenuList } from '@material-ui/core'
import LanguageIcon from '@material-ui/icons/Language'
import { Language as ZoneIcon } from 'iconoir-react'
import HeaderPopover from 'client/components/Header/Popover'
import { Tr } from 'client/components/HOC'
@ -9,9 +9,12 @@ import { T } from 'client/constants'
const Zone = memo(() => (
<HeaderPopover
id="zone-menu"
icon={<LanguageIcon />}
buttonProps={{ 'data-cy': 'header-zone-button', variant: 'outlined' }}
id='zone-menu'
icon={<ZoneIcon />}
buttonProps={{
'data-cy': 'header-zone-button',
variant: 'outlined'
}}
disablePadding
>
{({ handleClose }) => (

2
src/fireedge/src/client/components/Header/index.js
View File

@ -25,7 +25,7 @@ import {
useMediaQuery
// useScrollTrigger
} from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'
import { Menu as MenuIcon } from 'iconoir-react'
import { useAuth } from 'client/features/Auth'
import { useGeneral, useGeneralApi } from 'client/features/General'

9
src/fireedge/src/client/components/Header/styles.js
View File

@ -51,9 +51,10 @@ export default makeStyles(theme => ({
},
/* GROUP SWITCHER */
headerSwitcherLabel: { flexGrow: 1 },
groupButton: { justifyContent: 'start' },
groupSelectedIcon: {
fontSize: '1rem',
margin: theme.spacing(0, 2)
groupButton: {
justifyContent: 'start',
'& svg:first-of-type': {
margin: theme.spacing(0, 2)
}
}
}))

6
src/fireedge/src/client/components/List/ListCards/index.js
View File

@ -5,7 +5,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group'
import {
CardActionArea, Card, Grid, LinearProgress, useMediaQuery
} from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add'
import { Plus as PlusIcon } from 'iconoir-react'
import { EmptyCard } from 'client/components/Cards'
import FloatingActionButton from 'client/components/Fab'
@ -38,12 +38,12 @@ const ListCards = ({
<ButtonCreateComponent onClick={handleCreate} />
) : (
isMobile ? (
<FloatingActionButton icon={<AddIcon />} onClick={handleCreate} />
<FloatingActionButton icon={<PlusIcon />} onClick={handleCreate} />
) : (
<Grid item {...breakpoints}>
<Card className={classes.cardPlus} raised>
<CardActionArea onClick={handleCreate}>
<AddIcon />
<PlusIcon />
</CardActionArea>
</Card>
</Grid>

17
src/fireedge/src/client/components/List/ListHeader/index.js
View File

@ -2,12 +2,15 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { Box, Typography, InputBase } from '@material-ui/core'
import SearchIcon from '@material-ui/icons/Search'
import RefreshIcon from '@material-ui/icons/Autorenew'
import AddIcon from '@material-ui/icons/AddCircle'
import {
RefreshDouble as RefreshIcon,
AddCircledOutline as AddIcon,
Search as SearchIcon
} from 'iconoir-react'
import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
import listHeaderStyles from 'client/components/List/ListHeader/styles'
@ -29,14 +32,14 @@ const ListHeader = memo(({
<SubmitButton icon label={<RefreshIcon />} {...reloadButtonProps} />
)}
{title && (
<Typography variant="h5" className={classes.titleText}>
<Typography variant='h5' className={classes.titleText}>
{Tr(title)}
</Typography>
)}
</Box>
<Box className={classes.actions}>
{!!(hasAddButton || addButtonProps) && (
<SubmitButton color="secondary" icon label={<AddIcon />} {...addButtonProps} />
<SubmitButton color='secondary' icon label={<AddIcon />} {...addButtonProps} />
)}
{!!(hasSearch || searchProps) && (
<Box className={classes.search}>
@ -44,10 +47,10 @@ const ListHeader = memo(({
<SearchIcon />
</Box>
<InputBase
type="search"
type='search'
onChange={searchProps.handleChange}
fullWidth
placeholder="Search..."
placeholder={`${T.Search}...`}
classes={{
root: classes.inputRoot,
input: classes.inputInput

4
src/fireedge/src/client/components/Notifier/index.js
View File

@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
import { useSnackbar } from 'notistack'
import { IconButton } from '@material-ui/core'
import CloseIcon from '@material-ui/icons/Close'
import { Cancel as CloseIcon } from 'iconoir-react'
import { useGeneral, useGeneralApi } from 'client/features/General'
const CloseButton = ({ handleClick }) => (
<IconButton onClick={handleClick} component="span">
<CloseIcon fontSize="small" />
<CloseIcon size='1em' />
</IconButton>
)

5
src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
View File

@ -10,8 +10,7 @@ import {
ListItemIcon,
useMediaQuery
} from '@material-ui/core'
import ExpandLessIcon from '@material-ui/icons/ExpandLess'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import { NavArrowRight as CollapseIcon, NavArrowDown as ExpandMoreIcon } from 'iconoir-react'
import { useGeneral } from 'client/hooks'
import SidebarLink from 'client/components/Sidebar/SidebarLink'
@ -35,7 +34,7 @@ const SidebarCollapseItem = ({ label, routes, icon: Icon }) => {
)}
<ListItemText primary={label} />
{expanded ? (
<ExpandLessIcon
<CollapseIcon
className={clsx({ [classes.expandIcon]: isUpLg && !isFixMenu })}
/>
) : (

2
src/fireedge/src/client/components/Sidebar/index.js
View File

@ -25,7 +25,7 @@ import {
IconButton,
useMediaQuery
} from '@material-ui/core'
import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons'
import { Menu as MenuIcon, Cancel as CloseIcon } from 'iconoir-react'
import { useGeneral, useGeneralApi } from 'client/features/General'
import sidebarStyles from 'client/components/Sidebar/styles'

10
src/fireedge/src/client/components/Widgets/TotalProvisionInfrastructures.js
View File

@ -1,11 +1,11 @@
import * as React from 'react'
import {
Storage as ClusterIcon,
Computer as HostIcon,
FolderOpen as DatastoreIcon,
AccountTree as NetworkIcon
} from '@material-ui/icons'
Server as ClusterIcon,
HardDrive as HostIcon,
Folder as DatastoreIcon,
NetworkAlt as NetworkIcon
} from 'iconoir-react'
import { useOne } from 'client/features/One'
import Count from 'client/components/Count'

29
src/fireedge/src/client/constants/translates.js
View File

@ -4,26 +4,27 @@ module.exports = {
Next: 'Next',
/* actions */
Finish: 'Finish',
SignIn: 'Sign In',
SignOut: 'Sign Out',
Cancel: 'Cancel',
Save: 'Save',
Accept: 'Accept',
Deploy: 'Deploy',
Submit: 'Submit',
Show: 'Show',
ShowAll: 'Show all',
Remove: 'Remove',
Delete: 'Delete',
Edit: 'Edit',
Info: 'Info',
BackToList: 'Back to %s list',
Cancel: 'Cancel',
Clone: 'Clone',
Configuration: 'Configuration',
Delete: 'Delete',
Deploy: 'Deploy',
Edit: 'Edit',
Finish: 'Finish',
Info: 'Info',
Remove: 'Remove',
Save: 'Save',
Search: 'Search',
Select: 'Select',
SelectGroup: 'Select a group',
SelectRequest: 'Select request',
BackToList: 'Back to %s list',
Show: 'Show',
ShowAll: 'Show all',
SignIn: 'Sign In',
SignOut: 'Sign Out',
Submit: 'Submit',
/* dashboard */
InTotal: 'In Total',

16
src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/index.js
View File

@ -1,7 +1,13 @@
import React, { useState, useMemo } from 'react'
import PropTypes from 'prop-types'
import { Info, Build, Description, Today } from '@material-ui/icons'
import {
InfoEmpty as IconIcon,
Settings as SettingsIcon,
Page as LogIcon,
Calendar as ActionsIcons
} from 'iconoir-react'
import { AppBar, Tabs, Tab, Box } from '@material-ui/core'
import CustomDialog from 'client/containers/ApplicationsInstances/DialogInfo/dialog'
@ -9,10 +15,10 @@ import InfoTab from 'client/containers/ApplicationsInstances/DialogInfo/info'
import TiersTab from 'client/containers/ApplicationsInstances/DialogInfo/tiers'
const TABS = [
{ name: 'info', icon: Info, content: InfoTab },
{ name: 'tiers', icon: Build, content: TiersTab },
{ name: 'log', icon: Description },
{ name: 'actions', icon: Today }
{ name: 'info', icon: IconIcon, content: InfoTab },
{ name: 'tiers', icon: SettingsIcon, content: TiersTab },
{ name: 'log', icon: LogIcon },
{ name: 'actions', icon: ActionsIcons }
]
const DialogInfo = ({ info, handleClose }) => {

6
src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/info.js
View File

@ -1,9 +1,9 @@
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
import { CheckBox, CheckBoxOutlineBlank } from '@material-ui/icons'
import clsx from 'clsx'
import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
import { Check as CheckIcon, Square as BlankSquareIcon } from 'iconoir-react'
import useStyles from 'client/containers/ApplicationsInstances/DialogInfo/styles'
import { StatusChip } from 'client/components/Status'
@ -25,7 +25,7 @@ const InfoTab = memo(({ info }) => {
const stateInfo = APPLICATION_STATES[state]
const isChecked = checked =>
checked === '1' ? <CheckBox /> : <CheckBoxOutlineBlank />
checked === '1' ? <CheckIcon /> : <BlankSquareIcon />
return (
<Grid container spacing={1}>

3
src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Flow/index.js
View File

@ -2,7 +2,8 @@ import React, { memo, useEffect, useMemo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import { Add as AddIcon, SelectAll as SelectAllIcon } from '@material-ui/icons'
import { AddCircledOutline as AddIcon, Selection as SelectAllIcon } from 'iconoir-react'
import ReactFlow, { Background } from 'react-flow-renderer'
import { useFormContext } from 'react-hook-form'

24
src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Policies/index.js
View File

@ -1,9 +1,11 @@
import React, { useCallback, useState, useMemo } from 'react'
import { useFormContext } from 'react-hook-form'
import { Box, Tab, Tabs, Fab, AppBar } from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add'
import WarningIcon from '@material-ui/icons/Warning'
import { useTheme, Box, Tab, Tabs, Fab, AppBar } from '@material-ui/core'
import {
Plus as PlusIcon,
WarningCircledOutline as WarningIcon
} from 'iconoir-react'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
import { PolicyCard } from 'client/components/Cards'
@ -49,6 +51,8 @@ const Policies = () => ({
content: useCallback(
({ data, setFormData }) => {
const [tabSelected, setTab] = useState(TABS.elasticity.name)
const theme = useTheme()
const { watch, errors } = useFormContext()
const { handleSetList } = useListForm({
key: STEP_ID,
@ -79,12 +83,12 @@ const Policies = () => ({
<Box p={1}>
<FormWithSchema
id={STEP_ID}
cy="form-policy"
cy='form-policy'
fields={POLICIES_FORM_FIELDS}
/>
</Box>
{useMemo(() => (
<AppBar position="static">
<AppBar position='static'>
<Tabs value={tabSelected} onChange={(_, tab) => setTab(tab)}>
{Object.keys(TABS).map(key =>
<Tab
@ -93,7 +97,7 @@ const Policies = () => ({
value={key}
label={String(key).toUpperCase()}
icon={ errors[STEP_ID]?.[key] && (
<WarningIcon color="error" />
<WarningIcon color={theme.palette.error.main} />
)}
/>
)}
@ -104,17 +108,17 @@ const Policies = () => ({
errors[STEP_ID]?.[TABS.elasticity.name],
errors[STEP_ID]?.[TABS.scheduled.name]
])}
<Box overflow="hidden" height={1} position="relative">
<Box overflow='hidden' height={1} position='relative'>
<Fab
color="primary"
color='primary'
onClick={handleCreate}
style={{ position: 'absolute', zIndex: 1, bottom: 12, right: 28 }}
>
<AddIcon />
<PlusIcon />
</Fab>
{useMemo(() => (
Object.keys(TABS).map(key => (
<Box key={`tab-${key}`} hidden={tabSelected !== key} overflow="auto" height={1} p={2}>
<Box key={`tab-${key}`} hidden={tabSelected !== key} overflow='auto' height={1} p={2}>
<ListCards
list={data[key]}
breakpoints={{ xs: 12, sm: 6 }}

10
src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Template/index.js
View File

@ -1,11 +1,11 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react'
import {
ArrowBackIosOutlined as BackIcon,
ShoppingCartOutlined as MarketplaceIcon,
InsertDriveFileOutlined as TemplateIcon
} from '@material-ui/icons'
import { makeStyles, IconButton, Button, Fade } from '@material-ui/core'
import {
NavArrowLeft as BackIcon,
SimpleCart as MarketplaceIcon,
EmptyPage as TemplateIcon
} from 'iconoir-react'
import DockerLogo from 'client/icons/docker'
import { T } from 'client/constants'

16
src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Tiers/index.js
View File

@ -1,8 +1,8 @@
import React, { useMemo, useCallback, useState } from 'react'
import { useFormContext } from 'react-hook-form'
import { AppBar, Tabs, Tab } from '@material-ui/core'
import { Warning as WarningIcon } from '@material-ui/icons'
import { useTheme, AppBar, Tabs, Tab } from '@material-ui/core'
import { WarningCircledOutline as WarningIcon } from 'iconoir-react'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
import { T } from 'client/constants'
@ -24,12 +24,14 @@ const Tiers = ({ tiers, vmTemplates }) => {
resolver: STEP_FORM_SCHEMA({ tiers, vmTemplates }),
optionsValidate: { abortEarly: false },
content: useCallback(() => {
const { errors } = useFormContext()
const [tabSelected, setTab] = useState(tiers?.[0]?.id)
const theme = useTheme()
const { errors } = useFormContext()
return (
<>
<AppBar position="static">
<AppBar position='static'>
<Tabs value={tabSelected} onChange={(_, tab) => setTab(tab)}>
{tiers?.map(({ id, tier }, idx) => (
<Tab
@ -38,7 +40,7 @@ const Tiers = ({ tiers, vmTemplates }) => {
label={tier?.name}
id={`tab-${id}`}
icon={ errors[STEP_ID]?.[idx] && (
<WarningIcon color="error" />
<WarningIcon color={theme.palette.error.main} />
)}
/>
))}
@ -47,12 +49,12 @@ const Tiers = ({ tiers, vmTemplates }) => {
{useMemo(() => tiers?.map(({ id, template }, index) => (
<div key={id} hidden={tabSelected !== id}>
<FormWithSchema
cy="deploy-tiers-id"
cy='deploy-tiers-id'
fields={[ID]}
id={`${STEP_ID}[${index}]`}
/>
<FormWithSchema
cy="deploy-tiers"
cy='deploy-tiers'
fields={userInputsFields[template?.id]}
id={`${STEP_ID}[${index}].user_inputs_values`}
/>

9
src/fireedge/src/client/containers/Login/schema.js
View File

@ -1,6 +1,6 @@
import * as React from 'react'
import SelectedIcon from '@material-ui/icons/FilterVintage'
import { VerifiedBadge as SelectIcon } from 'iconoir-react'
import * as yup from 'yup'
import { useAuth } from 'client/features/Auth'
@ -28,8 +28,7 @@ export const USERNAME = {
export const PASSWORD = {
name: 'token',
label: T.Password,
type: INPUT_TYPES.TEXT,
htmlType: 'password',
type: INPUT_TYPES.PASSWORD,
validation: yup
.string()
.trim()
@ -81,7 +80,9 @@ export const GROUP = {
const formatGroups = sortedGroupsById.map(({ ID, NAME }) => {
const markAsPrimary = user?.GID === ID ? (
<SelectedIcon style={{ fontSize: '1rem', marginLeft: 16 }} />
<span style={{ marginLeft: 16 }}>
<SelectIcon size='1rem' />
</span>
) : null
return {

8
src/fireedge/src/client/containers/Providers/Form/Create/Steps/Template/index.js
View File

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo } from 'react'
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
import { NavArrowRight } from 'iconoir-react'
import Marked from 'marked'
import { useListForm } from 'client/hooks'
@ -98,8 +98,8 @@ const Template = () => ({
const renderer = new Marked.Renderer()
renderer.link = (href, title, text) => (
`<a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary"
target="_blank" rel="nofollow" title='${title}' href='${href}'>${text}</a>`
`<a class='MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary'
target='_blank' rel='nofollow' title='${title}' href='${href}'>${text}</a>`
)
const html = Marked(sanitize`${description}`, { renderer })
@ -109,7 +109,7 @@ const Template = () => ({
return (
<>
{/* -- SELECTORS -- */}
<Breadcrumbs separator={<ArrowIcon color="secondary" />}>
<Breadcrumbs separator={<NavArrowRight />}>
<FormControl>
<InputLabel color='secondary' shrink id='select-provision-type-label'>
{'Provision type'}

12
src/fireedge/src/client/containers/Providers/Sections/info.js
View File

@ -1,9 +1,13 @@
import React, { memo, useState } from 'react'
import PropTypes from 'prop-types'
import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
import { CheckBox, CheckBoxOutlineBlank, Visibility } from '@material-ui/icons'
import clsx from 'clsx'
import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
import {
Check as CheckIcon,
Square as BlankSquareIcon,
EyeEmpty as EyeIcon
} from 'iconoir-react'
import { useProviderApi } from 'client/features/One'
import { Action } from 'client/components/Cards/SelectCard'
@ -30,11 +34,11 @@ const Info = memo(({ fetchProps }) => {
const hasConnection = connection && Object.keys(connection).length > 0
const isChecked = checked =>
checked === '1' ? <CheckBox /> : <CheckBoxOutlineBlank />
checked === '1' ? <CheckIcon /> : <BlankSquareIcon />
const ConnectionButton = () => (
<Action
icon={<Visibility />}
icon={<EyeIcon />}
cy='provider-connection'
handleClick={() => getProviderConnection(ID).then(setShowConnection)}
/>

8
src/fireedge/src/client/containers/Providers/index.js
View File

@ -1,9 +1,8 @@
import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { Container, Box } from '@material-ui/core'
import EditIcon from '@material-ui/icons/Settings'
import DeleteIcon from '@material-ui/icons/Delete'
import { useTheme, Container, Box } from '@material-ui/core'
import { Trash as DeleteIcon, Settings as EditIcon } from 'iconoir-react'
import { PATH } from 'client/apps/provision/routes'
import { useProvider, useProviderApi } from 'client/features/One'
@ -18,6 +17,7 @@ import Information from 'client/containers/Providers/Sections/info'
import { T } from 'client/constants'
function Providers () {
const theme = useTheme()
const history = useHistory()
const [showDialog, setShowDialog] = useState(false)
@ -87,7 +87,7 @@ function Providers () {
.then(() => fetchRequest(undefined, { reload: true }))
}
}),
icon: <DeleteIcon color='error' />,
icon: <DeleteIcon color={theme.palette.error.dark} />,
cy: 'provider-delete'
}
]

2
src/fireedge/src/client/containers/Provisions/DialogInfo/datastores.js
View File

@ -1,7 +1,7 @@
import React, { memo, useEffect } from 'react'
import PropTypes from 'prop-types'
import DeleteIcon from '@material-ui/icons/Delete'
import { Trash as DeleteIcon } from 'iconoir-react'
import { useFetchAll } from 'client/hooks'
import { useDatastoreApi, useProvisionApi } from 'client/features/One'

3
src/fireedge/src/client/containers/Provisions/DialogInfo/hosts.js
View File

@ -1,8 +1,7 @@
import React, { memo, useEffect } from 'react'
import PropTypes from 'prop-types'
import DeleteIcon from '@material-ui/icons/Delete'
import ConfigureIcon from '@material-ui/icons/Settings'
import { Trash as DeleteIcon, Settings as ConfigureIcon } from 'iconoir-react'
import { useFetchAll } from 'client/hooks'
import { useHostApi, useProvisionApi } from 'client/features/One'

12
src/fireedge/src/client/containers/Provisions/DialogInfo/index.js
View File

@ -2,11 +2,13 @@ import React, { useState, useMemo } from 'react'
import PropTypes from 'prop-types'
import { AppBar, Tabs, Tab, Box } from '@material-ui/core'
import InfoIcon from '@material-ui/icons/Info'
import DatastoreIcon from '@material-ui/icons/FolderOpen'
import NetworkIcon from '@material-ui/icons/AccountTree'
import HostIcon from '@material-ui/icons/Computer'
import LogIcon from '@material-ui/icons/InsertDriveFile'
import {
InfoEmpty as InfoIcon,
HardDrive as HostIcon,
Folder as DatastoreIcon,
NetworkAlt as NetworkIcon,
Page as LogIcon
} from 'iconoir-react'
import InfoTab from 'client/containers/Provisions/DialogInfo/info'
import DatastoresTab from 'client/containers/Provisions/DialogInfo/datastores'

6
src/fireedge/src/client/containers/Provisions/DialogInfo/info.js
View File

@ -1,8 +1,8 @@
import React, { memo } from 'react'
import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
import { CheckBox, CheckBoxOutlineBlank } from '@material-ui/icons'
import clsx from 'clsx'
import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
import { Check as CheckIcon, Square as BlankSquareIcon } from 'iconoir-react'
import useStyles from 'client/containers/Provisions/DialogInfo/styles'
import { StatusChip } from 'client/components/Status'
@ -26,7 +26,7 @@ const Info = memo(({ data }) => {
const stateInfo = PROVISIONS_STATES[state]
const isChecked = checked =>
checked === '1' ? <CheckBox /> : <CheckBoxOutlineBlank />
checked === '1' ? <CheckIcon /> : <BlankSquareIcon />
return (
<Grid container spacing={1}>

2
src/fireedge/src/client/containers/Provisions/DialogInfo/networks.js
View File

@ -1,7 +1,7 @@
import React, { memo, useEffect } from 'react'
import PropTypes from 'prop-types'
import DeleteIcon from '@material-ui/icons/Delete'
import { Trash as DeleteIcon } from 'iconoir-react'
import { useFetchAll } from 'client/hooks'
import { useVNetworkApi, useProvisionApi } from 'client/features/One'

8
src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Template/index.js
View File

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo } from 'react'
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
import { NavArrowRight } from 'iconoir-react'
import Marked from 'marked'
import { useListForm } from 'client/hooks'
@ -101,8 +101,8 @@ const Template = () => ({
const renderer = new Marked.Renderer()
renderer.link = (href, title, text) => (
`<a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary"
target="_blank" rel="nofollow" title='${title}' href='${href}'>${text}</a>`
`<a class='MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary'
target='_blank' rel='nofollow' title='${title}' href='${href}'>${text}</a>`
)
const html = Marked(sanitize`${description}`, { renderer })
@ -112,7 +112,7 @@ const Template = () => ({
return (
<>
{/* -- SELECTORS -- */}
<Breadcrumbs separator={<ArrowIcon color="secondary" />}>
<Breadcrumbs separator={<NavArrowRight />}>
<FormControl>
<InputLabel color='secondary' shrink id='select-provision-type-label'>
{'Provision type'}

5
src/fireedge/src/client/containers/Provisions/Form/Create/index.js
View File

@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react'
import { Redirect, useHistory } from 'react-router'
import { Container, IconButton, LinearProgress } from '@material-ui/core'
import ArrowBackIcon from '@material-ui/icons/ChevronLeftRounded'
import { NavArrowLeft as ArrowBackIcon } from 'iconoir-react'
import { useForm, FormProvider } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers'
@ -85,7 +86,7 @@ function ProvisionCreateForm () {
<IconButton aria-label='back-to-list' size='medium'
onClick={() => history.push(PATH.PROVISIONS.LIST)}
>
<ArrowBackIcon fontSize='large' />
<ArrowBackIcon />
</IconButton>
<span className={classes.titleText}>
<Translate word={T.BackToList} values={T.Provisions} />

8
src/fireedge/src/client/containers/Provisions/index.js
View File

@ -1,9 +1,8 @@
import React, { useState, useEffect, createElement } from 'react'
import { useHistory } from 'react-router-dom'
import { Container, Box } from '@material-ui/core'
import EditIcon from '@material-ui/icons/Settings'
import DeleteIcon from '@material-ui/icons/Delete'
import { useTheme, Container, Box } from '@material-ui/core'
import { Trash as DeleteIcon, Settings as EditIcon } from 'iconoir-react'
import { PATH } from 'client/apps/provision/routes'
import { useFetch, useSearch } from 'client/hooks'
@ -19,6 +18,7 @@ import DialogInfo from 'client/containers/Provisions/DialogInfo'
import { T } from 'client/constants'
function Provisions () {
const theme = useTheme()
const history = useHistory()
const [{ content, ...showDialog } = {}, setShowDialog] = useState()
const handleCloseDialog = () => setShowDialog()
@ -102,7 +102,7 @@ function Provisions () {
.then(() => fetchRequest(undefined, { reload: true }))
}
}),
icon: <DeleteIcon color='error' />,
icon: <DeleteIcon color={theme.palette.error.dark} />,
cy: 'provision-delete'
}
]

2
src/fireedge/src/client/containers/TestApi/ResponseForm.js
View File

@ -23,7 +23,7 @@ const ResponseForm = ({
const command = { name, httpMethod, params }
const { url, options: { method, data } } = requestParams(dataForm, command)
RestClient[method](url, data).then(({ id, ...res }) => {
RestClient[method.toLowerCase()](url, data).then(({ id, ...res }) => {
id === 401 && console.log('ERROR')
id === 200 && handleChangeResponse(JSON.stringify(res, null, '\t'))
})

6
src/fireedge/src/client/router/dev.js
View File

@ -1,5 +1,5 @@
import { Ballot as BallotIcon, Computer as VmIcon } from '@material-ui/icons'
import loadable from '@loadable/component'
import { Code as DevIcon } from 'iconoir-react'
const TestApi = loadable(() => import('client/containers/TestApi'), { ssr: false })
const WebConsole = loadable(() => import('client/containers/WebConsole'), { ssr: false })
@ -16,7 +16,7 @@ export const ENDPOINTS = [
path: PATH.TEST_API,
devMode: true,
sidebar: true,
icon: BallotIcon,
icon: DevIcon,
Component: TestApi
},
{
@ -24,7 +24,7 @@ export const ENDPOINTS = [
path: PATH.WEB_CONSOLE,
devMode: true,
sidebar: true,
icon: BallotIcon,
icon: DevIcon,
Component: WebConsole
}
]