-
-
- {NAME}
-
-
- {isActive && } />}
- } />
-
+ return `${monitorSize}/${size}`
+ }, [SNAPSHOT_SIZE, SNAPSHOT_MONITOR_SIZE])
+
+ return (
+
+
+
+
+ {NAME}
+
+
+ {isActive && } />}
+ } />
+
+
+
+ {`#${ID} ${timeAgo}`}
+
+
+ {` ${sizeInfo}`}
+
+
-
- {`#${ID} ${timeAgo}`}
-
-
- {` ${monitorSize}/${size}`}
-
-
-
- {typeof actions === 'function' && (
-
{actions({ snapshot })}
- )}
-
- )
-})
+ {typeof actions === 'function' && (
+
{actions({ snapshot })}
+ )}
+
+ )
+ }
+)
DiskSnapshotCard.propTypes = {
snapshot: PropTypes.object.isRequired,
- extraActionProps: PropTypes.object,
- actions: PropTypes.arrayOf(PropTypes.string),
+ actions: PropTypes.func,
}
DiskSnapshotCard.displayName = 'DiskSnapshotCard'
diff --git a/src/fireedge/src/client/components/Cards/NicCard.js b/src/fireedge/src/client/components/Cards/NicCard.js
index ae8118a38c..fdc92e040c 100644
--- a/src/fireedge/src/client/components/Cards/NicCard.js
+++ b/src/fireedge/src/client/components/Cards/NicCard.js
@@ -13,9 +13,10 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
+import { ReactElement, memo, useMemo } from 'react'
import PropTypes from 'prop-types'
+import { Network } from 'iconoir-react'
import {
useMediaQuery,
Typography,
@@ -37,6 +38,16 @@ import { groupBy } from 'client/utils'
import { T, Nic, NicAlias, PrettySecurityGroupRule } from 'client/constants'
const NicCard = memo(
+ /**
+ * @param {object} props - Props
+ * @param {Nic|NicAlias} props.nic - NIC
+ * @param {ReactElement} [props.actions] - Actions
+ * @param {function({ alias: NicAlias }):ReactElement} [props.aliasActions] - Alias actions
+ * @param {function({ securityGroupId: string }):ReactElement} [props.securityGroupActions] - Security group actions
+ * @param {boolean} [props.showParents] -
+ * @param {boolean} [props.clipboardOnTags] -
+ * @returns {ReactElement} - Card
+ */
({
nic = {},
actions,
@@ -48,7 +59,6 @@ const NicCard = memo(
const classes = rowStyles()
const isMobile = useMediaQuery((theme) => theme.breakpoints.down('md'))
- /** @type {Nic|NicAlias} */
const {
NIC_ID,
NETWORK = '-',
@@ -65,24 +75,32 @@ const NicCard = memo(
const isAlias = !!PARENT?.length
const isPciDevice = PCI_ID !== undefined
- const isAdditionalIp = NIC_ID !== undefined || NETWORK === 'Additional IP'
+ const isAdditionalIp = NIC_ID === undefined || NETWORK === 'Additional IP'
const dataCy = isAlias ? 'alias' : 'nic'
- const noClipboardTags = [
- { text: stringToBoolean(RDP) && 'RDP', dataCy: `${dataCy}-rdp` },
- { text: stringToBoolean(SSH) && 'SSH', dataCy: `${dataCy}-ssh` },
- showParents && {
- text: isAlias ? `PARENT: ${PARENT}` : false,
- dataCy: `${dataCy}-parent`,
- },
- ].filter(({ text } = {}) => Boolean(text))
+ const noClipboardTags = useMemo(
+ () =>
+ [
+ { text: stringToBoolean(RDP) && 'RDP', dataCy: `${dataCy}-rdp` },
+ { text: stringToBoolean(SSH) && 'SSH', dataCy: `${dataCy}-ssh` },
+ showParents && {
+ text: isAlias ? `PARENT: ${PARENT}` : false,
+ dataCy: `${dataCy}-parent`,
+ },
+ ].filter(({ text } = {}) => Boolean(text)),
+ [RDP, SSH, showParents, PARENT]
+ )
- const tags = [
- { text: IP, dataCy: `${dataCy}-ip` },
- { text: MAC, dataCy: `${dataCy}-mac` },
- { text: ADDRESS, dataCy: `${dataCy}-address` },
- ].filter(({ text } = {}) => Boolean(text))
+ const tags = useMemo(
+ () =>
+ [
+ { text: IP, dataCy: `${dataCy}-ip` },
+ { text: MAC, dataCy: `${dataCy}-mac` },
+ { text: ADDRESS, dataCy: `${dataCy}-address` },
+ ].filter(({ text } = {}) => Boolean(text)),
+ [IP, MAC, ADDRESS]
+ )
return (
-
- {`${NIC_ID} | ${NETWORK}`}
+
+ {NETWORK}
{isAlias && }
@@ -113,11 +126,24 @@ const NicCard = memo(
dataCy={tag.dataCy}
/>
))}
-
+
+
+
+ {`#${NIC_ID}`}
+
+
+
+
+
diff --git a/src/fireedge/src/client/components/Cards/VirtualMachineCard.js b/src/fireedge/src/client/components/Cards/VirtualMachineCard.js
index 4c784a70c4..220fca86ee 100644
--- a/src/fireedge/src/client/components/Cards/VirtualMachineCard.js
+++ b/src/fireedge/src/client/components/Cards/VirtualMachineCard.js
@@ -66,7 +66,7 @@ const VirtualMachineCard = memo(
ETIME,
LOCK,
USER_TEMPLATE: { LABELS } = {},
- TEMPLATE: { CPU, MEMORY } = {},
+ TEMPLATE: { VCPU = '-', MEMORY } = {},
} = vm
const { HOSTNAME = '--', VM_MAD: hypervisor } = useMemo(
@@ -74,10 +74,11 @@ const VirtualMachineCard = memo(
[vm.HISTORY_RECORDS]
)
- const time = useMemo(
- () => timeFromMilliseconds(+ETIME || +STIME),
- [ETIME, STIME]
- )
+ const [time, timeFormat] = useMemo(() => {
+ const fromMill = timeFromMilliseconds(+ETIME || +STIME)
+
+ return [fromMill, fromMill.toFormat('ff')]
+ }, [ETIME, STIME])
const { color: stateColor, name: stateName } = getState(vm)
const error = useMemo(() => getErrorMessage(vm), [vm])
@@ -121,27 +122,24 @@ const VirtualMachineCard = memo(