From bf4ac7d4eb598d50fb474e81c15c4cba05e140f1 Mon Sep 17 00:00:00 2001 From: Mitch Frauenheim Date: Fri, 6 Oct 2023 17:01:00 -0700 Subject: [PATCH 1/4] Having issue searching extra props --- .env | 6 +- src/components/home/Home.js | 190 ++++++++---------- .../home/paramsearch/ParamSearch.js | 30 +-- 3 files changed, 99 insertions(+), 127 deletions(-) diff --git a/.env b/.env index f8f2736..738862b 100644 --- a/.env +++ b/.env @@ -62,11 +62,11 @@ REACT_APP_CF_MAX_RESULTS= # Optional CF properties to include (https://github.com/ChannelFinder/recsync/blob/master/server/cf.conf#L46) # recordType -REACT_APP_CF_RECORD_TYPE=false +REACT_APP_CF_RECORD_TYPE=true # recordDesc -REACT_APP_CF_RECORD_DESC=false +REACT_APP_CF_RECORD_DESC=true # alias -REACT_APP_CF_ALIAS=false +REACT_APP_CF_ALIAS=true # Two extra CF properties can be chosen to display on the home page # These would be available to search on with input boxes and can be displayed in search results diff --git a/src/components/home/Home.js b/src/components/home/Home.js index 3c1778a..9d6bebb 100644 --- a/src/components/home/Home.js +++ b/src/components/home/Home.js @@ -41,33 +41,50 @@ function Home(props) { const [searchTags, setSearchTags] = useState([]); const [isLoading, setIsLoading] = useState(false); + const cfProps = { + "pvName": setPVName, + "recordDesc": setRecordDesc, + "recordType": setRecordType, + "iocName": setIOCName, + "hostName": setHostName, + "pvStatus": setPVStatus, + "alias": setAliasOf, + extraPropAName, setExtraPropAValue, + extraPropBName, setExtraPropBValue + } + const handleSearchType = (e, newSearchType) => { if (newSearchType !== null) { setStandardSearch(newSearchType); } }; - const handlePVNameChange = (e) => { - setPVName(e.target.value); - }; - const handleHostNameChange = (e) => { - setHostName(e.target.value); - }; - const handleIOCNameChange = (e) => { - setIOCName(e.target.value); - }; - const handlePVStatusChange = (e) => { - setPVStatus(e.target.value); - }; - const handleAliasOfChange = (e) => { - setAliasOf(e.target.value); - }; + const handleInputChange = (e) => { + console.log(e); + cfProps[e.target.name](e.target.value); + } + // const handlePVNameChange = (e) => { + // setPVName(e.target.value); + // }; + // const handleHostNameChange = (e) => { + // setHostName(e.target.value); + // }; + // const handleIOCNameChange = (e) => { + // setIOCName(e.target.value); + // }; + // const handlePVStatusChange = (e) => { + // setPVStatus(e.target.value); + // }; + // const handleAliasOfChange = (e) => { + // setAliasOf(e.target.value); + // }; const handleRecordTypeChange = (e) => { setRecordType(e.target.value); }; - const handleRecordDescChange = (e) => { - setRecordDesc(e.target.value); - }; + // const handleRecordDescChange = (e) => { + // setRecordDesc(e.target.value); + // }; const handleExtraPropAChange = (e) => { + console.log(e) setExtraPropAValue(e.target.value); }; const handleExtraPropBChange = (e) => { @@ -75,47 +92,29 @@ function Home(props) { }; const handleFreeformChange = (e) => { setFreeformQuery(e.target.value); - } - const queryPVs = (parameters) => { - api.CF_QUERY(parameters) - .then((data) => { - if (data === null) { - console.log("Null PV data from Channel Finder"); - setCFData(null); - setIsLoading(false); - } - else { - setCFData(data); - setIsLoading(false); - } - }) - .catch((err) => { - console.log("Error in fetch of channel finder data"); - console.log(err); - props.handleErrorMessage("Error in EPICS Channel Finder query"); - props.handleSeverity("error"); - props.handleOpenErrorAlert(true); - setIsLoading(false); - setCFData(null); - }) }; - const queryCount = (parameters) => { - api.COUNT_QUERY(parameters) + const fetchData = (apiCall, parameters, setData, dataName, displayError = false, setLoading = false) => { + apiCall(parameters) .then((data) => { if (data === null) { - console.log("Null count data from Channel Finder"); - setPVCount(null) - } - else { - setPVCount(data); + console.log(`Null ${dataName} data from Channel Finder`); } + setData(data); + if (setLoading) setIsLoading(false); }) .catch((err) => { - console.log("Error in PV count fetch"); + console.log(`Error in ${dataName} fetch from Channel Finder`); console.log(err); - setPVCount(null) + if (displayError) { + props.handleErrorMessage("Error in EPICS Channel Finder Query"); + props.handleSeverity("error"); + props.handleOpenErrorAlert(true); + } + setData(null); + if (setLoading) setIsLoading(false); }) + } useEffect(() => { @@ -155,56 +154,24 @@ function Home(props) { freeformQuery = params["pvName"]; delete params["pvName"]; } - if ("recordDesc" in params) { - setRecordDesc(params["recordDesc"]); - freeformQuery = freeformQuery.concat(` recordDesc=${params["recordDesc"]}`); - delete params["recordDesc"]; - } - if ("recordType" in params) { - setRecordType(params["recordType"]); - freeformQuery = freeformQuery.concat(` recordType=${params["recordType"]}`) - delete params["recordType"]; - } - if ("iocName" in params) { - setIOCName(params["iocName"]); - freeformQuery = freeformQuery.concat(` iocName=${params["iocName"]}`); - delete params["iocName"]; - } - if ("hostName" in params) { - setHostName(params["hostName"]); - freeformQuery = freeformQuery.concat(` hostName=${params["hostName"]}`); - delete params["hostName"]; - } - if ("pvStatus" in params) { - setPVStatus(params["pvStatus"]); - freeformQuery = freeformQuery.concat(` pvStatus=${params["pvStatus"]}`); - delete params["pvStatus"] - } else { - setPVStatus("*"); - } - if ("alias" in params) { - setAliasOf(params["alias"]); - freeformQuery = freeformQuery.concat(` alias=${params["alias"]}`); - delete params["alias"]; - } - if (extraPropAName in params) { - setExtraPropAValue(params[extraPropAName]); - freeformQuery = freeformQuery.concat(` ${extraPropAName}=${params[extraPropAName]}`); - delete params[extraPropAName]; - } - if (extraPropBName in params) { - setExtraPropBValue(params[extraPropBName]); - freeformQuery = freeformQuery.concat(` ${extraPropBName}=${params[extraPropBName]}`); - delete params[extraPropBName]; + // Populate the stock & extra prop CF property values + for (const prop in cfProps) { + if (prop in params) { + if (prop === "pvName") continue; + cfProps[prop](params[prop]); + freeformQuery = freeformQuery.concat(` ${prop}=${params[prop]}`); + delete params[prop]; + } else if (prop === "pvStatus") { + cfProps[prop]("*"); + } } - if (!standardSearch) { - for (let key in params) { - const value = params[key]; - if (key.includes('tag')) { - freeformQuery = freeformQuery.concat(` ${value}`); - } else { - freeformQuery = freeformQuery.concat(` ${key}=${value}`); - } + // Fill out the freeform query with any extra search props + for (let key in params) { + const value = params[key]; + if (key.includes('tag')) { + freeformQuery = freeformQuery.concat(` ${value}`); + } else { + freeformQuery = freeformQuery.concat(` ${key}=${value}`); } } setFreeformQuery(freeformQuery); @@ -212,8 +179,10 @@ function Home(props) { searchParams.forEach((val, key) => { if (val !== "") { resetParams[key] = val } }); resetParams["standardSearch"] = standardSearch; setIsLoading(true); - queryPVs(resetParams); - queryCount(resetParams); + // queryPVs(resetParams); + // queryCount(resetParams); + fetchData(api.CF_QUERY, resetParams, setCFData, "PV", true, true); + fetchData(api.COUNT_QUERY, resetParams, setPVCount, "count"); } else { setPVName(""); @@ -249,6 +218,7 @@ function Home(props) { if (e.target.recordDesc.value) { params[e.target.recordDesc.name] = e.target.recordDesc.value; } } if (extraPropAName !== null) { + console.log(extraPropAName); if (e.target.extraPropA.value) { params[process.env.REACT_APP_EXTRA_PROP] = e.target.extraPropA.value; } } if (extraPropBName !== null) { @@ -286,8 +256,10 @@ function Home(props) { params = parseFreeformSearch(e); } params['standardSearch'] = standardSearch; - queryCount(params); - queryPVs(params); + // queryPVs(params); + // queryCount(params); + fetchData(api.CF_QUERY, params, setCFData, "PV", true, true); + fetchData(api.COUNT_QUERY, params, setPVCount, "count"); setSearchParams(params); } @@ -352,14 +324,14 @@ function Home(props) { { standardSearch ? ( ) @@ -91,7 +91,7 @@ function ParamSearch(props) { placeholder="Record Type" type="search" variant="outlined" - onChange={props.handleRecordTypeChange} + onChange={props.handleInputChange} /> } /> @@ -114,7 +114,7 @@ function ParamSearch(props) { placeholder="Alias Of" type="search" variant="outlined" - onChange={props.handleAliasOfChange} + onChange={props.handleInputChange} /> ) @@ -138,7 +138,7 @@ function ParamSearch(props) { id="extraPropA" {...params} label={process.env.REACT_APP_EXTRA_PROP_LABEL} - name="extraPropA" + name="extraPropBName" placeholder={process.env.REACT_APP_EXTRA_PROP_LABEL} type="search" variant="outlined" @@ -158,12 +158,12 @@ function ParamSearch(props) { id="extraPropA" label={process.env.REACT_APP_EXTRA_PROP_LABEL} autoComplete="off" - name="extraPropA" + name={props.extraPropAName} value={props.extraPropAValue} placeholder={process.env.REACT_APP_EXTRA_PROP_LABEL} type="search" variant="outlined" - onChange={props.handleExtraPropAChange} + onChange={props.handleInputChange} /> ) @@ -188,11 +188,11 @@ function ParamSearch(props) { id="extraPropB" {...params} label={process.env.REACT_APP_SECOND_EXTRA_PROP_LABEL} - name="extraPropB" + name={props.extraPropBName} placeholder={process.env.REACT_APP_SECOND_EXTRA_PROP_LABEL} type="search" variant="outlined" - onChange={props.handleExtraPropBChange} + onChange={props.handleInputChange} /> } /> @@ -208,12 +208,12 @@ function ParamSearch(props) { id="extraPropB" label={process.env.REACT_APP_SECOND_EXTRA_PROP_LABEL} autoComplete="off" - name="extraPropB" + name={props.extraPropBName} value={props.extraPropBValue} placeholder={process.env.REACT_APP_SECOND_EXTRA_PROP_LABEL} type="search" variant="outlined" - onChange={props.handleExtraPropBChange} + onChange={props.handleInputChange} /> ) @@ -236,7 +236,7 @@ function ParamSearch(props) { placeholder="PV Name" type="search" variant="outlined" - onChange={props.handlePVNameChange} + onChange={props.handleInputChange} /> {recordDescSearchRender()} @@ -251,7 +251,7 @@ function ParamSearch(props) { placeholder="Host Name" type="search" variant="outlined" - onChange={props.handleHostNameChange} + onChange={props.handleInputChange} /> * for any # character wildcard
? for single character wildcard
! at beginning for not equal
= at beginning for exactly equal}> @@ -265,7 +265,7 @@ function ParamSearch(props) { placeholder="IOC Name" type="search" variant="outlined" - onChange={props.handleIOCNameChange} + onChange={props.handleInputChange} /> {/* */} @@ -275,7 +275,7 @@ function ParamSearch(props) { name="pvStatus" select value={props.pvStatus} - onChange={props.handlePVStatusChange} + onChange={props.handleInputChange} label="Status" variant="outlined" > From 5498104ec0b86b9460db09caaa02cc8ae61c9da4 Mon Sep 17 00:00:00 2001 From: Mitch Frauenheim Date: Tue, 10 Oct 2023 11:55:04 -0700 Subject: [PATCH 2/4] fix search bug, clean up colors --- src/components/home/Home.js | 60 ++++--------------- .../home/paramsearch/ParamSearch.js | 22 +++---- .../home/queryresults/value/Value.js | 30 ++++------ src/components/pv/valuetable/ValueTable.js | 18 ++---- 4 files changed, 35 insertions(+), 95 deletions(-) diff --git a/src/components/home/Home.js b/src/components/home/Home.js index 9d6bebb..90a3446 100644 --- a/src/components/home/Home.js +++ b/src/components/home/Home.js @@ -49,8 +49,8 @@ function Home(props) { "hostName": setHostName, "pvStatus": setPVStatus, "alias": setAliasOf, - extraPropAName, setExtraPropAValue, - extraPropBName, setExtraPropBValue + [extraPropAName]: setExtraPropAValue, + [extraPropBName]: setExtraPropBValue, } const handleSearchType = (e, newSearchType) => { @@ -59,37 +59,8 @@ function Home(props) { } }; const handleInputChange = (e) => { - console.log(e); cfProps[e.target.name](e.target.value); } - // const handlePVNameChange = (e) => { - // setPVName(e.target.value); - // }; - // const handleHostNameChange = (e) => { - // setHostName(e.target.value); - // }; - // const handleIOCNameChange = (e) => { - // setIOCName(e.target.value); - // }; - // const handlePVStatusChange = (e) => { - // setPVStatus(e.target.value); - // }; - // const handleAliasOfChange = (e) => { - // setAliasOf(e.target.value); - // }; - const handleRecordTypeChange = (e) => { - setRecordType(e.target.value); - }; - // const handleRecordDescChange = (e) => { - // setRecordDesc(e.target.value); - // }; - const handleExtraPropAChange = (e) => { - console.log(e) - setExtraPropAValue(e.target.value); - }; - const handleExtraPropBChange = (e) => { - setExtraPropBValue(e.target.value); - }; const handleFreeformChange = (e) => { setFreeformQuery(e.target.value); }; @@ -179,8 +150,6 @@ function Home(props) { searchParams.forEach((val, key) => { if (val !== "") { resetParams[key] = val } }); resetParams["standardSearch"] = standardSearch; setIsLoading(true); - // queryPVs(resetParams); - // queryCount(resetParams); fetchData(api.CF_QUERY, resetParams, setCFData, "PV", true, true); fetchData(api.COUNT_QUERY, resetParams, setPVCount, "count"); } @@ -218,11 +187,10 @@ function Home(props) { if (e.target.recordDesc.value) { params[e.target.recordDesc.name] = e.target.recordDesc.value; } } if (extraPropAName !== null) { - console.log(extraPropAName); - if (e.target.extraPropA.value) { params[process.env.REACT_APP_EXTRA_PROP] = e.target.extraPropA.value; } + if (e.target[extraPropAName].value) { params[process.env.REACT_APP_EXTRA_PROP] = e.target[extraPropAName].value; } } if (extraPropBName !== null) { - if (e.target.extraPropB.value) { params[process.env.REACT_APP_SECOND_EXTRA_PROP] = e.target.extraPropB.value; } + if (e.target[extraPropBName].value) { params[process.env.REACT_APP_SECOND_EXTRA_PROP] = e.target[extraPropBName].value; } } return params; } @@ -256,8 +224,6 @@ function Home(props) { params = parseFreeformSearch(e); } params['standardSearch'] = standardSearch; - // queryPVs(params); - // queryCount(params); fetchData(api.CF_QUERY, params, setCFData, "PV", true, true); fetchData(api.COUNT_QUERY, params, setPVCount, "count"); setSearchParams(params); @@ -324,19 +290,17 @@ function Home(props) { { standardSearch ? ( + setIsLoading={setIsLoading} + > ) : ( diff --git a/src/components/home/paramsearch/ParamSearch.js b/src/components/home/paramsearch/ParamSearch.js index 8e5e17a..d206253 100644 --- a/src/components/home/paramsearch/ParamSearch.js +++ b/src/components/home/paramsearch/ParamSearch.js @@ -6,26 +6,18 @@ import PropTypes from "prop-types"; const propTypes = { pvName: PropTypes.string, - handleInputChange: PropTypes.func, hostName: PropTypes.string, - handleHostNameChange: PropTypes.func, iocName: PropTypes.string, - handleIOCNameChange: PropTypes.func, pvStatus: PropTypes.string, - handlePVStatusChange: PropTypes.func, aliasOf: PropTypes.string, - handleAliasOfChange: PropTypes.func, recordType: PropTypes.string, - handleRecordTypeChange: PropTypes.func, recordTypeAutocompleteKey: PropTypes.number, recordDesc: PropTypes.string, - handleRecordDescChange: PropTypes.func, extraPropAName: PropTypes.string, extraPropBName: PropTypes.string, extraPropAValue: PropTypes.string, - handleExtraPropAChange: PropTypes.func, extraPropBValue: PropTypes.string, - handleExtraPropBChange: PropTypes.func, + handleInputChange: PropTypes.func, handleClear: PropTypes.func, setIsLoading: PropTypes.func } @@ -135,14 +127,14 @@ function ParamSearch(props) { value={props.extraPropAValue} renderInput={(params) => } /> @@ -155,7 +147,7 @@ function ParamSearch(props) { * for any # character wildcard
? for single character wildcard
! at beginning for not equal
= at beginning for exactly equal}> * for any # character wildcard
? for single character wildcard
! at beginning for not equal
= at beginning for exactly equal}> {pvValue} ({pvSeverity}) - ); - } - else if (pvSeverity === "UNDEFINED") { - return ( -
{pvSeverity}
- ); - } - else if (pvSeverity === "NONE") { + if (pvSeverity === "NONE") { textColor = colors.SEV_COLORS["OK"]; - } - else if (pvSeverity === "MINOR") { - textColor = colors.SEV_COLORS["MINOR"]; - } - else if (pvSeverity === "MAJOR") { - textColor = colors.SEV_COLORS["MAJOR"]; + } else if (pvSeverity in colors.SEV_COLORS) { + textColor = colors.SEV_COLORS[pvSeverity]; + } else { + textColor = "#000" } } + + const severityName = pvSeverity === "UNDEFINED" || pvSeverity === "INVALID" ? ` (${pvSeverity})` : null if (pvUnit !== undefined) { return ( -
{`${pvValue} ${pvUnit}`}
+
{`${pvValue} ${pvUnit}`}{severityName}
); } else if (pvValue !== undefined) { return ( -
{pvValue}
+
{pvValue}{severityName}
); } else { return ( -
+ null ); } } diff --git a/src/components/pv/valuetable/ValueTable.js b/src/components/pv/valuetable/ValueTable.js index e7bba6d..34b02dc 100644 --- a/src/components/pv/valuetable/ValueTable.js +++ b/src/components/pv/valuetable/ValueTable.js @@ -155,18 +155,12 @@ function ValueTable(props) { if ("severity" in message && props.pvMonitoring) { if (message.severity === "NONE") { setAlarmColor(colors.SEV_COLORS["OK"]); - } - else if (message.severity === "INVALID") { - setAlarmColor(colors.SEV_COLORS["INVALID"]); - } - else if (message.severity === "UNDEFINED") { - setAlarmColor(colors.SEV_COLORS["UNDEFINED"]); - } - else if (message.severity === "MAJOR") { - setAlarmColor(colors.SEV_COLORS["MAJOR"]); - } - else if (message.severity === "MINOR") { - setAlarmColor(colors.SEV_COLORS["MINOR"]); + } else if (message.severity !== "") { + if (message.severity in colors.SEV_COLORS) { + setAlarmColor(colors.SEV_COLORS[message.severity]); + } else { + setAlarmColor("#000") + } } if (!props.snapshot) { setPVSeverity(message.severity); From 4777eaf22af8475a1011982f26e8ccdf7a4dc887 Mon Sep 17 00:00:00 2001 From: Mitch Frauenheim Date: Tue, 10 Oct 2023 11:58:52 -0700 Subject: [PATCH 3/4] Ternary operator for colors --- src/components/home/queryresults/value/Value.js | 4 +--- src/components/pv/valuetable/ValueTable.js | 6 +----- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/home/queryresults/value/Value.js b/src/components/home/queryresults/value/Value.js index 5786a14..897d65b 100644 --- a/src/components/home/queryresults/value/Value.js +++ b/src/components/home/queryresults/value/Value.js @@ -75,10 +75,8 @@ function Value(props) { if (pvSeverity !== undefined) { if (pvSeverity === "NONE") { textColor = colors.SEV_COLORS["OK"]; - } else if (pvSeverity in colors.SEV_COLORS) { - textColor = colors.SEV_COLORS[pvSeverity]; } else { - textColor = "#000" + textColor = pvSeverity in colors.SEV_COLORS ? colors.SEV_COLORS[pvSeverity] : "#000"; } } diff --git a/src/components/pv/valuetable/ValueTable.js b/src/components/pv/valuetable/ValueTable.js index 34b02dc..4f1f086 100644 --- a/src/components/pv/valuetable/ValueTable.js +++ b/src/components/pv/valuetable/ValueTable.js @@ -156,11 +156,7 @@ function ValueTable(props) { if (message.severity === "NONE") { setAlarmColor(colors.SEV_COLORS["OK"]); } else if (message.severity !== "") { - if (message.severity in colors.SEV_COLORS) { - setAlarmColor(colors.SEV_COLORS[message.severity]); - } else { - setAlarmColor("#000") - } + message.severity in colors.SEV_COLORS ? setAlarmColor(colors.SEV_COLORS[message.severity]) : setAlarmColor("#000"); } if (!props.snapshot) { setPVSeverity(message.severity); From c9a16da392e6ab98383395323a5aa1955d7349e2 Mon Sep 17 00:00:00 2001 From: Tynan Ford Date: Tue, 10 Oct 2023 12:59:10 -0700 Subject: [PATCH 4/4] Update .env --- .env | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.env b/.env index 738862b..f8f2736 100644 --- a/.env +++ b/.env @@ -62,11 +62,11 @@ REACT_APP_CF_MAX_RESULTS= # Optional CF properties to include (https://github.com/ChannelFinder/recsync/blob/master/server/cf.conf#L46) # recordType -REACT_APP_CF_RECORD_TYPE=true +REACT_APP_CF_RECORD_TYPE=false # recordDesc -REACT_APP_CF_RECORD_DESC=true +REACT_APP_CF_RECORD_DESC=false # alias -REACT_APP_CF_ALIAS=true +REACT_APP_CF_ALIAS=false # Two extra CF properties can be chosen to display on the home page # These would be available to search on with input boxes and can be displayed in search results