@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/config/table-headers.js

@@ -761,6 +761,52 @@ export const FLEET_SUMMARY = {
   width:     100,
 };
 
+export const FLEET_APPLICATION_TYPE = {
+  name:     'applicationType',
+  labelKey: 'fleet.tableHeaders.applicationType',
+  value:    'kind',
+  sort:     'kind',
+  search:   false,
+  align:    'center',
+  width:    100,
+};
+
+export const FLEET_APPLICATION_SOURCE = {
+  name:      'applicationSource',
+  labelKey:  'fleet.tableHeaders.applicationSource',
+  value:     'source.value',
+  formatter: 'FleetApplicationSource',
+  sort:      'source.value',
+  search:    ['source.value', 'sourceSub.value'],
+};
+
+export const FLEET_APPLICATION_TARGET = {
+  name:     'applicationTarget',
+  labelKey: 'fleet.tableHeaders.applicationTarget',
+  value:    'targetInfo.modeDisplay',
+  sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
+};
+
+export const FLEET_APPLICATION_CLUSTERS_READY = {
+  name:      'applicationClustersReady',
+  labelKey:  'fleet.tableHeaders.applicationClustersReady',
+  value:     'readyClusters',
+  formatter: 'FleetApplicationClustersReady',
+  sort:      'readyClusters',
+  search:    false,
+};
+
+export const FLEET_APPLICATION_RESOURCES_SUMMARY = {
+  name:      'applicationResourcesSummary',
+  labelKey:  'fleet.tableHeaders.applicationResourcesSummary',
+  value:     'status.resourceCounts',
+  sort:      false,
+  search:    false,
+  formatter: 'FleetSummaryGraph',
+  align:     'center',
+  width:     100,
+};
+
 export const FLEET_REPO_CLUSTER_SUMMARY = {
   name:      'clusterSummary',
   labelKey:  'tableHeaders.clusterResources',
@@ -1052,36 +1098,20 @@ export const FLEET_BUNDLE_LAST_UPDATED = {
   sort:          ['lastUpdateTime']
 };
 
-export const FLEET_BUNDLE_TYPE = {
-  name:     'bundleType',
-  labelKey: 'tableHeaders.fleetBundleType',
-  value:    'bundleType',
-  sort:     ['bundleType'],
-  width:    100,
-};
-
-export const FLEET_REPO_CLUSTERS_READY = {
-  name:     'clustersReady',
-  labelKey: 'tableHeaders.clustersReady',
-  value:    'status.readyClusters',
-  sort:     'status.readyClusters',
-  search:   false,
-};
-
 export const FLEET_REPO_TARGET = {
   name:     'target',
   labelKey: 'tableHeaders.target',
   value:    'targetInfo.modeDisplay',
   sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
-
 };
 
 export const FLEET_REPO = {
-  name:     'repo',
-  labelKey: 'tableHeaders.repo',
-  value:    'repoDisplay',
-  sort:     'repoDisplay',
-  search:   ['spec.repo', 'status.commit'],
+  name:      'repo',
+  labelKey:  'tableHeaders.repo',
+  value:     'source.value',
+  formatter: 'FleetApplicationSource',
+  sort:      'source.value',
+  search:    ['source.value', 'sourceSub.value'],
 };
 
 export const UI_PLUGIN_CATALOG = [

package/config/types.js

@@ -229,12 +229,14 @@ export const CAPI = {
 // Base: /k8s/clusters/<id>/v1/
 
 export const FLEET = {
+  APPLICATION:              'fleet.cattle.io.application',
   BUNDLE:                   'fleet.cattle.io.bundle',
   BUNDLE_DEPLOYMENT:        'fleet.cattle.io.bundledeployment',
   CLUSTER:                  'fleet.cattle.io.cluster',
   CLUSTER_GROUP:            'fleet.cattle.io.clustergroup',
   DASHBOARD:                'fleet.cattle.io.dashboard',
   GIT_REPO:                 'fleet.cattle.io.gitrepo',
+  HELM_OP:                  'fleet.cattle.io.helmop',
   WORKSPACE:                'management.cattle.io.fleetworkspace',
   TOKEN:                    'fleet.cattle.io.clusterregistrationtoken',
   BUNDLE_NAMESPACE_MAPPING: 'fleet.cattle.io.bundlenamespacemapping',

package/core/plugin-helpers.ts

@@ -32,12 +32,13 @@ function checkRouteProduct($route: RouteLocation, locationConfigParam: string) {
   return false;
 }
 
-function checkRouteMode({ name, query }: {name: string, query: any}, locationConfigParam: LocationConfigParams) {
+function checkRouteMode({ name, query, meta }: {name: string, query: any, meta: any}, locationConfigParam: LocationConfigParams) {
   if (locationConfigParam === _EDIT && query.mode && query.mode === _EDIT && !query.as) {
     return true;
   } else if (locationConfigParam === _CONFIG && query.as && query.as === _CONFIG) {
     return true;
-  } else if (locationConfigParam === _DETAIL && !query.as && name.includes('-id') && (!query.mode || query?.mode !== _EDIT)) {
+  // I don't think we should be inspecting route names to infer modes. I'm thinking we may want to move it all to route metadata at some point
+  } else if (locationConfigParam === _DETAIL && !query.as && (name.includes('-id') || meta.mode === 'detail') && (!query.mode || query?.mode !== _EDIT)) {
     return true;
     // alias to target all list views
   } else if (locationConfigParam === _LIST && !name.includes('-id') && name.includes('-resource')) {

package/detail/fleet.cattle.io.cluster.vue

@@ -1,10 +1,10 @@
 <script>
 import Loading from '@shell/components/Loading';
 import ResourcesSummary from '@shell/components/fleet/ResourcesSummary';
-import FleetRepos from '@shell/components/fleet/FleetRepos';
+import FleetApplications from '@shell/components/fleet/FleetApplications';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
-import { MANAGEMENT, FLEET } from '@shell/config/types';
+import { MANAGEMENT, FLEET, SCHEMA } from '@shell/config/types';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
 import { allHash } from 'utils/promise';
 
@@ -16,7 +16,7 @@ export default {
   components: {
     Loading,
     ResourcesSummary,
-    FleetRepos,
+    FleetApplications,
     ResourceTabs,
     Tab,
   },
@@ -35,17 +35,27 @@ export default {
         type: MANAGEMENT.CLUSTER,
         id:   managementClusterId
       }),
-      repos:             this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
+      gitRepos:          this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
+      helmOps:           this.$store.dispatch('management/findAll', { type: FLEET.HELM_OP }),
       workspaces:        this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }),
       bundleDeployments: this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT })
     });
 
     this.rancherCluster = hash.rancherCluster;
-    this.allRepos = hash.repos;
+    this.gitRepos = hash.gitRepos;
+    this.helmOps = hash.helmOps;
   },
 
   data() {
-    return { rancherCluster: null, allRepos: [] };
+    return {
+      rancherCluster: null,
+      gitRepos:       [],
+      helmOps:        [],
+      appSchema:      {
+        id:   FLEET.APPLICATION,
+        type: SCHEMA,
+      },
+    };
   },
 
   computed: {
@@ -53,14 +63,17 @@ export default {
       return this.value.id;
     },
 
-    repos() {
-      return this.allRepos.filter((x) => {
+    rows() {
+      return [
+        ...this.gitRepos,
+        ...this.helmOps
+      ].filter((x) => {
         return x.targetClusters.includes(this.value);
       });
     },
 
-    repoSchema() {
-      return this.$store.getters['management/schemaFor'](FLEET.GIT_REPO);
+    typeLabel() {
+      return this.t(`typeLabel."${ FLEET.APPLICATION }"`, { count: 2 });
     },
   },
 };
@@ -82,14 +95,14 @@ export default {
       @update:value="$emit('input', $event)"
     >
       <Tab
-        label="Git Repos"
-        name="repos"
+        :label="typeLabel"
+        name="applications"
         :weight="19"
       >
-        <FleetRepos
+        <FleetApplications
           :clusterId="clusterId"
-          :rows="repos"
-          :schema="repoSchema"
+          :rows="rows"
+          :schema="appSchema || {}"
           :paging="true"
           paging-label="sortableTable.paging.resource"
         />

package/detail/fleet.cattle.io.gitrepo.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'vuex';
 import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import FleetSummary from '@shell/components/fleet/FleetSummary';
@@ -38,7 +39,15 @@ export default {
       allBundles:       [],
     };
   },
+
+  created() {
+    if (this.workspace !== this.value.namespace) {
+      this.$store.commit('updateWorkspace', { value: this.value.namespace, getters: this.$store.getters });
+    }
+  },
+
   computed: {
+    ...mapState(['workspace']),
     gitRepoHasClusters() {
       return this.value.status?.desiredReadyClusters;
     },
@@ -119,7 +128,7 @@ export default {
       color="info"
       class="mb-20"
     >
-      {{ t('fleet.fleetSummary.noClustersGitRepo') }}
+      {{ t('fleet.fleetSummary.noClusters.gitRepo') }}
     </Banner>
     <ResourceTabs
       :value="value"

package/detail/fleet.cattle.io.helmop.vue

@@ -0,0 +1,157 @@
+<script>
+import { mapState } from 'vuex';
+import Loading from '@shell/components/Loading';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import FleetSummary from '@shell/components/fleet/FleetSummary';
+import { Banner } from '@components/Banner';
+import FleetResources from '@shell/components/fleet/FleetResources';
+import Tab from '@shell/components/Tabbed/Tab';
+import { FLEET, MANAGEMENT } from '@shell/config/types';
+import { isHarvesterCluster } from '@shell/utils/cluster';
+import FleetBundles from '@shell/components/fleet/FleetBundles.vue';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+
+export default {
+  name: 'DetailsHelmOp',
+
+  emits: ['input'],
+
+  components: {
+    Loading,
+    FleetResources,
+    FleetSummary,
+    Banner,
+    ResourceTabs,
+    Tab,
+    FleetBundles,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      allFleetClusters: [],
+      allBundles:       [],
+    };
+  },
+
+  created() {
+    if (this.workspace !== this.value.namespace) {
+      this.$store.commit('updateWorkspace', { value: this.value.namespace, getters: this.$store.getters });
+    }
+  },
+
+  computed: {
+    ...mapState(['workspace']),
+    helmOpHasClusters() {
+      return this.value.status?.desiredReadyClusters;
+    },
+    clusterSchema() {
+      return this.$store.getters['management/schemaFor'](FLEET.CLUSTER);
+    },
+    harvesterClusters() {
+      const harvester = {};
+
+      this.allFleetClusters.forEach((c) => {
+        if (isHarvesterCluster(c)) {
+          harvester[c.metadata.name] = c;
+        }
+      });
+
+      return harvester;
+    },
+    bundles() {
+      const harvester = this.harvesterClusters;
+
+      const bundles = this.allBundles.filter((bundle) => {
+        const targets = bundle.spec?.targets || [];
+
+        // Filter out any bundle that has one target whose cluster is a harvester cluster
+        if (targets.length === 1) {
+          return !harvester[targets[0].clusterName];
+        }
+
+        return true;
+      });
+
+      return bundles;
+    },
+  },
+  async fetch() {
+    const allDispatches = await checkSchemasForFindAllHash({
+      allBundles: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE,
+        opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
+      },
+
+      allFleetClusters: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER
+      },
+      clusterGroups: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER_GROUP
+      }
+    }, this.$store);
+
+    if (this.value.authorId && this.$store.getters['management/schemaFor'](MANAGEMENT.USER)) {
+      await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }, { root: true });
+    }
+
+    this.allBundles = allDispatches.allBundles || [];
+    this.allFleetClusters = allDispatches.allFleetClusters || [];
+  },
+
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div
+    v-else
+    class="mt-20"
+  >
+    <FleetSummary
+      v-if="helmOpHasClusters"
+      :value="value"
+      :bundles="bundles"
+      class="mb-20"
+    />
+    <Banner
+      v-else
+      color="info"
+      class="mb-20"
+    >
+      {{ t('fleet.fleetSummary.noClusters.helmOp') }}
+    </Banner>
+    <ResourceTabs
+      :value="value"
+      mode="view"
+      class="mt-20"
+      :need-related="false"
+      @update:value="$emit('input', $event)"
+    >
+      <Tab
+        v-if="!!allBundles.length"
+        label="Bundles"
+        name="bundles"
+        :weight="30"
+      >
+        <FleetBundles :value="value" />
+      </Tab>
+      <Tab
+        label="Resources"
+        name="resources"
+        :weight="20"
+      >
+        <FleetResources :rows="value.resourcesStatuses" />
+      </Tab>
+    </ResourceTabs>
+  </div>
+</template>

package/dialog/HelmOpForceUpdateDialog.vue

@@ -0,0 +1,132 @@
+<script>
+import { mapGetters, mapState } from 'vuex';
+import { resourceNames } from '@shell/utils/string';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { Banner } from '@components/Banner';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  name: 'HelmOpForceUpdateDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+  },
+
+  props: {
+    helmOps: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    names() {
+      return this.helmOps.map((app) => app.nameDisplay);
+    }
+  },
+
+  methods: {
+    resourceNames,
+
+    close(buttonDone) {
+      if (buttonDone && typeof buttonDone === 'function') {
+        buttonDone(true);
+      }
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      try {
+        await Promise.all(this.helmOps.map((app) => this.updateHelmOp(app)));
+
+        this.close();
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone(false);
+      }
+    },
+
+    updateHelmOp(value) {
+      const now = value.spec.forceSyncGeneration || 1;
+
+      value.spec.forceSyncGeneration = now + 1;
+
+      return value.save();
+    },
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-force-update"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4
+        v-clean-html="t('fleet.helmOp.actions.forceUpdate.promptTitle')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <div class="mb-20">
+        {{ t('fleet.helmOp.actions.forceUpdate.promptNames') }} <span
+          v-clean-html="resourceNames(names, null, t)"
+          class="body"
+        />
+      </div>
+      <Banner
+        color="info"
+        label-key="fleet.helmOp.actions.forceUpdate.promptWarning"
+      >
+        <span v-clean-html="t('fleet.helmOp.actions.forceUpdate.promptWarning', { count: names.length}, true)" />
+      </Banner>
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
+    </template>
+
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <AsyncButton
+        mode="update"
+        class="btn bg-info ml-10"
+        :data-testid="'deactivate-driver-confirm'"
+        @click="apply"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .card-container {
+    box-shadow: none;
+  }
+
+  :deep() .card-actions {
+    display: flex;
+    justify-content: end;
+  }
+</style>