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

package/pages/c/_cluster/fleet/application/create.vue

@@ -0,0 +1,340 @@
+<script>
+import { FLEET } from '@shell/config/types';
+import { SUB_TYPE } from '@shell/config/query-params';
+import FleetUtils from '@shell/utils/fleet';
+import Masthead from '@shell/components/ResourceDetail/Masthead';
+
+export default {
+  name: 'FleetApplicationCreatePage',
+
+  components: { Masthead },
+
+  data() {
+    return {
+      resource:    FLEET.APPLICATION,
+      application: { parentNameOverride: this.$store.getters['i18n/t'](`typeLabel."${ FLEET.APPLICATION }"`, { count: 1 })?.trim() },
+      abbrSizes:   {
+        3: '24px',
+        4: '18px',
+        5: '16px',
+        6: '14px'
+      },
+    };
+  },
+
+  computed: {
+    types() {
+      return [
+        FLEET.GIT_REPO,
+        FLEET.HELM_OP
+      ].reduce((acc, type) => {
+        const schema = this.$store.getters['management/schemaFor'](type);
+
+        if (schema) {
+          const label = this.$store.getters['type-map/labelFor'](schema, 2) || '';
+
+          const canCreate = !!schema.resourceMethods?.includes('PUT');
+
+          return [
+            ...acc,
+            {
+              id:          type,
+              label,
+              description: `fleet.application.subTypes.'${ type }'.description`,
+              icon:        FleetUtils.resourceIcons[type],
+              disabled:    !canCreate,
+              tooltip:     canCreate ? null : this.t('fleet.application.noPermissions', { label }, true),
+            }
+          ];
+        }
+
+        return acc;
+      }, []);
+    },
+
+    selectedSubtype() {
+      return this.$route.query[SUB_TYPE];
+    },
+  },
+
+  methods: {
+    selectType(subtype, event) {
+      if (subtype.disabled) {
+        return;
+      }
+
+      if (event?.srcElement?.tagName === 'A') {
+        return;
+      }
+
+      this.$router.push({
+        name:   'c-cluster-fleet-application-resource-create',
+        params: {
+          cluster:  this.$route.params.cluster,
+          product:  this.$store.getters['productId'],
+          resource: subtype.id,
+        },
+      });
+    },
+
+    cancel() {
+      this.$router.back();
+    },
+  }
+};
+</script>
+
+<template>
+  <div v-if="!selectedSubtype">
+    <div class="header">
+      <Masthead
+        :resource="resource"
+        :value="application"
+      />
+    </div>
+    <div class="subtypes-container">
+      <div
+        v-for="(subtype, i) in types"
+        :key="i"
+        v-clean-tooltip="subtype.tooltip"
+        class="subtype-banner"
+        tabindex="0"
+        role="link"
+        :class="{
+          selected: subtype.id === selectedSubtype,
+          disabled: subtype.disabled
+        }"
+        :data-testid="`subtype-banner-item-${subtype.id}`"
+        :aria-disabled="false"
+        :aria-label="subtype.description ? `${subtype.label} - ${subtype.description}` : subtype.label"
+        @click="selectType(subtype, $event)"
+        @keyup.enter.space="selectType(subtype, $event)"
+      >
+        <slot name="subtype-content">
+          <div class="subtype-container">
+            <div class="subtype-logo">
+              <img
+                v-if="subtype.bannerImage"
+                :src="subtype.bannerImage"
+                :alt="(resource.type ? resource.type + ': ' : '') + (subtype.label || '')"
+              >
+              <div v-else-if="subtype.icon">
+                <i
+                  class="icon icon-image"
+                  :class="subtype.icon"
+                />
+              </div>
+              <div
+                v-else
+                class="round-image"
+              >
+                <div
+                  v-if="subtype.bannerAbbrv"
+                  class="banner-abbrv"
+                >
+                  <span v-if="$store.getters['i18n/exists'](subtype.bannerAbbrv)">{{ t(subtype.bannerAbbrv) }}</span>
+                  <span
+                    v-else
+                    :style="{fontSize: abbrSizes[subtype.bannerAbbrv.length]}"
+                  >{{ subtype.bannerAbbrv }}</span>
+                </div>
+                <div v-else>
+                  {{ subtype.id.slice(0, 1).toUpperCase() }}
+                </div>
+              </div>
+            </div>
+            <div class="subtype-body">
+              <div
+                class="title"
+                :class="{'with-description': !!subtype.description}"
+              >
+                <h5>
+                  <span
+                    v-if="$store.getters['i18n/exists'](subtype.label)"
+                    v-clean-html="t(subtype.label)"
+                  />
+                  <span v-else>{{ subtype.label }}</span>
+                </h5>
+                <a
+                  v-if="subtype.docLink"
+                  :href="subtype.docLink"
+                  target="_blank"
+                  rel="noopener nofollow"
+                  class="flex-right"
+                >{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
+              </div>
+              <hr v-if="subtype.description">
+              <div
+                v-if="subtype.description"
+                class="description"
+              >
+                <span
+                  v-if="$store.getters['i18n/exists'](subtype.description)"
+                  v-clean-html="t(subtype.description, {}, true)"
+                />
+                <span v-else>{{ subtype.description }}</span>
+              </div>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div class="footer">
+      <button
+        type="button"
+        class="btn role-secondary"
+        @click="cancel"
+      >
+        <t k="generic.cancel" />
+      </button>
+    </div>
+  </div>
+  <div v-else>
+    empty
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+  $logo: 60px;
+  $logo-space: 100px;
+
+  .subtypes-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    flex-direction:row;
+    align-content: baseline;
+  }
+  .subtype-content {
+    width: 100%;
+  }
+
+  .subtype-banner {
+    border: 1px solid var(--border);
+    border-radius: 0;
+    display: flex;
+    flex-basis: 48%;
+    margin: 10px;
+
+    &.disabled {
+      cursor: not-allowed !important;
+      background-color: var(--disabled-bg);
+    }
+
+    &.selected {
+      background-color: var(--accent-btn);
+    }
+
+    &.top {
+      background-image: linear-gradient(
+        -90deg,
+        var(--body-bg),
+        var(--accent-btn)
+      );
+
+      h2 {
+        margin: 0px;
+      }
+    }
+
+    .title {
+      align-items: center;
+      display: flex;
+      width: 100%;
+
+      h5 {
+        margin: 0;
+      }
+
+      .flex-right {
+        margin-left: auto;
+      }
+    }
+
+    .description {
+      color: var(--input-label);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &:not(.top) {
+      flex-direction: column;
+      justify-content: start;
+      &:hover {
+        cursor: pointer;
+        box-shadow: 0px 0px 1px var(--outline-width) var(--outline);
+      }
+    }
+
+    .round-image {
+      border-radius: 50%;
+      height: 60px;
+      width: 60px;
+      overflow: hidden;
+    }
+
+    .banner-abbrv {
+      align-items: center;
+      background-color: var(--primary);
+      color: var(--body-bg);
+      display: flex;
+      font-size: 2.5em;
+      height: 100%;
+      justify-content: center;
+      width: 100%;
+    }
+  }
+
+  .subtype-container {
+    position: relative;
+    display: flex;
+    height: 100%;
+  };
+
+  .subtype-body {
+    flex: 1;
+    padding: 10px;
+  }
+
+  .subtype-logo {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-width: $logo-space;
+    min-height: $logo-space;
+    overflow: hidden;
+    background-color: var(--box-bg);
+
+    img {
+      width: $logo - 4px;
+      height: $logo - 4px;
+      object-fit: contain;
+      position: relative;
+      top: 2px;
+    }
+  }
+
+  .subtype-banner {
+    .round-image {
+      background-color: var(--primary);
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+    }
+  }
+
+  .icon {
+    font-size: 4.45em;
+    line-height: 0.95em;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    margin: 20px 10px 0 10px;
+    z-index: 19;
+  }
+</style>

package/pages/c/_cluster/fleet/application/index.vue

@@ -0,0 +1,139 @@
+<script>
+import { SCHEMA, FLEET } from '@shell/config/types';
+import { checkPermissions, checkSchemasForFindAllHash } from '@shell/utils/auth';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import FleetNoWorkspaces from '@shell/components/fleet/FleetNoWorkspaces.vue';
+import FleetApplications from '@shell/components/fleet/FleetApplications';
+
+const schema = {
+  id:   FLEET.APPLICATION,
+  type: SCHEMA,
+};
+
+export default {
+  name:       'ListApplications',
+  components: {
+    Masthead,
+    FleetNoWorkspaces,
+    FleetApplications,
+  },
+
+  props: {
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
+
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  async fetch() {
+    try {
+      const hash = await checkSchemasForFindAllHash({
+        cluster: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER
+        },
+
+        clusterGroups: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER_GROUP
+        },
+
+        gitRepos: {
+          inStoreType: 'management',
+          type:        FLEET.GIT_REPO
+        },
+
+        helmOps: {
+          inStoreType: 'management',
+          type:        FLEET.HELM_OP
+        },
+
+        workspaces: {
+          inStoreType: 'management',
+          type:        FLEET.WORKSPACE
+        },
+
+      }, this.$store);
+
+      this.hasWorkspaces = (hash.workspaces || []).length > 0;
+    } catch (e) {
+    }
+
+    try {
+      const permissions = await checkPermissions(
+        {
+          workspaces: { type: FLEET.WORKSPACE },
+          gitRepos:   { type: FLEET.GIT_REPO },
+          helmOps:    { type: FLEET.HELM_OP }
+        },
+        this.$store.getters
+      );
+
+      this.permissions = permissions;
+    } catch (e) {
+    }
+  },
+
+  data() {
+    // TODO show warning if 1 of the {gitrepo, helmOps} has no permission
+
+    return {
+      schema,
+      hasWorkspaces:             false,
+      permissions:               {},
+      createLocation:            { name: 'c-cluster-fleet-application-create' },
+      forceUpdateLiveAndDelayed: 10
+    };
+  },
+
+  computed: {
+    rows() {
+      return [
+        ...this.$store.getters[`management/all`](FLEET.GIT_REPO),
+        ...this.$store.getters[`management/all`](FLEET.HELM_OP)
+      ];
+    },
+  },
+
+  methods: {}
+};
+</script>
+
+<template>
+  <div v-if="hasWorkspaces">
+    <Masthead
+      :schema="schema"
+      :resource="schema.id"
+      :type-display="t('fleet.application.pageTitle')"
+    >
+      <template #createButton>
+        <router-link
+          :to="createLocation"
+          class="btn role-primary"
+        >
+          {{ t('fleet.application.actions.create') }}
+        </router-link>
+      </template>
+    </Masthead>
+    <FleetApplications
+      :rows="rows"
+      :schema="schema"
+      :loading="$fetchState.pending"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+    />
+  </div>
+  <div v-else>
+    <FleetNoWorkspaces :can-view="permissions.workspaces" />
+  </div>
+</template>