-
Notifications
You must be signed in to change notification settings - Fork 301
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17613 from kunalaswani/HPCC-28071
HPCC-28071 Add "Set" features to Dali Admin
- Loading branch information
Showing
6 changed files
with
369 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import * as React from "react"; | ||
import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react"; | ||
import { SizeMe } from "react-sizeme"; | ||
import { csvParse } from "d3-dsv"; | ||
import { DaliService } from "@hpcc-js/comms"; | ||
import { scopedLogger } from "@hpcc-js/util"; | ||
import { TableGroup } from "./forms/Groups"; | ||
import { useConfirm } from "../hooks/confirm"; | ||
import nlsHPCC from "src/nlsHPCC"; | ||
import { HolyGrail } from "../layouts/HolyGrail"; | ||
|
||
const logger = scopedLogger("src-react/components/SetLogicalFilePartAttr.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface SetLogicalFilePartAttrProps { | ||
} | ||
|
||
export const SetLogicalFilePartAttr: React.FunctionComponent<SetLogicalFilePartAttrProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [fileName, setFileName] = React.useState<string>(""); | ||
const [partNumber, setPartNumber] = React.useState<number>(1); | ||
const [attribute, setAttribute] = React.useState<string>(""); | ||
const [value, setValue] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.SetLogicalFilePartAttr({ FileName: fileName, PartNumber: partNumber, Attr: attribute, Value: value}).then(response => { | ||
const data = csvParse(response.Result); | ||
setColumns(data.columns.map((col, idx) => { | ||
return { | ||
key: col, | ||
name: col, | ||
fieldName: col, | ||
minWidth: 100 | ||
}; | ||
})); | ||
setItems(data); | ||
}).catch(err => logger.error(err)); | ||
}, [fileName, partNumber, attribute, value]) | ||
}); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
setDaliPromptConfirm(true); | ||
}, [setDaliPromptConfirm]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"FileName": { label: nlsHPCC.FileName, type: "string", value: fileName }, | ||
"PartNumber": { label: nlsHPCC.PartNumber, type: "number", value: partNumber }, | ||
"Attribute": { label: nlsHPCC.Attribute, type: "string", value: attribute }, | ||
"Value": { label: nlsHPCC.Value, type: "string", value: value }, | ||
}} onChange={(id, value) => { | ||
switch (id) { | ||
case "FileName": | ||
setFileName(value); | ||
break; | ||
case "PartNumber": | ||
setPartNumber(value); | ||
break; | ||
case "Attribute": | ||
setAttribute(value); | ||
break; | ||
case "Value": | ||
setValue(value); | ||
break; | ||
default: | ||
logger.debug(`${id}: ${value}`); | ||
} | ||
}} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>} | ||
main={<SizeMe monitorHeight>{({ size }) => { | ||
const height = `${size.height}px`; | ||
return <div style={{ position: "relative", width: "100%", height: "100%" }}> | ||
<div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}> | ||
<DetailsList compact={true} | ||
items={items} | ||
columns={columns} | ||
setKey="key" | ||
layoutMode={DetailsListLayoutMode.justified} | ||
selectionPreservedOnEmptyClick={true} | ||
styles={{ root: { height, minHeight: height, maxHeight: height } }} | ||
/> | ||
<DaliPromptConfirm /> | ||
</div> | ||
</div>; | ||
}}</SizeMe>} | ||
/>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import * as React from "react"; | ||
import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react"; | ||
import { SizeMe } from "react-sizeme"; | ||
import { csvParse } from "d3-dsv"; | ||
import { DaliService } from "@hpcc-js/comms"; | ||
import { scopedLogger } from "@hpcc-js/util"; | ||
import { TableGroup } from "./forms/Groups"; | ||
import { useConfirm } from "../hooks/confirm"; | ||
import nlsHPCC from "src/nlsHPCC"; | ||
import { HolyGrail } from "../layouts/HolyGrail"; | ||
|
||
const logger = scopedLogger("src-react/components/SetProtected.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface SetProtectedProps { | ||
} | ||
|
||
export const SetProtected: React.FunctionComponent<SetProtectedProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [fileName, setFileName] = React.useState<string>(""); | ||
const [callerId, setCallerId] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.SetProtected({ FileName: fileName, CallerId: callerId }).then(response => { | ||
const data = csvParse(response.Result); | ||
setColumns(data.columns.map((col, idx) => { | ||
return { | ||
key: col, | ||
name: col, | ||
fieldName: col, | ||
minWidth: 100 | ||
}; | ||
})); | ||
setItems(data); | ||
}).catch(err => logger.error(err)); | ||
}, [fileName, callerId]) | ||
}); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
setDaliPromptConfirm(true); | ||
}, [setDaliPromptConfirm]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"FileName": { label: nlsHPCC.FileName, type: "string", value: fileName }, | ||
"CallerId": { label: nlsHPCC.CallerID, type: "string", value: callerId }, | ||
}} onChange={(id, value) => { | ||
switch (id) { | ||
case "FileName": | ||
setFileName(value); | ||
break; | ||
case "CallerId": | ||
setCallerId(value); | ||
break; | ||
default: | ||
logger.debug(`${id}: ${value}`); | ||
} | ||
}} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>} | ||
main={<SizeMe monitorHeight>{({ size }) => { | ||
const height = `${size.height}px`; | ||
return <div style={{ position: "relative", width: "100%", height: "100%" }}> | ||
<div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}> | ||
<DetailsList compact={true} | ||
items={items} | ||
columns={columns} | ||
setKey="key" | ||
layoutMode={DetailsListLayoutMode.justified} | ||
selectionPreservedOnEmptyClick={true} | ||
styles={{ root: { height, minHeight: height, maxHeight: height } }} | ||
/> | ||
<DaliPromptConfirm /> | ||
</div> | ||
</div>; | ||
}}</SizeMe>} | ||
/>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import * as React from "react"; | ||
import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react"; | ||
import { SizeMe } from "react-sizeme"; | ||
import { csvParse } from "d3-dsv"; | ||
import { DaliService } from "@hpcc-js/comms"; | ||
import { scopedLogger } from "@hpcc-js/util"; | ||
import { TableGroup } from "./forms/Groups"; | ||
import { useConfirm } from "../hooks/confirm"; | ||
import nlsHPCC from "src/nlsHPCC"; | ||
import { HolyGrail } from "../layouts/HolyGrail"; | ||
|
||
const logger = scopedLogger("src-react/components/SetUnprotected.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface SetUnprotectedProps { | ||
} | ||
|
||
export const SetUnprotected: React.FunctionComponent<SetUnprotectedProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [fileName, setFileName] = React.useState<string>(""); | ||
const [callerId, setCallerId] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.SetUnprotected({ FileName: fileName, CallerId: callerId }).then(response => { | ||
const data = csvParse(response.Result); | ||
setColumns(data.columns.map((col, idx) => { | ||
return { | ||
key: col, | ||
name: col, | ||
fieldName: col, | ||
minWidth: 100 | ||
}; | ||
})); | ||
setItems(data); | ||
}).catch(err => logger.error(err)); | ||
}, [fileName, callerId]) | ||
}); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
setDaliPromptConfirm(true); | ||
}, [setDaliPromptConfirm]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"FileName": { label: nlsHPCC.FileName, type: "string", value: fileName }, | ||
"CallerId": { label: nlsHPCC.CallerID, type: "string", value: callerId }, | ||
}} onChange={(id, value) => { | ||
switch (id) { | ||
case "FileName": | ||
setFileName(value); | ||
break; | ||
case "CallerId": | ||
setCallerId(value); | ||
break; | ||
default: | ||
logger.debug(`${id}: ${value}`); | ||
} | ||
}} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>} | ||
main={<SizeMe monitorHeight>{({ size }) => { | ||
const height = `${size.height}px`; | ||
return <div style={{ position: "relative", width: "100%", height: "100%" }}> | ||
<div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}> | ||
<DetailsList compact={true} | ||
items={items} | ||
columns={columns} | ||
setKey="key" | ||
layoutMode={DetailsListLayoutMode.justified} | ||
selectionPreservedOnEmptyClick={true} | ||
styles={{ root: { height, minHeight: height, maxHeight: height } }} | ||
/> | ||
<DaliPromptConfirm /> | ||
</div> | ||
</div>; | ||
}}</SizeMe>} | ||
/>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import * as React from "react"; | ||
import { DefaultButton, DetailsList, DetailsListLayoutMode, IColumn } from "@fluentui/react"; | ||
import { SizeMe } from "react-sizeme"; | ||
import { csvParse } from "d3-dsv"; | ||
import { DaliService } from "@hpcc-js/comms"; | ||
import { scopedLogger } from "@hpcc-js/util"; | ||
import { TableGroup } from "./forms/Groups"; | ||
import { useConfirm } from "../hooks/confirm"; | ||
import nlsHPCC from "src/nlsHPCC"; | ||
import { HolyGrail } from "../layouts/HolyGrail"; | ||
|
||
const logger = scopedLogger("src-react/components/SetValue.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface SetValueProps { | ||
} | ||
|
||
export const SetValue: React.FunctionComponent<SetValueProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [path, setPath] = React.useState<string>(""); | ||
const [value, setValue] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.SetValue({ Path: path, Value: value }).then(response => { | ||
const data = csvParse(response.Result); | ||
setColumns(data.columns.map((col, idx) => { | ||
return { | ||
key: col, | ||
name: col, | ||
fieldName: col, | ||
minWidth: 100 | ||
}; | ||
})); | ||
setItems(data); | ||
}).catch(err => logger.error(err)); | ||
}, [path, value]) | ||
}); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
setDaliPromptConfirm(true); | ||
}, [setDaliPromptConfirm]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"Path": { label: nlsHPCC.Path, type: "string", value: path }, | ||
"Value": { label: nlsHPCC.Value, type: "string", value: value }, | ||
}} onChange={(id, value) => { | ||
switch (id) { | ||
case "Path": | ||
setPath(value); | ||
break; | ||
case "Value": | ||
setValue(value); | ||
break; | ||
default: | ||
logger.debug(`${id}: ${value}`); | ||
} | ||
}} /><DefaultButton onClick={onSubmit} text={nlsHPCC.Submit} /></span>} | ||
main={<SizeMe monitorHeight>{({ size }) => { | ||
const height = `${size.height}px`; | ||
return <div style={{ position: "relative", width: "100%", height: "100%" }}> | ||
<div style={{ position: "absolute", width: "100%", height: `${size.height}px` }}> | ||
<DetailsList compact={true} | ||
items={items} | ||
columns={columns} | ||
setKey="key" | ||
layoutMode={DetailsListLayoutMode.justified} | ||
selectionPreservedOnEmptyClick={true} | ||
styles={{ root: { height, minHeight: height, maxHeight: height } }} | ||
/> | ||
<DaliPromptConfirm /> | ||
</div> | ||
</div>; | ||
}}</SizeMe>} | ||
/>; | ||
}; |
Oops, something went wrong.