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

package/components/fleet/dashboard/ResourceCard.vue

@@ -0,0 +1,183 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { clone } from '@shell/utils/object';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { RcItemCard } from '@components/RcItemCard';
+import ResourceCardSummary from '@shell/components/fleet/dashboard/ResourceCardSummary.vue';
+import FleetUtils from '@shell/utils/fleet';
+import { FleetDashboardState, FleetResourceState } from '@shell/types/fleet';
+
+export default {
+
+  name: 'FleetDashboardResourceCard',
+
+  emits: ['click'],
+
+  components: {
+    ActionMenu,
+    RcItemCard,
+    ResourceCardSummary,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+
+    statePanel: {
+      type:     Object as PropType<FleetDashboardState>,
+      required: true
+    },
+  },
+
+  data() {
+    let resourcesDefaultStates: FleetResourceState | object = {};
+
+    try {
+      resourcesDefaultStates = FleetUtils.getResourcesDefaultState(this.$store.getters['i18n/withFallback'], 'fleet.fleetSummary.state');
+    } catch (error) {
+    }
+
+    return { resourcesDefaultStates };
+  },
+
+  computed: {
+    statuses() {
+      const state = this.statePanel;
+
+      if (state.id === 'success') {
+        if (this.noClusters) {
+          return [{
+            id:          state.id,
+            icon:        'icon-warning',
+            customColor: '#DAC342',
+            tooltip:     {},
+            handleClick: () => {},
+          }];
+        }
+
+        return [];
+      }
+
+      return [{
+        id:          state.id,
+        icon:        state.icon,
+        color:       '',
+        customColor: state.color,
+        tooltip:     {},
+        handleClick: () => {},
+      }];
+    },
+
+    /**
+     * Returns the count of the status for each resource in the GitRepo
+     */
+    resourceCounts() {
+      const out: Record<string, FleetResourceState> = clone(this.resourcesDefaultStates);
+
+      const resourceStatuses: Record<string, number> = this.value.allResourceStatuses;
+
+      Object.entries(resourceStatuses.states)
+        .filter(([_, count]) => count > 0)
+        .forEach(([state, count]) => {
+          const k = state?.toLowerCase();
+
+          if (out[k]) {
+            out[k].count += count;
+          } else {
+            out.unknown.count += count;
+          }
+        });
+
+      return Object.values(out).reduce((acc, { label, count }) => {
+        if (count > 0) {
+          return [...acc, { label, count }];
+        }
+
+        return acc;
+      }, [] as FleetResourceState[]).reverse();
+    },
+
+    resourcesTooltip() {
+      return this.resourceCounts.reduce((acc, state, i) => `${ acc }${ i > 0 ? '<br>' : '' }${ state.label }: ${ state.count }`, '');
+    },
+
+    noClusters() {
+      return !this.value.status?.desiredReadyClusters;
+    },
+
+    nameTooltip() {
+      if (this.value.nameDisplay?.length >= 15) {
+        return this.value.nameDisplay;
+      }
+
+      return null;
+    }
+  },
+
+  methods: {
+    select(value: PointerEvent) {
+      const elem = value?.target as HTMLElement;
+
+      if (elem?.tagName === 'A' || elem?.tagName === 'BUTTON' || elem?.className.includes('icon icon-actions')) {
+        return;
+      }
+
+      this.$emit('click');
+    },
+  }
+};
+</script>
+
+<template>
+  <RcItemCard
+    :id="`${ value.metadata.namespace }-${ value.type }-${ value.id }`"
+    class="dashboard-resource-card"
+    variant="small"
+    :header="{
+      title: { text: value.nameDisplay },
+      statuses,
+    }"
+    :content="{}"
+    :value="value"
+    @click="select"
+    @keydown.self.enter.stop.prevent="select"
+    @keydown.self.space.stop.prevent="$router.push(value.detailLocation)"
+  >
+    <template #item-card-image>
+      <i
+        class="icon-lg"
+        :class="value.dashboardIcon"
+      />
+    </template>
+    <template #item-card-actions>
+      <ActionMenu
+        :resource="value"
+        :button-aria-label="t('sortableTable.tableActionsLabel', { resource: value?.id || '' })"
+      />
+    </template>
+    <template #item-card-content>
+      <ResourceCardSummary
+        v-clean-tooltip="{content: resourcesTooltip, triggers: ['hover']}"
+        :value="value"
+        :no-clusters="noClusters"
+      />
+    </template>
+  </RcItemCard>
+</template>
+
+<style lang="scss" scoped>
+  .dashboard-resource-card {
+    margin: 1px;
+  }
+
+  .icon-lg {
+    font-size: 25px;
+    margin-right: 8px;
+  }
+
+  // .item-card-body {
+  //   width: -webkit-fill-available;
+  // }
+</style>

package/components/fleet/dashboard/ResourceCardSummary.vue

@@ -0,0 +1,199 @@
+<script lang="ts">
+import { colorForState, stateSort } from '@shell/plugins/dashboard-store/resource-class';
+import { sortBy } from '@shell/utils/sort';
+import ProgressBarMulti from '@shell/components/ProgressBarMulti.vue';
+
+export default {
+
+  name: 'FleetDashboardResourceCardSummary',
+
+  components: { ProgressBarMulti },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+    noClusters: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return { typeLabel: this.t(`typeLabel."${ this.value.type }"`, { count: 1 }) };
+  },
+
+  computed: {
+    counts() {
+      return this.value.status?.resourceCounts || {};
+    },
+
+    countsPerCluster() {
+      return ((this.value.targetClusters || []) as { id: string }[]).map(({ id }) => this.value.status?.perClusterResourceCounts?.[id] || { desiredReady: 0 });
+    },
+
+    summary() {
+      const { desiredReady, ready } = this.counts;
+
+      const partial = desiredReady === ready ? ready : desiredReady - ready;
+      const total = desiredReady;
+      const clusters = partial !== total && total !== 0 ? this.countsPerCluster.filter((c) => c.desiredReady !== c.ready).length : this.countsPerCluster.length;
+
+      return {
+        partial,
+        total,
+        clusters
+      };
+    },
+
+    stateParts() {
+      const keys = Object.keys(this.counts).filter((x) => !x.startsWith('desired'));
+
+      const out = keys.map((key) => {
+        const textColor = colorForState(key);
+
+        return {
+          color: textColor.replace(/text-/, 'bg-'),
+          value: this.counts[key],
+          sort:  stateSort(textColor, key),
+        };
+      }).filter((x) => x.value > 0);
+
+      return sortBy(out, 'sort:asc');
+    },
+
+    noClustersWarning() {
+      if (this.noClusters) {
+        return this.t('fleet.dashboard.cards.noClusters', { type: this.typeLabel });
+      }
+
+      return null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="summary-panel">
+    <div class="details">
+      <ProgressBarMulti
+        class="state-parts"
+        :values="stateParts"
+      />
+    </div>
+    <div class="mt-5 summary">
+      <div
+        v-if="value.stateDescription"
+        class="error mt-10"
+      >
+        <span
+          v-clean-tooltip="value.stateDescription"
+          class="label wrap-text fixed-height"
+          :class="{ 'text-error' : value.stateObj.error }"
+        >
+          {{ value.stateDescription }}
+        </span>
+      </div>
+      <div
+        v-else-if="noClusters"
+        class="no-clusters"
+      >
+        <span
+          v-clean-tooltip="noClustersWarning"
+          class="wrap-text"
+        >
+          {{ noClustersWarning }}
+        </span>
+      </div>
+      <div
+        v-else
+        class="count"
+      >
+        <div class="label">
+          <div>
+            <span class="large">{{ summary.partial }}</span>
+            <span
+              v-if="summary.partial !== summary.total && summary.total !== 0"
+              class="label-secondary"
+            >/{{ summary.total }}</span>
+          </div>
+          <div>
+            <span class="label-secondary">{{ t('fleet.dashboard.cards.resourceSummary.part1') }}</span>
+            <span class="large">{{ summary.clusters }}</span>
+            <span class="label-secondary">{{ t('fleet.dashboard.cards.resourceSummary.part2', { count: summary.clusters }) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .summary-panel {
+    width: 100%;
+
+    .progress {
+      width: 100%;
+      margin-top: 4px;
+    }
+
+    .progress, .progress * {
+      height: 6px;
+      border-right: 1px solid var(--body-bg);
+    }
+
+    .details {
+      display: flex;
+      align-items: center;
+    }
+
+    .summary {
+      margin-top: 5px;
+
+      .no-clusters {
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+
+        .icon {
+          margin-right: 5px;
+        }
+      }
+
+      .count {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          margin-right: 3px;
+        }
+
+        .label {
+          display: flex;
+          gap: 8px;
+
+          .large {
+            font-size: 18px;
+          }
+
+          .label-secondary{
+            color: var(--label-secondary);
+          }
+        }
+      }
+    }
+  }
+
+  .wrap-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+  }
+
+  .fixed-height {
+    height: 80px;
+  }
+</style>

package/components/fleet/dashboard/ResourceDetails.vue

@@ -0,0 +1,196 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { FLEET } from '@shell/config/types';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import FleetResources from '@shell/components/fleet/FleetResources.vue';
+import { RcButton } from '@components/RcButton';
+import { FleetDashboardState } from '@shell/types/fleet';
+import FleetApplicationSource from '@shell/components/formatter/FleetApplicationSource.vue';
+
+export default {
+  name: 'FleetDashboardResourceDetails',
+
+  components: {
+    LabeledSelect,
+    FleetResources,
+    FleetApplicationSource,
+    RcButton,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+
+    statePanel: {
+      type:     Object as PropType<FleetDashboardState>,
+      required: true
+    },
+
+    workspace: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      FLEET,
+      clusterId:      '',
+      detailLocation: {
+        ...this.value._detailLocation,
+        name: 'c-cluster-fleet-application-resource-namespace-id'
+      }
+    };
+  },
+
+  mounted() {
+    this.clusterId = this.clusters[0]?.value || '';
+  },
+
+  computed: {
+    clusters() {
+      return this.value.targetClusters.map((cluster: { id: string, nameDisplay: string }) => ({
+        label: cluster.nameDisplay,
+        value: cluster.id
+      }));
+    },
+
+    noResources() {
+      return !this.value.resourcesStatuses?.length;
+    },
+  },
+
+  methods: {
+    closePanel() {
+      this.$store.commit('slideInPanel/close');
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="details-panel">
+    <div
+      class="header"
+      :data-testid="'fleet-dashboard-resource-details-header'"
+    >
+      <div class="title">
+        <i :class="value.dashboardIcon" />
+        <router-link
+          class="label"
+          :to="detailLocation"
+        >
+          {{ value.id }}
+        </router-link>
+        <i
+          v-if="statePanel.id !== 'success'"
+          class="ml-5 state-icon"
+          :class="statePanel.icon"
+          :style="{ color: statePanel.color }"
+        />
+      </div>
+      <RcButton
+        small
+        ghost
+        data-testid="slide-in-close"
+        :aria-label="'slide-in-close'"
+        tabindex="0"
+        @click="closePanel"
+        @keydown.space.enter.stop.prevent="closePanel"
+      >
+        <i class="icon icon-close" />
+      </RcButton>
+    </div>
+
+    <h3>
+      {{ t('fleet.dashboard.source') }}
+    </h3>
+    <div class="mb-15">
+      <FleetApplicationSource
+        v-if="value.source.value"
+        :row="value"
+      />
+      <div
+        v-else
+        class="text-muted"
+      >
+        &mdash;
+      </div>
+    </div>
+
+    <h3>
+      {{ t('fleet.dashboard.resources') }}
+    </h3>
+    <FleetResources
+      :rows="value.resourcesStatuses"
+      :cluster-id="clusterId"
+      :search="!noResources"
+    >
+      <template
+        v-if="!noResources"
+        #header-left
+      >
+        <div class="row">
+          <div class="col span-10">
+            <LabeledSelect
+              v-model:value="clusterId"
+              :label="'Cluster'"
+              :options="clusters"
+              :mode="'edit'"
+              :disabled="workspace.id === 'fleet-local'"
+            />
+          </div>
+        </div>
+      </template>
+    </FleetResources>
+  </div>
+</template>
+
+<style lang="scss">
+  .details-panel {
+    padding: 10px;
+
+    .sortable-table-header {
+      .fixed-header-actions {
+        align-items: center;
+      }
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      padding: 0;
+      margin: 0 0 20px 0;
+
+      .title {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+
+        .icon {
+          font-size: 2em;
+          margin-right: 16px;
+        }
+
+        .label {
+          margin-right: 8px;
+        }
+
+        .state-icon {
+          font-size: 1.5em;
+        }
+      }
+    }
+  }
+
+  .col {
+    .labeled-select {
+      min-width: 250px;
+    }
+  }
+</style>