@rancher/shell 0.1.0

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

@@ -0,0 +1,17 @@
+<script>
+import { NAME as APPS } from '@shell/config/product/apps';
+
+export default {
+  layout: 'plain',
+
+  middleware({ redirect, route } ) {
+    return redirect({
+      name:   'c-cluster-apps-charts',
+      params: {
+        ...route.params,
+        product: APPS,
+      }
+    });
+  }
+};
+</script>

package/pages/c/_cluster/auth/config/_id.vue

@@ -0,0 +1,32 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+import { MANAGEMENT } from '@shell/config/types';
+import { authProvidersInfo } from '@shell/utils/auth';
+
+export default {
+  name:        'AuthConfigDetail',
+  components:  { ResourceDetail },
+  computed:   {
+    AUTH_CONFIG() {
+      return MANAGEMENT.AUTH_CONFIG;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    // The root auth/config page redirects to this page in some cases. Prevent that navigation if we're just going to end up here again
+    const sameRoute = from.name === 'c-cluster-auth-config-id' && to.name === 'c-cluster-auth-config';
+
+    if (sameRoute) {
+      // Ensure we re-evaluate the redirect in case this auth provider has been disabled
+      const authProvs = await authProvidersInfo(this.$store);
+
+      next(!authProvs.enabledLocation);
+    } else {
+      next();
+    }
+  },
+};
+</script>
+
+<template>
+  <ResourceDetail :resource-override="AUTH_CONFIG" :flex-content="true" />
+</template>

package/pages/c/_cluster/auth/config/index.vue

@@ -0,0 +1,104 @@
+<script>
+import { MANAGEMENT } from '@shell/config/types';
+import SelectIconGrid from '@shell/components/SelectIconGrid';
+import { sortBy } from '@shell/utils/sort';
+import { MODE, _EDIT } from '@shell/config/query-params';
+import { authProvidersInfo } from '@shell/utils/auth';
+import Banner from '@shell/components/Banner';
+
+export default {
+  components: { SelectIconGrid, Banner },
+
+  async asyncData({ store, redirect }) {
+    const authProvs = await authProvidersInfo(store);
+
+    if (!!authProvs.enabledLocation) {
+      redirect(authProvs.enabledLocation);
+    }
+
+    return { nonLocal: authProvs.nonLocal, enabled: authProvs.enabled };
+  },
+
+  data() {
+    const resource = MANAGEMENT.AUTH_CONFIG;
+    const getters = this.$store.getters;
+    const inStore = getters['currentStore'](resource);
+    const hasListComponent = getters['type-map/hasCustomList'](resource);
+    const hasEditComponent = getters['type-map/hasCustomEdit'](resource);
+    const schema = getters[`${ inStore }/schemaFor`](resource);
+
+    return {
+      resource,
+      schema,
+      hasListComponent,
+      hasEditComponent,
+
+      // Provided by asyncData later
+      nonLocal: null,
+    };
+  },
+
+  computed: {
+    rows() {
+      return sortBy(this.nonLocal, ['sideLabel', 'nameDisplay']);
+    },
+
+    displayName() {
+      return this.$store.getters['type-map/labelFor'](this.schema, 2);
+    },
+
+    localUsersRoute() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster: this.$route.params.cluster, product: 'auth', resource: MANAGEMENT.USER
+        }
+      };
+    },
+  },
+
+  methods: {
+    colorFor(row) {
+      const types = ['ldap', 'oauth', 'saml', 'oidc'];
+
+      const idx = types.indexOf(row.configType);
+
+      if ( idx === -1 ) {
+        return 'color8';
+      }
+
+      return `color${ idx + 1 }`;
+    },
+
+    goTo(id) {
+      this.$router.push({
+        name:   'c-cluster-auth-config-id',
+        params: { id },
+        query:  { [MODE]: _EDIT }
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h1 class="m-0">
+      {{ displayName }}
+    </h1>
+    <Banner v-if="!enabled.length" :label="t('authConfig.noneEnabled')" color="info">
+      {{ t('authConfig.localEnabled') }}
+      <nuxt-link :to="localUsersRoute">
+        {{ t('authConfig.manageLocal') }}
+      </nuxt-link>
+      <br />
+      {{ t('authConfig.noneEnabled') }}
+    </Banner>
+    <SelectIconGrid
+      :rows="rows"
+      :color-for="colorFor"
+      name-field="provider"
+      @clicked="(row) => goTo(row.id)"
+    />
+  </div>
+</template>

package/pages/c/_cluster/auth/group.principal/assign-edit.vue

@@ -0,0 +1,133 @@
+<script>
+import FooterComponent from '@shell/components/form/Footer';
+import SelectPrincipal from '@shell/components/auth/SelectPrincipal.vue';
+import GlobalRoleBindings from '@shell/components/GlobalRoleBindings.vue';
+import { NORMAN } from '@shell/config/types';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { NAME } from '@shell/config/product/auth';
+import { BLANK_CLUSTER } from '@shell/store';
+
+export default {
+  components: {
+    SelectPrincipal,
+    FooterComponent,
+    GlobalRoleBindings,
+  },
+  data() {
+    return {
+      errors:       [],
+      principalId:  null,
+      canLogIn:     false,
+      rolesChanged: false,
+      editMode:     _EDIT,
+    };
+  },
+  computed: {
+    mode() {
+      return !this.principalId ? _VIEW : this.$route.query.mode || _VIEW;
+    },
+    canSave() {
+      return this.rolesChanged && this.canLogIn;
+    }
+  },
+  methods: {
+    setPrincipal(id) {
+      this.principalId = id;
+
+      return true;
+    },
+    async cancel() {
+      await this.navBack();
+    },
+    async save(buttonDone) {
+      this.errors = [];
+
+      try {
+        await this.$refs.grb.save();
+
+        await this.$store.dispatch('management/findAll', {
+          type: NORMAN.SPOOFED.GROUP_PRINCIPAL,
+          opt:  { force: true }
+        }, { root: true }); // See PromptRemove.vue
+
+        this.navBack();
+
+        buttonDone(true);
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone(false);
+      }
+    },
+    navBack() {
+      this.$router.replace({
+        name:   `c-cluster-product-resource`,
+        params: {
+          cluster:  BLANK_CLUSTER,
+          product:  NAME,
+          resource: NORMAN.SPOOFED.GROUP_PRINCIPAL,
+        },
+      });
+    }
+  }
+};
+
+</script>
+
+<template>
+  <div>
+    <div>
+      <div class="masthead">
+        <header>
+          <div class="title">
+            <h1 class="m-0">
+              {{ t('authGroups.assignEdit.assignTitle') }}
+            </h1>
+          </div>
+        </header>
+      </div>
+
+      <form>
+        <SelectPrincipal :retain-selection="true" class="mb-20" :show-my-group-types="['group']" :search-group-types="'group'" @add="setPrincipal" />
+
+        <GlobalRoleBindings
+          ref="grb"
+          :group-principal-id="principalId"
+          :mode="mode"
+          :assign-only="true"
+          @canLogIn="canLogIn = $event"
+          @hasChanges="rolesChanged = $event"
+        />
+
+        <FooterComponent
+          :mode="editMode"
+          :errors="errors"
+          :disable-save="!canSave"
+          @save="save"
+          @done="cancel"
+        >
+        </footercomponent>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .masthead {
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 10px;
+  }
+  HEADER {
+    margin: 0;
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items:center;
+
+    .btn {
+      margin-left: 10px;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+<script>
+import { NAME as AUTH } from '@shell/config/product/auth';
+import { MANAGEMENT } from '@shell/config/types';
+
+export default {
+  layout: 'plain',
+
+  middleware({ redirect, route } ) {
+    return redirect({
+      name:   'c-cluster-product-resource',
+      params: {
+        ...route.params,
+        product:  AUTH,
+        resource: MANAGEMENT.USER,
+      }
+    });
+  }
+};
+</script>

package/pages/c/_cluster/auth/roles/_resource/_id.vue

@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:        'RolesResourcedId',
+  components:  { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail />
+</template>

package/pages/c/_cluster/auth/roles/_resource/create.vue

@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'RolesResourceCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail />
+</template>

package/pages/c/_cluster/auth/roles/index.vue

@@ -0,0 +1,193 @@
+<script>
+import Tab from '@shell/components/Tabbed/Tab';
+import Tabbed from '@shell/components/Tabbed';
+import { MANAGEMENT } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
+import { NAME } from '@shell/config/product/auth';
+import { BLANK_CLUSTER } from '@shell/store';
+
+const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
+const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
+const PROJECT = SUBTYPE_MAPPING.NAMESPACE.key;
+
+const createGlobalRole = {
+  name:   `c-cluster-${ NAME }-roles-resource-create`,
+  params: {
+    cluster:  BLANK_CLUSTER,
+    resource: MANAGEMENT.GLOBAL_ROLE,
+  }
+};
+const createRoleTemplate = {
+  name:   `c-cluster-${ NAME }-roles-resource-create`,
+  params: {
+    cluster:  BLANK_CLUSTER,
+    resource: MANAGEMENT.ROLE_TEMPLATE,
+  }
+};
+
+const createVerbs = new Set(['PUT', 'blocked-PUT']);
+
+export default {
+  name: 'Roles',
+
+  components: {
+    Tab, Tabbed, ResourceTable, Loading
+  },
+
+  async asyncData({ store }) {
+    const globalRoleSchema = store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
+    const roleTemplatesSchema = store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
+
+    return {
+      globalRoles:   globalRoleSchema ? await store.dispatch(`management/findAll`, { type: MANAGEMENT.GLOBAL_ROLE }) : [],
+      roleTemplates: roleTemplatesSchema ? await store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }) : [],
+    };
+  },
+
+  data() {
+    const globalRoleSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
+    const roleTemplatesSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.ROLE_TEMPLATE);
+
+    const roleTemplateHeaders = this.$store.getters['type-map/headersFor'](roleTemplatesSchema);
+    const defaultHeaderIndex = roleTemplateHeaders.findIndex(header => header.name === 'default');
+
+    return {
+      tabs: {
+        [GLOBAL]: {
+          canFetch:       globalRoleSchema?.collectionMethods.find(verb => verb === 'GET'),
+          canCreate:      globalRoleSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          weight:         3,
+          labelKey:       SUBTYPE_MAPPING.GLOBAL.labelKey,
+          schema:         globalRoleSchema,
+          createLocation: {
+            ...createGlobalRole,
+            query: { roleContext: GLOBAL }
+          },
+        },
+        [CLUSTER]: {
+          canFetch:       roleTemplatesSchema?.collectionMethods.find(verb => verb === 'GET'),
+          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          labelKey:       SUBTYPE_MAPPING.CLUSTER.labelKey,
+          weight:         2,
+          schema:         roleTemplatesSchema,
+          headers:        this.applyDefaultHeaderLabel(roleTemplateHeaders, defaultHeaderIndex, 'tableHeaders.authRoles.clusterDefault'),
+          createLocation: {
+            ...createRoleTemplate,
+            query: { roleContext: CLUSTER }
+          },
+        },
+        [PROJECT]: {
+          canFetch:       roleTemplatesSchema?.collectionMethods.find(verb => verb === 'GET'),
+          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          labelKey:       SUBTYPE_MAPPING.NAMESPACE.labelKey,
+          weight:         1,
+          schema:         roleTemplatesSchema,
+          headers:        this.applyDefaultHeaderLabel(roleTemplateHeaders, defaultHeaderIndex, 'tableHeaders.authRoles.projectDefault'),
+          createLocation: {
+            ...createRoleTemplate,
+            query: { roleContext: PROJECT }
+          },
+        },
+      },
+
+      GLOBAL,
+      CLUSTER,
+      PROJECT,
+
+      globalRoles:   null,
+      roleTemplates: null,
+    };
+  },
+
+  computed: {
+    globalResources() {
+      return this.globalRoles;
+    },
+
+    clusterResources() {
+      return this.roleTemplates.filter(r => r.context === SUBTYPE_MAPPING.CLUSTER.context);
+    },
+
+    namespaceResources() {
+      return this.roleTemplates.filter(r => r.context === SUBTYPE_MAPPING.NAMESPACE.context);
+    },
+
+    type() {
+      if (this.$route.hash.endsWith(PROJECT)) {
+        return PROJECT;
+      }
+      if (this.$route.hash.endsWith(CLUSTER)) {
+        return CLUSTER;
+      }
+
+      return GLOBAL;
+    },
+
+    canCreate() {
+      return this.tabs[this.type].canCreate;
+    },
+
+    createLabel() {
+      return this.t(`rbac.roletemplate.subtypes.${ this.type }.createButton`);
+    },
+
+    createLocation() {
+      return this.tabs[this.type].createLocation;
+    }
+
+  },
+
+  methods: {
+    applyDefaultHeaderLabel(roleTemplateHeaders, defaultHeaderIndex, labelKey) {
+      const headers = [...roleTemplateHeaders];
+
+      headers[defaultHeaderIndex] = {
+        ...roleTemplateHeaders[defaultHeaderIndex],
+        labelKey,
+      };
+
+      return headers;
+    }
+  }
+
+};
+</script>
+
+<template>
+  <Loading v-if="!globalRoles || !roleTemplates" />
+  <div v-else>
+    <header>
+      <div class="title">
+        <h1 class="m-0">
+          {{ t('rbac.roletemplate.label') }}
+        </h1>
+      </div>
+      <div class="actions-container">
+        <div class="actions">
+          <n-link
+            v-if="canCreate"
+            :to="createLocation"
+            class="btn role-primary"
+          >
+            {{ createLabel }}
+          </n-link>
+        </div>
+      </div>
+    </header>
+    <Tabbed>
+      <Tab v-if="tabs[GLOBAL].canFetch" :name="GLOBAL" :weight="tabs[GLOBAL].weight" :label-key="tabs[GLOBAL].labelKey">
+        <ResourceTable :schema="tabs[GLOBAL].schema" :rows="globalResources" />
+      </Tab>
+
+      <Tab v-if="tabs[CLUSTER].canFetch" :name="CLUSTER" :weight="tabs[CLUSTER].weight" :label-key="tabs[CLUSTER].labelKey">
+        <ResourceTable :schema="tabs[CLUSTER].schema" :headers="tabs[CLUSTER].headers" :rows="clusterResources" />
+      </Tab>
+
+      <Tab v-if="tabs[PROJECT].canFetch" :name="PROJECT" :weight="tabs[PROJECT].weight" :label-key="tabs[PROJECT].labelKey">
+        <ResourceTable :schema="tabs[PROJECT].schema" :headers="tabs[PROJECT].headers" :rows="namespaceResources" />
+      </Tab>
+    </Tabbed>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+<script>
+import InstallRedirect from '@shell/utils/install-redirect';
+import { NAME, CHART_NAME } from '@shell/config/product/backup';
+import { BACKUP_RESTORE } from '@shell/config/types';
+
+export default { middleware: [InstallRedirect(NAME, CHART_NAME, BACKUP_RESTORE.BACKUP)] };
+</script>
+
+<template>
+  <div>This is backup/restore.</div>
+</template>

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

@@ -0,0 +1,11 @@
+<script>
+import InstallRedirect from '@shell/utils/install-redirect';
+import { NAME, CHART_NAME } from '@shell/config/product/cis';
+import { CIS } from '@shell/config/types';
+
+export default { middleware: [InstallRedirect(NAME, CHART_NAME, CIS.CLUSTER_SCAN)] };
+</script>
+
+<template>
+  <div>This is cis.</div>
+</template>

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

@@ -0,0 +1,16 @@
+<script>
+
+export default {
+  layout: 'plain',
+
+  mounted() {
+    const link = this.$store.getters['backToRancherLink'];
+
+    window.location.href = link;
+  }
+};
+</script>
+
+<template>
+  <div>Redirecting...</div>
+</template>

package/pages/c/_cluster/explorer/ConfigBadge.vue

@@ -0,0 +1,55 @@
+<script>
+export default {
+  props: {
+    cluster: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  name: 'ConfigBadge',
+
+  computed: {
+    hasBadge() {
+      return !!this.cluster?.badge;
+    }
+  },
+  methods: {
+    customBadgeDialog() {
+      this.$store.dispatch('cluster/promptModal', { component: 'AddCustomBadgeDialog' });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="config-badge">
+    <div>
+      <a class="badge-install" @click="customBadgeDialog">
+        <i class="icon icon-cluster" />
+        <span v-if="hasBadge">{{ t('clusterBadge.editLabel') }}</span>
+        <span v-else>{{ t('clusterBadge.addLabel') }}</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .badge-install:hover {
+    cursor: pointer;
+  }
+  .badge-install {
+    display: flex;
+    margin-left: 10px;
+
+    > I {
+      line-height: inherit;
+      margin-right: 4px;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+</style>