You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ja...@apache.org on 2021/12/22 06:40:03 UTC
[pinot] branch master updated: set keys; 1 modal per click; better json in diff viewer (#7944)
This is an automated email from the ASF dual-hosted git repository.
jackie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/pinot.git
The following commit(s) were added to refs/heads/master by this push:
new afd5115 set keys; 1 modal per click; better json in diff viewer (#7944)
afd5115 is described below
commit afd51159e1d16295ce5be83d1da86b863e381dc8
Author: Johan Adami <47...@users.noreply.github.com>
AuthorDate: Wed Dec 22 01:39:40 2021 -0500
set keys; 1 modal per click; better json in diff viewer (#7944)
- split the json with newlines so the diff viewer knows how to split it
- use different react state for each modal
- give each component a key. this might be overkill, but hopefully helps react render better
---
.../src/main/resources/app/components/Table.tsx | 31 +++++++++++++++-------
.../src/main/resources/app/utils/Utils.tsx | 12 ++++-----
2 files changed, 27 insertions(+), 16 deletions(-)
diff --git a/pinot-controller/src/main/resources/app/components/Table.tsx b/pinot-controller/src/main/resources/app/components/Table.tsx
index 6809c6e..708744b 100644
--- a/pinot-controller/src/main/resources/app/components/Table.tsx
+++ b/pinot-controller/src/main/resources/app/components/Table.tsx
@@ -377,20 +377,21 @@ export default function CustomizedTables({
return (<span>{str.toString()}</span>);
};
- const [isModalOpen, setModalOpen] = React.useState(false);
- const handleModalOpen = () => setModalOpen(true);
- const handleModalClose = () => setModalOpen(false);
-
- const makeCell = (cellData) => {
+ const makeCell = (cellData, idx) => {
if (Object.prototype.toString.call(cellData) === '[object Object]') {
if (_.has(cellData, 'component') && cellData.component) {
+ const [isModalOpen, setModalOpen] = React.useState(false);
+ const handleModalOpen = () => setModalOpen(true);
+ const handleModalClose = () => setModalOpen(false);
+
let cell = (styleCell(cellData.value))
let statusModal = (
<Dialog
- maxWidth="xl"
+ key={idx}
onClose={handleModalClose}
open={isModalOpen}
- scroll="paper"
+ fullWidth={true}
+ maxWidth={'xl'}
>
{cellData.component}
</Dialog>
@@ -403,7 +404,12 @@ export default function CustomizedTables({
);
if (_.has(cellData, 'tooltip') && cellData.tooltip) {
cell = (
- <Tooltip title={cellData.tooltip} placement="top" arrow>
+ <Tooltip
+ key={idx}
+ title={cellData.tooltip}
+ placement="top"
+ arrow
+ >
{cell}
</Tooltip>
)
@@ -416,7 +422,12 @@ export default function CustomizedTables({
);
} else if (_.has(cellData, 'tooltip') && cellData.tooltip) {
return (
- <Tooltip title={cellData.tooltip} placement="top" arrow>
+ <Tooltip
+ key={idx}
+ title={cellData.tooltip}
+ placement="top"
+ arrow
+ >
{styleCell(cellData.value)}
</Tooltip>
);
@@ -511,7 +522,7 @@ export default function CustomizedTables({
className={isCellClickable ? classes.isCellClickable : (isSticky ? classes.isSticky : '')}
onClick={() => {cellClickCallback && cellClickCallback(cell);}}
>
- {makeCell(cell)}
+ {makeCell(cell, idx)}
</StyledTableCell>
);
})}
diff --git a/pinot-controller/src/main/resources/app/utils/Utils.tsx b/pinot-controller/src/main/resources/app/utils/Utils.tsx
index 20b42a7..0b1a556 100644
--- a/pinot-controller/src/main/resources/app/utils/Utils.tsx
+++ b/pinot-controller/src/main/resources/app/utils/Utils.tsx
@@ -70,10 +70,10 @@ const getSegmentStatus = (idealStateObj, externalViewObj) => {
if (idealSegmentCount !== externalSegmentCount) {
let segmentStatusComponent = (
<ReactDiffViewer
- oldValue={JSON.stringify(idealStateObj)}
- newValue={JSON.stringify(externalViewObj)}
+ oldValue={JSON.stringify(idealStateObj, null, 2)}
+ newValue={JSON.stringify(externalViewObj, null, 2)}
splitView={true}
- hideLineNumbers
+ showDiffOnly={true}
leftTitle={"Ideal State"}
rightTitle={"External View"}
compareMethod={DiffMethod.WORDS}
@@ -92,10 +92,10 @@ const getSegmentStatus = (idealStateObj, externalViewObj) => {
if (!_.isEqual(idealStateObj[segmentKey], externalViewObj[segmentKey])) {
let segmentStatusComponent = (
<ReactDiffViewer
- oldValue={JSON.stringify(idealStateObj)}
- newValue={JSON.stringify(externalViewObj)}
+ oldValue={JSON.stringify(idealStateObj, null, 2)}
+ newValue={JSON.stringify(externalViewObj, null, 2)}
splitView={true}
- hideLineNumbers
+ showDiffOnly={true}
leftTitle={"Ideal State"}
rightTitle={"External View"}
compareMethod={DiffMethod.WORDS}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org