@rancher/shell 0.1.0

package/detail/namespace.vue

@@ -0,0 +1,270 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ResourcesSummary from '@shell/components/fleet/ResourcesSummary';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import { COUNT, WORKLOAD_TYPES } from '@shell/config/types';
+import { WORKLOAD_SCHEMA } from '@shell/config/schema';
+import { getStatesByType } from '@shell/plugins/dashboard-store/resource-class';
+import MoveModal from '@shell/components/MoveModal';
+import Tab from '@shell/components/Tabbed/Tab';
+import ResourceTable from '@shell/components/ResourceTable';
+import SortableTable from '@shell/components/SortableTable';
+import Loading from '@shell/components/Loading';
+import {
+  flatten, compact, filter, findKey, values
+} from 'lodash';
+
+export default {
+  components: {
+    ResourcesSummary,
+    ResourceTable,
+    ResourceTabs,
+    Loading,
+    MoveModal,
+    Tab,
+    SortableTable
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    mode: {
+      default: 'create',
+      type:    String,
+    },
+    value: {
+      required: true,
+      type:     Object,
+    },
+  },
+
+  data() {
+    const headers = [
+      {
+        name:  'type',
+        label: this.t('tableHeaders.simpleType'),
+        value: 'type'
+      },
+      {
+        name:      'error',
+        label:     this.t('namespace.resourceStates.error'),
+        value:     'byState.error',
+        sort:      'byState.error:desc',
+        formatter: 'Number'
+      },
+      {
+        name:      'warning',
+        label:     this.t('namespace.resourceStates.warning'),
+        value:     'byState.warning',
+        sort:      'byState.warning:desc',
+        formatter: 'Number'
+      },
+      {
+        name:      'transitioning',
+        label:     this.t('namespace.resourceStates.info'),
+        value:     'byState.info',
+        sort:      'byState.info:desc',
+        formatter: 'Number'
+      },
+      {
+        name:      'active',
+        label:     this.t('namespace.resourceStates.success'),
+        sort:      'byState.success:desc',
+        value: 'byState.success',
+      },
+      {
+        name:      'unknown',
+        label:     this.t('namespace.resourceStates.unknown'),
+        sort:      'byState.unknown:desc',
+        value:     'byState.unknown',
+        formatter: 'Number'
+      },
+      {
+        name:      'total',
+        label:     this.t('namespace.total'),
+        sort:      'totalCount:desc',
+        value:     'totalCount',
+      },
+    ];
+
+    return {
+      allWorkloads: {
+        default: () => ([]),
+        type:     Array,
+      },
+      resourceTypes:    [],
+      summaryStates:    ['success', 'info', 'warning', 'error', 'unknown'],
+      headers,
+      workloadSchema:        WORKLOAD_SCHEMA
+    };
+  },
+
+  async fetch() {
+    this.allWorkloads = await this.getAllWorkloads();
+  },
+
+  computed: {
+    inStore() {
+      return this.$store.getters['currentProduct'].inStore;
+    },
+
+    namespacedResourceCounts() {
+      const allClusterResourceCounts = this.$store.getters[`${ this.inStore }/all`](COUNT)[0].counts;
+
+      return Object.keys(allClusterResourceCounts).reduce((namespaced, type) => {
+        const typeCounts = allClusterResourceCounts[type];
+
+        if (!typeCounts.namespaces || !typeCounts.namespaces[this.value.id]) {
+          return namespaced;
+        }
+        const inNamespace = typeCounts.namespaces[this.value.id];
+
+        namespaced.push({
+          type,
+          byState:     this.reduceStates(inNamespace.states || {}, inNamespace.count),
+          totalCount:    inNamespace.count,
+          schema:     this.schemaFor(type)
+        });
+
+        return namespaced;
+      }, []);
+    },
+
+    accumulatedStateCounts() {
+      const totals = {};
+
+      for (const state in this.statesByType) {
+        totals[state] = 0;
+      }
+
+      return this.namespacedResourceCounts.reduce((sum, type) => {
+        for (const state in type.byState) {
+          sum[state] += type.byState[state];
+        }
+
+        return sum;
+      }, totals);
+    },
+
+    statesByType() {
+      return getStatesByType();
+    },
+
+    /**
+     * Workload table data for current namespace
+     */
+    workloadRows() {
+      const params = this.$route.params;
+      const { id } = params;
+      const rows = flatten(compact(this.allWorkloads)).filter(row => row.showAsWorkload);
+      const namespacedRows = filter(rows, ({ metadata: { namespace } }) => namespace === id);
+
+      return namespacedRows;
+    }
+  },
+
+  methods: {
+    // sort states into 5 color-delineated categories: info, error, success, warning, unknown
+    reduceStates(states, total) {
+      const out = { success: total };
+
+      Object.keys(states).forEach((state) => {
+        out.success -= states[state];
+        if (!!out[state]) {
+          out[state] += states[state];
+        } else {
+          const genericStateKey = findKey(
+            this.statesByType,
+            stateNames => stateNames.includes(state)
+          );
+
+          if (genericStateKey) {
+            out[genericStateKey] ? out[genericStateKey] += states[state] : out[genericStateKey] = states[state];
+          } else {
+            out.unknown ? out.unknown += states[state] : out.unknown = states[state];
+          }
+        }
+      });
+
+      return out;
+    },
+
+    /**
+     * Retrieve workloads for this namespace and each type
+     */
+    getAllWorkloads() {
+      return Promise.all(values(WORKLOAD_TYPES)
+        // You may not have RBAC to see some of the types
+        .filter(type => Boolean(this.schemaFor(type)))
+        .map(type => this.$store.dispatch('cluster/findAll', { type }))
+      );
+    },
+
+    schemaFor(type) {
+      return this.$store.getters[`${ this.inStore }/schemaFor`](type);
+    },
+
+    typeListLocation(schema) {
+      if (schema?.links?.collection) {
+        const location = {
+          name:   'c-cluster-product-resource',
+          params: { ...this.$route.params, resource: schema.shortId }
+        };
+
+        return location;
+      }
+
+      return null;
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <div class="mb-20">
+      <h3>{{ t('namespace.resources') }}</h3>
+      <ResourcesSummary
+        state-key="namespace.resourceStates"
+        :value="accumulatedStateCounts"
+        :required-states="summaryStates"
+      />
+    </div>
+    <ResourceTabs v-model="value" :mode="mode">
+      <Tab :name="t('namespace.resources')">
+        <SortableTable
+          default-sort-by="error"
+          :table-actions="false"
+          :row-actions="false"
+          :rows="namespacedResourceCounts"
+          :headers="headers"
+        >
+          <template #col:type="{row}">
+            <td>
+              <n-link
+                v-if="typeListLocation(row.schema)"
+                :to="typeListLocation(row.schema)"
+              >
+                {{ row.schema.pluralName }}
+              </n-link>
+              <span v-else>{{ row.schema.pluralName }}</span>
+            </td>
+          </template>
+        </SortableTable>
+      </Tab>
+
+      <Tab :name="t('namespace.workloads')">
+        <ResourceTable
+          name="workloads"
+          :groupable="false"
+          v-bind="$attrs"
+          :schema="workloadSchema"
+          :rows="workloadRows"
+        >
+        </ResourceTable>
+      </Tab>
+    </ResourceTabs>
+    <MoveModal />
+  </div>
+</template>

package/detail/networking.k8s.io.ingress.vue

@@ -0,0 +1,57 @@
+<script>
+import { allHash } from '@shell/utils/promise';
+import { SECRET, SERVICE } from '@shell/config/types';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Rules from '@shell/edit/networking.k8s.io.ingress/Rules';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
+
+export default {
+  name:       'CRUIngress',
+  components: {
+    ResourceTabs,
+    Rules,
+    Tab
+  },
+  mixins: [CreateEditView],
+  async fetch() {
+    const hash = await allHash({
+      secrets:  this.$store.dispatch('cluster/findAll', { type: SECRET }),
+      services: this.$store.dispatch('cluster/findAll', { type: SERVICE }),
+    });
+
+    this.allServices = hash.services;
+    this.allSecrets = hash.secrets;
+  },
+  data() {
+    return { allSecrets: [], allServices: [] };
+  },
+  computed: {
+    serviceTargets() {
+      return this.filterByCurrentResourceNamespace(this.allServices)
+        .map(service => ({
+          label: service.metadata.name,
+          value: service.metadata.name,
+          ports: service.spec.ports?.map(p => p.port)
+        }));
+    },
+    firstTabLabel() {
+      return this.isView ? this.t('ingress.rulesAndCertificates.title') : this.t('ingress.rules.title');
+    },
+  },
+  methods: {
+    filterByCurrentResourceNamespace(resources) {
+      return resources.filter((resource) => {
+        return resource.metadata.namespace === this.value.metadata.namespace;
+      });
+    }
+  }
+};
+</script>
+<template>
+  <ResourceTabs v-model="value" mode="view" class="mt-20">
+    <Tab label="Rules" name="rules" :weight="1">
+      <Rules v-model="value" :mode="mode" :service-targets="serviceTargets" />
+    </Tab>
+  </ResourceTabs>
+</template>

package/detail/node.vue

@@ -0,0 +1,285 @@
+<script>
+import ConsumptionGauge from '@shell/components/ConsumptionGauge';
+import Alert from '@shell/components/Alert';
+import SortableTable from '@shell/components/SortableTable';
+import Tab from '@shell/components/Tabbed/Tab';
+import {
+  EFFECT,
+  IMAGE_SIZE,
+  KEY,
+  SIMPLE_NAME,
+  VALUE
+} from '@shell/config/table-headers';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import EmberPage from '@shell/components/EmberPage';
+import { METRIC, POD } from '@shell/config/types';
+import createEditView from '@shell/mixins/create-edit-view';
+import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
+import DashboardMetrics from '@shell/components/DashboardMetrics';
+import { mapGetters } from 'vuex';
+import { allDashboardsExist } from '@shell/utils/grafana';
+import Loading from '@shell/components/Loading';
+import metricPoller from '@shell/mixins/metric-poller';
+import { haveV1Monitoring } from '@shell/utils/monitoring';
+
+const NODE_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-detail-1/rancher-node-detail?orgId=1';
+const NODE_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-1/rancher-node?orgId=1';
+
+export default {
+  name: 'DetailNode',
+
+  components: {
+    Alert,
+    ConsumptionGauge,
+    DashboardMetrics,
+    Loading,
+    ResourceTabs,
+    Tab,
+    SortableTable,
+    EmberPage,
+  },
+
+  mixins: [createEditView, metricPoller],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
+
+    if (haveV1Monitoring(this.$store.getters)) {
+      const v3Nodes = await this.$store.dispatch('rancher/request', {
+        url:    '/v3/nodes',
+        method: 'get'
+      });
+
+      this.v3Nodes = v3Nodes;
+    }
+
+    return this.$store.dispatch('cluster/findAll', { type: POD });
+  },
+
+  data() {
+    const podSchema = this.$store.getters['cluster/schemaFor'](POD);
+
+    return {
+      v3Nodes:          null,
+      metrics:          { cpu: 0, memory: 0 },
+      infoTableHeaders: [
+        {
+          ...KEY,
+          label: '',
+          width: 200
+        },
+        {
+          ...VALUE,
+          label:       '',
+          dashIfEmpty: true,
+        }
+      ],
+      imageTableHeaders: [
+        { ...SIMPLE_NAME, width: 400 },
+        IMAGE_SIZE
+      ],
+      taintTableHeaders: [
+        KEY,
+        VALUE,
+        EFFECT
+      ],
+      podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema),
+      NODE_METRICS_DETAIL_URL,
+      NODE_METRICS_SUMMARY_URL,
+      showMetrics:     false
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+    v1MonitoringUrl() {
+      if (this.v3Nodes && this.v3Nodes.data) {
+        const node = this.v3Nodes.data.find((n) => {
+          return n.nodeName === this.value.metadata?.name;
+        });
+
+        if (node) {
+          // Custom page just with node metrics graphs
+          const id = this.currentCluster.id;
+
+          return `/k/${ id }/monitoring/${ node.id }/metrics`;
+        }
+      }
+
+      return null;
+    },
+    memoryUnits() {
+      const exponent = exponentNeeded(this.value.ramCapacity, 1024);
+
+      return `${ UNITS[exponent] }iB`;
+    },
+
+    pidPressureStatus() {
+      return this.mapToStatus(this.value.isPidPressureOk);
+    },
+
+    diskPressureStatus() {
+      return this.mapToStatus(this.value.isDiskPressureOk);
+    },
+
+    memoryPressureStatus() {
+      return this.mapToStatus(this.value.isMemoryPressureOk);
+    },
+
+    kubeletStatus() {
+      return this.mapToStatus(this.value.isKubeletOk);
+    },
+
+    infoTableRows() {
+      return Object.keys(this.value.status.nodeInfo)
+        .map(key => ({
+          key:   this.t(`node.detail.tab.info.key.${ key }`),
+          value: this.value.status.nodeInfo[key]
+        }));
+    },
+
+    imageTableRows() {
+      const images = this.value.status.images || [];
+
+      return images.map(image => ({
+        // image.names[1] typically has the user friendly name but on occasion there's only one name and we should use that
+        name:      image.names ? (image.names[1] || image.names[0]) : '---',
+        sizeBytes: image.sizeBytes
+      }));
+    },
+
+    taintTableRows() {
+      return this.value.spec.taints || [];
+    },
+
+    graphVars() {
+      return { instance: `${ this.value.internalIp }:9796` };
+    }
+  },
+
+  methods: {
+    memoryFormatter(value) {
+      const formatOptions = {
+        addSuffix:  false,
+        increment:  1024,
+      };
+
+      return formatSi(value, formatOptions);
+    },
+
+    mapToStatus(isOk) {
+      return isOk ? 'success' : 'error';
+    },
+
+    async loadMetrics() {
+      const schema = this.$store.getters['cluster/schemaFor'](METRIC.NODE);
+
+      if (schema) {
+        await this.$store.dispatch('cluster/find', {
+          type: METRIC.NODE,
+          id:   this.value.id,
+          opt:  { force: true }
+        });
+
+        this.$forceUpdate();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else class="node">
+    <div class="spacer"></div>
+    <div class="alerts">
+      <Alert class="mr-10" :status="pidPressureStatus" :message="t('node.detail.glance.pidPressure')" />
+      <Alert class="mr-10" :status="diskPressureStatus" :message="t('node.detail.glance.diskPressure')" />
+      <Alert class="mr-10" :status="memoryPressureStatus" :message="t('node.detail.glance.memoryPressure')" />
+      <Alert :status="kubeletStatus" :message="t('node.detail.glance.kubelet')" />
+    </div>
+    <div class="mt-20 resources">
+      <ConsumptionGauge :resource-name="t('node.detail.glance.consumptionGauge.cpu')" :capacity="value.cpuCapacity" :used="value.cpuUsage" />
+      <ConsumptionGauge :resource-name="t('node.detail.glance.consumptionGauge.memory')" :capacity="value.ramCapacity" :used="value.ramUsage" :units="memoryUnits" :number-formatter="memoryFormatter" />
+      <ConsumptionGauge :resource-name="t('node.detail.glance.consumptionGauge.pods')" :capacity="value.podCapacity" :used="value.podConsumed" />
+    </div>
+    <div class="spacer"></div>
+    <ResourceTabs v-model="value" :mode="mode">
+      <Tab name="pods" :label="t('node.detail.tab.pods')" :weight="4">
+        <SortableTable
+          key-field="_key"
+          :headers="podTableHeaders"
+          :rows="value.pods"
+          :row-actions="false"
+          :table-actions="false"
+          :search="false"
+        />
+      </Tab>
+      <Tab v-if="showMetrics" :label="t('node.detail.tab.metrics')" name="node-metrics" :weight="3">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="NODE_METRICS_DETAIL_URL"
+            :summary-url="NODE_METRICS_SUMMARY_URL"
+            :vars="graphVars"
+            graph-height="825px"
+          />
+        </template>
+      </Tab>
+      <Tab name="info" :label="t('node.detail.tab.info.label')" class="bordered-table" :weight="2">
+        <SortableTable
+          key-field="_key"
+          :headers="infoTableHeaders"
+          :rows="infoTableRows"
+          :row-actions="false"
+          :table-actions="false"
+          :show-headers="false"
+          :search="false"
+        />
+      </Tab>
+      <Tab name="images" :label="t('node.detail.tab.images')" :weight="1">
+        <SortableTable
+          key-field="_key"
+          :headers="imageTableHeaders"
+          :rows="imageTableRows"
+          :row-actions="false"
+          :table-actions="false"
+        />
+      </Tab>
+      <Tab name="taints" :label="t('node.detail.tab.taints')" :weight="0">
+        <SortableTable
+          key-field="_key"
+          :headers="taintTableHeaders"
+          :rows="taintTableRows"
+          :row-actions="false"
+          :table-actions="false"
+          :search="false"
+        />
+      </Tab>
+      <Tab v-if="v1MonitoringUrl" name="v1Metrics" :label="t('node.detail.tab.metrics')" :weight="0">
+        <div id="ember-anchor">
+          <EmberPage inline="ember-anchor" :src="v1MonitoringUrl" />
+        </div>
+      </Tab>
+    </ResourceTabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resources {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & > * {
+    width: 30%;
+  }
+}
+</style>