dashboard/edit/provisioning.cattle.io.cluster/index.vue

<script>
import CreateEditView from '@/mixins/create-edit-view';
import Loading from '@/components/Loading';
import CruResource from '@/components/CruResource';
import SelectIconGrid from '@/components/SelectIconGrid';
import EmberPage from '@/components/EmberPage';
import ToggleSwitch from '@/components/form/ToggleSwitch';
import { REGISTER, SUB_TYPE, _FLAGGED } from '@/config/query-params';
import { DEFAULT_WORKSPACE } from '@/models/provisioning.cattle.io.cluster';
import { mapGetters } from 'vuex';
import { sortBy } from '@/utils/sort';
import { set } from '@/utils/object';
import { RKE_SWITCH } from '@/store/prefs';
import { filterAndArrangeCharts } from '@/store/catalog';
import { CATALOG } from '@/config/labels-annotations';
import Rke2 from './rke2';
import Import from './import';

const SORT_GROUPS = {
  template:  1,
  kontainer: 2,
  machine:   3,
  machine1:  3,
  register:  4,
  custom:    5,
  custom1:   5,
};

// Map some provider IDs to icon names where they don't directly match
const ICON_MAPPINGS = {
  //azure: 'azureaks',
  linode: 'linodelke',
}

export default {
  name: 'CruCluster',

  components: {
    Loading,
    CruResource,
    SelectIconGrid,
    Rke2,
    Import,
    EmberPage,
    ToggleSwitch,
  },

  mixins: [CreateEditView],

  props: {
    mode: {
      type:     String,
      required: true,
    },

    value: {
      type:    Object,
      default: null,
    }
  },

  async fetch() {
    if ( !this.value.spec ) {
      set(this.value, 'spec', {});
    }

    if ( this.subType ) {
      await this.selectType(this.subType, false);
    } else if ( this.value.isImported ) {
      this.isRegister = true;
      this.selectType('import', false);
    } else if ( this.value.isCustom ) {
      this.selectType('custom', false);
    } else if ( this.value.nodeProvider ) {
      await this.selectType(this.value.nodeProvider, false);
    } else {
      await this.$store.dispatch('catalog/load');
    }

    if ( !this.value.id ) {
      if ( !this.value.metadata ) {
        set(this.value, 'metadata', {});
      }

      set(this.value.metadata, 'namespace', DEFAULT_WORKSPACE);
    }

    // Get the legacy node drivers
    const drivers = await this.$store.dispatch('management/findAll', { type: 'management.cattle.io.nodedriver' });

    this.nodeDrivers = drivers;
  },

  data() {
    const subType = this.$route.query[SUB_TYPE] || null;
    const isRegister = this.$route.query[REGISTER] === _FLAGGED;

    return {
      subType,
      isRegister,
      providerCluster: null,
      showRKE:         false, // Show RKE, not RKE2 options
      emberLink:       null,
      rkePref:         RKE_SWITCH,
    };
  },

  computed: {
    ...mapGetters({ allCharts: 'catalog/charts' }),

    templateOptions() {
      return filterAndArrangeCharts(this.allCharts, { showTypes: CATALOG._CLUSTER_TPL }).map(x => x.id);
    },

    subTypes() {
      const getters = this.$store.getters;
      const isRegister = this.isRegister;

      const out = [];

      const templates = this.templateOptions;
      const machineTypes = getters['plugins/machineDrivers'];
      const kontainerTypes = getters['plugins/clusterDrivers'];
      const customTypes = ['custom'];
      const customRegisterTypes = ['import'];
      const rkeMachineTypes = [];
      // 'amazonec2', 'azure', 'digitalocean', 'linode', 'vsphere'];

      this.nodeDrivers.forEach((nd) => {
        if (nd.spec.active) {
          rkeMachineTypes.push(nd.id);
        }
      });
      rkeMachineTypes.sort();

      kontainerTypes.forEach((id) => {
        addType(id, 'kontainer', true);
      });

      if ( isRegister ) {
        customRegisterTypes.forEach((id) => {
          addType(id, 'custom', false);
        });
      } else {
        templates.forEach((id) => {
          addType(id, 'template', true);
        });

        // RKE2
        if (!this.showRKE) {
          machineTypes.forEach((id) => {
            addType(id, 'machine', false);
          });

          customTypes.forEach((id) => {
            addType(id, 'custom', false);
          });
        } else {
          // RKE
          rkeMachineTypes.forEach((id) => {
            addType(id, 'machine1', false, `/g/clusters/add/launch/${ id }`);
          });
        }
      }

      return out;

      function addType(id, group, disabled, link) {
        const label = getters['i18n/withFallback'](`cluster.provider."${ id }"`, null, id);
        const description = getters['i18n/withFallback'](`cluster.providerDescription."${ id }"`, null, '');
        let icon = require('~/assets/images/generic-driver.svg');

        const iconID = ICON_MAPPINGS[id] || id;

        if ( group !== 'template' ) {
          try {
            icon = require(`~/assets/images/providers/${ iconID }.svg`);
          } catch (e) {}
        }

        const subtype = {
          id,
          label,
          description,
          icon,
          group,
          disabled,
          link
        };

        out.push(subtype);
      }
    },

    groupedSubTypes() {
      const out = {};

      for ( const row of this.subTypes ) {
        const name = row.group;
        let entry = out[name];

        if ( !entry ) {
          entry = {
            name,
            label: this.$store.getters['i18n/withFallback'](`cluster.providerGroup."${ this.isRegister ? 'register-' : 'create-' }${ name }"`, null, name),
            types: [],
            sort:  SORT_GROUPS[name],
          };

          out[name] = entry;
        }

        entry.types.push(row);
      }

      return sortBy(Object.values(out), 'sort');
    },
  },

  methods: {
    colorFor(obj) {
      return `color${ SORT_GROUPS[obj.group] || 1 }`;
    },

    clickedType(obj) {
      const id = obj.id;

      if (obj.link) {
        this.emberLink = obj.link;
      }

      this.$router.applyQuery({ [SUB_TYPE]: id });
      this.selectType(id);
    },

    selectType(type, fetch = true) {
      this.subType = type;
      this.$emit('set-subtype', this.$store.getters['i18n/withFallback'](`cluster.provider."${ type }"`, null, type));

      if ( fetch ) {
        this.$fetch();
      }
    },
  },
};
</script>

<template>
  <Loading v-if="$fetchState.pending" />
  <CruResource
    v-else
    :mode="mode"
    :validation-passed="true"
    :selected-subtype="subType"
    :resource="value"
    :errors="errors"
    :subtypes="subTypes"
    @finish="save"
    @select-type="selectType"
    @error="e=>errors = e"
  >
    <template #subtypes>
      <div>
        <ToggleSwitch v-model="showRKE" class="rke-switch" :pref="rkePref" :labels="['RKE2', 'RKE']" />
      </div>
      <div v-for="obj in groupedSubTypes" :key="obj.id" class="mb-20" style="width: 100%;">
        <h4>
          {{ obj.label }}
        </h4>
        <SelectIconGrid
          :rows="obj.types"
          key-field="id"
          name-field="label"
          :color-for="colorFor"
          @clicked="clickedType"
        />
      </div>
    </template>

    <!-- @TODO load appropriate component for provider -->
    <Import
      v-if="isRegister"
      v-model="value"
      :mode="mode"
      :provider="subType"
    />
    <Rke2
      v-if="!showRKE && subType"
      v-model="value"
      :mode="mode"
      :provider="subType"
    />

    <div v-if="showRKE && subType" class="embed">
      <EmberPage :src="emberLink" />
    </div>

    <template v-if="subType" #form-footer>
      <div><!-- Hide the outer footer --></div>
    </template>
  </CruResource>
</template>
<style lang='scss'>
  .rke-switch {
    margin-top: -10px;
    position: absolute;
    right: 20px;
  }

  .embed {
    position: absolute;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    left: var(--nav-width);
    width: calc(100vw - var(--nav-width));
  }
</style>