B #6081: fix get current content when select record in datatable (#2447)

(cherry picked from commit 04f22a6b3d4934189f18ae2c4d728ea096a51175)
2025-03-20 10:50:08 +03:00 · 2023-01-16 13:40:52 +01:00 · 2023-01-16 13:40:52 +01:00 · 9fe170d61c
commit 9fe170d61c
parent 30a79867cf
39 changed files with 487 additions and 472 deletions
--- a/src/fireedge/src/client/apps/sunstone/routesOne.js
+++ b/src/fireedge/src/client/apps/sunstone/routesOne.js
@ -14,31 +14,31 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 import {
-  Cell2X2 as InstancesIcons,
-  ModernTv as VmsIcons,
-  Shuffle as VRoutersIcons,
-  Archive as TemplatesIcon,
-  EmptyPage as TemplateIcon,
-  Packages as ServicesIcon,
-  MultiplePagesEmpty as ServiceTemplateIcon,
-  Box as StorageIcon,
+  RefreshDouble as BackupIcon,
+  Server as ClusterIcon,
  Db as DatastoreIcon,
-  BoxIso as ImageIcon,
  Folder as FileIcon,
-  SimpleCart as MarketplaceIcon,
+  Group as GroupIcon,
+  HardDrive as HostIcon,
+  BoxIso as ImageIcon,
+  CloudSync as InfrastructureIcon,
+  Cell2X2 as InstancesIcons,
  CloudDownload as MarketplaceAppIcon,
-  ServerConnection as NetworksIcon,
+  SimpleCart as MarketplaceIcon,
  NetworkAlt as NetworkIcon,
  KeyframesCouple as NetworkTemplateIcon,
-  CloudSync as InfrastructureIcon,
-  Server as ClusterIcon,
-  HardDrive as HostIcon,
-  MinusPinAlt as ZoneIcon,
-  Home as SystemIcon,
-  User as UserIcon,
-  Group as GroupIcon,
+  ServerConnection as NetworksIcon,
  HistoricShield as SecurityGroupIcon,
-  RefreshDouble as BackupIcon,
+  MultiplePagesEmpty as ServiceTemplateIcon,
+  Packages as ServicesIcon,
+  Box as StorageIcon,
+  Home as SystemIcon,
+  EmptyPage as TemplateIcon,
+  Archive as TemplatesIcon,
+  User as UserIcon,
+  Shuffle as VRoutersIcons,
+  ModernTv as VmsIcons,
+  MinusPinAlt as ZoneIcon,
 } from 'iconoir-react'

 import loadable from '@loadable/component'
--- a/src/fireedge/src/client/components/Charts/Chartist.js
+++ b/src/fireedge/src/client/components/Charts/Chartist.js
@ -13,27 +13,27 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { JSXElementConstructor, useMemo } from 'react'
 import PropTypes from 'prop-types'
+import { JSXElementConstructor, useMemo } from 'react'

+import { ArgumentScale, ValueScale } from '@devexpress/dx-react-chart'
 import {
-  CircularProgress,
-  Stack,
-  Paper,
-  List,
-  ListItem,
-  Typography,
-} from '@mui/material'
-import {
-  Chart,
  ArgumentAxis,
-  ValueAxis,
+  Chart,
  LineSeries,
+  ValueAxis,
  ZoomAndPan,
 } from '@devexpress/dx-react-chart-material-ui'
-import { scaleTime } from 'd3-scale'
-import { ArgumentScale, ValueScale } from '@devexpress/dx-react-chart'
+import {
+  CircularProgress,
+  List,
+  ListItem,
+  Paper,
+  Stack,
+  Typography,
+} from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
+import { scaleTime } from 'd3-scale'

 const useStyles = makeStyles(({ palette, typography }) => ({
  graphStyle: {
@ -128,21 +128,7 @@ const Chartist = ({
 Chartist.propTypes = {
  name: PropTypes.string,
  filter: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      TIMESTAMP: PropTypes.string,
-      DISK_SIZE: PropTypes.arrayOf(PropTypes.shape({})),
-      ID: PropTypes.string,
-      CPU: PropTypes.string,
-      DISKRDBYTES: PropTypes.string,
-      DISKRDIOPS: PropTypes.string,
-      DISKWRBYTES: PropTypes.string,
-      DISKWRIOPS: PropTypes.string,
-      MEMORY: PropTypes.string,
-      NETRX: PropTypes.string,
-      NETTX: PropTypes.string,
-    })
-  ),
+  data: PropTypes.array,
  x: PropTypes.string,
  y: PropTypes.string,
  interpolationY: PropTypes.func,
--- a/src/fireedge/src/client/components/SplitPane/index.js
+++ b/src/fireedge/src/client/components/SplitPane/index.js
@ -13,11 +13,11 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { useRef, useEffect, useCallback, Children, ReactElement } from 'react'
 import PropTypes from 'prop-types'
+import { Children, ReactElement, useCallback, useEffect, useRef } from 'react'

+import { Divider, styled } from '@mui/material'
 import Split, { SplitOptions } from 'split-grid'
-import { styled, Divider } from '@mui/material'

 const Gutter = styled(Divider)(({ theme, direction = 'row' }) => ({
  position: 'relative',
--- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js
@ -13,10 +13,10 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-// eslint-disable-next-line no-unused-vars
-import { memo, ReactElement, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 // eslint-disable-next-line no-unused-vars
+import { ReactElement, memo, useCallback, useMemo } from 'react'
+// eslint-disable-next-line no-unused-vars
 import { Row } from 'react-table'

 import QueryButton from 'client/components/Buttons/QueryButton'
@ -24,9 +24,9 @@ import { Action } from 'client/components/Cards/SelectCard'
 import { ButtonToTriggerForm } from 'client/components/Forms'
 import { Tr } from 'client/components/HOC'
 // eslint-disable-next-line no-unused-vars
-import { DialogPropTypes, DialogProps } from 'client/components/Dialogs'
+import { DialogProps } from 'client/components/Dialogs'
 // eslint-disable-next-line no-unused-vars
-import { CreateStepsCallback, CreateFormCallback } from 'client/utils'
+import { CreateFormCallback, CreateStepsCallback } from 'client/utils'

 /**
 * @typedef {object} Option
@ -54,97 +54,86 @@ import { CreateStepsCallback, CreateFormCallback } from 'client/utils'
 * @property {function(Row[]):object} [useQuery] - Function to get rtk query result
 */

-const ActionItem = memo(
-  ({ item, selectedRows }) => {
-    /** @type {GlobalAction} */
-    const {
-      accessor,
-      dataCy,
-      tooltip,
-      label,
-      color,
-      variant = 'contained',
-      icon: Icon,
-      options,
-      action,
-      disabled,
-      useQuery,
-      selected = false,
-    } = item
+const ActionItem = memo(({ item, selectedRows }) => {
+  /** @type {GlobalAction} */
+  const {
+    accessor,
+    dataCy,
+    tooltip,
+    label,
+    color,
+    variant = 'contained',
+    icon: Icon,
+    options,
+    action,
+    disabled,
+    useQuery,
+    selected = false,
+  } = item

-    const isDisabledByNumberOfSelectedRows = useMemo(() => {
-      const numberOfRowSelected = selectedRows.length
-      const min = selected?.min ?? 1
-      const max = selected?.max ?? Number.MAX_SAFE_INTEGER
-
-      return (
-        (selected === true && !numberOfRowSelected) ||
-        (selected && min > numberOfRowSelected && numberOfRowSelected < max)
-      )
-    }, [selectedRows.length, selected])
-
-    const buttonProps = {
-      color,
-      variant,
-      'data-cy':
-        (dataCy && `action-${dataCy}`) ?? (accessor && `action-${accessor}`),
-      disabled:
-        isDisabledByNumberOfSelectedRows ||
-        (typeof disabled === 'function' ? disabled(selectedRows) : disabled),
-      icon: Icon && <Icon />,
-      label: label && Tr(label),
-      title: tooltip && Tr(tooltip),
-    }
-
-    const addRowsToFn = useCallback(
-      (fn) => (typeof fn === 'function' ? fn(selectedRows) : fn),
-      [selectedRows]
-    )
-
-    const addRowsToEntries = useCallback(
-      (entries) =>
-        Object.entries(entries).reduce(
-          (res, [prop, value]) => ({ ...res, [prop]: addRowsToFn(value) }),
-          {}
-        ),
-      [addRowsToFn]
-    )
-
-    return action ? (
-      <Action {...buttonProps} handleClick={() => addRowsToFn(action)} />
-    ) : useQuery ? (
-      <QueryButton {...buttonProps} useQuery={() => addRowsToFn(useQuery)} />
-    ) : (
-      <ButtonToTriggerForm
-        buttonProps={buttonProps}
-        options={options?.map((option) => {
-          const {
-            form,
-            accessor: optionAccessor,
-            dialogProps = {},
-            ...restOfOption
-          } = option ?? {}
-
-          return {
-            ...addRowsToEntries(restOfOption),
-            form: form ? () => addRowsToFn(form) : undefined,
-            cy: optionAccessor && `action-${optionAccessor}`,
-            dialogProps: addRowsToEntries(dialogProps),
-          }
-        })}
-      />
-    )
-  },
-  (prev, next) => {
-    const prevStates = prev.selectedRows?.map?.(({ values }) => values?.STATE)
-    const nextStates = next.selectedRows?.map?.(({ values }) => values?.STATE)
+  const isDisabledByNumberOfSelectedRows = useMemo(() => {
+    const numberOfRowSelected = selectedRows.length
+    const min = selected?.min ?? 1
+    const max = selected?.max ?? Number.MAX_SAFE_INTEGER

    return (
-      prev.selectedRows?.length === next.selectedRows?.length &&
-      prevStates?.every((prevState) => nextStates?.includes(prevState))
+      (selected === true && !numberOfRowSelected) ||
+      (selected && min > numberOfRowSelected && numberOfRowSelected < max)
    )
+  }, [selectedRows.length, selected])
+
+  const buttonProps = {
+    color,
+    variant,
+    'data-cy':
+      (dataCy && `action-${dataCy}`) ?? (accessor && `action-${accessor}`),
+    disabled:
+      isDisabledByNumberOfSelectedRows ||
+      (typeof disabled === 'function' ? disabled(selectedRows) : disabled),
+    icon: Icon && <Icon />,
+    label: label && Tr(label),
+    title: tooltip && Tr(tooltip),
  }
-)
+
+  const addRowsToFn = useCallback(
+    (fn) => (typeof fn === 'function' ? fn(selectedRows) : fn),
+    [selectedRows]
+  )
+
+  const addRowsToEntries = useCallback(
+    (entries) =>
+      Object.entries(entries).reduce(
+        (res, [prop, value]) => ({ ...res, [prop]: addRowsToFn(value) }),
+        {}
+      ),
+    [addRowsToFn]
+  )
+
+  return action ? (
+    <Action {...buttonProps} handleClick={() => addRowsToFn(action)} />
+  ) : useQuery ? (
+    <QueryButton {...buttonProps} useQuery={() => addRowsToFn(useQuery)} />
+  ) : (
+    <ButtonToTriggerForm
+      buttonProps={buttonProps}
+      options={options?.map((option) => {
+        const {
+          form,
+          accessor: optionAccessor,
+          dialogProps = {},
+          ...restOfOption
+        } = option ?? {}
+
+        return {
+          ...addRowsToEntries(restOfOption),
+          form: form ? () => addRowsToFn(form) : undefined,
+          cy: optionAccessor && `action-${optionAccessor}`,
+          dialogProps: addRowsToEntries(dialogProps),
+        }
+      })}
+    />
+  )
+})

 ActionItem.propTypes = {
  item: PropTypes.object,
--- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js
@ -13,19 +13,19 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement } from 'react'
 import PropTypes from 'prop-types'
+import { ReactElement } from 'react'

-import { Stack, Checkbox } from '@mui/material'
+import { Checkbox, Stack } from '@mui/material'
 import { RefreshDouble } from 'iconoir-react'
-import { UseTableInstanceProps, UseRowSelectInstanceProps } from 'react-table'
+import { UseRowSelectInstanceProps, UseTableInstanceProps } from 'react-table'

+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
 import {
  Action,
  GlobalAction,
 } from 'client/components/Tables/Enhanced/Utils/GlobalActions/Action'
-import { SubmitButton } from 'client/components/FormControl'
-import { Tr } from 'client/components/HOC'
 import { T } from 'client/constants'

 /**
--- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/utils.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/utils.js
@ -16,8 +16,8 @@
 import { Column } from 'react-table'

 import {
-  GlobalAction,
  CategoryFilter,
+  GlobalAction,
  TimeFilter,
 } from 'client/components/Tables/Enhanced/Utils'

--- a/src/fireedge/src/client/components/Tables/Enhanced/index.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js
@ -14,32 +14,32 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
-import { useMemo } from 'react'
 import PropTypes from 'prop-types'
+import { useMemo } from 'react'

+import { Box, Chip } from '@mui/material'
 import clsx from 'clsx'
 import InfoEmpty from 'iconoir-react/dist/InfoEmpty'
 import RemoveIcon from 'iconoir-react/dist/RemoveSquare'
-import { Box, Chip } from '@mui/material'
 import {
-  useGlobalFilter,
+  // types
+  UseRowSelectRowProps,
  useFilters,
+  useGlobalFilter,
+  useMountedLayoutEffect,
  usePagination,
  useRowSelect,
  useSortBy,
  useTable,
-  useMountedLayoutEffect,
-  // types
-  UseRowSelectRowProps,
 } from 'react-table'

 import {
  GlobalActions,
-  GlobalSearch,
  GlobalFilter,
  GlobalLabel,
-  GlobalSort,
+  GlobalSearch,
  GlobalSelectedRows,
+  GlobalSort,
  LABEL_COLUMN_ID,
 } from 'client/components/Tables/Enhanced/Utils'
 import Pagination from 'client/components/Tables/Enhanced/pagination'
--- a/src/fireedge/src/client/components/Tables/Vms/actions.js
+++ b/src/fireedge/src/client/components/Tables/Vms/actions.js
@ -13,55 +13,55 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { useMemo } from 'react'
-import { useHistory } from 'react-router-dom'
 import { Typography } from '@mui/material'
 import { makeStyles } from '@mui/styles'
 import {
  AddCircledOutline,
+  Cart,
+  Group,
+  Lock,
  PlayOutline,
  SaveFloppyDisk,
-  TransitionRight,
  SystemShut,
-  Group,
+  TransitionRight,
  Trash,
-  Lock,
-  Cart,
 } from 'iconoir-react'
+import { useMemo } from 'react'
+import { useHistory } from 'react-router-dom'

 import { useViews } from 'client/features/Auth'
 import { useGeneralApi } from 'client/features/General'
 import { useGetDatastoresQuery } from 'client/features/OneApi/datastore'
 import {
-  useLockVmMutation,
-  useUnlockVmMutation,
-  useSaveAsTemplateMutation,
-  useDeployMutation,
  useActionVmMutation,
-  useMigrateMutation,
-  useChangeVmOwnershipMutation,
-  useRecoverMutation,
  useBackupMutation,
+  useChangeVmOwnershipMutation,
+  useDeployMutation,
+  useLockVmMutation,
+  useMigrateMutation,
+  useRecoverMutation,
+  useSaveAsTemplateMutation,
+  useUnlockVmMutation,
 } from 'client/features/OneApi/vm'

 import {
  BackupForm,
-  RecoverForm,
-  ChangeUserForm,
  ChangeGroupForm,
+  ChangeUserForm,
  MigrateForm,
+  RecoverForm,
  SaveAsTemplateForm,
 } from 'client/components/Forms/Vm'
 import {
-  createActions,
  GlobalAction,
+  createActions,
 } from 'client/components/Tables/Enhanced/Utils'
 import VmTemplatesTable from 'client/components/Tables/VmTemplates'

-import { Translate } from 'client/components/HOC'
 import { PATH } from 'client/apps/sunstone/routesOne'
+import { Translate } from 'client/components/HOC'
+import { RESOURCE_NAMES, T, VM_ACTIONS } from 'client/constants'
 import { getLastHistory, isAvailableAction } from 'client/models/VirtualMachine'
-import { T, VM_ACTIONS, RESOURCE_NAMES } from 'client/constants'

 const useTableStyles = makeStyles({
  body: { gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))' },
--- a/src/fireedge/src/client/components/Tables/Vms/columns.js
+++ b/src/fireedge/src/client/components/Tables/Vms/columns.js
@ -15,13 +15,13 @@
 * ------------------------------------------------------------------------- */
 import { Column } from 'react-table'

-import {
-  getState,
-  getIps,
-  getType,
-  getLastHistory,
-} from 'client/models/VirtualMachine'
 import { T } from 'client/constants'
+import {
+  getIps,
+  getLastHistory,
+  getState,
+  getType,
+} from 'client/models/VirtualMachine'

 /** @type {Column[]} VM columns */
 const COLUMNS = [
--- a/src/fireedge/src/client/components/Tables/Vms/index.js
+++ b/src/fireedge/src/client/components/Tables/Vms/index.js
@ -13,7 +13,7 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { useMemo, ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'

 import { useViews } from 'client/features/Auth'
 import { useGetVmsQuery } from 'client/features/OneApi/vm'
@ -21,7 +21,7 @@ import { useGetVmsQuery } from 'client/features/OneApi/vm'
 import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
 import VmColumns from 'client/components/Tables/Vms/columns'
 import VmRow from 'client/components/Tables/Vms/row'
-import { RESOURCE_NAMES, VM_STATES, STATES } from 'client/constants'
+import { RESOURCE_NAMES, STATES, VM_STATES } from 'client/constants'

 const DEFAULT_DATA_CY = 'vms'

--- a/src/fireedge/src/client/components/Tabs/Backup/index.js
+++ b/src/fireedge/src/client/components/Tabs/Backup/index.js
@ -13,19 +13,19 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetImageQuery } from 'client/features/OneApi/image'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
+import Increments from 'client/components/Tabs/Backup/Increments'
 import Info from 'client/components/Tabs/Backup/Info'
 import Vms from 'client/components/Tabs/Backup/Vms'
-import Increments from 'client/components/Tabs/Backup/Increments'

 const getTabComponent = (tabName) =>
  ({
@ -36,7 +36,7 @@ const getTabComponent = (tabName) =>

 const BackupTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetImageQuery({ id })
+  const { isLoading, isError, error, status } = useGetImageQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.BACKUP
@ -53,11 +53,14 @@ const BackupTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }
+
+  return <></>
 })

 BackupTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Cluster/index.js
+++ b/src/fireedge/src/client/components/Tabs/Cluster/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetClusterQuery } from 'client/features/OneApi/cluster'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Cluster/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const ClusterTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetClusterQuery({ id })
+  const { isLoading, isError, error, status } = useGetClusterQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.CLUSTER
@ -48,12 +48,14 @@ const ClusterTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })

 ClusterTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Datastore/index.js
+++ b/src/fireedge/src/client/components/Tabs/Datastore/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetDatastoreQuery } from 'client/features/OneApi/datastore'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Datastore/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const DatastoreTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetDatastoreQuery({ id })
+  const { isLoading, isError, error, status } = useGetDatastoreQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.DATASTORE
@ -48,12 +48,14 @@ const DatastoreTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })

 DatastoreTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/File/index.js
+++ b/src/fireedge/src/client/components/Tabs/File/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetImageQuery } from 'client/features/OneApi/image'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Image/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const FileTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetImageQuery({ id })
+  const { isLoading, isError, error, status } = useGetImageQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.IMAGE
@ -48,14 +48,15 @@ const FileTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })
-
 FileTabs.propTypes = { id: PropTypes.string.isRequired }
 FileTabs.displayName = 'FileTabs'

--- a/src/fireedge/src/client/components/Tabs/Group/index.js
+++ b/src/fireedge/src/client/components/Tabs/Group/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetGroupQuery } from 'client/features/OneApi/group'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Group/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const GroupTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetGroupQuery({ id })
+  const { isLoading, isError, error, status } = useGetGroupQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.GROUP
@ -48,12 +48,14 @@ const GroupTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })

 GroupTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Host/index.js
+++ b/src/fireedge/src/client/components/Tabs/Host/index.js
@ -13,21 +13,21 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth/hooks'
 import { useGetHostQuery } from 'client/features/OneApi/host'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Host/Info'
-import Wilds from 'client/components/Tabs/Host/Wilds'
 import Numa from 'client/components/Tabs/Host/Numa'
-import Zombies from 'client/components/Tabs/Host/Zombies'
 import Vms from 'client/components/Tabs/Host/Vms'
+import Wilds from 'client/components/Tabs/Host/Wilds'
+import Zombies from 'client/components/Tabs/Host/Zombies'

 const getTabComponent = (tabName) =>
  ({
@ -40,7 +40,7 @@ const getTabComponent = (tabName) =>

 const HostTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetHostQuery(
+  const { isLoading, isError, error, status } = useGetHostQuery(
    { id },
    { refetchOnMountOrArgChange: 10 }
  )
@ -59,12 +59,14 @@ const HostTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable} />
-  )
+  return <></>
 })

 HostTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Image/Vms/index.js
+++ b/src/fireedge/src/client/components/Tabs/Image/Vms/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement } from 'react'
-import PropTypes from 'prop-types'
-import { T } from 'client/constants'
-import EmptyTab from 'client/components/Tabs/EmptyTab'
-import { useHistory, generatePath } from 'react-router-dom'
 import { PATH } from 'client/apps/sunstone/routesOne'
-import { useGetImageQuery } from 'client/features/OneApi/image'
 import { VmsTable } from 'client/components/Tables'
+import EmptyTab from 'client/components/Tabs/EmptyTab'
+import { T } from 'client/constants'
+import { useGetImageQuery } from 'client/features/OneApi/image'
+import PropTypes from 'prop-types'
+import { ReactElement } from 'react'
+import { generatePath, useHistory } from 'react-router-dom'

 /**
 * Renders mainly Vms tab.
--- a/src/fireedge/src/client/components/Tabs/Image/index.js
+++ b/src/fireedge/src/client/components/Tabs/Image/index.js
@ -13,19 +13,19 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetImageQuery } from 'client/features/OneApi/image'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Image/Info'
-import Vms from 'client/components/Tabs/Image/Vms'
 import Snapshots from 'client/components/Tabs/Image/Snapshots'
+import Vms from 'client/components/Tabs/Image/Vms'

 const getTabComponent = (tabName) =>
  ({
@ -36,7 +36,7 @@ const getTabComponent = (tabName) =>

 const ImageTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetImageQuery({ id })
+  const { isLoading, isError, error, status } = useGetImageQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.IMAGE
@ -52,12 +52,14 @@ const ImageTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })

 ImageTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Marketplace/index.js
+++ b/src/fireedge/src/client/components/Tabs/Marketplace/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetMarketplaceQuery } from 'client/features/OneApi/marketplace'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Marketplace/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const MarketplaceTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetMarketplaceQuery({ id })
+  const { isLoading, isError, error, status } = useGetMarketplaceQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.MARKETPLACE
@ -49,13 +49,15 @@ const MarketplaceTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
-})
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

+  return <></>
+})
 MarketplaceTabs.propTypes = { id: PropTypes.string.isRequired }
 MarketplaceTabs.displayName = 'MarketplaceTabs'

--- a/src/fireedge/src/client/components/Tabs/MarketplaceApp/index.js
+++ b/src/fireedge/src/client/components/Tabs/MarketplaceApp/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetMarketplaceAppQuery } from 'client/features/OneApi/marketplaceApp'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/MarketplaceApp/Info'
@ -34,7 +34,7 @@ const getTabComponent = (tabName) =>

 const MarketplaceAppTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetMarketplaceAppQuery(
+  const { isLoading, isError, error, status } = useGetMarketplaceAppQuery(
    { id },
    { refetchOnMountOrArgChange: 10 }
  )
@ -54,13 +54,15 @@ const MarketplaceAppTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
-})
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

+  return <></>
+})
 MarketplaceAppTabs.propTypes = { id: PropTypes.string.isRequired }
 MarketplaceAppTabs.displayName = 'MarketplaceAppTabs'

--- a/src/fireedge/src/client/components/Tabs/SecurityGroup/index.js
+++ b/src/fireedge/src/client/components/Tabs/SecurityGroup/index.js
@ -13,14 +13,13 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
-
+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetSecGroupQuery } from 'client/features/OneApi/securityGroup'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/SecurityGroup/Info'
@ -34,7 +33,7 @@ const getTabComponent = (tabName) =>

 const SecurityGroupTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetSecGroupQuery({ id })
+  const { isLoading, isError, error, status } = useGetSecGroupQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.SEC_GROUP
@ -51,11 +50,14 @@ const SecurityGroupTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }
+
+  return <></>
 })

 SecurityGroupTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Service/index.js
+++ b/src/fireedge/src/client/components/Tabs/Service/index.js
@ -13,20 +13,20 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetServiceQuery } from 'client/features/OneApi/service'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
-import Info from 'client/components/Tabs/Service/Info'
-import Roles from 'client/components/Tabs/Service/Roles'
-import Log from 'client/components/Tabs/Service/Log'
 import Actions from 'client/components/Tabs/Service/Actions'
+import Info from 'client/components/Tabs/Service/Info'
+import Log from 'client/components/Tabs/Service/Log'
+import Roles from 'client/components/Tabs/Service/Roles'

 const getTabComponent = (tabName) =>
  ({
@ -38,7 +38,7 @@ const getTabComponent = (tabName) =>

 const ServiceTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetServiceQuery({ id })
+  const { isLoading, isError, error, status } = useGetServiceQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.SERVICE
@ -55,11 +55,14 @@ const ServiceTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }
+
+  return <></>
 })

 ServiceTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/ServiceTemplate/index.js
+++ b/src/fireedge/src/client/components/Tabs/ServiceTemplate/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetServiceTemplateQuery } from 'client/features/OneApi/serviceTemplate'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/ServiceTemplate/Info'
@ -36,7 +36,9 @@ const getTabComponent = (tabName) =>

 const ServiceTemplateTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetServiceTemplateQuery({ id })
+  const { isLoading, isError, error, status } = useGetServiceTemplateQuery({
+    id,
+  })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.SERVICE_TEMPLATE
@ -52,12 +54,14 @@ const ServiceTemplateTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })

 ServiceTemplateTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/User/index.js
+++ b/src/fireedge/src/client/components/Tabs/User/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetUserQuery } from 'client/features/OneApi/user'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/User/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const UserTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetUserQuery({ id })
+  const { isLoading, isError, error, status } = useGetUserQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.USER
@ -48,12 +48,14 @@ const UserTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })

 UserTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/VNetwork/index.js
+++ b/src/fireedge/src/client/components/Tabs/VNetwork/index.js
@ -13,22 +13,22 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetVNetworkQuery } from 'client/features/OneApi/network'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
-import Info from 'client/components/Tabs/VNetwork/Info'
 import Address from 'client/components/Tabs/VNetwork/Address'
+import Clusters from 'client/components/Tabs/VNetwork/Clusters'
+import Info from 'client/components/Tabs/VNetwork/Info'
 import Lease from 'client/components/Tabs/VNetwork/Leases'
 import Security from 'client/components/Tabs/VNetwork/Security'
 import VRouters from 'client/components/Tabs/VNetwork/VRouters'
-import Clusters from 'client/components/Tabs/VNetwork/Clusters'

 const getTabComponent = (tabName) =>
  ({
@ -42,7 +42,7 @@ const getTabComponent = (tabName) =>

 const VNetworkTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetVNetworkQuery({ id })
+  const { isLoading, isError, error, status } = useGetVNetworkQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.VNET
@ -59,13 +59,15 @@ const VNetworkTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
-})
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

+  return <></>
+})
 VNetworkTabs.propTypes = { id: PropTypes.string.isRequired }
 VNetworkTabs.displayName = 'VNetworkTabs'

--- a/src/fireedge/src/client/components/Tabs/VNetworkTemplate/index.js
+++ b/src/fireedge/src/client/components/Tabs/VNetworkTemplate/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetVNTemplateQuery } from 'client/features/OneApi/networkTemplate'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/VNetworkTemplate/Info'
@ -32,7 +32,7 @@ const getTabComponent = (tabName) =>

 const VNetTemplateTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetVNTemplateQuery({ id })
+  const { isLoading, isError, error, status } = useGetVNTemplateQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.VN_TEMPLATE
@ -49,11 +49,14 @@ const VNetTemplateTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }
+
+  return <></>
 })

 VNetTemplateTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement } from 'react'
 import PropTypes from 'prop-types'
+import { ReactElement } from 'react'

-import { useGetMonitoringQuery } from 'client/features/OneApi/vm'
 import { Chartist } from 'client/components/Charts'
 import { Tr } from 'client/components/HOC'
-import { prettyBytes } from 'client/utils'
 import { T } from 'client/constants'
+import { useGetMonitoringQuery } from 'client/features/OneApi/vm'
+import { prettyBytes } from 'client/utils'

 /**
 * Render Graphs Capacity.
--- a/src/fireedge/src/client/components/Tabs/Vm/Info/index.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Info/index.js
@ -13,33 +13,33 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement, useMemo, useCallback } from 'react'
-import PropTypes from 'prop-types'
 import { Stack } from '@mui/material'
+import PropTypes from 'prop-types'
+import { ReactElement, useCallback, useMemo } from 'react'

 import {
-  useGetVmQuery,
+  AttributePanel,
+  Ownership,
+  Permissions,
+} from 'client/components/Tabs/Common'
+import Graphs from 'client/components/Tabs/Vm/Info/Graphs'
+import Capacity from 'client/components/Tabs/Vm/Info/capacity'
+import Information from 'client/components/Tabs/Vm/Info/information'
+import {
  useChangeVmOwnershipMutation,
  useChangeVmPermissionsMutation,
+  useGetVmQuery,
  useUpdateUserTemplateMutation,
 } from 'client/features/OneApi/vm'
-import {
-  Permissions,
-  Ownership,
-  AttributePanel,
-} from 'client/components/Tabs/Common'
-import Information from 'client/components/Tabs/Vm/Info/information'
-import Capacity from 'client/components/Tabs/Vm/Info/capacity'
-import Graphs from 'client/components/Tabs/Vm/Info/Graphs'

 import { Tr } from 'client/components/HOC'
 import { T } from 'client/constants'
-import { getHypervisor } from 'client/models/VirtualMachine'
 import {
-  getActionsAvailable,
  filterAttributes,
+  getActionsAvailable,
  jsonToXml,
 } from 'client/models/Helper'
+import { getHypervisor } from 'client/models/VirtualMachine'
 import { cloneObject, set } from 'client/utils'

 const LXC_ATTRIBUTES_REG = /^LXC_/
--- a/src/fireedge/src/client/components/Tabs/Vm/Info/information.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Info/information.js
@ -13,33 +13,33 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement, useMemo } from 'react'
-import PropTypes from 'prop-types'
-import { generatePath } from 'react-router-dom'
 import { Stack } from '@mui/material'
+import PropTypes from 'prop-types'
+import { ReactElement, useMemo } from 'react'
+import { generatePath } from 'react-router-dom'

 import { useViews } from 'client/features/Auth'
 import { useGetClusterAdminQuery } from 'client/features/OneApi/cluster'
 import { useRenameVmMutation } from 'client/features/OneApi/vm'

-import { StatusCircle, StatusChip } from 'client/components/Status'
-import { List } from 'client/components/Tabs/Common'
 import { Translate } from 'client/components/HOC'
 import MultipleTags from 'client/components/MultipleTags'
+import { StatusChip, StatusCircle } from 'client/components/Status'
+import { List } from 'client/components/Tabs/Common'

-import {
-  getState,
-  getLastHistory,
-  getIps,
-  getNicWithPortForwarding,
-} from 'client/models/VirtualMachine'
+import { PATH } from 'client/apps/sunstone/routesOne'
+import { RESOURCE_NAMES, T, VM, VM_ACTIONS } from 'client/constants'
 import {
  booleanToString,
  levelLockToString,
  timeToString,
 } from 'client/models/Helper'
-import { T, VM, VM_ACTIONS, RESOURCE_NAMES } from 'client/constants'
-import { PATH } from 'client/apps/sunstone/routesOne'
+import {
+  getIps,
+  getLastHistory,
+  getNicWithPortForwarding,
+  getState,
+} from 'client/models/VirtualMachine'

 const { CLUSTER, HOST } = RESOURCE_NAMES

--- a/src/fireedge/src/client/components/Tabs/Vm/Network/Actions.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Network/Actions.js
@ -13,28 +13,28 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useEffect } from 'react'
+import { Edit, ShieldAdd, ShieldCross, Trash } from 'iconoir-react'
 import PropTypes from 'prop-types'
-import { Edit, Trash, ShieldAdd, ShieldCross } from 'iconoir-react'
+import { memo, useEffect } from 'react'

-import {
-  useAttachNicMutation,
-  useDetachNicMutation,
-  useUpdateNicMutation,
-  useAttachSecurityGroupMutation,
-  useDetachSecurityGroupMutation,
-} from 'client/features/OneApi/vm'
 import ButtonToTriggerForm from 'client/components/Forms/ButtonToTriggerForm'
 import {
  AttachNicForm,
  AttachSecGroupForm,
  UpdateNicForm,
 } from 'client/components/Forms/Vm'
+import {
+  useAttachNicMutation,
+  useAttachSecurityGroupMutation,
+  useDetachNicMutation,
+  useDetachSecurityGroupMutation,
+  useUpdateNicMutation,
+} from 'client/features/OneApi/vm'

-import { useGeneralApi } from 'client/features/General'
-import { jsonToXml } from 'client/models/Helper'
 import { Tr, Translate } from 'client/components/HOC'
 import { T } from 'client/constants'
+import { useGeneralApi } from 'client/features/General'
+import { jsonToXml } from 'client/models/Helper'

 const AttachAction = memo(
  ({ vmId, hypervisor, nic, currentNics, onSubmit, sx }) => {
--- a/src/fireedge/src/client/components/Tabs/Vm/index.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/index.js
@ -13,12 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
-import { Alert, LinearProgress, Fade } from '@mui/material'
-import { Cancel as CloseIcon } from 'iconoir-react'
+import { Alert, Fade, LinearProgress } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
+import { Cancel as CloseIcon } from 'iconoir-react'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { Translate } from 'client/components/HOC'
+import { RESOURCE_NAMES, T } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import {
  useGetVmQuery,
@ -26,22 +28,20 @@ import {
 } from 'client/features/OneApi/vm'
 import {
  getAvailableInfoTabs,
-  jsonToXml,
  getErrorMessage,
+  jsonToXml,
 } from 'client/models/Helper'
-import { RESOURCE_NAMES, T } from 'client/constants'
-import { Translate } from 'client/components/HOC'

 import { SubmitButton } from 'client/components/FormControl'
 import Tabs from 'client/components/Tabs'
+import Backup from 'client/components/Tabs/Vm/Backup'
+import Configuration from 'client/components/Tabs/Vm/Configuration'
+import History from 'client/components/Tabs/Vm/History'
 import Info from 'client/components/Tabs/Vm/Info'
 import Network from 'client/components/Tabs/Vm/Network'
-import History from 'client/components/Tabs/Vm/History'
 import SchedActions from 'client/components/Tabs/Vm/SchedActions'
 import Snapshot from 'client/components/Tabs/Vm/Snapshot'
-import Backup from 'client/components/Tabs/Vm/Backup'
 import Storage from 'client/components/Tabs/Vm/Storage'
-import Configuration from 'client/components/Tabs/Vm/Configuration'
 import Template from 'client/components/Tabs/Vm/Template'

 const useStyles = makeStyles(({ palette }) => ({
@ -70,6 +70,7 @@ const VmTabs = memo(({ id }) => {
  const classes = useStyles()
  const { view, getResourceView } = useViews()
  const {
+    status,
    isLoading,
    isError,
    error,
@ -93,7 +94,7 @@ const VmTabs = memo(({ id }) => {
    const infoTabs = getResourceView(resource)?.['info-tabs'] ?? {}

    return getAvailableInfoTabs(infoTabs, getTabComponent, id)
-  }, [view])
+  }, [view, id])

  if (isError) {
    return (
@ -103,30 +104,35 @@ const VmTabs = memo(({ id }) => {
    )
  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <>
-      <Fade in={!!vmError} unmountOnExit>
-        <Alert
-          variant="outlined"
-          severity="error"
-          className={classes.vmError}
-          sx={{ gridColumn: 'span 2' }}
-          action={
-            <SubmitButton
-              onClick={handleDismissError}
-              icon={<CloseIcon />}
-              tooltip={<Translate word={T.Dismiss} />}
-            />
-          }
-        >
-          {vmError}
-        </Alert>
-      </Fade>
-      <Tabs addBorder tabs={tabsAvailable} />
-    </>
-  )
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return (
+      <>
+        <Fade in={!!vmError} unmountOnExit>
+          <Alert
+            variant="outlined"
+            severity="error"
+            className={classes.vmError}
+            sx={{ gridColumn: 'span 2' }}
+            action={
+              <SubmitButton
+                onClick={handleDismissError}
+                icon={<CloseIcon />}
+                tooltip={<Translate word={T.Dismiss} />}
+              />
+            }
+          >
+            {vmError}
+          </Alert>
+        </Fade>
+        <Tabs addBorder tabs={tabsAvailable} />
+      </>
+    )
+  }
+
+  return <></>
 })

 VmTabs.propTypes = { id: PropTypes.string.isRequired }
--- a/src/fireedge/src/client/components/Tabs/VmTemplate/index.js
+++ b/src/fireedge/src/client/components/Tabs/VmTemplate/index.js
@ -13,14 +13,14 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'

+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetTemplateQuery } from 'client/features/OneApi/vmTemplate'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'

 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/VmTemplate/Info'
@ -34,7 +34,7 @@ const getTabComponent = (tabName) =>

 const VmTemplateTabs = memo(({ id }) => {
  const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetTemplateQuery({ id })
+  const { isLoading, isError, error, status } = useGetTemplateQuery({ id })

  const tabsAvailable = useMemo(() => {
    const resource = RESOURCE_NAMES.VM_TEMPLATE
@ -50,14 +50,15 @@ const VmTemplateTabs = memo(({ id }) => {
      </Alert>
    )
  }
+  if (isLoading || status === 'pending') {
+    return <LinearProgress color="secondary" sx={{ width: '100%' }} />
+  }
+  if (status === 'fulfilled') {
+    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+  }

-  return isLoading ? (
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
-  ) : (
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
-  )
+  return <></>
 })
-
 VmTemplateTabs.propTypes = { id: PropTypes.string.isRequired }
 VmTemplateTabs.displayName = 'VmTemplateTabs'

--- a/src/fireedge/src/client/components/Tabs/index.js
+++ b/src/fireedge/src/client/components/Tabs/index.js
@ -13,16 +13,16 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { useState, useMemo, ReactElement } from 'react'
 import PropTypes from 'prop-types'
+import { ReactElement, useMemo, useState } from 'react'

 import {
-  styled,
-  Tabs as MTabs,
-  TabsProps,
-  Tab as MTab,
  Fade,
+  Tab as MTab,
+  Tabs as MTabs,
  Stack,
+  TabsProps,
+  styled,
 } from '@mui/material'
 import { WarningCircledOutline } from 'iconoir-react'

--- a/src/fireedge/src/client/components/Timer/index.js
+++ b/src/fireedge/src/client/components/Timer/index.js
@ -13,9 +13,9 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement, memo, useState, useMemo, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { DateTime } from 'luxon'
+import PropTypes from 'prop-types'
+import { ReactElement, memo, useEffect, useMemo, useState } from 'react'

 import { Translate } from 'client/components/HOC'
 import { timeFromMilliseconds } from 'client/models/Helper'
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@ -13,26 +13,26 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement, useState, memo } from 'react'
-import PropTypes from 'prop-types'
+import { Box, Chip, Stack, Typography } from '@mui/material'
+import Cancel from 'iconoir-react/dist/Cancel'
 import GotoIcon from 'iconoir-react/dist/Pin'
 import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
-import Cancel from 'iconoir-react/dist/Cancel'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import PropTypes from 'prop-types'
+import { ReactElement, memo, useState } from 'react'
 import { Row } from 'react-table'

+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
+import MultipleTags from 'client/components/MultipleTags'
+import SplitPane from 'client/components/SplitPane'
+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 {
  useLazyGetHostQuery,
  useUpdateHostMutation,
 } from 'client/features/OneApi/host'
-import { HostsTable } from 'client/components/Tables'
-import HostTabs from 'client/components/Tabs/Host'
-import HostActions from 'client/components/Tables/Hosts/actions'
-import SplitPane from 'client/components/SplitPane'
-import MultipleTags from 'client/components/MultipleTags'
-import { SubmitButton } from 'client/components/FormControl'
-import { Tr } from 'client/components/HOC'
-import { T, Host } from 'client/constants'

 /**
 * Displays a list of Hosts with a split pane between the list and selected row(s).
--- a/src/fireedge/src/client/containers/VirtualMachines/Detail.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/Detail.js
@ -14,7 +14,7 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
-import { useParams, Redirect } from 'react-router-dom'
+import { Redirect, useParams } from 'react-router-dom'

 import VmTabs from 'client/components/Tabs/Vm'

--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@ -13,26 +13,26 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { ReactElement, useState, memo } from 'react'
-import PropTypes from 'prop-types'
+import { Box, Chip, Stack, Typography } from '@mui/material'
+import Cancel from 'iconoir-react/dist/Cancel'
 import GotoIcon from 'iconoir-react/dist/Pin'
 import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
-import Cancel from 'iconoir-react/dist/Cancel'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import PropTypes from 'prop-types'
+import { ReactElement, memo, useState } from 'react'
 import { Row } from 'react-table'

+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
+import MultipleTags from 'client/components/MultipleTags'
+import SplitPane from 'client/components/SplitPane'
+import { VmsTable } from 'client/components/Tables'
+import VmActions from 'client/components/Tables/Vms/actions'
+import VmTabs from 'client/components/Tabs/Vm'
+import { T, VM } from 'client/constants'
 import {
  useLazyGetVmQuery,
  useUpdateUserTemplateMutation,
 } from 'client/features/OneApi/vm'
-import { VmsTable } from 'client/components/Tables'
-import VmActions from 'client/components/Tables/Vms/actions'
-import VmTabs from 'client/components/Tabs/Vm'
-import SplitPane from 'client/components/SplitPane'
-import MultipleTags from 'client/components/MultipleTags'
-import { SubmitButton } from 'client/components/FormControl'
-import { Tr } from 'client/components/HOC'
-import { T, VM } from 'client/constants'

 /**
 * Displays a list of VMs with a split pane between the list and selected row(s).
@ -41,7 +41,7 @@ import { T, VM } from 'client/constants'
 */
 function VirtualMachines() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])
-  const actions = VmActions()
+  const actions = VmActions(selectedRows)

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
@ -55,7 +55,6 @@ function VirtualMachines() {
            globalActions={actions}
            useUpdateMutation={useUpdateUserTemplateMutation}
          />
-
          {hasSelectedRows && (
            <>
              <GutterComponent direction="row" track={1} />
--- a/src/fireedge/src/client/models/Helper.js
+++ b/src/fireedge/src/client/models/Helper.js
@ -13,22 +13,22 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { DateTime, Settings } from 'luxon'
 import {
-  parse as ParserToJson,
-  X2jOptions,
-  j2xParser as ParserToXml,
  J2xOptions,
+  parse as ParserToJson,
+  j2xParser as ParserToXml,
+  X2jOptions,
 } from 'fast-xml-parser'
+import { DateTime, Settings } from 'luxon'

-import { sentenceCase } from 'client/utils'
 import {
-  T,
-  Permission,
-  UserInputObject,
-  USER_INPUT_TYPES,
  CURRENCY,
+  Permission,
+  T,
+  USER_INPUT_TYPES,
+  UserInputObject,
 } from 'client/constants'
+import { sentenceCase } from 'client/utils'

 /**
 * @param {object} json - JSON
--- a/src/fireedge/src/client/models/VirtualMachine.js
+++ b/src/fireedge/src/client/models/VirtualMachine.js
@ -13,29 +13,29 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
+import { stringToBoolean } from 'client/models/Helper'
+import { isRelative } from 'client/models/Scheduler'
 import {
  getSecurityGroupsFromResource,
  prettySecurityGroup,
 } from 'client/models/SecurityGroup'
-import { isRelative } from 'client/models/Scheduler'
-import { stringToBoolean } from 'client/models/Helper'

 import {
-  STATES,
-  VM_ACTIONS_BY_STATE,
-  VM_STATES,
-  VM_LCM_STATES,
-  NIC_IP_ATTRS,
+  Disk,
  EXTERNAL_IP_ATTRS,
  HISTORY_ACTIONS,
  HYPERVISORS,
-  VM,
-  Disk,
+  HistoryRecord,
+  NIC_IP_ATTRS,
  Nic,
  NicAlias,
+  STATES,
  ScheduleAction,
-  HistoryRecord,
  Snapshot,
+  VM,
+  VM_ACTIONS_BY_STATE,
+  VM_LCM_STATES,
+  VM_STATES,
 } from 'client/constants'

 /**