in src/core/DrawerItems.tsx [109:410]
export default ({
activeRegion,
setActiveLedger,
showInactive,
forceRefresh,
setForceRefresh,
activeLedger,
}: {
activeRegion: string;
setActiveLedger: (ledger: string) => void;
showInactive: boolean;
forceRefresh: boolean;
setForceRefresh: (refresh: boolean) => void;
activeLedger: string;
}) => {
const classes = useStyles();
const theme = useTheme();
const confirm = useConfirm();
const [ledgers, setLedgers] = React.useState<LedgerInfo[]>([]);
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const [dialogOpen, setDialogOpen] = React.useState(false);
const ledgerNameRef = React.createRef<HTMLInputElement>();
const ledgerTagsRef = React.createRef<HTMLInputElement>();
const [deletionProtection, setDeletionProtection] = React.useState(false);
const handleDialogOpen = () => setDialogOpen(true);
const handleDialogClose = () => setDialogOpen(false);
const handleDeletionProtectionChange = (
event: React.ChangeEvent<HTMLInputElement>
) => setDeletionProtection(event.target.checked);
const handleDeleteLedger = () => {
activeLedger
? confirm({
title: "Delete Ledger",
description: `This will permanently delete ledger ${activeLedger}.`,
})
.then(() =>
deleteLedger(activeLedger, enqueueSnackbar).then(() =>
setForceRefresh(true)
)
)
.catch(() => console.log("Deletion cancelled."))
: enqueueSnackbar("Nothing to delete", { variant: "info" });
};
React.useEffect(() => {
AWS.config.update({ region: activeRegion });
const fetchLedgers = async () => {
const ledgers = await listLedgers(enqueueSnackbar);
const ledgerInfos = await Promise.all(
ledgers.map(async (ledger) => {
return await getLedgerMetaData(ledger, enqueueSnackbar);
})
);
setLedgers(ledgerInfos);
};
fetchLedgers().then(() => {
if (forceRefresh)
enqueueSnackbar("Ledgers updated.", { variant: "success" });
});
setForceRefresh(false);
}, [forceRefresh, activeRegion]);
function tablesOf(ledger: LedgerInfo) {
const tables = ledger.tables;
if (tables) {
return tables
.filter((t) => showInactive || t.status == "ACTIVE")
.map((t) => tableTreeItem(t));
}
return <></>;
}
const ledgerTreeItem = (ledger: LedgerInfo): JSX.Element => {
const key = "ledger-" + ledger.Name;
return (
<StyledTreeItem
key={key}
nodeId={key}
label={ledger.Name}
className={
ledger.State === "CREATING"
? classes.ledgerLabelSecondary
: classes.ledgerLabel
}
>
{tablesOf(ledger)}
</StyledTreeItem>
);
};
const handleCreateLedger = () => {
const currentLedgerName = ledgerNameRef.current;
if (!currentLedgerName || !currentLedgerName.value) {
enqueueSnackbar("Ledger name is required.", { variant: "error" });
return;
}
let tags: { [key: string]: string } = {};
try {
if (ledgerTagsRef.current) {
ledgerTagsRef.current.value.split(" ").forEach((val) => {
const key = val.split("=")[0];
const value = val.split("=")[1];
if ((key && !value) || (!key && value)) throw BreakException;
tags[key] = value;
});
}
} catch (e) {
if (e === BreakException) {
enqueueSnackbar("Check supplied tags", { variant: "error" });
return;
}
}
createLedger(
currentLedgerName.value,
deletionProtection,
tags,
enqueueSnackbar
);
setDialogOpen(false);
};
const tableTreeItem = (t: TableInfo): JSX.Element => {
const isActive = t.status == "ACTIVE";
return (
<StyledTreeItem
key={t.tableId}
nodeId={t.tableId}
label={t.name}
className={isActive ? classes.noStrikeThrough : classes.strikeThrough}
icon={<ListAltIcon color={isActive ? "inherit" : "disabled"} />}
onClick={() => {
const editor = ace.edit("aceEditor1");
const currentValue = editor.getValue();
editor.setValue(
`${currentValue ? `${currentValue}\n` : ""}select * from ${t.name}`
);
}}
>
{t.indexes.map((i) => (
<StyledTreeItem
key={i.indexId}
nodeId={i.indexId}
label={i.expr}
icon={<KeyboardArrowRightIcon />}
/>
))}
</StyledTreeItem>
);
};
function onRefresh() {
return new Promise((resolve) => {
setForceRefresh(true);
setTimeout(resolve, 1000);
});
}
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
return (
<Box>
<Dialog
fullScreen={fullScreen}
open={dialogOpen}
onClose={handleDialogClose}
aria-labelledby={"Form-dialog-title"}
>
<DialogTitle id={"Form-dialog-title"}>Create Ledger</DialogTitle>
<DialogContent>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1c-content"
id="panel1c-header"
>
<div className={classes.twoThirdColumn}>
<Typography className={classes.heading}>
Ledger details
</Typography>
</div>
</AccordionSummary>
<AccordionDetails>
<div className={classes.twoThirdColumn}>
<FormControl fullWidth>
<TextField
autoFocus
required
margin="dense"
id="ledgerName"
label="Name"
type="text"
fullWidth
style={{ paddingRight: "15px" }}
inputRef={ledgerNameRef}
/>
<TextField
margin="dense"
id="ledgerTags"
label="Tags"
type="text"
fullWidth
style={{ paddingRight: "15px" }}
inputRef={ledgerTagsRef}
/>
<FormControlLabel
control={
<Checkbox
checked={deletionProtection}
onChange={handleDeletionProtectionChange}
name={"deletionProtection"}
color={"primary"}
/>
}
label={"Deletion Protection"}
/>
</FormControl>
</div>
<div className={classes.helper}>
<Typography variant="caption">
Creates ledger.
<br />
<Divider />
Name: name of the ledger.
<br />
Deletion Protection: Protection against accidental ledger
deletion.
<br />
Tags: space separated 'key=value' pair.
<br />
</Typography>
</div>
</AccordionDetails>
</Accordion>
</DialogContent>
<DialogActions>
<Button size="small" onClick={handleDialogClose}>
Cancel
</Button>
<Button size="small" color="primary" onClick={handleCreateLedger}>
Create
</Button>
</DialogActions>
</Dialog>
<TreeView
className={classes.treeView}
defaultCollapseIcon={<IndeterminateCheckBoxOutlinedIcon />}
defaultExpandIcon={<AddBoxOutlinedIcon />}
defaultEndIcon={<CheckBoxOutlineBlankIcon />}
onNodeSelect={(event: object, value: string) => {
if (value.startsWith("ledger-")) {
const ledger = value.substring(7);
setActiveLedger(ledger);
const ledgerSummary = ledgers.find((l) => l.Name === ledger)!;
getLedgerMetaData(ledgerSummary).then((l) =>
addCompleterForUserTables(
(l.tables || [])
.filter((t) => t.status == "ACTIVE")
.map((t) => t.name)
)
);
}
}}
>
{ledgers.map((ledger) => ledgerTreeItem(ledger))}
</TreeView>
<Toolbar />
<Box className={classes.stickToBottom}>
<Divider light={true} />
<Tooltip title="Create ledger">
<IconButton
size={"medium"}
aria-label="create"
onClick={handleDialogOpen}
>
{" "}
<AddIcon />{" "}
</IconButton>
</Tooltip>
<Tooltip title="Delete current ledger">
<IconButton
size={"medium"}
aria-label="delete"
onClick={handleDeleteLedger}
>
{" "}
<DeleteIcon />{" "}
</IconButton>
</Tooltip>
<Tooltip title="Refresh ledgers">
<IconButton
size={"medium"}
aria-label="refresh"
onClick={() => setForceRefresh(true)}
>
{" "}
<RefreshIcon />{" "}
</IconButton>
</Tooltip>
</Box>
</Box>
);
};