diff --git a/react-ui/src/components/devices/view/device.scss b/react-ui/src/components/devices/view/device.scss
index bce275265104f8639d29cc520018f4b7edf8c19e..7358cdcf45977dd521e27fbde902cee1b3fd12cd 100755
--- a/react-ui/src/components/devices/view/device.scss
+++ b/react-ui/src/components/devices/view/device.scss
@@ -6,7 +6,7 @@
}
& tr:hover > td {
- background-color: map-get($theme-colors, "primary::hover");
+ background-color: map-get($theme-colors, "primary-hover");
cursor: pointer;
}
diff --git a/react-ui/src/components/devices/view/device.view.tsx b/react-ui/src/components/devices/view/device.view.tsx
index 636991ff1e37192837f6b68b73bf0a6763ad894e..290697ac6a4f584bf77e62a8c7a564cf342dd251 100755
--- a/react-ui/src/components/devices/view/device.view.tsx
+++ b/react-ui/src/components/devices/view/device.view.tsx
@@ -1,4 +1,4 @@
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCircleInfo, faPlus, faServer, faSliders } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GridLayout } from '@layout/grid.layout/grid.layout';
import { GridBox } from '@shared/components/box/gridBox.view';
@@ -20,7 +20,7 @@ const DeviceView = () => {
<GridLayout>
<>
<div key="device-list">
- <GridBox title={t("device.title")}>
+ <GridBox title={t("device.box.list.title")} title_icon={faServer}>
<Row className="mb-3 align-items-center">
<Col xs={12} md={6} lg={8}>
<Form.Group controlId='device.search'>
@@ -28,7 +28,7 @@ const DeviceView = () => {
</Form.Group>
</Col>
<Col xs={12} md={6} lg={4} className='mt-3 mt-md-0 text-md-end'>
- <Button variant='primary'>
+ <Button variant='primary::button' className='btn-primary-button'>
<FontAwesomeIcon icon={faPlus} className='me-2' />
{t('device.add_device_button')}
</Button>
@@ -43,7 +43,7 @@ const DeviceView = () => {
</div>
<div key="device-metadata">
- <GridBox title={t("device.title")}>
+ <GridBox title={t("device.box.information.title")} title_icon={faCircleInfo}>
<Row>
<Col xs={12} >
<DeviceListCollapsable search={searchRef.current?.value || ''} />
@@ -53,7 +53,7 @@ const DeviceView = () => {
</div>
<div key="device-details">
- <GridBox title={t('device.tabs.yang_model.title')}>
+ <GridBox title={t('device.box.configuration.title')} title_icon={faSliders}>
<Row>
<Col xs={12}>
{jsonYang && <JsonViewer json={jsonYang} />}
diff --git a/react-ui/src/i18n/locales/en/translations.json b/react-ui/src/i18n/locales/en/translations.json
index e23061744f900487acb671353fd5cbfaed64eb4e..92fb59d85436770697e8f0640d0df683723c67ea 100755
--- a/react-ui/src/i18n/locales/en/translations.json
+++ b/react-ui/src/i18n/locales/en/translations.json
@@ -11,6 +11,9 @@
},
"menu_item": {
"logout": "Logout"
+ },
+ "box": {
+ "lastUpdate": "Last updated {{seconds}} seconds ago"
}
},
"json_viewer": {
@@ -29,7 +32,17 @@
}
},
"device": {
- "title": "Device list",
+ "box": {
+ "list": {
+ "title": "Devices"
+ },
+ "information": {
+ "title": "Information"
+ },
+ "configuration": {
+ "title": "Configuration"
+ }
+ },
"table": {
"header": {
"name": "Name",
@@ -45,15 +58,7 @@
"search": {
"placeholder": "Search"
},
- "add_device_button": "Add device",
- "tabs": {
- "yang_model": {
- "title": "YANG Model"
- }
- },
- "box": {
- "lastUpdate": "Last updated {{seconds}} seconds ago"
- }
+ "add_device_button": "Add device"
},
"protected": {
"link": {
diff --git a/react-ui/src/shared/components/box/gridBox.view.tsx b/react-ui/src/shared/components/box/gridBox.view.tsx
index 77bed39130f36d9b5815f7256d642b448003e929..cc887610090525e4f714288173bce44ecd66cb5f 100644
--- a/react-ui/src/shared/components/box/gridBox.view.tsx
+++ b/react-ui/src/shared/components/box/gridBox.view.tsx
@@ -1,4 +1,4 @@
-import { faGripVertical } from "@fortawesome/free-solid-svg-icons"
+import { faGripVertical, IconDefinition } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import UpdateIndicator from "@layout/grid.layout/update-inidicator.layout/update-indicator.layout"
import { Category, CategoryType } from "@shared/types/category.type"
@@ -7,12 +7,13 @@ import './gridBox.view.scss'
interface GridBoxProps {
title: string,
+ title_icon: IconDefinition,
children: React.ReactNode,
className?: string,
}
-export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = "" }) => {
+export const GridBox: React.FC<GridBoxProps> = ({ children, title, title_icon, className = "" }) => {
return (
<div className="grid-box h-100">
<Container fluid className={`c-box d-flex flex-column h-100 ${className}`}>
@@ -24,7 +25,8 @@ export const GridBox: React.FC<GridBoxProps> = ({ children, title, className = "
<FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
<Row className="mb-0">
<Col xs={12}>
- <h4 className='c-box-title'>{title}</h4>
+
+ <h4 className='c-box-title'><FontAwesomeIcon icon={title_icon} size="1x" className="me-2 text-primary" />{title}</h4>
</Col>
</Row>
</div>
diff --git a/react-ui/src/shared/components/json_viewer/view/json_viewer.scss b/react-ui/src/shared/components/json_viewer/view/json_viewer.scss
index 8a9a78ae5e06e26058c1be41ed3b5692fe751914..b971de526309f1b2f70c9d55c40fbfe2722ccde4 100755
--- a/react-ui/src/shared/components/json_viewer/view/json_viewer.scss
+++ b/react-ui/src/shared/components/json_viewer/view/json_viewer.scss
@@ -13,7 +13,7 @@
}
&:hover > td {
- background-color: map-get($theme-colors, "primary::hover") !important;
+ background-color: map-get($theme-colors, "primary-hover") !important;
}
&:hover .icons {
diff --git a/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx b/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx
index 68f0d609879c285ab654a87d751c471159adbcba..b2f409c17f6fd729cbf91e51c98e694c4f25351b 100755
--- a/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx
+++ b/react-ui/src/shared/components/json_viewer/view/json_viewer.view.tsx
@@ -29,7 +29,7 @@ export const JsonViewer = ({ json, options = { searchEnabled: true, editable: tr
path += parentKey + (parentKey === "" ? "" : "/")
if (Object.entries(innerJson).length === 0) {
- return <Skeleton count={3}></Skeleton>
+ return <tr><td><Skeleton count={3}></Skeleton></td></tr>
}
return Object.entries(innerJson).map(([key, child]): JSX.Element => {
diff --git a/react-ui/src/shared/layouts/grid.layout/grid.layout.scss b/react-ui/src/shared/layouts/grid.layout/grid.layout.scss
index 81ed130dd50c04a31a13391837bc6f1d4b2dd2e6..0bacb29b5645e1b22aa1b76fe287fd991759752c 100644
--- a/react-ui/src/shared/layouts/grid.layout/grid.layout.scss
+++ b/react-ui/src/shared/layouts/grid.layout/grid.layout.scss
@@ -20,8 +20,6 @@
}
.react-grid-item {
- transition: none !important;
-
&.resizing {
z-index: 1;
will-change: transform;
@@ -29,14 +27,11 @@
}
.react-grid-item {
- height: 100px;
- /* Hide resize handle by default */
.custom-resize-handle {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
- /* Show resize handle on container hover */
&:hover .custom-resize-handle {
opacity: 1;
}
@@ -65,14 +60,6 @@
}
}
-.react-grid-item {
- &.react-draggable-dragging {
- .drag-handle {
- cursor: grabbing;
- }
- }
-}
-
.react-grid-item.react-grid-placeholder {
background: lighten(map-get($theme-colors, primary), 10%) !important;
opacity: 0.2;
@@ -86,21 +73,6 @@
user-select: none;
}
-.react-grid-item {
- height: 100px;
- /* Hide resize handle by default */
- .react-resizable-handle-se {
- opacity: 0;
- transition: opacity 0.2s ease-in-out;
- }
-
- /* Show resize handle on container hover */
- &:hover .react-resizable-handle-se {
- opacity: 1;
- }
-}
-
-/* Style the resize handle */
.react-resizable-handle-se {
position: absolute;
right: 0;
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
index 52429031b69b6ef664707c5397f67153c04b08f8..6f255d331872410d7da1f9419894a857c8f8d706 100755
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
@@ -39,7 +39,7 @@ nav {
&.active {
color: map-get($theme-colors, "primary");
- background-color: map-get($theme-colors, "primary::hover");
+ background-color: map-get($theme-colors, "primary-button");
}
}
diff --git a/react-ui/src/shared/style/colors.scss b/react-ui/src/shared/style/colors.scss
index ce3c3cf90bf53a447a9f84b3fa9549beede92ab2..9ba6ce0c05ccb1239eaea2233733aa956ef42df7 100755
--- a/react-ui/src/shared/style/colors.scss
+++ b/react-ui/src/shared/style/colors.scss
@@ -1,6 +1,7 @@
$theme-colors: (
"primary": #b350e0,
- "primary::hover": #ddaff3af,
+ "primary-hover": #ddaff3af,
+ "primary-button": #ddaff3af,
"bg-primary": #ededed,
"danger": #ff0000,
"warning": #dbd116,