Skip to content

Commit

Permalink
Merge branch 'main' into operator-install-mode
Browse files Browse the repository at this point in the history
  • Loading branch information
dwertent authored Jan 15, 2025
2 parents 6744943 + 250ef08 commit 9a90cc7
Show file tree
Hide file tree
Showing 16 changed files with 507 additions and 20 deletions.
18 changes: 18 additions & 0 deletions ui/client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ui/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"dayjs": "^1.11.13",
"i18next": "^23.15.2",
"lucide-react": "^0.454.0",
"pretty-bytes": "^6.1.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-drag-drop-files": "^2.4.0",
Expand Down
6 changes: 4 additions & 2 deletions ui/client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright © 2024 Kaleido, Inc.
// Copyright © 2025 Kaleido, Inc.
//
// SPDX-License-Identifier: Apache-2.0
//
Expand Down Expand Up @@ -32,6 +32,7 @@ import { Submissions } from "./views/Submissions";
import { useEffect, useMemo, useState } from "react";
import { constants } from "./components/config";
import { AppRoutes } from "./routes";
import { Nodes } from "./views/Peers";

const queryClient = new QueryClient({
queryCache: new QueryCache({}),
Expand Down Expand Up @@ -96,7 +97,8 @@ function App() {
<Header />
<Routes>
<Route path={AppRoutes.Indexer} element={<Indexer />} />
<Route path={AppRoutes.Submissions} element={<Submissions />} />\
<Route path={AppRoutes.Submissions} element={<Submissions />} />
<Route path={AppRoutes.Peers} element={<Nodes />} />
<Route path={AppRoutes.Registry} element={<Registries />} />
<Route path="*" element={<Navigate to={AppRoutes.Indexer} replace />} />
</Routes>
Expand Down
14 changes: 10 additions & 4 deletions ui/client/src/components/EllapsedTime.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright © 2024 Kaleido, Inc.
// Copyright © 2025 Kaleido, Inc.
//
// SPDX-License-Identifier: Apache-2.0
//
Expand Down Expand Up @@ -26,9 +26,15 @@ daysjs.extend(relativeTime);

type Props = {
timestamp: string
icon?: JSX.Element
prefix?: string
};

export const EllapsedTime: React.FC<Props> = ({ timestamp }) => {
export const EllapsedTime: React.FC<Props> = ({
timestamp,
icon = <AccessTimeIcon />,
prefix
}) => {

const [displayValue, setDisplayValue] = useState<string>(daysjs(timestamp).fromNow());
const [timestampDialogOpen, setTimestampDialogOpen] = useState(false);
Expand All @@ -45,9 +51,9 @@ export const EllapsedTime: React.FC<Props> = ({ timestamp }) => {
<Button
sx={{ textTransform: 'none', fontWeight: '400' }}
size="small"
startIcon={<AccessTimeIcon />}
startIcon={icon}
onClick={() => setTimestampDialogOpen(true)}>
{displayValue}
{prefix} {displayValue}
</Button>
<TimestampDialog
timestamp={timestamp}
Expand Down
2 changes: 1 addition & 1 deletion ui/client/src/components/Event.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,4 @@ export const Event: React.FC<Props> = ({ event }) => {
</>
);

};
};
16 changes: 10 additions & 6 deletions ui/client/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright © 2024 Kaleido, Inc.
// Copyright © 2025 Kaleido, Inc.
//
// SPDX-License-Identifier: Apache-2.0
//
Expand Down Expand Up @@ -39,8 +39,10 @@ export const Header: React.FC = () => {
return 0;
} else if (path.startsWith(AppRoutes.Submissions)) {
return 1;
} else if (path.startsWith(AppRoutes.Peers)) {
return 2;
} else if (path.startsWith(AppRoutes.Registry)) {
return 2;
return 3;
}
return 0;
};
Expand All @@ -52,7 +54,8 @@ export const Header: React.FC = () => {
switch (tab) {
case 0: navigate(AppRoutes.Indexer); break;
case 1: navigate(AppRoutes.Submissions); break;
case 2: navigate(AppRoutes.Registry); break;
case 2: navigate(AppRoutes.Peers); break;
case 3: navigate(AppRoutes.Registry); break;
}
};

Expand All @@ -62,21 +65,22 @@ export const Header: React.FC = () => {
<Toolbar sx={{ backgroundColor: theme => theme.palette.background.paper }}>
<Box sx={{ width: '100%', maxWidth: '1270px', marginLeft: 'auto', marginRight: 'auto' }}>
<Grid2 container alignItems="center">
<Grid2 size={{ xs: 12, sm: 12, md: 4 }} textAlign={lessThanMedium ? 'center' : 'left'}>
<Grid2 size={{ xs: 12, sm: 12, md: 3 }} textAlign={lessThanMedium ? 'center' : 'left'}>
<img src={theme.palette.mode === 'dark' ?
'/ui/paladin-title-dark.svg' : '/ui/paladin-title-light.svg'
} style={{ marginTop: '7px' }} />
</Grid2>
<Grid2 size={{ xs: 12, sm: 12, md: 4 }} alignContent="center">
<Grid2 size={{ xs: 12, sm: 12, md: 6 }} alignContent="center">
<Tabs
TabIndicatorProps={{ style: { height: '4px' } }}
value={tab} onChange={(_event, value) => handleNavigation(value)} centered>
<Tab sx={{ textTransform: 'none' }} label={t('indexer')} />
<Tab sx={{ textTransform: 'none' }} label={t('submissions')} />
<Tab sx={{ textTransform: 'none' }} label={t('peers')} />
<Tab sx={{ textTransform: 'none' }} label={t('registry')} />
</Tabs>
</Grid2>
<Grid2 size={{ xs: 12, sm: 12, md: 4 }}>
<Grid2 size={{ xs: 12, sm: 12, md: 3 }}>
<Grid2 container justifyContent={lessThanMedium ? 'center' : 'right'} spacing={1} alignItems="center"
sx={{ padding: lessThanMedium ? '20px' : undefined }}>
{refreshRequired &&
Expand Down
117 changes: 117 additions & 0 deletions ui/client/src/components/TransportPeer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
// Copyright © 2025 Kaleido, Inc.
//
// SPDX-License-Identifier: Apache-2.0
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { Box, Grid2, Typography } from "@mui/material";
import { ITransportPeer } from "../interfaces";
import byteSize from "pretty-bytes";
import { t } from "i18next";
import UploadIcon from '@mui/icons-material/Upload';
import DownloadIcon from '@mui/icons-material/Download';
import { EllapsedTime } from "./EllapsedTime";


type Props = {
transportPeer: ITransportPeer
}

export const TransportPeer: React.FC<Props> = ({ transportPeer }) => {

return (
<Box
sx={{
backgroundColor: (theme) => theme.palette.background.paper,
marginBottom: "20px",
borderRadius: "4px"
}}
>


<Box sx={{ padding: '10px', paddingLeft: '20px', paddingRight: '20px', borderBottom: theme => `solid 1px ${theme.palette.divider}` }}>
<Grid2>
<Typography align="center" sx={{ fontWeight: 500 }} variant="h5" color="textPrimary">{transportPeer.name}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('transportSubtitle', { transport: transportPeer.outboundTransport, detail: transportPeer.outbound.endpoint })}</Typography>
</Grid2>
</Box>
<Box sx={{ padding: '10px', paddingLeft: '20px', paddingRight: '20px', borderBottom: theme => `solid 1px ${theme.palette.divider}` }}>
<Grid2 container justifyContent="space-evenly" spacing={5}>

<Grid2>
<Typography align="center" variant="h6" color="textPrimary">{transportPeer.stats.sentMsgs.toLocaleString()}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('messagesSent')}</Typography>
</Grid2>

<Grid2>
<Typography align="center" variant="h6" color="textPrimary">{transportPeer.stats.receivedMsgs.toLocaleString()}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('messagesReceived')}</Typography>
</Grid2>

<Grid2>
<Typography align="center" variant="h6" color="textPrimary">{byteSize(transportPeer.stats.sentBytes)}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('dataSent')}</Typography>
</Grid2>


<Grid2>
<Typography align="center" variant="h6" color="textPrimary">{byteSize(transportPeer.stats.receivedBytes)}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('dataReceived')}</Typography>
</Grid2>


<Grid2>
<Typography align="center" variant="h6" color="textPrimary">{transportPeer.stats.reliableHighestSent.toLocaleString()}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('reliableHighestSent')}</Typography>
</Grid2>


<Grid2>
<Typography align="center" variant="h6" color="textPrimary">{transportPeer.stats.reliableAckBase.toLocaleString()}</Typography>
<Typography align="center" variant="body2" color="textSecondary">{t('reliableHighestAck')}</Typography>
</Grid2>

</Grid2>
</Box>
<Box sx={{ padding: '10px' }}>
<Box sx={{ justifyContent: 'right', display: 'flex', gap: '50px' }}>
<EllapsedTime
timestamp={transportPeer.activated}
prefix={t('activated')}
/>

<EllapsedTime
timestamp={transportPeer.stats.lastSend}
icon={<UploadIcon />}
prefix={t('lastSend')}
/>


<EllapsedTime
timestamp={transportPeer.stats.lastReceive}
icon={<DownloadIcon />}

prefix={t('lastReceive')}
/>

</Box>



</Box>


</Box>
);

};
18 changes: 17 additions & 1 deletion ui/client/src/components/config.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
// Copyright © 2025 Kaleido, Inc.
//
// SPDX-License-Identifier: Apache-2.0
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

export const constants = {
COLOR_MODE_STORAGE_KEY: 'color-mode',
EVENT_QUERY_LIMIT: 10,
SUBMISSIONS_QUERY_LIMIT: 10,
REGISTRY_ENTRIES_QUERY_LIMIT: 100,
TRANSACTION_QUERY_LIMIT: 10,
UPDATE_FREQUENCY_MILLISECONDS: 3000,
UPDATE_FREQUENCY_MILLISECONDS: 5000,
ELLAPSED_TIME_AUTO_REFRESH_FREQUENCY_SECONDS: 60
};
Loading

0 comments on commit 9a90cc7

Please sign in to comment.