@rancher/shell 0.1.0

package/edit/auth/ldap/index.vue

@@ -0,0 +1,136 @@
+<script>
+import Loading from '@shell/components/Loading';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import CruResource from '@shell/components/CruResource';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import Banner from '@shell/components/Banner';
+import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
+import config from '@shell/edit/auth/ldap/config';
+import AuthConfig from '@shell/mixins/auth-config';
+import AuthBanner from '@shell/components/auth/AuthBanner';
+import Password from '@shell/components/form/Password';
+
+const AUTH_TYPE = 'ldap';
+
+export default {
+  components: {
+    Loading,
+    CruResource,
+    LabeledInput,
+    Banner,
+    AllowedPrincipals,
+    config,
+    AuthBanner,
+    Password
+  },
+
+  mixins: [CreateEditView, AuthConfig],
+
+  data() {
+    return {
+      username:      null,
+      password:      null
+    };
+  },
+
+  computed: {
+    tArgs() {
+      return {
+        provider:  this.displayName,
+        username:  this.principal.loginName || this.principal.name,
+      };
+    },
+
+    AUTH_TYPE() {
+      return AUTH_TYPE;
+    },
+
+    toSave() {
+      let out = {
+        enabled:    true,
+        ldapConfig: this.model,
+        username:   this.username,
+        password:   this.password
+      };
+
+      if (this.NAME === 'activedirectory') {
+        out = {
+          enabled:               true,
+          activeDirectoryConfig: this.model,
+          username:              this.username,
+          password:              this.password
+        };
+      }
+
+      return out;
+    },
+  },
+
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <CruResource
+      :cancel-event="true"
+      :done-route="doneRoute"
+      :mode="mode"
+      :resource="model"
+      :subtypes="[]"
+      :validation-passed="true"
+      :finish-button-mode="model.enabled ? 'edit' : 'enable'"
+      :can-yaml="false"
+      :errors="errors"
+      :show-cancel="showCancel"
+      @error="e=>errors = e"
+      @finish="save"
+      @cancel="cancel"
+    >
+      <template v-if="model.enabled && !isEnabling && !editConfig">
+        <AuthBanner :t-args="tArgs" :disable="disable" :edit="goToEdit">
+          <template slot="rows">
+            <tr><td>{{ t(`authConfig.ldap.table.server`) }}: </td><td>{{ serverUrl }}</td></tr>
+            <tr><td>{{ t(`authConfig.ldap.table.clientId`) }}: </td><td>{{ model.serviceAccountDistinguishedName || model.serviceAccountUsername }}</td></tr>
+          </template>
+        </AuthBanner>
+
+        <hr />
+
+        <AllowedPrincipals :provider="NAME" :auth-config="model" :mode="mode" />
+      </template>
+
+      <template v-else>
+        <Banner v-if="!model.enabled" :label="t('authConfig.stateBanner.disabled', tArgs)" color="warning" />
+
+        <h3>{{ t(`authConfig.ldap.${NAME}`) }}</h3>
+        <config v-model="model" :type="NAME" :mode="mode" />
+
+        <h4>{{ t('authConfig.testAndEnable') }}</h4>
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="username"
+              :label="t(`authConfig.${AUTH_TYPE}.username`)"
+              :mode="mode"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <Password
+              v-model="password"
+              :label="t(`authConfig.${AUTH_TYPE}.password`)"
+              :mode="mode"
+              required
+            />
+          </div>
+        </div>
+      </template>
+      <div v-if="!model.enabled" class="row">
+        <div class="col span-12">
+          <Banner color="info" v-html="t('authConfig.associatedWarning', tArgs, true)" />
+        </div>
+      </div>
+    </CruResource>
+  </div>
+</template>

package/edit/auth/oidc.vue

@@ -0,0 +1,259 @@
+<script>
+import Loading from '@shell/components/Loading';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import AuthConfig from '@shell/mixins/auth-config';
+import CruResource from '@shell/components/CruResource';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import Banner from '@shell/components/Banner';
+import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
+import FileSelector from '@shell/components/form/FileSelector';
+import AuthBanner from '@shell/components/auth/AuthBanner';
+import RadioGroup from '@shell/components/form/RadioGroup';
+
+export default {
+  components: {
+    Loading,
+    CruResource,
+    LabeledInput,
+    Banner,
+    AllowedPrincipals,
+    FileSelector,
+    AuthBanner,
+    RadioGroup
+  },
+
+  mixins: [CreateEditView, AuthConfig],
+  data() {
+    return {
+      customEndpoint: {
+        value:  false,
+        labels: [
+          this.t('authConfig.oidc.customEndpoint.standard'),
+          this.t('authConfig.oidc.customEndpoint.custom'),
+        ],
+        options: [
+          false,
+          true
+        ]
+      },
+      keycloakUrls: {
+        url:   null,
+        realm: null
+      }
+    };
+  },
+
+  computed: {
+    tArgs() {
+      return {
+        baseUrl:   this.serverSetting,
+        provider:  this.displayName,
+        username:  this.principal.loginName || this.principal.name,
+      };
+    },
+
+    toSave() {
+      return {
+        enabled:    true,
+        oidcConfig: this.model
+      };
+    },
+
+  },
+  watch: {
+    'keycloakUrls.url'() {
+      this.updateIssuerEndpoint();
+    },
+    'keycloakUrls.realm'() {
+      this.updateIssuerEndpoint();
+    },
+    'model.enabled'(neu) {
+      // Cover case where oidc gets disabled and we return to the edit screen with a reset model
+      if (!neu) {
+        this.keycloakUrls = {
+          url:   null,
+          realm: null
+        };
+        this.customEndpoint.value = false;
+      }
+    },
+    editConfig(neu, old) {
+      // Cover use case where user edits existing oidc (keycloakUrls aren't persisted, so if we have issuer & authEndpoint set custom endpoints to true)
+      if (!old && neu) {
+        this.customEndpoint.value = (!this.keycloakUrls.url && !this.keycloakUrls.authEndpoint) && (!!this.model.issuer && !!this.model.authEndpoint);
+      }
+    }
+  },
+
+  methods: {
+    updateIssuerEndpoint() {
+      if (!this.keycloakUrls.url) {
+        return;
+      }
+      const url = this.keycloakUrls.url.replaceAll(' ', '');
+
+      this.model.issuer = `${ url }/auth/realms/${ this.keycloakUrls.realm || '' }`;
+      this.model.authEndpoint = `${ this.model.issuer || '' }/protocol/openid-connect/auth`;
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <CruResource
+      :cancel-event="true"
+      :done-route="doneRoute"
+      :mode="mode"
+      :resource="model"
+      :subtypes="[]"
+      :validation-passed="true"
+      :finish-button-mode="model.enabled ? 'edit' : 'enable'"
+      :can-yaml="false"
+      :errors="errors"
+      :show-cancel="showCancel"
+      @error="e=>errors = e"
+      @finish="save"
+      @cancel="cancel"
+    >
+      <template v-if="model.enabled && !isEnabling && !editConfig">
+        <AuthBanner :t-args="tArgs" :disable="disable" :edit="goToEdit">
+          <template slot="rows">
+            <tr><td>{{ t(`authConfig.oidc.rancherUrl`) }}: </td><td>{{ model.rancherUrl }}</td></tr>
+            <tr><td>{{ t(`authConfig.oidc.clientId`) }}: </td><td>{{ model.clientId }}</td></tr>
+            <tr><td>{{ t(`authConfig.oidc.issuer`) }}: </td><td>{{ model.issuer }}</td></tr>
+            <tr><td>{{ t(`authConfig.oidc.authEndpoint`) }}: </td><td>{{ model.authEndpoint }}</td></tr>
+          </template>
+        </AuthBanner>
+
+        <hr />
+
+        <AllowedPrincipals :provider="NAME" :auth-config="model" :mode="mode" />
+      </template>
+
+      <template v-else>
+        <Banner v-if="!model.enabled" :label="t('authConfig.stateBanner.disabled', tArgs)" color="warning" />
+
+        <h3>{{ t(`authConfig.oidc.${NAME}`) }}</h3>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.clientId"
+              :label="t(`authConfig.oidc.clientId`)"
+              :mode="mode"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.clientSecret"
+              :label="t(`authConfig.oidc.clientSecret`)"
+              :mode="mode"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.privateKey"
+              :label="t(`authConfig.oidc.key.label`)"
+              :placeholder="t(`authConfig.oidc.key.placeholder`)"
+              :mode="mode"
+              type="multiline"
+            />
+            <FileSelector class="role-tertiary add mt-5" :label="t('generic.readFromFile')" :mode="mode" @selected="$set(model, 'privateKey', $event)" />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.certificate"
+              :label="t(`authConfig.oidc.cert.label`)"
+              :placeholder="t(`authConfig.oidc.cert.placeholder`)"
+              :mode="mode"
+              type="multiline"
+            />
+            <FileSelector class="role-tertiary add mt-5" :label="t('generic.readFromFile')" :mode="mode" @selected="$set(model, 'certificate', $event)" />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model="customEndpoint.value"
+              name="customEndpoint"
+              label-key="authConfig.oidc.customEndpoint.label"
+              :labels="customEndpoint.labels"
+              :options="customEndpoint.options"
+            >
+              <template #label>
+                <h4>{{ t('authConfig.oidc.customEndpoint.label') }}</h4>
+              </template>
+            </RadioGroup>
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="keycloakUrls.url"
+              :label="t(`authConfig.oidc.keycloak.url`)"
+              :mode="mode"
+              :required="!customEndpoint.value"
+              :disabled="customEndpoint.value"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="keycloakUrls.realm"
+              :label="t(`authConfig.oidc.keycloak.realm`)"
+              :mode="mode"
+              :required="!customEndpoint.value"
+              :disabled="customEndpoint.value"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.rancherUrl"
+              :label="t(`authConfig.oidc.rancherUrl`)"
+              :mode="mode"
+              required
+              :disabled="!customEndpoint.value"
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.issuer"
+              :label="t(`authConfig.oidc.issuer`)"
+              :mode="mode"
+              required
+              :disabled="!customEndpoint.value"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.authEndpoint"
+              :label="t(`authConfig.oidc.authEndpoint`)"
+              :mode="mode"
+              required
+              :disabled="!customEndpoint.value"
+            />
+          </div>
+        </div>
+      </template>
+      <div v-if="!model.enabled" class="row">
+        <div class="col span-12">
+          <Banner color="info" v-html="t('authConfig.associatedWarning', tArgs, true)" />
+        </div>
+      </div>
+    </CruResource>
+  </div>
+</template>

package/edit/auth/saml.vue

@@ -0,0 +1,222 @@
+<script>
+import Loading from '@shell/components/Loading';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import AuthConfig from '@shell/mixins/auth-config';
+import CruResource from '@shell/components/CruResource';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import Checkbox from '@shell/components/form/Checkbox';
+import Banner from '@shell/components/Banner';
+import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
+import FileSelector from '@shell/components/form/FileSelector';
+import AuthBanner from '@shell/components/auth/AuthBanner';
+import config from '@shell/edit/auth/ldap/config';
+
+export default {
+  components: {
+    Loading,
+    CruResource,
+    LabeledInput,
+    Banner,
+    AllowedPrincipals,
+    Checkbox,
+    FileSelector,
+    config,
+    AuthBanner
+  },
+
+  mixins: [CreateEditView, AuthConfig],
+  data() {
+    return { showLdap: false };
+  },
+
+  computed: {
+    tArgs() {
+      return {
+        baseUrl:   this.serverSetting,
+        provider:  this.displayName,
+        username:  this.principal.loginName || this.principal.name,
+      };
+    },
+
+    toSave() {
+      return { enabled: true, ...this.model };
+    },
+
+  },
+  watch: {
+    showLdap(neu, old) {
+      if (neu && !this.model.openLdapConfig) {
+        const config = {
+          connectionTimeout:            5000,
+          groupDNAttribute:             'entryDN',
+          groupMemberMappingAttribute:  'member',
+          groupMemberUserAttribute:     'entryDN',
+          groupNameAttribute:           'cn',
+          groupObjectClass:             'groupOfNames',
+          groupSearchAttribute:         'cn',
+          nestedGroupMembershipEnabled: false,
+          port:                         389,
+          servers:                      [],
+          starttls:                     false,
+          tls:                          false,
+          disabledStatusBitmask:          0,
+          userLoginAttribute:           'uid',
+          userMemberAttribute:          'memberOf',
+          userNameAttribute:            'cn',
+          userObjectClass:              'inetOrgPerson',
+          userSearchAttribute:          'uid|sn|givenName'
+        };
+
+        this.$set(this.model, 'openLdapConfig', config);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <CruResource
+      :cancel-event="true"
+      :done-route="doneRoute"
+      :mode="mode"
+      :resource="model"
+      :subtypes="[]"
+      :validation-passed="true"
+      :finish-button-mode="model.enabled ? 'edit' : 'enable'"
+      :can-yaml="false"
+      :errors="errors"
+      :show-cancel="showCancel"
+      @error="e=>errors = e"
+      @finish="save"
+      @cancel="cancel"
+    >
+      <template v-if="model.enabled && !isEnabling && !editConfig">
+        <AuthBanner :t-args="tArgs" :disable="disable" :edit="goToEdit">
+          <template slot="rows">
+            <tr><td>{{ t(`authConfig.saml.displayName`) }}: </td><td>{{ model.displayNameField }}</td></tr>
+            <tr><td>{{ t(`authConfig.saml.userName`) }}: </td><td>{{ model.userNameField }}</td></tr>
+            <tr><td>{{ t(`authConfig.saml.UID`) }}: </td><td>{{ model.uidField }}</td></tr>
+            <tr><td>{{ t(`authConfig.saml.entityID`) }}: </td><td>{{ model.entityID }}</td></tr>
+            <tr><td>{{ t(`authConfig.saml.api`) }}: </td><td>{{ model.rancherApiHost }}</td></tr>
+            <tr><td>{{ t(`authConfig.saml.groups`) }}: </td><td>{{ model.groupsField }}</td></tr>
+          </template>
+        </AuthBanner>
+
+        <hr />
+
+        <AllowedPrincipals :provider="NAME" :auth-config="model" :mode="mode" />
+      </template>
+
+      <template v-else>
+        <Banner v-if="!model.enabled" :label="t('authConfig.stateBanner.disabled', tArgs)" color="warning" />
+
+        <h3>{{ t(`authConfig.saml.${NAME}`) }}</h3>
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.displayNameField"
+              :label="t(`authConfig.saml.displayName`)"
+              :mode="mode"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.userNameField"
+              :label="t(`authConfig.saml.userName`)"
+              :mode="mode"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.uidField"
+              :label="t(`authConfig.saml.UID`)"
+              :mode="mode"
+              required
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.groupsField"
+              :label="t(`authConfig.saml.groups`)"
+              :mode="mode"
+              required
+            />
+          </div>
+        </div>
+        <div class="row mb-20">
+          <div v-if="NAME === 'keycloak' || NAME === 'ping'" class="col span-6">
+            <LabeledInput
+              v-model="model.entityID"
+              :label="t(`authConfig.saml.entityID`)"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="model.rancherApiHost"
+              :label="t(`authConfig.saml.api`)"
+              :mode="mode"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="row mb-20">
+          <div class="col span-4">
+            <LabeledInput
+              v-model="model.spKey"
+              :label="t(`authConfig.saml.key.label`)"
+              :placeholder="t(`authConfig.saml.key.placeholder`)"
+              :mode="mode"
+              required
+              type="multiline"
+            />
+            <FileSelector class="role-tertiary add mt-5" :label="t('generic.readFromFile')" :mode="mode" @selected="$set(model, 'spKey', $event)" />
+          </div>
+          <div class="col span-4">
+            <LabeledInput
+              v-model="model.spCert"
+              :label="t(`authConfig.saml.cert.label`)"
+              :placeholder="t(`authConfig.saml.cert.placeholder`)"
+              :mode="mode"
+              required
+              type="multiline"
+            />
+            <FileSelector class="role-tertiary add mt-5" :label="t('generic.readFromFile')" :mode="mode" @selected="$set(model, 'spCert', $event)" />
+          </div>
+          <div class="col span-4">
+            <LabeledInput
+              v-model="model.idpMetadataContent"
+              :label="t(`authConfig.saml.metadata.label`)"
+              :placeholder="t(`authConfig.saml.metadata.placeholder`)"
+              :mode="mode"
+              required
+              type="multiline"
+            />
+            <FileSelector class="role-tertiary add mt-5" :label="t('generic.readFromFile')" :mode="mode" @selected="$set(model, 'idpMetadataContent', $event)" />
+          </div>
+        </div>
+        <div v-if="NAME === 'shibboleth'">
+          <div class="row">
+            <Checkbox v-model="showLdap" :mode="mode" :label="t('authConfig.saml.showLdap')" />
+          </div>
+          <div class="row mt-20 mb-20">
+            <config v-if="showLdap" v-model="model.openLdapConfig" :type="NAME" :mode="mode" />
+          </div>
+        </div>
+      </template>
+      <div v-if="!model.enabled" class="row">
+        <div class="col span-12">
+          <Banner color="info" v-html="t('authConfig.associatedWarning', tArgs, true)" />
+        </div>
+      </div>
+    </CruResource>
+  </div>
+</template>

package/edit/autoscaling.horizontalpodautoscaler/external-metric.vue

@@ -0,0 +1,51 @@
+<script>
+import MetricTarget from '@shell/edit/autoscaling.horizontalpodautoscaler/metric-target';
+import MetricIdentifier from '@shell/edit/autoscaling.horizontalpodautoscaler/metric-identifier';
+
+export const DEFAULT_EXTERNAL_METRIC = {
+  type:   'io.k8s.api.autoscaling.v2beta2.externalmetricsource',
+  metric: {
+    name:     '',
+    selector: {
+      matchExpressions: [],
+      matchLabels:      {},
+    },
+  },
+  target: {
+    type:               'AverageValue',
+    averageValue:       '80',
+  },
+};
+
+export default {
+  components: {
+    MetricTarget,
+    MetricIdentifier,
+  },
+  props: {
+    value: {
+      type:    Object,
+      default: () => ({
+        name:   '',
+        target: {},
+      }),
+    },
+
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <MetricTarget v-model="value.target" :mode="mode" metric-resource="external" />
+    </div>
+    <div class="row">
+      <MetricIdentifier v-model="value.metric" :mode="mode" />
+    </div>
+  </div>
+</template>