@rancher/shell 3.0.0 → 3.0.1-rc.1

package/edit/logging-flow/Match.vue

@@ -2,6 +2,7 @@
 import KeyValue from '@shell/components/form/KeyValue';
 import Select from '@shell/components/form/Select';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 
 export default {
   emits: ['remove'],
@@ -39,6 +40,12 @@ export default {
     }
   },
 
+  computed: {
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === VIRTUAL;
+    },
+  },
+
   methods: {
     update() {},
 
@@ -51,19 +58,22 @@ export default {
 
 <template>
   <div>
-    <KeyValue
-      v-model:value="value.labels"
-      :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
-      :mode="mode"
-      :initial-empty-row="true"
-      :read-allowed="false"
-      :title-add="true"
-      protip=""
-      :key-label="t('logging.flow.matches.pods.keyLabel')"
-      :value-label="t('logging.flow.matches.pods.valueLabel')"
-      :add-label="t('logging.flow.matches.pods.addLabel')"
-    />
-    <div class="spacer" />
+    <template v-if="!isHarvester">
+      <KeyValue
+        v-model:value="value.labels"
+        :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
+        :mode="mode"
+        :initial-empty-row="true"
+        :read-allowed="false"
+        :title-add="true"
+        protip=""
+        :key-label="t('logging.flow.matches.pods.keyLabel')"
+        :value-label="t('logging.flow.matches.pods.valueLabel')"
+        :add-label="t('logging.flow.matches.pods.addLabel')"
+      />
+      <div class="spacer" />
+    </template>
+
     <h3>
       {{ value.select ? t('logging.flow.matches.nodes.title.include') : t('logging.flow.matches.nodes.title.exclude') }}
     </h3>
@@ -83,48 +93,71 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
-    <h3>
-      {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
-    </h3>
-    <div class="row">
-      <div class="col span-12">
-        <LabeledSelect
-          v-model:value="value.container_names"
-          :mode="mode"
-          :options="[]"
-          :disabled="false"
-          :placeholder="t('logging.flow.matches.containerNames.placeholder')"
-          :multiple="true"
-          :taggable="true"
-          :clearable="true"
-          :searchable="true"
-          :close-on-select="false"
-          no-options-label-key="logging.flow.matches.containerNames.enter"
-          placement="top"
-        />
-      </div>
-    </div>
-    <div v-if="isClusterFlow">
+    <div v-if="!isHarvester">
       <div class="spacer" />
       <h3>
-        {{ value.select ? t('logging.flow.matches.namespaces.title.include') : t('logging.flow.matches.namespaces.title.exclude') }}
+        {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
       </h3>
       <div class="row">
         <div class="col span-12">
-          <Select
-            v-model:value="value.namespaces"
-            class="lg"
-            :options="namespaces"
-            :placeholder="t('logging.flow.matches.namespaces.placeholder')"
+          <LabeledSelect
+            v-model:value="value.container_names"
+            :mode="mode"
+            :options="[]"
+            :disabled="false"
+            :placeholder="t('logging.flow.matches.containerNames.placeholder')"
             :multiple="true"
             :taggable="true"
             :clearable="true"
+            :searchable="true"
             :close-on-select="false"
+            no-options-label-key="logging.flow.matches.containerNames.enter"
             placement="top"
           />
         </div>
       </div>
+      <div v-if="isClusterFlow">
+        <div class="spacer" />
+        <h3>
+          {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
+        </h3>
+        <div class="row">
+          <div class="col span-12">
+            <Select
+              v-model:value="value.namespaces"
+              class="lg"
+              :options="namespaces"
+              :placeholder="t('logging.flow.matches.namespaces.placeholder')"
+              :multiple="true"
+              :taggable="true"
+              :clearable="true"
+              :searchable="true"
+              :close-on-select="false"
+              no-options-label-key="logging.flow.matches.containerNames.enter"
+              placement="top"
+            />
+          </div>
+        </div>
+        <div class="spacer" />
+        <h3>
+          {{ value.select ? t('logging.flow.matches.namespaces.title.include') : t('logging.flow.matches.namespaces.title.exclude') }}
+        </h3>
+        <div class="row">
+          <div class="col span-12">
+            <Select
+              v-model="value.namespaces"
+              class="lg"
+              :options="namespaces"
+              :placeholder="t('logging.flow.matches.namespaces.placeholder')"
+              :multiple="true"
+              :taggable="true"
+              :clearable="true"
+              :close-on-select="false"
+              placement="top"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/edit/logging-flow/index.vue

@@ -6,20 +6,28 @@ import Loading from '@shell/components/Loading';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
-import { LOGGING, NAMESPACE, NODE, SCHEMA } from '@shell/config/types';
+import {
+  LOGGING, NAMESPACE, NODE, POD, SCHEMA
+} from '@shell/config/types';
 import jsyaml from 'js-yaml';
 import { createYaml } from '@shell/utils/create-yaml';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 import { allHash } from '@shell/utils/promise';
-import { isArray } from '@shell/utils/array';
+import { isArray, uniq } from '@shell/utils/array';
 import { matchRuleIsPopulated } from '@shell/models/logging.banzaicloud.io.flow';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { clone } from '@shell/utils/object';
 import isEmpty from 'lodash/isEmpty';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import Match from './Match';
 
+const FLOW_LOGGING = 'Logging';
+const FLOW_AUDIT = 'Audit';
+const FLOW_EVENT = 'Event';
+const FLOW_TYPE = [FLOW_LOGGING, FLOW_AUDIT, FLOW_EVENT];
+
 function emptyMatch(include = true) {
   const rule = {
     select:          !!include,
@@ -53,14 +61,17 @@ export default {
   inheritAttrs: false,
 
   async fetch() {
-    const hasAccessToClusterOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.CLUSTER_OUTPUT);
-    const hasAccessToOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.OUTPUT);
+    const currentCluster = this.$store.getters['currentCluster'];
+    const inStore = currentCluster.isHarvester ? VIRTUAL : 'cluster';
+    const hasAccessToClusterOutputs = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.CLUSTER_OUTPUT);
+    const hasAccessToOutputs = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.OUTPUT);
     const hasAccessToNamespaces = this.$store.getters[`cluster/schemaFor`](NAMESPACE);
-    const hasAccessToNodes = this.$store.getters[`cluster/schemaFor`](NODE);
+    const hasAccessToNodes = this.$store.getters[`${ inStore }/schemaFor`](NODE);
+    const hasAccessToPods = this.$store.getters[`${ inStore }/schemaFor`](POD);
     const isFlow = this.value.type === LOGGING.FLOW;
 
     const getAllOrDefault = (type, hasAccess) => {
-      return hasAccess ? this.$store.dispatch('cluster/findAll', { type }) : Promise.resolve([]);
+      return hasAccess ? this.$store.dispatch(`${ inStore }/findAll`, { type }) : Promise.resolve([]);
     };
 
     const hash = await allHash({
@@ -68,6 +79,7 @@ export default {
       allClusterOutputs: getAllOrDefault(LOGGING.CLUSTER_OUTPUT, hasAccessToClusterOutputs),
       allNamespaces:     getAllOrDefault(NAMESPACE, hasAccessToNamespaces),
       allNodes:          getAllOrDefault(NODE, hasAccessToNodes),
+      allPods:           getAllOrDefault(POD, hasAccessToPods),
     });
 
     for ( const k of Object.keys(hash) ) {
@@ -76,7 +88,9 @@ export default {
   },
 
   data() {
-    const schemas = this.$store.getters['cluster/all'](SCHEMA);
+    const currentCluster = this.$store.getters['currentCluster'];
+    const inStore = currentCluster.isHarvester ? VIRTUAL : 'cluster';
+    const schemas = this.$store.getters[`${ inStore }/all`](SCHEMA);
     let filtersYaml;
 
     this.value.spec = this.value.spec || {};
@@ -124,7 +138,8 @@ export default {
       filtersYaml,
       initialFiltersYaml: filtersYaml,
       globalOutputRefs,
-      localOutputRefs
+      localOutputRefs,
+      loggingType:        clone(this.value.loggingType || FLOW_LOGGING)
     };
   },
 
@@ -150,7 +165,17 @@ export default {
           return true;
         }
 
-        return output.namespace === this.value.namespace;
+        const isEqualNs = output.namespace === this.value.namespace;
+
+        if (!this.isHarvester) {
+          return isEqualNs;
+        }
+
+        if (this.loggingType === FLOW_AUDIT) {
+          return output.loggingType === FLOW_AUDIT && isEqualNs;
+        }
+
+        return output.loggingType !== FLOW_AUDIT && isEqualNs;
       }).map((x) => {
         return { label: x.metadata.name, value: x.metadata.name };
       });
@@ -165,7 +190,17 @@ export default {
 
       return this.allClusterOutputs
         .filter((clusterOutput) => {
-          return clusterOutput.namespace === 'cattle-logging-system';
+          const isEqualNs = clusterOutput.namespace === 'cattle-logging-system';
+
+          if (!this.isHarvester) {
+            return isEqualNs;
+          }
+
+          if (this.loggingType === FLOW_AUDIT) {
+            return clusterOutput.loggingType === FLOW_AUDIT && isEqualNs;
+          }
+
+          return clusterOutput.loggingType !== FLOW_AUDIT && isEqualNs;
         })
         .map((clusterOutput) => {
           return { label: clusterOutput.metadata.name, value: clusterOutput.metadata.name };
@@ -204,6 +239,25 @@ export default {
       return out;
     },
 
+    containerChoices() {
+      const out = [];
+
+      for ( const pod of this.allPods ) {
+        for ( const c of (pod.spec?.containers || []) ) {
+          out.push(c.name);
+        }
+      }
+
+      return uniq(out).sort();
+    },
+
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === VIRTUAL;
+    },
+
+    flowTypeOptions() {
+      return FLOW_TYPE;
+    },
   },
 
   watch: {
@@ -312,6 +366,20 @@ export default {
       if (this.value.spec.match && this.isMatchEmpty(this.value.spec.match)) {
         delete this.value.spec['match'];
       }
+
+      if (this.loggingType === FLOW_AUDIT) {
+        this.value.spec['loggingRef'] = 'harvester-kube-audit-log-ref';
+      }
+
+      if (this.loggingType === FLOW_EVENT) {
+        const eventSelector = { select: { labels: { 'app.kubernetes.io/name': 'event-tailer' } } };
+
+        if (!this.value.spec.match) {
+          this.value.spec['match'] = [eventSelector];
+        } else {
+          this.value.spec.match.push(eventSelector);
+        }
+      }
     },
     onYamlEditorReady(cm) {
       cm.getMode().fold = 'yamlcomments';
@@ -359,10 +427,21 @@ export default {
         :weight="3"
       >
         <Banner
+          v-if="!isHarvester"
           color="info"
           class="mt-0"
           :label="t('logging.flow.matches.banner')"
         />
+        <div v-if="isHarvester">
+          <LabeledSelect
+            v-model:value="loggingType"
+            class="mb-20"
+            :options="flowTypeOptions"
+            :mode="mode"
+            :disabled="!isCreate"
+            :label="t('generic.type')"
+          />
+        </div>
         <ArrayListGrouped
           v-model:value="matches"
           :add-label="t('ingress.rules.addRule')"

package/edit/logging.banzaicloud.io.output/index.vue

@@ -199,13 +199,13 @@ export default {
         v-if="hasMultipleProvidersSelected"
         color="info"
       >
-        This output is configured with multiple providers. We currently only support a single provider per output. You can view or edit the YAML.
+        {{ t('logging.output.tips.singleProvider') }}
       </Banner>
       <Banner
         v-else-if="!value.allProvidersSupported"
         color="info"
       >
-        This output is configured with providers we don't support yet. You can view or edit the YAML.
+        {{ t('logging.output.tips.multipleProviders') }}
       </Banner>
       <Tabbed
         v-else

package/edit/management.cattle.io.project.vue

@@ -52,7 +52,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['currentCluster']),
+    ...mapGetters(['currentCluster', 'isStandaloneHarvester']),
 
     canViewMembers() {
       return canViewProjectMembershipEditor(this.$store);
@@ -222,7 +222,7 @@ export default {
         <ResourceQuota
           :value="value"
           :mode="canEditTabElements"
-          :types="isHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
+          :types="isStandaloneHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
           @remove="removeQuota"
         />
       </Tab>

package/edit/namespace.vue

@@ -15,9 +15,9 @@ import MoveModal from '@shell/components/MoveModal';
 import ResourceQuota from '@shell/components/form/ResourceQuota/Namespace';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_TYPES, RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import Labels from '@shell/components/form/Labels';
 import { randomStr } from '@shell/utils/string';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 
 export default {
   emits:      ['input'],

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

@@ -211,8 +211,9 @@ export default {
 
     emberLink() {
       if (this.value) {
+        // set subtype if editing EKS/GKE/AKS cluster -- this ensures that the component provided by extension is loaded instead of iframing old ember ui
         if (this.value.provisioner) {
-          const matchingSubtype = this.subTypes.find((st) => st.id.toLowerCase() === this.value.provisioner.toLowerCase() || DRIVER_TO_IMPORT[st.id.toLowerCase()] === this.value.provisioner.toLowerCase());
+          const matchingSubtype = this.subTypes.find((st) => DRIVER_TO_IMPORT[st.id.toLowerCase()] === this.value.provisioner.toLowerCase());
 
           if (matchingSubtype) {
             this.selectType(matchingSubtype.id, false);

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -65,14 +65,12 @@ import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced';
 import { DEFAULT_COMMON_BASE_PATH, DEFAULT_SUBDIRS } from '@shell/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig';
 import ClusterAppearance from '@shell/components/form/ClusterAppearance';
 import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest';
-import VsphereUtils from '@shell/utils/v-sphere';
+import VsphereUtils, { VMWARE_VSPHERE } from '@shell/utils/v-sphere';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
-const VMWARE_VSPHERE = 'vmwarevsphere';
-
 /**
  * Classes to be adopted by the node badges in Machine pools
  */

package/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors.vue

@@ -90,7 +90,7 @@ export default {
       :default-add-value="defaultAddValue"
       :initial-empty-row="true"
       :mode="mode"
-      @input="update"
+      @update:value="update"
     >
       <template #default="{row}">
         <div class="row">

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

@@ -0,0 +1,244 @@
+<script>
+import BrandImage from '@shell/components/BrandImage';
+import TypeDescription from '@shell/components/TypeDescription';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import Loading from '@shell/components/Loading';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
+import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
+import { isHarvesterCluster } from '@shell/utils/cluster';
+import { allHash } from '@shell/utils/promise';
+
+export default {
+  components: {
+    BrandImage,
+    ResourceTable,
+    Masthead,
+    TypeDescription,
+    Loading
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = await allHash({
+      hciClusters:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.CLUSTER }),
+      mgmtClusters: this.$store.dispatch(`${ inStore }/findAll`, { type: MANAGEMENT.CLUSTER })
+    });
+
+    this.hciClusters = hash.hciClusters;
+    this.mgmtClusters = hash.mgmtClusters;
+  },
+
+  data() {
+    const resource = CAPI.RANCHER_CLUSTER;
+
+    return {
+      navigating:   false,
+      VIRTUAL,
+      hciDashboard: HCI.DASHBOARD,
+      resource,
+      hResource:    HCI.CLUSTER,
+      hciClusters:  [],
+      mgmtClusters: []
+    };
+  },
+
+  computed: {
+    realSchema() {
+      return this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+    },
+
+    importLocation() {
+      return {
+        name:   'c-cluster-product-resource-create',
+        params: {
+          product:  this.$store.getters['currentProduct'].name,
+          resource: this.schema.id,
+        },
+      };
+    },
+
+    canCreateCluster() {
+      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+
+      return !!schema?.collectionMethods.find((x) => x.toLowerCase() === 'post');
+    },
+
+    rows() {
+      return this.hciClusters.filter((c) => {
+        const cluster = this.mgmtClusters.find((cluster) => cluster?.metadata?.name === c?.status?.clusterName);
+
+        return isHarvesterCluster(cluster);
+      });
+    },
+
+    typeDisplay() {
+      return this.t(`typeLabel."${ HCI.CLUSTER }"`, { count: this.row?.length || 0 });
+    },
+  },
+
+  methods: {
+    async goToCluster(row) {
+      const timeout = setTimeout(() => {
+        // Don't show loading indicator for quickly fetched plugins
+        this.navigating = row.id;
+      }, 1000);
+
+      try {
+        await row.goToCluster();
+
+        clearTimeout(timeout);
+        this.navigating = false;
+      } catch {
+        // The error handling is carried out within goToCluster, but just in case something happens before the promise chain can catch it...
+        clearTimeout(timeout);
+        this.navigating = false;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="realSchema"
+      :resource="resource"
+      :is-creatable="false"
+      :type-display="typeDisplay"
+    >
+      <template #typeDescription>
+        <TypeDescription :resource="hResource" />
+      </template>
+
+      <template
+        v-if="canCreateCluster"
+        slot="extraActions"
+      >
+        <n-link
+          :to="importLocation"
+          class="btn role-primary"
+        >
+          {{ t('cluster.importAction') }}
+        </n-link>
+      </template>
+    </Masthead>
+
+    <ResourceTable
+      v-if="rows && rows.length"
+      :schema="schema"
+      :rows="rows"
+      :is-creatable="true"
+      :namespaced="false"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    >
+      <template #col:name="{row}">
+        <td>
+          <span class="cluster-link">
+            <a
+              v-if="row.isReady"
+              class="link"
+              :disabled="navigating"
+              @click="goToCluster(row)"
+            >{{ row.nameDisplay }}</a>
+            <span v-else>
+              {{ row.nameDisplay }}
+            </span>
+            <i
+              class="icon icon-spinner icon-spin ml-5"
+              :class="{'navigating': navigating === row.id}"
+            />
+          </span>
+        </td>
+      </template>
+
+      <template #cell:harvester="{row}">
+        <n-link
+          class="btn btn-sm role-primary"
+          :to="row.detailLocation"
+        >
+          {{ t('harvesterManager.manage') }}
+        </n-link>
+      </template>
+    </ResourceTable>
+    <div v-else>
+      <div class="no-clusters">
+        {{ t('harvesterManager.cluster.none') }}
+      </div>
+      <hr class="info-section">
+      <div class="logo">
+        <BrandImage
+          file-name="harvester.png"
+          height="64"
+        />
+      </div>
+      <div class="tagline">
+        <div>{{ t('harvesterManager.cluster.description') }}</div>
+      </div>
+      <div class="tagline sub-tagline">
+        <div v-clean-html="t('harvesterManager.cluster.learnMore', {}, true)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-link {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      // Use visibility to avoid the columns re-adjusting when the icon is shown
+      visibility: hidden;
+
+      &.navigating {
+        visibility: visible;
+      }
+    }
+
+  }
+  .no-clusters {
+    text-align: center;
+  }
+
+  .info-section {
+    margin-top: 60px;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+    margin: 60px 0 40px 0;
+  }
+
+  .tagline {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+
+    > div {
+      font-size: 16px;
+      line-height: 22px;
+      max-width: 80%;
+      text-align: center;
+    }
+  }
+
+ .link {
+    cursor: pointer;
+  }
+
+</style>