@rancher/shell 0.5.3 → 2.0.0

package/pages/c/_cluster/longhorn/index.vue

@@ -3,42 +3,61 @@ import { mapGetters } from 'vuex';
 
 import InstallRedirect from '@shell/utils/install-redirect';
 
+import { SERVICE } from '@shell/config/types';
 import { NAME, CHART_NAME } from '@shell/config/product/longhorn';
 
+import IconMessage from '@shell/components/IconMessage';
 import LazyImage from '@shell/components/LazyImage';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { LazyImage },
+  components: {
+    IconMessage, LazyImage, Loading
+  },
 
   middleware: InstallRedirect(NAME, CHART_NAME),
 
+  async fetch() {
+    if ( this.$store.getters['cluster/schemaFor'](SERVICE) ) {
+      this.uiServices = await this.$store.dispatch('cluster/findMatching', {
+        type:     SERVICE,
+        selector: 'app=longhorn-ui'
+      });
+    }
+  },
+
   data() {
     return {
-      externalLinks:  [],
       longhornImgSrc: require('~shell/assets/images/vendor/longhorn.svg'),
+      uiServices:     null
     };
   },
 
-  computed: { ...mapGetters(['currentCluster']) },
+  computed: {
+    ...mapGetters(['currentCluster']),
 
-  mounted() {
-    this.externalLinks = [
-      {
-        enabled:     true,
-        iconSrc:     this.longhornImgSrc,
-        label:       'longhorn.overview.linkedList.longhorn.label',
-        description: 'longhorn.overview.linkedList.longhorn.description',
-        link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/`
-      },
-    ];
-  },
+    externalLinks() {
+      if ( this.uiServices && this.uiServices.length === 1 && this.uiServices[0].metadata?.namespace ) {
+        return [
+          {
+            enabled:     true,
+            iconSrc:     this.longhornImgSrc,
+            label:       'longhorn.overview.linkedList.longhorn.label', // i18n-uses longhorn.overview.linkedList.longhorn.label
+            description: 'longhorn.overview.linkedList.longhorn.description', // i18n-uses longhorn.overview.linkedList.longhorn.description
+            link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.uiServices[0].metadata.namespace }/services/http:longhorn-frontend:80/proxy/`
+          },
+        ];
+      }
 
-  methods: {}
+      return [];
+    }
+  }
 };
 </script>
 
 <template>
-  <section>
+  <Loading v-if="$fetchState.pending" />
+  <section v-else>
     <header class="row">
       <div class="col span-12">
         <h1>
@@ -52,7 +71,10 @@ export default {
         </div>
       </div>
     </header>
-    <div class="links">
+    <div
+      v-if="externalLinks && externalLinks.length"
+      class="links"
+    >
       <div
         v-for="fel in externalLinks"
         :key="fel.label"
@@ -75,5 +97,18 @@ export default {
         </a>
       </div>
     </div>
+
+    <IconMessage
+      v-else
+      class="mt-40 mb-20"
+      icon="icon-longhorn"
+      :vertical="true"
+    >
+      <template #message>
+        <p>
+          {{ t('longhorn.overview.linkedList.longhorn.uiServiceUnavailable') }}
+        </p>
+      </template>
+    </IconMessage>
   </section>
 </template>

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -3,15 +3,22 @@ import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { NORMAN, SECRET } from '@shell/config/types';
-import { AGE_NORMAN, DESCRIPTION, ID_UNLINKED, NAME_UNLINKED } from '@shell/config/table-headers';
+import {
+  AGE_NORMAN,
+  DESCRIPTION,
+  ID_UNLINKED,
+  NAME_UNLINKED,
+} from '@shell/config/table-headers';
 
 export default {
   components: {
-    Loading, ResourceTable, Masthead
+    Loading,
+    ResourceTable,
+    Masthead,
   },
 
   async fetch() {
-    if ( this.$store.getters['management/schemaFor'](SECRET) ) {
+    if (this.$store.getters['management/schemaFor'](SECRET) && !this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       // Having secrets allows showing the public portion of more types but not all users can see them.
       await this.$store.dispatch('management/findAll', { type: SECRET });
     }
@@ -37,12 +44,12 @@ export default {
         ID_UNLINKED,
         NAME_UNLINKED,
         {
-          name:        'apikey',
-          labelKey:    'tableHeaders.apikey',
-          value:       'publicData',
-          sort:        'publicData',
-          search:      'publicData',
-          dashIfEmpty: true,
+          name:      'apikey',
+          labelKey:  'tableHeaders.apikey',
+          value:     'publicData',
+          sort:      'publicData',
+          search:    'publicData',
+          formatter: 'CloudCredPublicData',
         },
         DESCRIPTION,
         AGE_NORMAN,
@@ -54,15 +61,12 @@ export default {
         name:   'c-cluster-manager-cloudCredential-create',
         params: {
           product:  this.$store.getters['currentProduct'].name,
-          resource: this.resource
+          resource: this.resource,
         },
       };
     },
   },
 
-  mounted() {
-    window.c = this;
-  },
 };
 </script>
 
@@ -75,7 +79,6 @@ export default {
       :create-location="createLocation"
       :type-display="t('manager.cloudCredentials.label')"
     />
-
     <ResourceTable
       :schema="schema"
       :rows="rows"
@@ -84,17 +87,7 @@ export default {
       group-by="providerDisplay"
     >
       <template #cell:id="{row}">
-        {{ row.id.replace('cattle-global-data:','') }}
-      </template>
-      <template #cell:apikey="{row}">
-        <span
-          v-if="row.publicData"
-          v-clean-html="row.publicData"
-        />
-        <span
-          v-else
-          class="text-muted"
-        >&mdash;</span>
+        {{ row.id.replace('cattle-global-data:', '') }}
       </template>
     </ResourceTable>
   </div>

package/pages/c/_cluster/manager/drivers/kontainerDriver/_id.vue

@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'KontainerDriverEditPage',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail resource-override="kontainerDriver" />
+</template>

package/pages/c/_cluster/manager/drivers/kontainerDriver/create.vue

@@ -0,0 +1,15 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'KontainerDriverCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail
+    resource-override="kontainerDriver"
+    parent-route-override="c-cluster-manager-driver-kontainerdriver"
+  />
+</template>

package/pages/c/_cluster/manager/drivers/kontainerDriver/index.vue

@@ -0,0 +1,94 @@
+<script>
+import { NORMAN } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import AsyncButton from '@shell/components/AsyncButton';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+export default {
+  name:       'KontainerDrivers',
+  components: {
+    ResourceTable, Loading, Masthead, AsyncButton
+  },
+
+  async fetch() {
+    this.allDrivers = await this.$store.dispatch('rancher/findAll', { type: NORMAN.KONTAINER_DRIVER }, { root: true });
+  },
+
+  data() {
+    return {
+      allDrivers:                       null,
+      canRefreshK8sMetadata:            true,
+      resource:                         NORMAN.KONTAINER_DRIVER,
+      schema:                           this.$store.getters['rancher/schemaFor'](NORMAN.KONTAINER_DRIVER),
+      useQueryParamsForSimpleFiltering: false,
+      forceUpdateLiveAndDelayed:        10
+    };
+  },
+  computed: {
+    rows() {
+      return this.allDrivers || [];
+    },
+  },
+  methods: {
+    async refreshK8sMetadata(buttonDone) {
+      try {
+        await this.$store.dispatch('rancher/request', {
+          url:    '/v3/kontainerdrivers?action=refresh',
+          method: 'post',
+          data:   { },
+        });
+
+        buttonDone(true);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', { title: 'Error refreshing kontainer drivers', err }, { root: true });
+        buttonDone(false);
+      }
+    }
+  },
+  mounted() {
+    window.c = this;
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :type-display="t('drivers.kontainer.title')"
+    >
+      <template slot="extraActions">
+        <AsyncButton
+          v-if="canRefreshK8sMetadata"
+          mode="refresh"
+          :action-label="t('drivers.actions.refresh')"
+          :waiting-label="t('drivers.actions.refresh')"
+          :success-label="t('drivers.actions.refresh')"
+          :error-label="t('drivers.actions.refresh')"
+          :data-testid="'kontainer-driver-refresh'"
+          @click="refreshK8sMetadata"
+        />
+      </template>
+    </Masthead>
+    <ResourceTable
+      :schema="schema"
+      :rows="rows"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :tableActions="true"
+      :data-testid="'kontainer-driver-list'"
+    >
+      <template #cell:name="{row}">
+        <span>{{ row.nameDisplay }}</span>
+        <div
+          v-if="row.description"
+          class="description text-muted text-small"
+        >
+          {{ row.description }}
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/pages/c/_cluster/manager/drivers/nodeDriver/_id.vue

@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'NodeDriverEditPage',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail resource-override="nodeDriver" />
+</template>

package/pages/c/_cluster/manager/drivers/nodeDriver/create.vue

@@ -0,0 +1,15 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'NodeDriverCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail
+    resource-override="nodeDriver"
+    parent-route-override="c-cluster-manager-driver-nodedriver"
+  />
+</template>

package/pages/c/_cluster/manager/drivers/nodeDriver/index.vue

@@ -0,0 +1,63 @@
+<script>
+import { NORMAN } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+export default {
+  name:       'NodeDrivers',
+  components: {
+    ResourceTable, Loading, Masthead
+  },
+
+  async fetch() {
+    this.allDrivers = await this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_DRIVER }, { root: true });
+  },
+
+  data() {
+    return {
+      allDrivers:                       null,
+      resource:                         NORMAN.NODE_DRIVER,
+      schema:                           this.$store.getters['rancher/schemaFor'](NORMAN.NODE_DRIVER),
+      useQueryParamsForSimpleFiltering: false,
+      forceUpdateLiveAndDelayed:        10
+    };
+  },
+  computed: {
+    rows() {
+      return this.allDrivers || [];
+    },
+  },
+  mounted() {
+    window.c = this;
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :type-display="t('drivers.node.title')"
+    />
+    <ResourceTable
+      :schema="schema"
+      :rows="rows"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :tableActions="true"
+      :data-testid="'node-driver-list'"
+    >
+      <template #cell:name="{row}">
+        <span>{{ row.nameDisplay }}</span>
+        <div
+          v-if="row.description"
+          class="description text-muted text-small"
+        >
+          {{ row.description }}
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/pages/c/_cluster/manager/jwt.authentication/index.vue

@@ -0,0 +1,235 @@
+<script>
+import { MANAGEMENT } from '@shell/config/types';
+import { STATE, AGE } from '@shell/config/table-headers';
+import { STATES_ENUM, colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import { allHash } from '@shell/utils/promise';
+import ResourceFetch from '@shell/mixins/resource-fetch';
+import { BadgeState } from '@components/BadgeState';
+import TypeDescription from '@shell/components/TypeDescription';
+
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import Banner from '@components/Banner/Banner.vue';
+
+export default {
+  name:       'ClusterProxyConfig',
+  components: {
+    ResourceTable, Loading, Masthead, BadgeState, Banner, TypeDescription
+  },
+  mixins: [ResourceFetch],
+  async fetch() {
+    const hash = {
+      mgmtClusters: this.$fetchType(MANAGEMENT.CLUSTER),
+      proxyConfig:  this.$fetchType(MANAGEMENT.CLUSTER_PROXY_CONFIG)
+    };
+
+    const res = await allHash(hash);
+
+    this.clusters = res.mgmtClusters;
+    this.proxyConfigs = res.proxyConfig;
+  },
+
+  data() {
+    return {
+      clusters:                         [],
+      proxyConfigs:                     [],
+      resource:                         MANAGEMENT.CLUSTER_PROXY_CONFIG,
+      schema:                           this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER_PROXY_CONFIG),
+      useQueryParamsForSimpleFiltering: false,
+      errors:                           [],
+      forceUpdateLiveAndDelayed:        5
+    };
+  },
+  methods: {
+    closeError(index) {
+      this.errors = this.errors.filter((_, i) => i !== index);
+    },
+    sortGenerationFn() {
+      // This is needed to make sure table gets refreshed when the status changes. Otherwise, it uses cached values.
+      const base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      return base + this.forceUpdateLiveAndDelayed;
+    },
+  },
+  computed: {
+    headers() {
+      const out = [
+        {
+          ...STATE,
+          value: 'value',
+        },
+        {
+          name:      'clusterName',
+          labelKey:  'jwt.headers.clusterName',
+          value:     'clusterName',
+          sort:      'clusterName',
+          search:    ['clusterName'],
+          formatter: 'LinkDetail'
+        },
+
+        {
+          name:      'updatedOn',
+          labelKey:  'jwt.headers.updatedOn',
+          value:     'updatedOn',
+          sort:      'updatedOn',
+          formatter: 'Date',
+        },
+        {
+          ...AGE,
+          labelKey: 'jwt.headers.clusterAge',
+        },
+      ];
+
+      return out;
+    },
+    rows() {
+      const proxyConfigMap = new Map();
+      const rows = [];
+
+      const enableAction = {
+        action:     'activate',
+        allEnabled: false,
+        anyEnabled: true,
+        bulkable:   true,
+        enabled:    true,
+        icon:       'icon icon-checkmark',
+        label:      this.t('jwt.actions.activate'),
+        invoke:     async(opts, resources) => {
+          const promises = [];
+
+          try {
+            resources.forEach((resource) => {
+              const res = resource.enable();
+
+              promises.push(res);
+            });
+            await Promise.all(promises);
+          } catch (e) {
+            this.errors = exceptionToErrorsArray(e);
+          }
+        }
+      };
+      const disableAction = {
+        action:     'deactivate',
+        allEnabled: false,
+        anyEnabled: true,
+        bulkable:   true,
+        enabled:    true,
+        icon:       'icon icon-x',
+        label:      this.t('jwt.actions.deactivate'),
+        invoke:     async(opts, resources) => {
+          const promises = [];
+
+          try {
+            resources.forEach((resource) => {
+              const res = resource.disable();
+
+              promises.push(res);
+            });
+            await Promise.all(promises);
+          } catch (e) {
+            this.errors = exceptionToErrorsArray(e);
+          }
+        }
+      };
+
+      this.proxyConfigs.forEach((config) => {
+        const id = config.metadata.namespace;
+
+        proxyConfigMap.set(id, { config });
+      });
+
+      this.clusters.forEach((cluster) => {
+        const id = cluster.id;
+        const clusterName = cluster.spec.displayName;
+
+        if (id !== 'local') {
+          const config = proxyConfigMap.get(id)?.config;
+
+          const value = config?.enabled || '';
+          const configName = config?.metadata?.name || '';
+          const updatedOn = value ? config?.metadata?.creationTimestamp : '';
+          const stateBackground = value ? colorForState(STATES_ENUM.ACTIVE).replace('text', 'bg') : colorForState(STATES_ENUM.INFO).replace('text', 'bg');
+          const stateLabel = value ? this.t('jwt.state.enabled') : this.t('jwt.state.disabled');
+          const creationTimestamp = cluster.metadata.creationTimestamp;
+          const availableActions = value ? [disableAction] : [enableAction];
+          const enable = async() => {
+            if (!configName) {
+              const clusterProxyConfig = await this.$store.dispatch('management/create', {
+                enabled:  true,
+                metadata: { namespace: id, generateName: 'cluster-proxy-config-' },
+              });
+
+              return clusterProxyConfig.save({ url: 'v1/management.cattle.io.clusterproxyconfigs', method: 'POST' });
+            } else {
+              config.enabled = true;
+
+              return config.save();
+            }
+          };
+          const disable = async() => {
+            return config.remove();
+          };
+
+          rows.push({
+            id, clusterName, value, stateBackground, stateLabel, creationTimestamp, updatedOn, availableActions, enable, disable
+          });
+        }
+      });
+      this.forceUpdateLiveAndDelayed = new Date().getTime();
+
+      return rows;
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :isCreatable="false"
+      :type-display="t('jwt.title')"
+    >
+      <template #typeDescription>
+        <TypeDescription :resource="'jwt.authentication'" />
+      </template>
+    </Masthead>
+
+    <Banner
+      v-for="(err, i) in errors"
+      :key="i"
+      color="error"
+      :label="err"
+      :closable="true"
+      @close="closeError(i)"
+    />
+
+    <ResourceTable
+      :schema="schema"
+      :headers="headers"
+      :key-field="'id'"
+      :namespaced="false"
+      :rows="rows"
+      :tableActions="true"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :sort-generation-fn="sortGenerationFn"
+      data-testid="jwt-authentication-list"
+    >
+      <template #col:state="{row}">
+        <td>
+          <BadgeState
+            :color="row.stateBackground"
+            :label="row.stateLabel"
+            class="state-bagde"
+          />
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -23,12 +23,16 @@ export default {
 
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
+    const alertmanagerConfigSchema = this.$store.getters[`${ inStore }/schemaFor`](MONITORING.ALERTMANAGERCONFIG);
 
     this.receiverName = this.$route.query.receiverName;
 
     const alertmanagerConfigId = this.$route.params.alertmanagerconfigid;
     const originalAlertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
     const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/clone`, { resource: originalAlertmanagerConfigResource });
+
+    await alertmanagerConfigSchema.fetchResourceFields();
+
     const mode = this.$route.query.mode;
 
     if (mode !== _CREATE) {