F #6451: refresh host table when create a new host (#3037)

src/fireedge/src/client/components/Tables/Enhanced/index.js

@@ -34,13 +34,13 @@ import {
 } from 'react-table'
 
 import {
+  ChangeViewTable,
   GlobalActions,
   GlobalFilter,
   GlobalLabel,
   GlobalSearch,
   GlobalSelectedRows,
   GlobalSort,
-  ChangeViewTable,
   LABEL_COLUMN_ID,
 } from 'client/components/Tables/Enhanced/Utils'
 import Pagination from 'client/components/Tables/Enhanced/pagination'
@@ -79,6 +79,7 @@ const EnhancedTable = ({
   dataDepend,
   readOnly = false,
   tableViews,
+  zoneId,
 }) => {
   const styles = EnhancedTableStyles({
     readOnly: readOnly,
@@ -392,6 +393,7 @@ const EnhancedTable = ({
           return (
             <RowComponent
               {...rowProps}
+              zone={zoneId}
               key={key}
               original={original}
               value={values}
@@ -475,6 +477,7 @@ EnhancedTable.propTypes = {
   dataDepend: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   readOnly: PropTypes.bool,
   tableViews: PropTypes.object,
+  zoneId: PropTypes.string,
 }
 
 export * from 'client/components/Tables/Enhanced/Utils'

src/fireedge/src/client/components/Tables/Hosts/index.js

@@ -134,6 +134,7 @@ const HostsTable = (props) => {
       updateSelectedRows()
     }
   })
+  useEffect(() => refetch(), [])
 
   return (
     <EnhancedTable
@@ -146,6 +147,7 @@ const HostsTable = (props) => {
       getRowId={(row) => String(row.ID)}
       RowComponent={HostRow}
       dataDepend={values}
+      zoneId={zoneId}
       {...rest}
     />
   )

src/fireedge/src/client/components/Tables/Hosts/row.js

@@ -13,21 +13,21 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo, useMemo, useCallback } from 'react'
-import PropTypes from 'prop-types'
-import hostApi, { useUpdateHostMutation } from 'client/features/OneApi/host'
 import { HostCard } from 'client/components/Cards'
+import hostApi, { useUpdateHostMutation } from 'client/features/OneApi/host'
 import { jsonToXml } from 'client/models/Helper'
+import PropTypes from 'prop-types'
+import { memo, useCallback, useMemo } from 'react'
 
 const Row = memo(
-  ({ original, value, onClickLabel, ...props }) => {
+  ({ original, value, onClickLabel, zone, ...props }) => {
     const [update] = useUpdateHostMutation()
 
     const {
       data: hosts,
       error,
       isLoading,
-    } = hostApi.endpoints.getHosts.useQuery(undefined)
+    } = hostApi.endpoints.getHosts.useQuery({ zone })
 
     const host = useMemo(
       () => hosts?.find((h) => +h.ID === +original.ID) ?? original,
@@ -70,6 +70,7 @@ Row.propTypes = {
   className: PropTypes.string,
   handleClick: PropTypes.func,
   onClickLabel: PropTypes.func,
+  zone: PropTypes.string,
 }
 
 Row.displayName = 'HostRow'

src/fireedge/src/client/containers/Hosts/index.js

@@ -29,6 +29,7 @@ import { HostsTable } from 'client/components/Tables'
 import HostActions from 'client/components/Tables/Hosts/actions'
 import HostTabs from 'client/components/Tabs/Host'
 import { Host, T } from 'client/constants'
+import { useGeneral } from 'client/features/General'
 import {
   useLazyGetHostQuery,
   useUpdateHostMutation,
@@ -42,6 +43,7 @@ import {
 function Hosts() {
   const [selectedRows, onSelectedRowsChange] = useState(() => [])
   const actions = HostActions()
+  const { zone } = useGeneral()
 
   const hasSelectedRows = selectedRows?.length > 0
   const moreThanOneSelected = selectedRows?.length > 1
@@ -54,6 +56,7 @@ function Hosts() {
             onSelectedRowsChange={onSelectedRowsChange}
             globalActions={actions}
             useUpdateMutation={useUpdateHostMutation}
+            zoneId={zone}
           />
 
           {hasSelectedRows && (