dashboard-shell-shell 0.0.1

package/pages/about.vue

@@ -0,0 +1,311 @@
+<script>
+import Loading from '@shell/components/Loading';
+import BackLink from '@shell/components/BackLink';
+import BackRoute from '@shell/mixins/back-link';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { getVendor } from '@shell/config/private-label';
+import { downloadFile } from '@shell/utils/download';
+import { mapGetters } from 'vuex';
+import TabTitle from '@shell/components/TabTitle';
+
+export default {
+  components: {
+    BackLink, Loading, TabTitle
+  },
+  mixins: [BackRoute],
+  async fetch() {
+    this.settings = await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.SETTING });
+  },
+  data() {
+    return {
+      dashboardVersion: this.$config.dashboardVersion,
+      settings:         null,
+      SETTING
+    };
+  },
+  computed: {
+    ...mapGetters(['releaseNotesUrl']),
+    rancherVersion() {
+      return this.settings.find((s) => s.id === SETTING.VERSION_RANCHER);
+    },
+    appName() {
+      return getVendor();
+    },
+    cliVersion() {
+      return this.settings.find((s) => s.id === SETTING.VERSION_CLI);
+    },
+    helmVersion() {
+      return this.settings.find((s) => s.id === SETTING.VERSION_HELM);
+    },
+    dockerMachineVersion() {
+      return this.settings.find((s) => s.id === SETTING.VERSION_MACHINE);
+    },
+    downloads() {
+      return [
+        this.createOSOption('about.os.mac', 'icon-apple', this.settings?.find((s) => s.id === SETTING.CLI_URL.DARWIN)?.value, null),
+        this.createOSOption('about.os.linux', 'icon-linux', this.settings?.find((s) => s.id === SETTING.CLI_URL.LINUX)?.value, this.downloadLinuxImages),
+        this.createOSOption('about.os.windows', 'icon-windows', this.settings?.find((s) => s.id === SETTING.CLI_URL.WINDOWS)?.value, this.downloadWindowsImages)
+      ];
+    },
+    downloadImageList() {
+      return this.downloads.filter((d) => !!d.imageList);
+    },
+    downloadCli() {
+      return this.downloads.filter((d) => !!d.cliLink);
+    }
+  },
+  methods: {
+    createOSOption(label, icon, cliLink, imageList) {
+      const slash = cliLink?.lastIndexOf('/');
+
+      return {
+        label,
+        icon,
+        imageList,
+        cliLink,
+        cliFile: slash >= 0 ? cliLink.substr(slash + 1, cliLink.length - 1) : cliLink
+      };
+    },
+
+    async downloadLinuxImages() {
+      const res = await this.$store.dispatch('management/request', { url: '/v3/kontainerdrivers/rancher-images' });
+
+      try {
+        await downloadFile(`.rancher-linux-images.txt`, res.data);
+      } catch (error) {
+        this.$store.dispatch('growl/fromError', { title: 'Error downloading Linux image list', err: error }, { root: true });
+      }
+    },
+
+    async downloadWindowsImages() {
+      const res = await this.$store.dispatch('management/request', { url: '/v3/kontainerdrivers/rancher-windows-images' });
+
+      try {
+        await downloadFile(`.rancher-windows-images.txt`, res.data);
+      } catch (error) {
+        this.$store.dispatch('growl/fromError', { title: 'Error downloading Windows image list', err: error }, { root: true });
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="!settings" />
+  <div
+    v-else
+    class="about"
+  >
+    <BackLink :link="backLink" />
+    <div class="title-block mt-20 mb-40">
+      <h1>
+        <TabTitle breadcrumb="vendor-only">
+          {{ t('about.title') }}
+        </TabTitle>
+      </h1>
+      <router-link
+        :to="{ name: 'diagnostic' }"
+        class="btn role-primary"
+        data-testid="about__diagnostics_button"
+        role="button"
+        :aria-label="t('about.diagnostic.title')"
+        @keyup.space="$router.push({ name: 'diagnostic' })"
+      >
+        {{ t('about.diagnostic.title') }}
+      </router-link>
+    </div>
+    <h3>{{ t('about.versions.title') }}</h3>
+    <table>
+      <thead>
+        <tr>
+          <th class="custom-th">
+            {{ t('about.versions.component') }}
+          </th>
+          <th class="custom-th">
+            {{ t('about.versions.version') }}
+          </th>
+        </tr>
+      </thead>
+      <tr v-if="rancherVersion">
+        <td>
+          <a
+            href="https://github.com/rancher/rancher"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.rancher`) })"
+          >
+            {{ t("about.versions.rancher") }}
+          </a>
+        </td><td>{{ rancherVersion.value }}</td>
+      </tr>
+      <tr v-if="dashboardVersion">
+        <td>
+          <a
+            href="https://github.com/rancher/dashboard"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`generic.dashboard`)})"
+          >
+            {{ t("generic.dashboard") }}
+          </a>
+        </td><td>{{ dashboardVersion }}</td>
+      </tr>
+      <tr v-if="cliVersion">
+        <td>
+          <a
+            href="https://github.com/rancher/cli"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.cli`) })"
+          >
+            {{ appName }} {{ t("about.versions.cli") }}
+          </a>
+        </td><td>{{ cliVersion.value }}</td>
+      </tr>
+      <tr v-if="helmVersion">
+        <td>
+          <a
+            href="https://github.com/rancher/helm"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.helm`) })"
+          >
+            {{ t("about.versions.helm") }}
+          </a>
+        </td><td>{{ helmVersion.value }}</td>
+      </tr>
+      <tr v-if="dockerMachineVersion">
+        <td>
+          <a
+            href="https://github.com/rancher/machine"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            role="link"
+            :aria-label="t('about.versions.githubRepo', {name: t(`about.versions.machine`) })"
+          >
+            {{ t("about.versions.machine") }}
+          </a>
+        </td><td>{{ dockerMachineVersion.value }}</td>
+      </tr>
+    </table>
+    <p class="pt-20">
+      <a
+        class="release-notes-link"
+        :href="releaseNotesUrl"
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+        role="link"
+        :aria-label="t('about.versions.releaseNotes')"
+      >
+        {{ t('about.versions.releaseNotes') }}
+      </a>
+    </p>
+    <template v-if="downloadImageList.length">
+      <h3 class="pt-40">
+        {{ t('about.downloadImageList.title') }}
+      </h3>
+      <table>
+        <tr
+          v-for="(d, i) in downloadImageList"
+          :key="i"
+        >
+          <th>
+            <div class="os">
+              <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
+            </div>
+          </th>
+          <td>
+            <a
+              v-if="d.imageList"
+              tabindex="0"
+              :data-testid="`image_list_download_link__${d.label}`"
+              role="link"
+              :aria-label="t('about.versions.downloadImages', { listName: t(d.label) })"
+              @click="d.imageList"
+              @keyup.enter="d.imageList"
+            >
+              {{ t('asyncButton.download.action') }}
+            </a>
+          </td>
+        </tr>
+      </table>
+    </template>
+    <template v-if="downloadCli.length">
+      <h3 class="pt-40">
+        {{ t('about.downloadCLI.title') }}
+      </h3>
+      <table>
+        <tr
+          v-for="(d, i) in downloadCli"
+          :key="i"
+          class="link"
+        >
+          <th>
+            <div class="os">
+              <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
+            </div>
+          </th>
+          <td>
+            <a
+              v-if="d.cliLink"
+              :href="d.cliLink"
+              role="link"
+              :aria-label="t('about.versions.downloadCli', { os: t(d.label) })"
+            >{{ d.cliFile }}</a>
+          </td>
+        </tr>
+      </table>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.about {
+  .title-block {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  table {
+    border-collapse: collapse;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+
+    tr > th:first-of-type {
+      width: 20%;
+    }
+
+    th, td {
+      border: 1px solid var(--border);
+      padding: 8px 5px;
+      min-width: 150px;
+      text-align: left;
+    }
+
+    th.custom-th {
+      background-color: var(--sortable-table-top-divider);
+      border-bottom: 1px solid var(--sortable-table-top-divider);
+    }
+
+    th:not(.custom-th) {
+      font-weight: normal;
+    }
+
+    a {
+      cursor: pointer;
+    }
+
+    .os {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+</style>

package/pages/account/create-key.vue

@@ -0,0 +1,16 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'APIKeyCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail
+    store-override="rancher"
+    resource-override="token"
+    parent-route-override="account"
+  />
+</template>

package/pages/account/index.vue

@@ -0,0 +1,308 @@
+<script>
+import BackLink from '@shell/components/BackLink';
+import PromptChangePassword from '@shell/components/PromptChangePassword';
+import { MANAGEMENT, NORMAN } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import Loading from '@shell/components/Loading';
+// import Principal from '@shell/components/auth/Principal';
+import Principal from './pri.vue';
+import BackRoute from '@shell/mixins/back-link';
+import { mapGetters } from 'vuex';
+
+import { Banner } from '@components/Banner';
+import ResourceTable from '@shell/components/ResourceTable';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import TabTitle from '@shell/components/TabTitle';
+
+const API_ENDPOINT = '/v3';
+
+export default {
+  components: {
+    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal, TabTitle
+  },
+  mixins: [BackRoute],
+  async fetch() {
+    this.canChangePassword = await this.calcCanChangePassword();
+
+    if (this.apiKeySchema) {
+      this.rows = await this.$store.dispatch('rancher/findAll', { type: NORMAN.TOKEN });
+    }
+
+    // Get all settings - the API host setting may not be set, so this avoids a 404 request if we look for the specific setting
+    const allSettings = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.SETTING });
+    const apiHostSetting = allSettings.find((i) => i.id === SETTING.API_HOST);
+    const serverUrlSetting = allSettings.find((i) => i.id === SETTING.SERVER_URL);
+
+    this.apiHostSetting = apiHostSetting?.value;
+    this.serverUrlSetting = serverUrlSetting?.value;
+  },
+  data() {
+    return {
+      apiHostSetting:    null,
+      serverUrlSetting:  null,
+      rows:              null,
+      canChangePassword: false
+    };
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    apiKeyheaders() {
+      return this.apiKeySchema ? this.$store.getters['type-map/headersFor'](this.apiKeySchema) : [];
+    },
+
+    // Port of Ember code for API Url - see: https://github.com/rancher/ui/blob/8e07c492673171731f3b26af14c978bc103d1828/lib/shared/addon/endpoint/service.js#L58
+    apiUrlBase() {
+      let setting = this.apiHostSetting;
+
+      if (setting && setting.indexOf('http') !== 0) {
+        setting = `http://${ setting }`;
+      }
+
+      // Use Server Setting URL if the api host setting is not set
+      let url = setting || this.serverUrlSetting;
+
+      // If the URL is relative, add on the current base URL from the browser
+      if ( url.indexOf('http') !== 0 ) {
+        url = `${ window.location.origin }/${ url.replace(/^\/+/, '') }`;
+      }
+
+      // URL must end in a single slash
+      url = `${ url.replace(/\/+$/, '') }/`;
+
+      return url;
+    },
+
+    apiUrl() {
+      const base = this.apiUrlBase;
+      const path = API_ENDPOINT.replace(/^\/+/, '');
+
+      return `${ base }${ path }`;
+    },
+
+    apiKeySchema() {
+      try {
+        return this.$store.getters[`rancher/schemaFor`](NORMAN.TOKEN);
+      } catch (e) {}
+
+      return null;
+    },
+
+    principal() {
+      const principalId = this.$store.getters['auth/principalId'];
+      const principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, principalId);
+
+      if (!principal) {
+        console.error('Failed to find principal with id: ', principalId); // eslint-disable-line no-console
+      }
+
+      return principal || {};
+    },
+
+    apiKeys() {
+      // Filter out tokens that are not API Keys and are not expired UI Sessions
+      const isApiKey = (key) => {
+        const labels = key.labels;
+        const expired = key.expired;
+        const current = key.current;
+
+        return ( !expired || !labels || !labels['ui-session'] ) && !current;
+      };
+
+      return !this.rows ? [] : this.rows.filter(isApiKey);
+    }
+  },
+
+  methods: {
+    addKey() {
+      this.$router.push({ name: 'account-create-key' });
+    },
+    async calcCanChangePassword() {
+      if (!this.$store.getters['auth/enabled']) {
+        return false;
+      }
+
+      if (this.principal.provider === 'local') {
+        return !!this.principal.loginName;
+      }
+
+      const users = await this.$store.dispatch('rancher/findAll', {
+        type: NORMAN.USER,
+        opt:  { url: '/v3/users', filter: { me: true } }
+      });
+
+      if (users && users.length === 1) {
+        return !!users[0].username;
+      }
+
+      return false;
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <!-- <BackLink :link="backLink" />
+    <h1>
+      <TabTitle breadcrumb="vendor-only">
+        {{ t('accountAndKeys.title') }}
+      </TabTitle>
+    </h1> -->
+    <div class="api-key-title mb-20">
+      {{ t('accountAndKeys.title') }}
+    </div>
+
+    <!-- <h2 v-t="'accountAndKeys.account.title'" /> -->
+    <div class="account">
+      <div class="account-title">
+        {{ t('accountAndKeys.account.title') }}
+      </div>
+      <Principal
+        :value="principal.id"
+        :use-muted="false"
+        :show-labels="true"
+        :isShowPass="true"
+      >
+      <template #edit>
+          <span
+            v-if="canChangePassword"
+            class="edit-pass-txt"
+            @click="$refs.promptChangePassword.show(true)"
+          >修改
+          </span>
+        </template>
+    </Principal>
+      <!-- <div>
+        <button
+          v-if="canChangePassword"
+          role="button"
+          :aria-label="t('accountAndKeys.account.change')"
+          type="button"
+          class="btn role-primary"
+          data-testid="account_change_password"
+          @click="$refs.promptChangePassword.show(true)"
+        >
+          {{ t("accountAndKeys.account.change") }}
+        </button>
+      </div> -->
+    </div>
+    <PromptChangePassword ref="promptChangePassword" />
+
+    <!-- <hr role="none"> -->
+     <div  
+     style=" border: 1px solid #d7d7d7;padding: 20px 20px 0px 20px;"
+     class="mt-20">
+    <div class="keys-header">
+      <div>
+        <!-- <h2 v-t="'accountAndKeys.apiKeys.title'" /> -->
+        <div
+            v-t="'accountAndKeys.apiKeys.title'"
+            class="account-title mb-20"
+          />
+        <div class="api-url">
+          <span>{{ t("accountAndKeys.apiKeys.apiEndpoint") }}</span>
+          <CopyToClipboardText
+            :aria-label="t('accountAndKeys.apiKeys.copyApiEnpoint')"
+            :text="apiUrl"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="apiKeySchema"
+      class="keys mb-20"
+    >
+      <ResourceTable
+        :schema="apiKeySchema"
+        :rows="apiKeys"
+        :headers="apiKeyheaders"
+        key-field="id"
+        data-testid="api_keys_list"
+        :search="true"
+        :row-actions="true"
+        :table-actions="true"
+      >
+      <template #header-right>
+        <button
+        v-if="apiKeySchema"
+        role="button"
+        :aria-label="t('accountAndKeys.apiKeys.add.label')"
+        class="btn role-primary add mb-20"
+        data-testid="account_create_api_keys"
+        @click="addKey"
+      >
+        {{ t('accountAndKeys.apiKeys.add.label') }}
+      </button>
+          </template>
+    </ResourceTable>
+    </div>
+    <div v-else>
+      <Banner
+        color="warning"
+        :label="t('accountAndKeys.apiKeys.notAllowed')"
+      />
+    </div>
+  </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  hr {
+    margin: 20px 0;
+  }
+
+  .account {
+    /* display: flex;
+    justify-content: space-between */
+    border: 1px solid #D7D7D7;
+    padding: 20px;
+    box-sizing: border-box;
+
+  }
+
+  .keys-header {
+    display: flex;
+    div {
+      flex: 1;
+    }
+  }
+
+  .keys {
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    .add {
+      align-self: flex-end;
+      margin-left: 10px
+    }
+  }
+
+  .api-url {
+    display: flex;
+
+    > span {
+      margin-right: 6px;
+    }
+  }
+  .api-key-title{
+    font-size: 26px;
+    /* line-height: 20px; */
+    font-weight: 400;
+  }
+
+  .edit-pass-txt{
+    cursor: pointer;
+    color: var(--primary);
+  }
+
+  .table-account{
+    border: 1px solid #d7d7d7;
+  }
+  .account-title{
+      font-size: 14px;
+      line-height: 19px;
+      margin-bottom: 16px;
+    }
+</style>