-
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.
HPCC-28073 Additional service calls to be added to Dali Admin
Add and Delete functionality and some additional read functions added to Dali Admin UI. Signed-off-by: Kunal Aswani <[email protected]>
- Loading branch information
1 parent
df5d80c
commit b4bb7f0
Showing
7 changed files
with
395 additions
and
0 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
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/DaliAdd.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface DaliAddProps { | ||
} | ||
|
||
export const DaliAdd: React.FunctionComponent<DaliAddProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [path, setPath] = React.useState<string>(""); | ||
const [value, DaliAdd] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.Add({ 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": | ||
DaliAdd(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
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,64 @@ | ||
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 nlsHPCC from "src/nlsHPCC"; | ||
import { HolyGrail } from "../layouts/HolyGrail"; | ||
|
||
const logger = scopedLogger("src-react/components/DaliCount.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface CountRequestProps { | ||
|
||
} | ||
|
||
export const DaliCount: React.FunctionComponent<CountRequestProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [path, setPath] = React.useState<string>(""); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
myDaliService.Count({ Path: path }).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]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"Path": { label: nlsHPCC.Path, type: "string", value: path }, | ||
}} onChange={(id, value) => { | ||
setPath(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 } }} | ||
/> | ||
</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,73 @@ | ||
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/DaliDelete.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface DaliDeleteProps { | ||
} | ||
|
||
export const DaliDelete: React.FunctionComponent<DaliDeleteProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [path, setPath] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.Delete({ Path: path }).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]) | ||
}); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
setDaliPromptConfirm(true); | ||
}, [setDaliPromptConfirm]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"Path": { label: nlsHPCC.Path, type: "string", value: path }, | ||
}} onChange={(id, value) => { | ||
setPath(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,89 @@ | ||
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/DaliImport.tsx"); | ||
|
||
const myDaliService = new DaliService({ baseUrl: "" }); | ||
|
||
interface DaliImportProps { | ||
} | ||
|
||
export const DaliImport: React.FunctionComponent<DaliImportProps> = ({ | ||
|
||
}) => { | ||
|
||
const [columns, setColumns] = React.useState<IColumn[]>([]); | ||
const [items, setItems] = React.useState<any[]>([]); | ||
const [xml, setXml] = React.useState<string>(""); | ||
const [path, setPath] = React.useState<string>(""); | ||
const [add, setAdd] = React.useState<string>(""); | ||
|
||
const [DaliPromptConfirm, setDaliPromptConfirm] = useConfirm({ | ||
title: nlsHPCC.DaliAdmin, | ||
message: nlsHPCC.DaliPromptConfirm, | ||
onSubmit: React.useCallback(() => { | ||
myDaliService.Import({ XML: xml, Path: path, Add: false }).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)); | ||
}, [xml, path]) | ||
}); | ||
|
||
const onSubmit = React.useCallback(() => { | ||
setDaliPromptConfirm(true); | ||
}, [setDaliPromptConfirm]); | ||
|
||
return <HolyGrail | ||
header={<span><TableGroup fields={{ | ||
"XML": {label: nlsHPCC.XML, type: "string", value: xml}, | ||
"Path": { label: nlsHPCC.Path, type: "string", value: path }, | ||
"Add": { label: nlsHPCC.Add, type: "checkbox", value: false }, | ||
}} onChange={(id, value) => { | ||
switch (id) { | ||
case "XML": | ||
setXml(value); | ||
break; | ||
case "Path": | ||
setPath(value); | ||
break; | ||
case "Add": | ||
setAdd; | ||
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.