Skip to content

Commit bcb5517

Browse files
dechdevdechdev
authored
Merge pull request #141 from kaleido-io/ui-tweaks
[ui-tweaks] network map, json viewer, status chips
2 parents 946b117 + ae66096 commit bcb5517

File tree

15 files changed

+171
-40
lines changed

15 files changed

+171
-40
lines changed

‎src/components/Accordions/BlockchainEventAccordion.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
1010
import { IBlockchainEvent, IDataWithHeader } from '../../interfaces';
1111
import { getFFTime } from '../../utils';
1212
import { HashPopover } from '../Popovers/HashPopover';
13+
import { FFJsonViewer } from '../Viewers/FFJsonViewer';
1314
import { FFAccordionHeader } from './FFAccordionHeader';
1415
import { FFAccordionText } from './FFAccordionText';
1516

@@ -75,6 +76,20 @@ export const BlockchainEventAccordion: React.FC<Props> = ({
7576
</Grid>
7677
))}
7778
</Grid>
79+
{be.info && (
80+
<Grid container item direction="column" pb={2}>
81+
<FFAccordionText color="primary" text={t('info')} padding />
82+
<FFJsonViewer json={be.info} />
83+
</Grid>
84+
)}
85+
{be.output && (
86+
<Grid container item direction="column">
87+
<FFAccordionText color="primary" text={t('output')} padding />
88+
<Grid item>
89+
<FFJsonViewer json={be.output} />
90+
</Grid>
91+
</Grid>
92+
)}
7893
</AccordionDetails>
7994
</Accordion>
8095
);

‎src/components/Accordions/MessageAccordion.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,21 @@ export const MessageAccordion: React.FC<Props> = ({
7171
}
7272
rightContent={
7373
message.state && (
74+
// TODO: Fix when https://github.com/hyperledger/firefly/issues/628 is resolved
7475
<Chip
75-
label={message.state?.toLocaleUpperCase()}
76-
sx={{ backgroundColor: MsgStateColorMap[message.state] }}
76+
label={
77+
message.state?.toLocaleUpperCase() === 'PENDING'
78+
? 'CONFIRMED'
79+
: message.state?.toLocaleUpperCase()
80+
}
81+
sx={{
82+
backgroundColor:
83+
MsgStateColorMap[
84+
message.state === 'pending'
85+
? 'confirmed'
86+
: message.state
87+
],
88+
}}
7789
></Chip>
7890
)
7991
}

‎src/components/Accordions/OperationAccordion.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,19 @@ export const OperationAccordion: React.FC<Props> = ({ op, isOpen = false }) => {
5757
/>
5858
}
5959
rightContent={
60+
// TODO: Fix when https://github.com/hyperledger/firefly/issues/628 is resolved
6061
<Chip
61-
label={op.status?.toLocaleUpperCase()}
62-
sx={{ backgroundColor: OpStatusColorMap[op.status] }}
62+
label={
63+
op.status?.toLocaleUpperCase() === 'PENDING'
64+
? 'SUCCEEDED'
65+
: op.status?.toLocaleUpperCase()
66+
}
67+
sx={{
68+
backgroundColor:
69+
OpStatusColorMap[
70+
op.status === 'Pending' ? 'Succeeded' : op.status
71+
],
72+
}}
6373
></Chip>
6474
}
6575
/>

‎src/components/Buttons/MsgButton.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import LaunchIcon from '@mui/icons-material/Launch';
2+
import { IconButton } from '@mui/material';
3+
import { useNavigate } from 'react-router-dom';
4+
import { FF_NAV_PATHS } from '../../interfaces';
5+
import { FFColors } from '../../theme';
6+
7+
interface Props {
8+
ns: string;
9+
msgID: string;
10+
small?: boolean;
11+
}
12+
13+
export const MsgButton: React.FC<Props> = ({ ns, msgID, small = false }) => {
14+
const navigate = useNavigate();
15+
return (
16+
<IconButton
17+
size={small ? 'small' : undefined}
18+
sx={{ backgroundColor: FFColors.Purple }}
19+
onClick={() => navigate(FF_NAV_PATHS.offchainMessagesPath(ns, msgID))}
20+
>
21+
<LaunchIcon />
22+
</IconButton>
23+
);
24+
};

‎src/components/Lists/MessageList.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,19 @@ export const MessageList: React.FC<Props> = ({ message }) => {
7575
{
7676
label: t('status'),
7777
value: message && (
78+
// TODO: Fix when https://github.com/hyperledger/firefly/issues/628 is resolved
7879
<Chip
79-
label={message.state?.toLocaleUpperCase()}
80-
sx={{ backgroundColor: MsgStateColorMap[message.state] }}
80+
label={
81+
message.state?.toLocaleUpperCase() === 'PENDING'
82+
? 'CONFIRMED'
83+
: message.state?.toLocaleUpperCase()
84+
}
85+
sx={{
86+
backgroundColor:
87+
MsgStateColorMap[
88+
message.state === 'pending' ? 'confirmed' : message.state
89+
],
90+
}}
8191
></Chip>
8292
),
8393
},

‎src/components/Lists/OperationList.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,18 @@ export const OperationList: React.FC<Props> = ({ op, showTxLink = true }) => {
4949
{
5050
label: t('status'),
5151
value: op.status && (
52+
// TODO: Fix when https://github.com/hyperledger/firefly/issues/628 is resolved
5253
<Chip
53-
label={op.status?.toLocaleUpperCase()}
54+
label={
55+
op.status?.toLocaleUpperCase() === 'PENDING'
56+
? 'SUCCEEDED'
57+
: op.status?.toLocaleUpperCase()
58+
}
5459
sx={{
55-
backgroundColor: OpStatusColorMap[op.status],
60+
backgroundColor:
61+
OpStatusColorMap[
62+
op.status === 'Pending' ? 'Succeeded' : op.status
63+
],
5664
}}
5765
></Chip>
5866
),

‎src/components/Lists/TransferList.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ApplicationContext } from '../../contexts/ApplicationContext';
55
import { ITokenTransfer, ITxStatus, TxStatusColorMap } from '../../interfaces';
66
import { IDataListItem } from '../../interfaces/lists';
77
import { FFCopyButton } from '../Buttons/CopyButton';
8+
import { MsgButton } from '../Buttons/MsgButton';
89
import { PoolButton } from '../Buttons/PoolButton';
910
import { TxButton } from '../Buttons/TxButton';
1011
import { FFCircleLoader } from '../Loaders/FFCircleLoader';
@@ -97,7 +98,10 @@ export const TransferList: React.FC<Props> = ({
9798
<FFListText color="secondary" text={t('noMessageInTransfer')} />
9899
),
99100
button: transfer.message ? (
100-
<FFCopyButton value={transfer.message} />
101+
<>
102+
<MsgButton ns={selectedNamespace} msgID={transfer.message} />
103+
<FFCopyButton value={transfer.message} />
104+
</>
101105
) : undefined,
102106
},
103107
{

‎src/components/NetworkMap/NetworkMap.tsx‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,36 @@ export const NetworkMap: React.FC<Props> = ({ size }) => {
202202
);
203203
};
204204

205+
const getRepulsivity = (numOrgs: number) => {
206+
switch (numOrgs) {
207+
case 2:
208+
return size === 'small' ? 50 : 80;
209+
case 3:
210+
return size === 'small' ? 34 : 170;
211+
case 4:
212+
return size === 'small' ? 10 : 28;
213+
case 5:
214+
return size === 'small' ? 17 : 60;
215+
default:
216+
return 50;
217+
}
218+
};
219+
220+
const getCenteringStrength = (numOrgs: number) => {
221+
switch (numOrgs) {
222+
case 2:
223+
return 1;
224+
case 3:
225+
return size === 'small' ? 1 : 1;
226+
case 4:
227+
return size === 'small' ? 1 : 1;
228+
case 5:
229+
return size === 'small' ? 1 : 1;
230+
default:
231+
return 1;
232+
}
233+
};
234+
205235
const content =
206236
!orgs || !nodes ? (
207237
<Grid container justifyContent="center" alignItems="center">
@@ -214,9 +244,8 @@ export const NetworkMap: React.FC<Props> = ({ size }) => {
214244
linkDistance={(e: any) => {
215245
return e.distance;
216246
}}
217-
distanceMax={size === 'small' ? 10 : 20}
218-
centeringStrength={0.4}
219-
repulsivity={size === 'small' ? 50 : 80}
247+
centeringStrength={getCenteringStrength(orgs.length)}
248+
repulsivity={getRepulsivity(orgs.length)}
220249
nodeSize={(n: any) => {
221250
return n.size;
222251
}}

‎src/components/Tables/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export const DataTable: React.FC<Props> = ({
164164
dataTotal !== undefined && (
165165
<TablePagination
166166
component="div"
167-
count={-1}
167+
count={dataTotal}
168168
rowsPerPage={rowsPerPage ?? 5}
169169
page={currentPage ?? 0}
170170
onPageChange={handleChangePage}

‎src/components/Viewers/FFJsonViewer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const FFJsonViewer: React.FC<Props> = ({ color, json }) => {
1616
theme={'pop'}
1717
style={{
1818
backgroundColor: color ?? themeOptions.palette?.background?.paper,
19+
fontSize: '12px',
1920
}}
2021
collapseStringsAfterLength={40}
2122
enableClipboard={handleCopy}

0 commit comments

Comments
 (0)