dashboard/shell/components/formatter/InternalExternalIP.vue

65 lines
1.5 KiB
Vue

<script>
import { isV4Format, isV6Format } from 'ip';
import CopyToClipboard from '@shell/components/CopyToClipboard';
import { mapGetters } from 'vuex';
export default {
components: { CopyToClipboard },
props: {
row: {
type: Object,
required: true
},
},
computed: {
internalSameAsExternal() {
return this.row.internalIp === this.row.externalIp;
},
...mapGetters({ t: 'i18n/t' })
},
methods: {
isIp(ip) {
return ip && (isV4Format(ip) || isV6Format(ip));
}
}
};
</script>
<template>
<span>
<template v-if="isIp(row.externalIp)">
{{ row.externalIp }} <CopyToClipboard
:aria-label="t('internalExternalIP.copyExternalIp')"
label-as="tooltip"
:text="row.externalIp"
class="icon-btn"
action-color="bg-transparent"
/>
</template>
<template v-else>
-
</template>
/
<template v-if="internalSameAsExternal && isIp(row.internalIp)">
{{ t('tableHeaders.internalIpSameAsExternal') }}
</template>
<template v-else-if="isIp(row.internalIp)">
{{ row.internalIp }}<CopyToClipboard
:aria-label="t('internalExternalIP.copyInternalIp')"
label-as="tooltip"
:text="row.internalIp"
class="icon-btn"
action-color="bg-transparent"
/>
</template>
<template v-else>
-
</template>
</span>
</template>
<style lang='scss' scoped>
.icon-btn {
margin-left: 8px;
}
</style>