@rancher/shell 0.1.2 → 0.1.3

package/components/FilterLabel.vue

@@ -1,254 +0,0 @@
-<script>
-import ArrayList from '@shell/components/form/ArrayList';
-import Select from '@shell/components/form/Select';
-
-export default {
-  name: 'HarvesterFilterLabel',
-
-  components: {
-    Select,
-    ArrayList
-  },
-
-  props:      {
-    rows: {
-      type:     Array,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      searchLabels:    [],
-      defaultAddValue: {
-        key:   '',
-        value: '',
-      }
-    };
-  },
-
-  computed: {
-    optionLabels() {
-      const labels = this.rows.map((row) => {
-        return Object.keys(row.labels);
-      });
-
-      return Array.from(new Set(labels.flat()));
-    },
-  },
-
-  methods: {
-    calcValueOptions(key) {
-      const valueOptions = [];
-
-      this.rows.map((row) => {
-        const isExistValue = valueOptions.find(value => value.label === row.labels[key]);
-
-        if (Object.keys(row.labels).includes(key) && key && row.labels[key] && !isExistValue) {
-          valueOptions.push({
-            value: row.labels[key],
-            label: row.labels[key]
-          });
-        }
-      });
-
-      return valueOptions;
-    },
-
-    removeAll() {
-      this.$set(this, 'searchLabels', []);
-    },
-
-    remove(label) {
-      this.searchLabels.find((L, index) => {
-        if (L.key === label.key && L.value === label.value) {
-          this.searchLabels.splice(index, 1);
-          this.filterRows();
-
-          return true;
-        }
-      });
-    },
-
-    filterRows() {
-      const rows = this.rows.filter((row) => {
-        const hasSearch = this.searchLabels.find(search => search.key);
-
-        if (!hasSearch) {
-          return this.rows;
-        }
-
-        const labels = row.labels;
-        const keys = Object.keys(labels);
-
-        return this.searchLabels.find((search) => {
-          if (search.key && keys.includes(search.key)) {
-            if (!search.value) { // If value is empty, all data containing the key is retained
-              return true;
-            } else if (search.value === labels[search.key]) {
-              return true;
-            } else if (search.value !== labels[search.key]) {
-              return false;
-            }
-          } else {
-            return false;
-          }
-        });
-      });
-
-      this.$emit('changeRows', rows, this.searchLabels);
-    }
-  },
-
-  watch: {
-    rows: {
-      deep:      true,
-      immediate: true,
-      handler() {
-        this.filterRows();
-      }
-    }
-  }
-};
-</script>
-
-<template>
-  <div class="filter">
-    <template v-for="(label, index) in searchLabels">
-      <span v-if="label.key" :key="`${label.key}${index}`" class="banner-item bg-warning">
-        {{ label.key }}{{ label.value ? "=" : '' }}{{ label.value }}<i class="icon icon-close" @click="remove(label)" />
-      </span>
-    </template>
-
-    <v-popover
-      trigger="click"
-      placement="bottom-end"
-    >
-      <slot name="header">
-        <button ref="actionDropDown" class="btn bg-primary mr-10">
-          <slot name="title">
-            {{ t('harvester.fields.filterLabels') }}
-          </slot>
-        </button>
-      </slot>
-
-      <template slot="popover">
-        <div class="filter-popup">
-          <div>
-            <ArrayList
-              v-model="searchLabels"
-              :show-header="true"
-              :default-add-value="defaultAddValue"
-              :initial-empty-row="true"
-              @input="filterRows"
-            >
-              <template v-slot:column-headers>
-                <div class="box">
-                  <div class="key">
-                    {{ t('generic.key') }}
-                    <span class="required">*</span>
-                  </div>
-                  <div class="value">
-                    {{ t('generic.value') }}
-                  </div>
-                  <div />
-                </div>
-              </template>
-              <template v-slot:columns="scope">
-                <div class="key">
-                  <Select
-                    ref="select"
-                    key="label"
-                    v-model="scope.row.value.key"
-                    :append-to-body="false"
-                    :searchable="true"
-                    :options="optionLabels"
-                    @input="filterRows"
-                  />
-                </div>
-                <div class="value">
-                  <Select
-                    v-if="calcValueOptions(scope.row.value.key).length > 0"
-                    ref="select"
-                    key="value"
-                    v-model="scope.row.value.value"
-                    :append-to-body="false"
-                    :searchable="true"
-                    :options="calcValueOptions(scope.row.value.key)"
-                    @input="filterRows"
-                  />
-                  <input v-else v-model="scope.row.value.value" class="input-sm" type="search" @input="filterRows" />
-                </div>
-              </template>
-
-              <template #add="{add}">
-                <div>
-                  <button
-                    type="button"
-                    class="btn role-tertiary add"
-                    data-testid="add-item"
-                    @click="add()"
-                  >
-                    {{ t('generic.add') }}
-                  </button>
-
-                  <button
-                    type="button"
-                    class="btn role-tertiary add"
-                    data-testid="remove-all-item"
-                    @click="removeAll()"
-                  >
-                    {{ t('generic.clearAll') }}
-                  </button>
-                </div>
-              </template>
-            </ArrayList>
-          </div>
-        </div>
-      </template>
-    </v-popover>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.filter {
-  display: inline-block;
-
-  .banner-item {
-    display: inline-block;
-    font-size: 16px;
-    margin-right: 10px;
-    padding: 6px;
-    border-radius: 2px;
-
-    i {
-      cursor: pointer;
-      vertical-align: middle;
-    }
-  }
-}
-.filter-popup {
-  width: 600px;
-}
-
-::v-deep .box {
-  display: grid;
-  grid-template-columns: 40% 40% 10%;
-  column-gap: 1.75%;
-  align-items: center;
-  margin-bottom: 10px;
-
-  .key,
-  .value {
-    height: 100%;
-
-    INPUT {
-      height: $unlabeled-input-height;
-    }
-  }
-}
-
-.required {
-  color: var(--error);
-}
-</style>

package/components/HarvesterUpgradeProgressBarList.vue

@@ -1,109 +0,0 @@
-<script>
-import Collapse from '@shell/components/Collapse';
-import PercentageBar from '@shell/components/PercentageBar';
-
-export default {
-  name:       'HarvesterUpgradeProgressList',
-  components: { PercentageBar, Collapse },
-
-  props:      {
-    title: {
-      type:    String,
-      default: ''
-    },
-
-    precent: {
-      type:    Number,
-      default: 0
-    },
-
-    list: {
-      type:    Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-
-  data() {
-    return { open: true };
-  },
-
-  methods: {
-    handleSwitch() {
-      this.open = !this.open;
-    }
-  }
-};
-</script>
-
-<template>
-  <div class="bar-list">
-    <h4>{{ title }} <span class="float-r text-info">{{ precent }}%</span></h4>
-    <div>
-      <div>
-        <Collapse :open.sync="open">
-          <template #title>
-            <div class="total-bar">
-              <span class="bar"><PercentageBar :value="precent" preferred-direction="MORE" /></span>
-              <span class="on-off" @click="handleSwitch"> {{ open ? t('harvester.generic.close') : t('harvester.generic.open') }}</span>
-            </div>
-          </template>
-
-          <template>
-            <div class="custom-content">
-              <div v-for="item in list" :key="item.name" class="item">
-                <p>{{ item.name }} <span class="status" :class="{ [item.state]: true }">{{ item.state }}</span></p>
-                <PercentageBar :value="item.percent" preferred-direction="MORE" />
-                <p class="warning">
-                  {{ item.message }}
-                </p>
-              </div>
-            </div>
-          </template>
-        </Collapse>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.bar-list {
-  .float-r {
-    float: right;
-  }
-
-  .total-bar {
-    display: flex;
-    user-select: none;
-    .bar {
-      width: 85%;
-    }
-    .on-off {
-      margin-left: 10px;
-      cursor: pointer;
-    }
-  }
-  .custom-content {
-    .item {
-      margin-bottom: 14px;
-      p {
-        margin-bottom: 4px;
-      }
-      .status {
-        float: right;
-      }
-      .Succeeded, .Upgrading, .Pending {
-        color: var(--success);
-      }
-      .failed {
-        color: var(--error)
-      }
-      .warning {
-        color: var(--error);
-      }
-    }
-  }
-}
-
-</style>

package/components/VMConsoleBar.vue

@@ -1,87 +0,0 @@
-<script>
-import ButtonDropdown from '@shell/components/ButtonDropdown';
-import { mapGetters } from 'vuex';
-import { OFF } from '../models/harvester/kubevirt.io.virtualmachine';
-
-export default {
-  name: 'VMConsoleBar',
-
-  components: { ButtonDropdown },
-
-  props: {
-    resource: {
-      type:     Object,
-      required: true,
-      default:  () => {
-        return {};
-      }
-    },
-  },
-
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-
-    isOff() {
-      return this.resource.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.resource.metadata?.ownerReferences?.[0]?.uid;
-
-      if (uid === undefined) {
-        uid = this.resource.metadata.uid;
-      }
-
-      const host = window.location.host;
-      const prefix = window.location.pathname.replace(this.$route.path, '');
-      const params = this.$route?.params;
-
-      const url = `https://${ host }${ prefix }/c/${ params.cluster }/${ params.product }/console/${ uid }/${ type }`;
-
-      window.open(url, '_blank', 'toolbars=0,width=900,height=700,left=0,top=0,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>

package/components/dialog/harvester/AddHotplugModal.vue

@@ -1,159 +0,0 @@
-<script>
-import { exceptionToErrorsArray } from '@shell/utils/error';
-import { sortBy } from '@shell/utils/sort';
-import { mapGetters } from 'vuex';
-import { PVC } from '@shell/config/types';
-import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { Card } from '@components/Card';
-import { Banner } from '@components/Banner';
-import AsyncButton from '@shell/components/AsyncButton';
-import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-
-export default {
-  name: 'HotplugModal',
-
-  components: {
-    AsyncButton, Card, LabeledInput, LabeledSelect, Banner
-  },
-
-  props: {
-    resources: {
-      type:     Array,
-      required: true
-    }
-  },
-
-  async fetch() {
-    this.allPVCs = await this.$store.dispatch('harvester/findAll', { type: PVC });
-  },
-
-  data() {
-    return {
-      diskName:   '',
-      volumeName: '',
-      errors:     [],
-      allPVCs:    [],
-    };
-  },
-
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-
-    PVCs() {
-      return this.allPVCs.filter(P => this.actionResource.metadata.namespace === P.metadata.namespace) || [];
-    },
-
-    actionResource() {
-      return this.resources[0];
-    },
-
-    volumeOption() {
-      return sortBy(
-        this.PVCs
-          .filter( (pvc) => {
-            if (!!pvc.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]) {
-              return false;
-            }
-
-            return !pvc.attachVM;
-          })
-          .map((pvc) => {
-            return {
-              label: pvc.metadata.name,
-              value: pvc.metadata.name
-            };
-          }),
-        'label'
-      );
-    },
-  },
-
-  methods: {
-    close() {
-      this.diskName = '';
-      this.volumeName = '';
-      this.$emit('close');
-    },
-
-    async save(buttonCb) {
-      if (this.actionResource) {
-        try {
-          const res = await this.actionResource.doAction('addVolume', { volumeSourceName: this.volumeName, diskName: this.diskName }, {}, false);
-
-          if (res._status === 200 || res._status === 204) {
-            this.$store.dispatch('growl/success', {
-              title:   this.t('harvester.notification.title.succeed'),
-              message: this.t('harvester.modal.hotplug.success', { diskName: this.diskName, vm: this.actionResource.nameDisplay })
-            }, { root: true });
-
-            this.close();
-            buttonCb(true);
-          } else {
-            const error = [res?.data] || exceptionToErrorsArray(res);
-
-            this.$set(this, 'errors', error);
-            buttonCb(false);
-          }
-        } catch (err) {
-          const error = err?.data || err;
-          const message = exceptionToErrorsArray(error);
-
-          this.$set(this, 'errors', message);
-          buttonCb(false);
-        }
-      }
-    },
-  }
-};
-</script>
-
-<template>
-  <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4 slot="title" class="text-default-text" v-html="t('harvester.modal.hotplug.title')" />
-
-    <template #body>
-      <LabeledInput
-        v-model="diskName"
-        :label="t('generic.name')"
-        required
-      />
-
-      <LabeledSelect
-        v-model="volumeName"
-        :label="t('harvester.fields.volume')"
-        :options="volumeOption"
-        class="mt-20"
-        required
-      />
-    </template>
-
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-
-        <AsyncButton
-          mode="apply"
-          :disabled="!diskName || !volumeName"
-          @click="save"
-        />
-      </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
-  </Card>
-</template>
-
-<style lang="scss" scoped>
-.actions {
-  width: 100%;
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-</style>