Merge pull request #2180 from JohnDuprey/dev

Graph Explorer Tweaks

Author: JohnDuprey

src/components/forms/RFFComponents.jsx

@@ -429,7 +429,12 @@ export const RFFSelectSearch = ({
               {label}
               {refreshFunction && (
                 <CTooltip content="Refresh" placement="right">
-                  <CButton onClick={refreshFunction} variant="ghost" className="ms-1" size="sm">
+                  <CButton
+                    onClick={refreshFunction}
+                    variant="ghost"
+                    className="ms-1 py-0 border-0"
+                    size="sm"
+                  >
                     <FontAwesomeIcon icon="sync" />
                   </CButton>
                 </CTooltip>

src/views/tenant/administration/GraphExplorer.jsx

@@ -40,7 +40,6 @@ const GraphExplorer = () => {
   const [alertVisible, setAlertVisible] = useState()
   const [random, setRandom] = useState('')
   const [random2, setRandom2] = useState('')
-  const [random3, setRandom3] = useState('')
   const [ocVisible, setOCVisible] = useState(false)
   const [searchNow, setSearchNow] = useState(false)
   const [visibleA, setVisibleA] = useState(true)
@@ -59,21 +58,21 @@ const GraphExplorer = () => {
   } = useGenericGetRequestQuery({ path: '/api/ListGraphExplorerPresets', params: { random2 } })
   const QueryColumns = { set: false, data: [] }
 
-  function endpointChange(value) {
-    execPropRequest({
-      path: '/api/ListGraphRequest',
-      params: {
-        Endpoint: value,
-        ListProperties: true,
-        TenantFilter: tenant.defaultDomainName,
-        IgnoreErrors: true,
-        random: (Math.random() + 1).toString(36).substring(7),
-      },
-    })
-  }
   const debounceEndpointChange = useMemo(() => {
+    function endpointChange(value) {
+      execPropRequest({
+        path: '/api/ListGraphRequest',
+        params: {
+          Endpoint: value,
+          ListProperties: true,
+          TenantFilter: tenant.defaultDomainName,
+          IgnoreErrors: true,
+          random: (Math.random() + 1).toString(36).substring(7),
+        },
+      })
+    }
     return debounce(endpointChange, 1000)
-  }, [endpointChange])
+  }, [])
 
   if (graphrequest.isSuccess) {
     if (graphrequest.data?.Results?.length > 0) {
@@ -483,6 +482,7 @@ const GraphExplorer = () => {
                                 )
                               }}
                             </FormSpy>
+                            <hr />
                             <RFFCFormSwitch name="$count" label="Use $count" />
                             <WhenFieldChanges field="reportTemplate" set="$count" />
                             <RFFCFormSwitch name="NoPagination" label="Disable Pagination" />
@@ -504,13 +504,6 @@ const GraphExplorer = () => {
                             />
                             <WhenFieldChanges field="reportTemplate" set="endpoint" />
                             <WhenFieldChanges field="endpoint" set="endpoint" />
-                            <RFFCFormInput
-                              type="text"
-                              name="$filter"
-                              label="Filter"
-                              placeholder="Enter the filter string for the Graph query"
-                            />
-                            <WhenFieldChanges field="reportTemplate" set="$filter" />
                             <div className="mb-3">
                               <RFFSelectSearch
                                 name="$select"
@@ -529,12 +522,16 @@ const GraphExplorer = () => {
                                     : []
                                 }
                                 allowCreate={true}
-                                refreshFunction={() =>
-                                  setRandom3((Math.random() + 1).toString(36).substring(7))
-                                }
                                 isLoading={availableProperties.isFetching}
                               />
                             </div>
+                            <RFFCFormInput
+                              type="text"
+                              name="$filter"
+                              label="Filter"
+                              placeholder="Enter the filter string for the Graph query"
+                            />
+                            <WhenFieldChanges field="reportTemplate" set="$filter" />
                             <WhenFieldChanges field="reportTemplate" set="$select" />
                             <RFFCFormInput
                               type="text"
@@ -572,7 +569,7 @@ const GraphExplorer = () => {
       <hr />
       <CippPage title="Report Results" tenantSelector={false}>
         {!searchNow && <span>Execute a search to get started.</span>}
-        {graphrequest.isFetching && (
+        {graphrequest.isFetching && !QueryColumns.set && (
           <div className="my-2">
             <CSpinner className="me-2" /> Loading Data
           </div>
@@ -593,6 +590,7 @@ const GraphExplorer = () => {
                   columns={QueryColumns.data}
                   data={graphrequest?.data?.Results}
                   isFetching={graphrequest.isFetching}
+                  refreshFunction={() => setRandom((Math.random() + 1).toString(36).substring(7))}
                 />
               </>
             </CCardBody>