harvester-ui-extension/pkg/harvester/components/VMConsoleBar.vue

<script>
import ButtonDropdown from '@shell/components/ButtonDropdown';
import { mapGetters } from 'vuex';
import { OFF } from '../models/kubevirt.io.virtualmachine';
import { PRODUCT_NAME } from '../config/harvester';

export default {
  name: 'VMConsoleBar',

  components: { ButtonDropdown },

  props: {
    resourceType: {
      type:     Object,
      required: true,
      default:  () => {
        return {};
      }
    }
  },

  computed: {
    ...mapGetters({ t: 'i18n/t' }),

    isOff() {
      return this.resourceType.stateDisplay === OFF;
    },

    options() {
      return [
        {
          label: this.t('harvester.virtualMachine.console.novnc'),
          value: 'vnc'
        },
        {
          label: this.t('harvester.virtualMachine.console.serial'),
          value: 'serial'
        }
      ];
    }
  },

  methods: {
    handleDropdown(c) {
      this.show(c.value);
    },

    show(type) {
      let uid = this.resourceType.metadata?.ownerReferences?.[0]?.uid;

      if (uid === undefined) {
        uid = this.resourceType.metadata.uid;
      }

      const host = window.location.host;
      const prefix = window.location.pathname.replace(this.$route.path, '');
      const params = this.$route?.params;
      const popupWidth = Math.max(800, screen.width - 200);
      const popupHeight = Math.max(600, screen.height - 200);
      const popupLeft = Math.max(0, window.screenX + Math.floor((window.outerWidth - popupWidth) / 2));
      const popupTop = Math.max(0, window.screenY + Math.floor((window.outerHeight - popupHeight) / 2));

      const url = `https://${ host }${ prefix }/${ PRODUCT_NAME }/c/${ params.cluster }/console/${ uid }/${ type }`;

      // Defer so v-select can finish closing the dropdown before the popup steals focus
      this.$nextTick(() => {
        window.open(
          url,
          '_blank',
          `toolbars=0,width=${ popupWidth },height=${ popupHeight },left=${ popupLeft },top=${ popupTop },noreferrer`
        );
      });
    },

    isEmpty(o) {
      return o !== undefined && Object.keys(o).length === 0;
    }
  }
};
</script>

<template>
  <div class="overview-web-console">
    <ButtonDropdown
      :disabled="isOff"
      :no-drop="isOff"
      button-label="Console"
      :dropdown-options="options"
      size="sm"
      @click-action="handleDropdown"
    />
  </div>
</template>

<style lang="scss">
.overview-web-console {
  .btn {
    line-height: 24px;
    min-height: 24px;
  }
}
</style>