@rancher/shell 0.1.0

package/detail/harvesterhci.io.management.cluster.vue

@@ -0,0 +1,97 @@
+<script>
+import Loading from '@shell/components/Loading';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import CopyCode from '@shell/components/CopyCode';
+import Tab from '@shell/components/Tabbed/Tab';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  components: {
+    Loading,
+    ResourceTabs,
+    Tab,
+    CopyCode,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  async fetch() {
+    await this.value.waitForProvisioner();
+
+    const hash = { clusterToken: this.value.getOrCreateToken() };
+
+    const res = await allHash(hash);
+
+    this.allNodes = res.allNodes || [];
+    this.allNodePools = res.allNodePools || [];
+    this.clusterToken = res.clusterToken;
+  },
+
+  data() {
+    return { clusterToken: null };
+  },
+
+  computed: {
+    defaultTab() {
+      if (this.showRegistration && !this.machines?.length) {
+        return 'registration';
+      }
+
+      return '';
+    },
+
+    showRegistration() {
+      if ( !this.clusterToken ) {
+        return false;
+      }
+
+      if ( this.value.isImported ) {
+        return !this.value.mgmt?.isReady;
+      }
+
+      return false;
+    },
+
+    registrationURL() {
+      return (this.clusterToken?.command || '').replace('kubectl apply -f ', '');
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTabs v-else v-model="value" :default-tab="defaultTab">
+    <Tab
+      v-if="showRegistration"
+      name="registration"
+      :label="t('cluster.tabs.registration')"
+      :weight="2"
+      class="p-10"
+    >
+      <h4
+        v-html="t('cluster.harvester.registration.step1', null, true)"
+      />
+
+      <h4
+        class="mt-10"
+        v-html="t('cluster.harvester.registration.step2', null, true)"
+      />
+
+      <h4
+        class="mt-10"
+        v-html="t('cluster.harvester.registration.step3', null, true)"
+      />
+      <CopyCode class="m-10 p-10">
+        {{ registrationURL }}
+      </CopyCode>
+    </Tab>
+  </ResourceTabs>
+</template>

package/detail/harvesterhci.io.virtualmachinebackup/index.vue

@@ -0,0 +1,221 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import Loading from '@shell/components/Loading';
+import CruResource from '@shell/components/CruResource';
+import Checkbox from '@shell/components/form/Checkbox';
+import LabelValue from '@shell/components/LabelValue';
+import VM_MIXIN from '@shell/mixins/harvester-vm';
+import { allHash } from '@shell/utils/promise';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI } from '@shell/config/types';
+import CpuMemory from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
+
+import OverviewKeypairs from '@shell/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineKeypairs';
+import Volume from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineVolume';
+import Network from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import CloudConfig from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
+const UNDEFINED = 'n/a';
+
+export default {
+  name: 'BackupDetail',
+
+  components: {
+    Volume,
+    Network,
+    CruResource,
+    Tabbed,
+    Loading,
+    LabelValue,
+    Tab,
+    CloudConfig,
+    Checkbox,
+    CpuMemory,
+    OverviewKeypairs,
+  },
+
+  mixins: [CreateEditView, VM_MIXIN],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    await allHash({ allImages: this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE }) });
+  },
+
+  data() {
+    return { vm: null };
+  },
+
+  computed: {
+    name() {
+      return this.value?.metadata?.name || UNDEFINED;
+    },
+
+    hostname() {
+      return this?.spec?.template?.spec?.hostname;
+    },
+
+    imageName() {
+      const imageList = this.$store.getters['harvester/all'](HCI.IMAGE) || [];
+
+      const image = imageList.find( I => this.imageId === I.id);
+
+      return image?.spec?.displayName || '-';
+    },
+
+    disks() {
+      const disks = this?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.bootOrder;
+      }).sort((a, b) => {
+        if (a.bootOrder < b.bootOrder) {
+          return -1;
+        }
+
+        return 1;
+      });
+    },
+
+    cdroms() {
+      const disks = this?.spec?.template?.spec?.domain?.devices?.disks || [];
+
+      return disks.filter((disk) => {
+        return !!disk.cdrom;
+      });
+    },
+  },
+
+  methods: {
+    getDeviceType(o) {
+      if (o.disk) {
+        return 'Disk';
+      } else {
+        return 'CD-ROM';
+      }
+    },
+    isEmpty(o) {
+      return o !== undefined && Object.keys(o).length === 0;
+    },
+    onTabChanged({ tab }) {
+      if (tab.name === 'advanced') {
+        this.$refs.yamlEditor?.refresh();
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :apply-hooks="applyHooks"
+  >
+    <Tabbed v-if="spec" :side-tabs="true" @changed="onTabChanged">
+      <Tab name="Basics" :label="t('harvester.virtualMachine.detail.tabs.basics')">
+        <div class="row">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.name')" :value="name" />
+          </div>
+
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.fields.image')" :value="imageName" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.hostname')" :value="hostname" />
+          </div>
+
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.input.MachineType')" :value="machineType" />
+          </div>
+        </div>
+
+        <CpuMemory :cpu="cpu" :mode="mode" :memory="memory" />
+
+        <div class="row">
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.bootOrder')">
+              <template #value>
+                <div>
+                  <ul>
+                    <li v-for="(disk) in disks" :key="disk.bootOrder">
+                      {{ disk.bootOrder }}. {{ disk.name }} ({{ getDeviceType(disk) }})
+                    </li>
+                  </ul>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+          <div class="col span-6">
+            <LabelValue :name="t('harvester.virtualMachine.detail.details.CDROMs')">
+              <template #value>
+                <div>
+                  <ul v-if="cdroms.length > 0">
+                    <li v-for="(rom) in cdroms" :key="rom.name">
+                      {{ rom.name }}
+                    </li>
+                  </ul>
+                  <span v-else>
+                    {{ t("harvester.virtualMachine.detail.notAvailable") }}
+                  </span>
+                </div>
+              </template>
+            </LabelValue>
+          </div>
+        </div>
+      </Tab>
+
+      <Tab
+        name="volume"
+        :label="t('harvester.tab.volume')"
+        :weight="-1"
+      >
+        <Volume v-model="diskRows" :mode="mode" />
+      </Tab>
+
+      <Tab
+        name="network"
+        :label="t('harvester.tab.network')"
+        :weight="-2"
+      >
+        <Network v-model="networkRows" :mode="mode" />
+      </Tab>
+
+      <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="-3">
+        <OverviewKeypairs v-if="vm" v-model="vm" />
+      </Tab>
+
+      <Tab
+        name="advanced"
+        :label="t('harvester.tab.advanced')"
+        :weight="-4"
+      >
+        <CloudConfig
+          ref="yamlEditor"
+          :user-script="userScript"
+          :mode="mode"
+          :network-script="networkScript"
+        />
+
+        <div class="spacer"></div>
+        <Checkbox v-model="installUSBTablet" :mode="mode" class="check" type="checkbox" :label="t('harvester.virtualMachine.enableUsb')" />
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>

package/detail/harvesterhci.io.virtualmachineimage.vue

@@ -0,0 +1,118 @@
+<script>
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import LabelValue from '@shell/components/LabelValue';
+import { DESCRIPTION, HCI } from '@shell/config/labels-annotations';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { findBy } from '@shell/utils/array';
+import { get } from '@shell/utils/object';
+
+export default {
+  components: {
+    CopyToClipboardText,
+    Tab,
+    Tabbed,
+    LabelValue
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    formattedValue() {
+      return this.value?.downSize;
+    },
+
+    url() {
+      return this.value?.spec?.url || '-';
+    },
+
+    description() {
+      return this.value?.metadata?.annotations?.[DESCRIPTION] || '-';
+    },
+
+    errorMessage() {
+      const conditions = get(this.value, 'status.conditions');
+
+      return findBy(conditions, 'type', 'Imported')?.message || '-';
+    },
+
+    isUpload() {
+      return this.value?.spec?.sourceType === 'upload';
+    },
+
+    imageName() {
+      return this.value?.metadata?.annotations?.[HCI.IMAGE_NAME] || '-';
+    },
+  }
+};
+</script>
+
+<template>
+  <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tab name="detail" :label="t('harvester.virtualMachine.detail.tabs.basics')" class="bordered-table">
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue
+            v-if="isUpload"
+            :name="t('harvester.image.fileName')"
+            :value="imageName"
+            class="mb-20"
+          />
+          <LabelValue
+            v-else
+            :name="t('harvester.image.url')"
+            :value="url"
+            class="mb-20"
+          >
+            <template #value>
+              <div v-if="url !== '-'">
+                <CopyToClipboardText :text="url" />
+              </div>
+              <div v-else>
+                {{ url }}
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('harvester.image.size')" :value="formattedValue" class="mb-20" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('nameNsDescription.description.label')" :value="description" class="mb-20" />
+        </div>
+      </div>
+
+      <div v-if="errorMessage !== '-'" class="row">
+        <div class="col span-12">
+          <div>
+            {{ t('tableHeaders.message') }}
+          </div>
+          <div :class="{ 'error': errorMessage !== '-' }">
+            {{ errorMessage }}
+          </div>
+        </div>
+      </div>
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+.error {
+  color: var(--error);
+}
+</style>

package/detail/helm.cattle.io.projecthelmchart.vue

@@ -0,0 +1,229 @@
+<script>
+import isEmpty from 'lodash/isEmpty';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import DashboardMetrics from '@shell/components/DashboardMetrics';
+import AlertTable from '@shell/components/AlertTable';
+import Banner from '@shell/components/Banner';
+import { parse as parseUrl } from '@shell/utils/url';
+import { ENDPOINTS } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  components: {
+    Tabbed,
+    Tab,
+    DashboardMetrics,
+    AlertTable,
+    Banner
+  },
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+  async fetch() {
+    await this.fetchDeps();
+  },
+  data() {
+    return {
+      endpointsHash:    [],
+      loadingEndpoints: true
+    };
+  },
+  computed: {
+    relativeDashboardValues() {
+      const { alertmanagerURL, grafanaURL, prometheusURL } = this?.value?.status?.dashboardValues;
+
+      return {
+        alertmanagerURL: this.makeRelativeURL(alertmanagerURL),
+        grafanaURL:      this.makeRelativeURL(grafanaURL),
+        prometheusURL:      this.makeRelativeURL(prometheusURL)
+      };
+    },
+    monitoringNamespace() {
+      // arbitrarily picking the alertmanagerURL here, they're all going to be the same.
+      return this.pullKeyFromUrl(this.relativeDashboardValues.alertmanagerURL, 'namespaces');
+    },
+    alertServiceEndpoint() {
+      return this.pullServiceEndpointFromUrl(this.relativeDashboardValues.alertmanagerURL);
+    },
+    alertServiceEndpointEnabled() {
+      return this.checkEndpointEnabled(this.alertServiceEndpoint);
+    },
+    grafanaServiceEndpoint() {
+      return this.pullServiceEndpointFromUrl(this.relativeDashboardValues.grafanaURL);
+    },
+    grafanaServiceEndpointEnabled() {
+      return this.checkEndpointEnabled(this.grafanaServiceEndpoint);
+    },
+    prometheusServiceEndpoint() {
+      return this.pullServiceEndpointFromUrl(this.relativeDashboardValues.prometheusURL);
+    },
+    prometheusServiceEndpointEnabled() {
+      return this.checkEndpointEnabled(this.prometheusServiceEndpoint);
+    }
+  },
+  methods: {
+    async fetchDeps() {
+      const hash = await allHash({ endpoints: this.$store.dispatch('cluster/findAll', { type: ENDPOINTS }) });
+
+      this.endpointsHash = hash.endpoints;
+
+      this.loadingEndpoints = false;
+    },
+    checkEndpointEnabled(endpointString) {
+      if (this.endpointsHash.length === 0) {
+        return false;
+      }
+      const endpoint = this.endpointsHash.find((endpoint) => {
+        return endpoint.id === `${ this.monitoringNamespace }/${ endpointString }`;
+      });
+
+      return !isEmpty(endpoint) && !isEmpty(endpoint?.subsets);
+    },
+    makeRelativeURL(url) {
+      if (!url) {
+        return '';
+      }
+
+      // most of the downstream components that use these URL expect the everything before and including the clusterid stripped out of the URL
+      const parsedUrl = parseUrl(url);
+      // we really just need the remaining bit of the url but the destructure makes it clear what we're leaving behind
+      // eslint-disable-next-line no-unused-vars
+      const [_empty, _k8s, _clusters, _clusterId, ...restUrl] = parsedUrl.relative.split('/');
+      // the above processing strips out the leading '/' which we need
+      const relativeUrl = `/${ restUrl.join('/') }`;
+
+      return relativeUrl;
+    },
+    pullKeyFromUrl(url = '', key) {
+      const splitUrl = url.split('/');
+      const keyIndex = splitUrl.indexOf(key);
+
+      // the value we're looking for is going to be at the index immediately after the key
+      return splitUrl[keyIndex + 1];
+    },
+    pullServiceEndpointFromUrl(url = '') {
+      const serviceString = this.pullKeyFromUrl(url, 'services');
+
+      // string is going to come back as "<protocol>:<serviceEndPoint>:<port>", we don't need the protocol or the port
+      return serviceString.split(':')[1];
+    },
+    showMenu(show) {
+      if (this.$refs.popover) {
+        if (show) {
+          this.$refs.popover.show();
+        } else {
+          this.$refs.popover.hide();
+        }
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Tabbed v-if="value.status.dashboardValues" class="mt-30">
+      <Tab name="project-metrics" :label="t('monitoring.tabs.projectMetrics')" :weight="3">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active && grafanaServiceEndpointEnabled"
+            :detail-url="`${relativeDashboardValues.grafanaURL}/d/rancher-pod-1/rancher-pod?orgId=1&kiosk`"
+            :summary-url="`${relativeDashboardValues.grafanaURL}/d/rancher-workload-1/rancher-workload?orgId=1&kiosk`"
+            graph-height="825px"
+            project
+          >
+          </DashboardMetrics>
+        </template>
+      </Tab>
+      <Tab name="active-alarms" :label="t('monitoring.overview.alertsList.label')" :weight="2">
+        <template>
+          <AlertTable :monitoring-namespace="monitoringNamespace" :alert-service-endpoint="alertServiceEndpoint" />
+        </template>
+      </Tab>
+      <template #tab-row-extras>
+        <div class="tab-row-footer">
+          <div
+            class="resources-dropdown"
+            :class="{disabled: !prometheusServiceEndpointEnabled}"
+            tabindex="0"
+            @blur="showMenu(false)"
+            @click="showMenu(true)"
+            @focus.capture="showMenu(true)"
+          >
+            <v-popover
+              ref="popover"
+              placement="bottom-end"
+              offset="-10"
+              trigger="manual"
+              :delay="{show: 0, hide: 0}"
+              :popper-options="{modifiers: { flip: { enabled: false } } }"
+              :container="false"
+            >
+              <div class="meta-title">
+                {{ t('monitoring.tabs.prometheus') }} <i class="icon icon-chevron-down" />
+              </div>
+              <template slot="popover" class="resources-status-list">
+                <ul class="list-unstyled dropdown" @click.stop="showMenu(false)">
+                  <li>
+                    <a :href="`${value.status.dashboardValues.prometheusURL}/graph`" target="_blank">{{ t('monitoring.overview.linkedList.prometheusPromQl.label') }} <i class="icon icon-external-link" /></a>
+                  </li>
+                  <li>
+                    <a :href="`${value.status.dashboardValues.prometheusURL}/rules`" target="_blank">{{ t('monitoring.overview.linkedList.prometheusRules.label') }} <i class="icon icon-external-link" /></a>
+                  </li>
+                  <li>
+                    <a :href="`${value.status.dashboardValues.prometheusURL}/targets`" target="_blank">{{ t('monitoring.overview.linkedList.prometheusTargets.label') }} <i class="icon icon-external-link" /></a>
+                  </li>
+                </ul>
+              </template>
+            </v-popover>
+          </div>
+          <a :class="{disabled: !grafanaServiceEndpointEnabled}" :href="value.status.dashboardValues.grafanaURL" target="_blank"> {{ t('monitoring.overview.linkedList.grafana.label') }} <i class="icon icon-external-link" /></a>
+          <a :class="{disabled: !alertServiceEndpointEnabled}" :href="value.status.dashboardValues.alertmanagerURL" target="_blank"> {{ t('monitoring.overview.linkedList.alertManager.label') }} <i class="icon icon-external-link" /></a>
+        </div>
+      </template>
+    </Tabbed>
+    <div v-else>
+      <Banner color="error">
+        {{ `${ t('monitoring.projectMonitoring.detail.error') }${ value.status.statusMessage || t('generic.unknown') }` }}
+      </Banner>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .tab-row-footer {
+    list-style: none;
+    padding: 0;
+    margin-left: auto;
+    display: flex;
+    flex-direction: row;
+
+    A, .resources-dropdown {
+      color: var(--link);
+      display: flex;
+      align-items: center;
+      padding: 10px 15px;
+      &.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        filter: grayscale(1);
+        color: var(--muted);
+      }
+    }
+  }
+  .resources-dropdown {
+      li {
+          display: flex;
+          justify-content: space-between;
+          margin: 10px 5px;
+      }
+
+      .list-count {
+          margin-left: 30px;
+      }
+  }
+</style>