Skip to content

Commit 1932f98

Browse files
ted-rossted-ross
authored
Flattened the main menu, removing the "Compose" sections. Improved t… (#69)
* Flattened the main menu, removing the "Compose" sections. Improved the breadcrumbs in the Backbone section. * Renamed "TLS" menu to "Certificates" * Incorporated the "Watch" pattern for the VAN list.
1 parent 74f2a3b commit 1932f98

14 files changed

Lines changed: 89 additions & 182 deletions

File tree

‎components/management-controller/src/api-user.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { IncomingForm } from 'formidable';
2323
import { ClientFromPool, queryWithContext } from './db.js';
2424
import { Log } from '@skupperx/modules/log'
2525
import { IsValidUuid, ValidateAndNormalizeFields, UniquifyName } from '@skupperx/modules/util'
26+
import { WatchNotify } from './watch-server.js';
2627

2728
const API_PREFIX = '/api/v1alpha1/';
2829

@@ -101,8 +102,9 @@ const createVan = async function(req, res) {
101102
await client.query("INSERT INTO NetworkCredentials (Name, MemberOf) VALUES ($1, $2)", [uniqueName, vanId]);
102103

103104
return vanId
104-
})
105+
});
105106

107+
await WatchNotify('ApplicationNetworks', vanId);
106108
returnStatus = 201;
107109
res.status(returnStatus).json({id: vanId});
108110
} catch (error) {
@@ -227,6 +229,7 @@ const readVan = async function(req, res) {
227229
})
228230

229231
if (result.rowCount == 1) {
232+
res._watch = [{table: 'ApplicationNetworks', id: vid}];
230233
res.status(returnStatus).json(result.rows[0]);
231234
} else {
232235
returnStatus = 400;
@@ -301,6 +304,7 @@ const listVans = async function(req, res) {
301304
return await client.query("SELECT Id, Name, LifeCycle, Failure, StartTime, EndTime, DeleteDelay, NetworkType, Connected FROM ApplicationNetworks WHERE Backbone = $1", [bid])
302305
})
303306

307+
res._watch = [{table: 'ApplicationNetworks'}];
304308
res.status(returnStatus).json(result.rows);
305309
} catch (error) {
306310
returnStatus = 500
@@ -322,6 +326,7 @@ const listAllVans = async function(req, res) {
322326
"FROM ApplicationNetworks " +
323327
"JOIN Backbones ON Backbones.Id = Backbone")
324328
})
329+
res._watch = [{table: 'ApplicationNetworks'}];
325330
res.status(returnStatus).json(result.rows);
326331
} catch (error) {
327332
returnStatus = 500
@@ -393,7 +398,8 @@ const deleteVan = async function(req, res) {
393398
returnStatus = 400;
394399
throw new Error('Cannot delete application network because is still has members');
395400
}
396-
})
401+
});
402+
await WatchNotify('ApplicationNetworks', vid);
397403
res.status(result.status).send(result.message);
398404
} catch (error) {
399405
// Only set 500 if returnStatus is still at default (204), preserving specific error codes

‎console/src/App.js‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
33
import AppHeader from './components/Header/Header';
44
import Navigation from './components/Navigation/Navigation';
55
import Dashboard from './pages/Dashboard/Dashboard';
6-
import Backbones from './pages/Network/Backbones/Backbones';
7-
import BackboneContext from './pages/Network/Backbones/BackboneContext';
8-
import BackboneDetail from './pages/Network/Backbones/BackboneDetail';
9-
import SiteDetail from './pages/Network/Backbones/SiteDetail';
10-
import VANs from './pages/Network/VANs/VANs';
11-
import TLS from './pages/Network/TLS/TLS';
12-
import Library from './pages/Compose/Library/Library';
13-
import Applications from './pages/Compose/Applications/Applications';
6+
import Backbones from './pages/Backbones/Backbones';
7+
import BackboneContext from './pages/Backbones/BackboneContext';
8+
import BackboneDetail from './pages/Backbones/BackboneDetail';
9+
import SiteDetail from './pages/Backbones/SiteDetail';
10+
import VANs from './pages/VANs/VANs';
11+
import TLS from './pages/TLS/TLS';
1412

1513
function App() {
1614
const [isSideNavExpanded] = useState(true);
@@ -24,15 +22,13 @@ function App() {
2422
<main className="main-content">
2523
<Routes>
2624
<Route path="/" element={<Dashboard />} />
27-
<Route path="/network/backbones" element={<Backbones />} />
28-
<Route path="/network/backbones/:backboneId" element={<BackboneContext />}>
25+
<Route path="/backbones" element={<Backbones />} />
26+
<Route path="/backbones/:backboneId" element={<BackboneContext />}>
2927
<Route index element={<BackboneDetail />} />
3028
<Route path="sites/:siteId" element={<SiteDetail />} />
3129
</Route>
32-
<Route path="/network/vans" element={<VANs />} />
33-
<Route path="/network/tls" element={<TLS />} />
34-
<Route path="/compose/library" element={<Library />} />
35-
<Route path="/compose/applications" element={<Applications />} />
30+
<Route path="/vans" element={<VANs />} />
31+
<Route path="/tls" element={<TLS />} />
3632
</Routes>
3733
</main>
3834
</div>

‎console/src/components/Navigation/Navigation.js‎

Lines changed: 21 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import {
44
SideNav,
55
SideNavItems,
66
SideNavLink,
7-
SideNavMenu,
8-
SideNavMenuItem,
97
} from '@carbon/react';
108
import {
119
Dashboard,
1210
Network_3,
13-
Application,
11+
VirtualPrivateCloud,
12+
Security,
1413
} from '@carbon/icons-react';
1514

1615
const Navigation = ({ isOpen }) => {
@@ -25,10 +24,6 @@ const Navigation = ({ isOpen }) => {
2524
return location.pathname === path;
2625
};
2726

28-
const isMenuActive = (basePath) => {
29-
return location.pathname.startsWith(basePath);
30-
};
31-
3227
return (
3328
<SideNav
3429
aria-label="Side navigation"
@@ -44,49 +39,29 @@ const Navigation = ({ isOpen }) => {
4439
Dashboard
4540
</SideNavLink>
4641

47-
<SideNavMenu
42+
<SideNavLink
4843
renderIcon={Network_3}
49-
title="Network"
50-
defaultExpanded={isMenuActive('/network')}
44+
onClick={() => handleNavigation('/backbones')}
45+
isActive={isActive('/backbones')}
46+
>
47+
Backbones
48+
</SideNavLink>
49+
50+
<SideNavLink
51+
renderIcon={VirtualPrivateCloud}
52+
onClick={() => handleNavigation('/vans')}
53+
isActive={isActive('/vans')}
5154
>
52-
<SideNavMenuItem
53-
onClick={() => handleNavigation('/network/backbones')}
54-
isActive={isActive('/network/backbones')}
55-
>
56-
Backbones
57-
</SideNavMenuItem>
58-
<SideNavMenuItem
59-
onClick={() => handleNavigation('/network/vans')}
60-
isActive={isActive('/network/vans')}
61-
>
62-
VANs
63-
</SideNavMenuItem>
64-
<SideNavMenuItem
65-
onClick={() => handleNavigation('/network/tls')}
66-
isActive={isActive('/network/tls')}
67-
>
68-
TLS
69-
</SideNavMenuItem>
70-
</SideNavMenu>
55+
VANs
56+
</SideNavLink>
7157

72-
<SideNavMenu
73-
renderIcon={Application}
74-
title="Compose"
75-
defaultExpanded={isMenuActive('/compose')}
58+
<SideNavLink
59+
renderIcon={Security}
60+
onClick={() => handleNavigation('/tls')}
61+
isActive={isActive('/tls')}
7662
>
77-
<SideNavMenuItem
78-
onClick={() => handleNavigation('/compose/library')}
79-
isActive={isActive('/compose/library')}
80-
>
81-
Library
82-
</SideNavMenuItem>
83-
<SideNavMenuItem
84-
onClick={() => handleNavigation('/compose/applications')}
85-
isActive={isActive('/compose/applications')}
86-
>
87-
Applications
88-
</SideNavMenuItem>
89-
</SideNavMenu>
63+
Certificates
64+
</SideNavLink>
9065
</SideNavItems>
9166
</SideNav>
9267
);

console/src/pages/Network/Backbones/BackboneContext.js renamed to console/src/pages/Backbones/BackboneContext.js

File renamed without changes.

console/src/pages/Network/Backbones/BackboneDetail.js renamed to console/src/pages/Backbones/BackboneDetail.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@carbon/react';
1111
import BackboneListView from './BackboneListView';
1212
import BackboneNetworkView from './BackboneNetworkView';
13-
import { CancelWatch, CreateWatch } from '../../../tools/watch';
13+
import { CancelWatch, CreateWatch } from '../../tools/watch';
1414

1515
const BackboneDetail = () => {
1616
const { backboneId } = useParams();
@@ -45,9 +45,8 @@ const BackboneDetail = () => {
4545
<div className="page-container">
4646
<Breadcrumb>
4747
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
48-
<BreadcrumbItem href="/network/backbones">Network</BreadcrumbItem>
49-
<BreadcrumbItem href="/network/backbones">Backbones</BreadcrumbItem>
50-
<BreadcrumbItem href={`/network/backbones/${backboneId}`} isCurrentPage>
48+
<BreadcrumbItem href="/backbones">Backbones</BreadcrumbItem>
49+
<BreadcrumbItem href={`/backbones/${backboneId}`} isCurrentPage>
5150
{backboneName || backboneId}
5251
</BreadcrumbItem>
5352
</Breadcrumb>

console/src/pages/Network/Backbones/BackboneListView.js renamed to console/src/pages/Backbones/BackboneListView.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const BackboneListView = ({
142142
};
143143

144144
const handleRowClick = (siteId) => {
145-
navigate(`/network/backbones/${backboneId}/sites/${siteId}`);
145+
navigate(`/backbones/${backboneId}/sites/${siteId}`);
146146
};
147147

148148
const getStatusValue = (site) => {

console/src/pages/Network/Backbones/BackboneNetworkView.js renamed to console/src/pages/Backbones/BackboneNetworkView.js

File renamed without changes.

console/src/pages/Network/Backbones/Backbones.js renamed to console/src/pages/Backbones/Backbones.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import {
2222
IconButton,
2323
} from '@carbon/react';
2424
import { Add, TrashCan } from '@carbon/icons-react';
25-
import OwnerGroupSelect from '../../../components/OwnerGroupSelect/OwnerGroupSelect';
26-
import { CancelWatch, CreateWatch } from '../../../tools/watch';
25+
import OwnerGroupSelect from '../../components/OwnerGroupSelect/OwnerGroupSelect';
26+
import { CancelWatch, CreateWatch } from '../../tools/watch';
2727

2828
const Backbones = () => {
2929
const navigate = useNavigate();
@@ -177,8 +177,7 @@ const Backbones = () => {
177177
<div className="page-container">
178178
<Breadcrumb>
179179
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
180-
<BreadcrumbItem href="/network/backbones">Network</BreadcrumbItem>
181-
<BreadcrumbItem href="/network/backbones" isCurrentPage>
180+
<BreadcrumbItem href="/backbones" isCurrentPage>
182181
Backbones
183182
</BreadcrumbItem>
184183
</Breadcrumb>
@@ -258,7 +257,7 @@ const Backbones = () => {
258257
<TableRow
259258
{...getRowProps({ row })}
260259
key={row.id}
261-
onClick={() => navigate(`/network/backbones/${row.id}`)}
260+
onClick={() => navigate(`/backbones/${row.id}`)}
262261
style={{ cursor: 'pointer' }}
263262
>
264263
{row.cells.map((cell) => {

console/src/pages/Network/Backbones/SiteDeployment.js renamed to console/src/pages/Backbones/SiteDeployment.js

File renamed without changes.

console/src/pages/Network/Backbones/SiteDetail.js renamed to console/src/pages/Backbones/SiteDetail.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ import {
2727
IconButton
2828
} from '@carbon/react';
2929
import { ArrowLeft, Add, TrashCan, Edit } from '@carbon/icons-react';
30-
import { CancelWatch, CreateWatch } from '../../../tools/watch';
30+
import { CancelWatch, CreateWatch } from '../../tools/watch';
3131

3232
const SiteDetail = () => {
3333
const { backboneId, siteId } = useParams();
3434
const navigate = useNavigate();
35-
const { backboneOwnerGroup = '' } = useOutletContext() || {};
35+
const { backboneName = '', backboneOwnerGroup = '' } = useOutletContext() || {};
3636
const [site, setSite] = useState(null);
3737
const [loading, setLoading] = useState(true);
3838
const [error, setError] = useState(null);
@@ -502,12 +502,13 @@ const SiteDetail = () => {
502502
<div className="page-container">
503503
<Breadcrumb>
504504
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
505-
<BreadcrumbItem href="/network/backbones">Network</BreadcrumbItem>
506-
<BreadcrumbItem href="/network/backbones">Backbones</BreadcrumbItem>
507-
<BreadcrumbItem href={`/network/backbones/${backboneId}`}>
508-
Backbone Detail
505+
<BreadcrumbItem href="/backbones">Backbones</BreadcrumbItem>
506+
<BreadcrumbItem href={`/backbones/${backboneId}`}>
507+
{backboneName || backboneId}
508+
</BreadcrumbItem>
509+
<BreadcrumbItem isCurrentPage>
510+
{site?.name || siteId}
509511
</BreadcrumbItem>
510-
<BreadcrumbItem isCurrentPage>Site Detail</BreadcrumbItem>
511512
</Breadcrumb>
512513

513514
<div className="page-header">
@@ -517,7 +518,7 @@ const SiteDetail = () => {
517518
size="sm"
518519
renderIcon={ArrowLeft}
519520
iconDescription="Back to Backbone"
520-
onClick={() => navigate(`/network/backbones/${backboneId}`)}
521+
onClick={() => navigate(`/backbones/${backboneId}`)}
521522
hasIconOnly
522523
/>
523524
<h1>{site?.name || 'Site Detail'}</h1>

0 commit comments

Comments
 (0)