diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index e5a7230c247..e28b66d371e 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -158,6 +158,8 @@ generic: genericRow: row {index} showLess: Show less showMore: Show more + externalIps: External IPs + internalIps: Internal IPs opensInNewTab: Opens in a new tab tabs: @@ -3652,6 +3654,7 @@ internalExternalIP: none: None copyInternalIp: Copy internal IP address to clipboard copyExternalIp: Copy external IP address to clipboard + clickToShowMoreIps: "Click to show {count} more {count, plural, one {IP} other {IPs}}" istio: links: diff --git a/shell/components/formatter/InternalExternalIP.vue b/shell/components/formatter/InternalExternalIP.vue index 7e3408acbcb..0e905e26afa 100644 --- a/shell/components/formatter/InternalExternalIP.vue +++ b/shell/components/formatter/InternalExternalIP.vue @@ -2,8 +2,10 @@ import { isV4Format, isV6Format } from 'ip'; import CopyToClipboard from '@shell/components/CopyToClipboard'; import { mapGetters } from 'vuex'; +import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge'; + export default { - components: { CopyToClipboard }, + components: { CopyToClipboard, RcStatusBadge }, props: { row: { type: Object, @@ -11,10 +13,49 @@ export default { }, }, computed: { + ...mapGetters({ t: 'i18n/t' }), + filteredExternalIps() { + return this.row.externalIps?.filter((ip) => this.isIp(ip)) || []; + }, + filteredInternalIps() { + return this.row.internalIps?.filter((ip) => this.isIp(ip)) || []; + }, internalSameAsExternal() { - return this.row.internalIp === this.row.externalIp; + return this.externalIp && this.internalIp && this.externalIp === this.internalIp; + }, + showPopover() { + return this.filteredExternalIps.length > 1 || this.filteredInternalIps.length > 1; }, - ...mapGetters({ t: 'i18n/t' }) + externalIp() { + return this.filteredExternalIps[0] || null; + }, + internalIp() { + return this.filteredInternalIps[0] || null; + }, + remainingIpCount() { + let count = 0; + + if (this.filteredExternalIps.length > 1) { + count += this.filteredExternalIps.length - 1; + } + + if (!this.internalSameAsExternal && this.filteredInternalIps.length > 1) { + count += this.filteredInternalIps.length - 1; + } + + return count; + }, + tooltipContent() { + const count = this.remainingIpCount; + + return this.t('internalExternalIP.clickToShowMoreIps', { count }); + }, + remainingExternalIps() { + return this.filteredExternalIps.slice(1); + }, + remainingInternalIps() { + return this.filteredInternalIps.slice(1); + } }, methods: { isIp(ip) { @@ -25,40 +66,170 @@ export default {