+
+
+ )
event.currentTarget.src = placeholder}
+ />
+
+ );
+ }
+
+ renderContent() {
+ if (this.selectedChart === null || this.description === null) return
+
+
+
+ {selectedChart.getHome()}
+
+
+ {selectedChart.getMaintainers().map(({ name, email, url }) =>
+ {name}
+ )}
+
+ {selectedChart.getKeywords().length > 0 && (
+
+ {selectedChart.getKeywords().map(key => )}
+
+ )}
+
+
+ {selectedChart.getDescription()}
+
+
+ {this.renderIntroduction()}
+
+ );
+ }
+
+ render() {
+ const { chart, hideDetails } = this.props;
+ const title = chart ?
+
+
+ Release {name} successfully updated!
+ ); + } catch (err) { + Notifications.error(err); + } + this.saving = false; + } + + upgradeVersion = () => { + const { release, hideDetails } = this.props; + createUpgradeChartTab(release); + hideDetails(); + } + + renderValues() { + const { values, saving } = this; + return ( +
+
+
+ )
+ }
+
+ renderNotes() {
+ if (!this.details.info?.notes) return null;
+ const { notes } = this.details.info;
+ return (
+
+ this.values = values}
+ />
+
+
+
+ {notes}
+
+ );
+ }
+
+ renderResources() {
+ const { resources } = this.details;
+ if (!resources) return null;
+ const groups = groupBy(resources, item => item.kind);
+ const tables = Object.entries(groups).map(([kind, items]) => {
+ return (
+
+ {tables}
+
+ );
+ }
+
+ renderContent() {
+ const { release } = this.props;
+ const { details } = this;
+ if (!release) return null;
+ if (!details) {
+ return
+ Chart} className="chart">
+
+ Updated}>
+ {release.getUpdated()} ago ({release.updated})
+
+ Namespace}>
+ {release.getNs()}
+
+ Version} onClick={stopPropagation}>
+
+ Status} className="status" labelsOnly>
+
+ {this.renderValues()}
+
+ {this.renderNotes()}
+
+ {this.renderResources()}
+
+ )
+ }
+
+ render() {
+ const { release, hideDetails } = this.props
+ const title = release ?
+ {release.getChart()}
+ {release.hasNewVersion() && (
+
+ )}
+
+
+
+ {release.getVersion()}
+
+ {!release.getLastVersion() && (
+ New version available: {release.getLastVersion()}
+ )}
+
+
+ Revision
+
+ )
+ }
+
+ render() {
+ const { ...dialogProps } = this.props;
+ const releaseName = this.release ? this.release.getName() : "";
+ const header = Rollback {releaseName}
+ return (
+
+ )
+ }
+}
diff --git a/dashboard/client/components/+apps-releases/release.mixins.scss b/dashboard/client/components/+apps-releases/release.mixins.scss
new file mode 100644
index 0000000000..28f883cc99
--- /dev/null
+++ b/dashboard/client/components/+apps-releases/release.mixins.scss
@@ -0,0 +1,25 @@
+$release-status-color-list: (
+ deployed: $colorSuccess,
+ failed: $colorError,
+ deleting: $colorWarning,
+ pendingInstall: $colorInfo,
+ pendingUpgrade: $colorInfo,
+ pendingRollback: $colorInfo,
+);
+
+@mixin release-status-bgs {
+ @each $status, $color in $release-status-color-list {
+ &.#{$status} {
+ color: white;
+ background: $color;
+ }
+ }
+}
+
+@mixin release-status-colors {
+ @each $status, $color in $release-status-color-list {
+ &.#{$status} {
+ color: $color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+apps-releases/release.route.ts b/dashboard/client/components/+apps-releases/release.route.ts
new file mode 100644
index 0000000000..673a875b08
--- /dev/null
+++ b/dashboard/client/components/+apps-releases/release.route.ts
@@ -0,0 +1,14 @@
+import { RouteProps } from "react-router"
+import { appsRoute } from "../+apps/apps.route";
+import { buildURL } from "../../navigation";
+
+export const releaseRoute: RouteProps = {
+ path: appsRoute.path + "/releases/:namespace?/:name?"
+}
+
+export interface IReleaseRouteParams {
+ name?: string;
+ namespace?: string;
+}
+
+export const releaseURL = buildURL
+ Remove {releaseNames}?
+
+ )
+ }
+
+ render() {
+ return (
+ <>
+
+
+ No issues found
+ Everything is fine in the Cluster
+
+ );
+ }
+ return (
+ <>
+
+ {this.renderContent()}
+
+ );
+ }
+}
diff --git a/dashboard/client/components/+cluster/cluster-metric-switchers.scss b/dashboard/client/components/+cluster/cluster-metric-switchers.scss
new file mode 100644
index 0000000000..c0359c734a
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-metric-switchers.scss
@@ -0,0 +1,7 @@
+.ClusterMetricSwitchers {
+ margin-bottom: $margin * 2;
+
+ .metric-switch {
+ text-align: right;
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster-metric-switchers.tsx b/dashboard/client/components/+cluster/cluster-metric-switchers.tsx
new file mode 100644
index 0000000000..76c9ca6a0c
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-metric-switchers.tsx
@@ -0,0 +1,43 @@
+import "./cluster-metric-switchers.scss";
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { observer } from "mobx-react";
+import { nodesStore } from "../+nodes/nodes.store";
+import { cssNames } from "../../utils";
+import { Radio, RadioGroup } from "../radio";
+import { clusterStore, MetricNodeRole, MetricType } from "./cluster.store";
+
+export const ClusterMetricSwitchers = observer(() => {
+ const { metricType, metricNodeRole, getMetricsValues, metrics } = clusterStore;
+ const { masterNodes, workerNodes } = nodesStore;
+ const metricsValues = getMetricsValues(metrics);
+ const disableRoles = !masterNodes.length || !workerNodes.length;
+ const disableMetrics = !metricsValues.length;
+ return (
+
+
+ );
+});
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster-metrics.scss b/dashboard/client/components/+cluster/cluster-metrics.scss
new file mode 100644
index 0000000000..90e7d19465
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-metrics.scss
@@ -0,0 +1,16 @@
+.ClusterMetrics {
+ position: relative;
+ min-height: 280px;
+
+ .Chart {
+ .chart-container {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .empty {
+ margin-top: -45px;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster-metrics.tsx b/dashboard/client/components/+cluster/cluster-metrics.tsx
new file mode 100644
index 0000000000..077adde70a
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-metrics.tsx
@@ -0,0 +1,95 @@
+import "./cluster-metrics.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { ChartOptions, ChartPoint } from "chart.js";
+import { clusterStore, MetricType } from "./cluster.store";
+import { BarChart } from "../chart";
+import { bytesToUnits } from "../../utils";
+import { Spinner } from "../spinner";
+import { ZebraStripes } from "../chart/zebra-stripes.plugin";
+import { ClusterNoMetrics } from "./cluster-no-metrics";
+import { ClusterMetricSwitchers } from "./cluster-metric-switchers";
+import { getMetricLastPoints } from "../../api/endpoints/metrics.api";
+
+export const ClusterMetrics = observer(() => {
+ const { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics, liveMetrics } = clusterStore;
+ const { memoryCapacity, cpuCapacity } = getMetricLastPoints(clusterStore.metrics);
+ const metricValues = getMetricsValues(metrics);
+ const liveMetricValues = getMetricsValues(liveMetrics);
+ const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
+ const data = metricValues.map(value => ({
+ x: value[0],
+ y: parseFloat(value[1]).toFixed(3)
+ }));
+
+ const datasets = [{
+ id: metricType + metricNodeRole,
+ label: metricType.toUpperCase() + " usage",
+ borderColor: colors[metricType],
+ data: data
+ }];
+ const cpuOptions: ChartOptions = {
+ scales: {
+ yAxes: [{
+ ticks: {
+ suggestedMax: cpuCapacity,
+ callback: (value) => value
+ }
+ }]
+ },
+ tooltips: {
+ callbacks: {
+ label: ({ index }, data) => {
+ const value = data.datasets[0].data[index] as ChartPoint;
+ return value.y.toString();
+ }
+ }
+ }
+ };
+ const memoryOptions: ChartOptions = {
+ scales: {
+ yAxes: [{
+ ticks: {
+ suggestedMax: memoryCapacity,
+ callback: (value: string) => !value ? 0 : bytesToUnits(parseInt(value))
+ }
+ }]
+ },
+ tooltips: {
+ callbacks: {
+ label: ({ index }, data) => {
+ const value = data.datasets[0].data[index] as ChartPoint;
+ return bytesToUnits(parseInt(value.y as string), 3);
+ }
+ }
+ }
+ };
+ const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions;
+
+ const renderMetrics = () => {
+ if ((!metricValues.length || !liveMetricValues.length) && !metricsLoaded) {
+ return
+ clusterStore.metricNodeRole = metric}
+ >
+ Master} value={MetricNodeRole.MASTER}/>
+ Worker} value={MetricNodeRole.WORKER}/>
+
+
+
+ clusterStore.metricType = value}
+ >
+ CPU} value={MetricType.CPU}/>
+ Memory} value={MetricType.MEMORY}/>
+
+
+
+
+ );
+});
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster-no-metrics.tsx b/dashboard/client/components/+cluster/cluster-no-metrics.tsx
new file mode 100644
index 0000000000..f3f6777ea2
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-no-metrics.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Icon } from "../icon";
+import { Trans } from "@lingui/macro";
+import { cssNames } from "../../utils";
+
+interface Props {
+ className: string;
+}
+
+export function ClusterNoMetrics({ className }: Props) {
+ return (
+
+
+ );
+}
diff --git a/dashboard/client/components/+cluster/cluster-pie-charts.scss b/dashboard/client/components/+cluster/cluster-pie-charts.scss
new file mode 100644
index 0000000000..b6f6e2dd27
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-pie-charts.scss
@@ -0,0 +1,29 @@
+.ClusterPieCharts {
+ background: transparent!important;
+ padding: 0!important;
+
+ .empty {
+ background: $contentColor;
+ min-height: 280px;
+ text-align: center;
+ padding: $padding * 2;
+ }
+
+ .NodeCharts {
+ margin-bottom: 0;
+ }
+
+ .chart {
+ --flex-gap: #{$padding * 2};
+ background: $contentColor;
+ padding: $padding * 2 $padding;
+
+ .chart-title {
+ margin-bottom: 0;
+ }
+
+ .legend {
+ --flex-gap: #{$padding};
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster-pie-charts.tsx b/dashboard/client/components/+cluster/cluster-pie-charts.tsx
new file mode 100644
index 0000000000..6b0bf562f8
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster-pie-charts.tsx
@@ -0,0 +1,204 @@
+import "./cluster-pie-charts.scss";
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
+import { clusterStore, MetricNodeRole } from "./cluster.store";
+import { Spinner } from "../spinner";
+import { Icon } from "../icon";
+import { nodesStore } from "../+nodes/nodes.store";
+import { ChartData, PieChart } from "../chart";
+import { ClusterNoMetrics } from "./cluster-no-metrics";
+import { bytesToUnits } from "../../utils";
+import { themeStore } from "../../theme.store";
+import { getMetricLastPoints } from "../../api/endpoints/metrics.api";
+
+export const ClusterPieCharts = observer(() => {
+ const { i18n } = useLingui();
+
+ const renderLimitWarning = () => {
+ return (
+
+
+ );
+ }
+
+ const renderCharts = () => {
+ const data = getMetricLastPoints(clusterStore.metrics);
+ const { memoryUsage, memoryRequests, memoryCapacity, memoryLimits } = data;
+ const { cpuUsage, cpuRequests, cpuCapacity, cpuLimits } = data;
+ const { podUsage, podCapacity } = data;
+ const cpuLimitsOverload = cpuLimits > cpuCapacity;
+ const memoryLimitsOverload = memoryLimits > memoryCapacity;
+ const defaultColor = themeStore.activeTheme.colors.pieChartDefaultColor;
+
+ if (!memoryCapacity || !cpuCapacity || !podCapacity) return null;
+ const cpuData: ChartData = {
+ datasets: [
+ {
+ data: [
+ cpuUsage,
+ cpuUsage ? cpuCapacity - cpuUsage : 1,
+ ],
+ backgroundColor: [
+ "#c93dce",
+ defaultColor,
+ ],
+ id: "cpuUsage"
+ },
+ {
+ data: [
+ cpuRequests,
+ cpuRequests ? cpuCapacity - cpuRequests : 1,
+ ],
+ backgroundColor: [
+ "#4caf50",
+ defaultColor,
+ ],
+ id: "cpuRequests"
+ },
+ {
+ data: [
+ cpuLimits,
+ cpuLimitsOverload ? 0 : cpuCapacity - cpuLimits,
+ ],
+ backgroundColor: [
+ "#3d90ce",
+ defaultColor,
+ ],
+ id: "cpuLimits"
+ },
+ ],
+ labels: [
+ i18n._(t`Usage`) + `: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`,
+ i18n._(t`Requests`) + `: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`,
+ i18n._(t`Limits`) + `: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`,
+ i18n._(t`Capacity`) + `: ${cpuCapacity || "N/A"}`
+ ]
+ };
+ const memoryData: ChartData = {
+ datasets: [
+ {
+ data: [
+ memoryUsage,
+ memoryUsage ? memoryCapacity - memoryUsage : 1,
+ ],
+ backgroundColor: [
+ "#c93dce",
+ defaultColor,
+ ],
+ id: "memoryUsage"
+ },
+ {
+ data: [
+ memoryRequests,
+ memoryRequests ? memoryCapacity - memoryRequests : 1,
+ ],
+ backgroundColor: [
+ "#4caf50",
+ defaultColor,
+ ],
+ id: "memoryRequests"
+ },
+ {
+ data: [
+ memoryLimits,
+ memoryLimitsOverload ? 0 : memoryCapacity - memoryLimits,
+ ],
+ backgroundColor: [
+ "#3d90ce",
+ defaultColor,
+ ],
+ id: "memoryLimits"
+ },
+ ],
+ labels: [
+ i18n._(t`Usage`) + `: ${bytesToUnits(memoryUsage)}`,
+ i18n._(t`Requests`) + `: ${bytesToUnits(memoryRequests)}`,
+ i18n._(t`Limits`) + `: ${bytesToUnits(memoryLimits)}`,
+ i18n._(t`Capacity`) + `: ${bytesToUnits(memoryCapacity)}`,
+ ]
+ };
+ const podsData: ChartData = {
+ datasets: [
+ {
+ data: [
+ podUsage,
+ podUsage ? podCapacity - podUsage : 1,
+ ],
+ backgroundColor: [
+ "#4caf50",
+ defaultColor,
+ ],
+ id: "podUsage"
+ },
+ ],
+ labels: [
+ i18n._(t`Usage`) + `: ${podUsage || 0}`,
+ i18n._(t`Capacity`) + `: ${podCapacity}`,
+ ]
+ };
+ return (
+
+
+ );
+ }
+
+ const renderContent = () => {
+ const { masterNodes, workerNodes } = nodesStore;
+ const { metricNodeRole, metricsLoaded } = clusterStore;
+ const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes;
+ if (!nodes.length) {
+ return (
+
+
+
+
+
+
+
+ No Nodes Available.
+
+ );
+ }
+ if (!metricsLoaded) {
+ return (
+
+
+ );
+ }
+ const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterStore.metrics);
+ if (!memoryCapacity || !cpuCapacity || !podCapacity) {
+ return
+ {renderContent()}
+
+ );
+})
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster.routes.ts b/dashboard/client/components/+cluster/cluster.routes.ts
new file mode 100644
index 0000000000..f541d83945
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster.routes.ts
@@ -0,0 +1,8 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const clusterRoute: RouteProps = {
+ path: "/cluster"
+}
+
+export const clusterURL = buildURL(clusterRoute.path)
diff --git a/dashboard/client/components/+cluster/cluster.scss b/dashboard/client/components/+cluster/cluster.scss
new file mode 100644
index 0000000000..32739c378c
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster.scss
@@ -0,0 +1,24 @@
+.Cluster {
+ $gridGap: $margin * 2;
+
+ position: relative;
+ height: 100%;
+ min-height: 650px;
+ display: grid;
+ grid-gap: $gridGap;
+ grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+ grid-template-rows: 1fr 1fr;
+
+ @include media(">1600px") {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ > *:not(.Spinner) {
+ padding: $gridGap;
+ background: $contentColor;
+
+ > .SubHeader {
+ padding-top: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+cluster/cluster.store.ts b/dashboard/client/components/+cluster/cluster.store.ts
new file mode 100644
index 0000000000..066ecad2f2
--- /dev/null
+++ b/dashboard/client/components/+cluster/cluster.store.ts
@@ -0,0 +1,110 @@
+import { observable, reaction, when } from "mobx";
+import { KubeObjectStore } from "../../kube-object.store";
+import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
+import { autobind, createStorage } from "../../utils";
+import { IMetricsReqParams, normalizeMetrics } from "../../api/endpoints/metrics.api";
+import { nodesStore } from "../+nodes/nodes.store";
+import { apiManager } from "../../api/api-manager";
+
+export enum MetricType {
+ MEMORY = "memory",
+ CPU = "cpu"
+}
+
+export enum MetricNodeRole {
+ MASTER = "master",
+ WORKER = "worker"
+}
+
+@autobind()
+export class ClusterStore extends KubeObjectStore
+ {!isLoaded &&
+
+
+
+ Reference}>
+ {scaleTargetRef && (
+
+ {scaleTargetRef.kind}/{scaleTargetRef.name}
+
+ )}
+
+
+ Min Pods}>
+ {hpa.getMinPods()}
+
+
+ Max Pods}>
+ {hpa.getMaxPods()}
+
+
+ Replicas}>
+ {hpa.getReplicas()}
+
+
+ Status} labelsOnly>
+ {hpa.getConditions().map(({ type, tooltip, isReady }) => {
+ if (!isReady) return null;
+ return (
+
+
+
+
+ );
+ }
+}
+
+apiManager.registerViews(hpaApi, {
+ Details: HpaDetails,
+});
diff --git a/dashboard/client/components/+config-autoscalers/hpa.route.ts b/dashboard/client/components/+config-autoscalers/hpa.route.ts
new file mode 100644
index 0000000000..500b260062
--- /dev/null
+++ b/dashboard/client/components/+config-autoscalers/hpa.route.ts
@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const hpaRoute: RouteProps = {
+ path: "/hpa"
+}
+
+export interface IHpaRouteParams {
+}
+
+export const hpaURL = buildURL
+ {this.renderMetrics()}
+
+
+ {metricValues} {metricsRemain && "+"}{metricsRemain}
; + } + + render() { + return ( +
+
+
+ {
+ data.length > 0 && (
+ <>
+ Data}/>
+ {
+ data.map(([name, value]) => {
+ return (
+
+ );
+ }
+}
+
+apiManager.registerViews(configMapApi, {
+ Details: ConfigMapDetails
+})
\ No newline at end of file
diff --git a/dashboard/client/components/+config-maps/config-maps.route.ts b/dashboard/client/components/+config-maps/config-maps.route.ts
new file mode 100644
index 0000000000..9f68afcfeb
--- /dev/null
+++ b/dashboard/client/components/+config-maps/config-maps.route.ts
@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const configMapsRoute: RouteProps = {
+ path: "/configmaps"
+}
+
+export interface IConfigMapsRouteParams {
+}
+
+export const configMapsURL = buildURL
+
+ )
+ })
+ }
+ {name}
+
+ this.data.set(name, v)}
+ />
+
+ Create ResourceQuota
;
+ return (
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+config-resource-quotas/index.ts b/dashboard/client/components/+config-resource-quotas/index.ts
new file mode 100644
index 0000000000..792f8946c3
--- /dev/null
+++ b/dashboard/client/components/+config-resource-quotas/index.ts
@@ -0,0 +1,3 @@
+export * from "./resource-quotas.route"
+export * from "./resource-quotas"
+export * from "./resource-quota-details"
diff --git a/dashboard/client/components/+config-resource-quotas/resource-quota-details.scss b/dashboard/client/components/+config-resource-quotas/resource-quota-details.scss
new file mode 100644
index 0000000000..fb3c678415
--- /dev/null
+++ b/dashboard/client/components/+config-resource-quotas/resource-quota-details.scss
@@ -0,0 +1,16 @@
+.ResourceQuotaDetails {
+ .quota-list {
+ .param {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding-bottom: $padding * 2;
+
+ .LineProgress {
+ margin-top: 3px;
+ width: 100%;
+ color: $colorInfo;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+config-resource-quotas/resource-quota-details.tsx b/dashboard/client/components/+config-resource-quotas/resource-quota-details.tsx
new file mode 100644
index 0000000000..6a2665e741
--- /dev/null
+++ b/dashboard/client/components/+config-resource-quotas/resource-quota-details.tsx
@@ -0,0 +1,94 @@
+import "./resource-quota-details.scss";
+import React from "react";
+import kebabCase from "lodash/kebabCase";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { cpuUnitsToNumber, cssNames, unitsToBytes } from "../../utils";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { LineProgress } from "../line-progress";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps
+ {name}
+ {used[name]} / {value}
+ Set : {value}. Used : {Math.ceil(current / max * 100) + "%"}
+ }
+ />
+
+ )
+ })
+ }
+
+ render() {
+ const { object: quota } = this.props;
+ if (!quota) return null;
+ return (
+
+
+
+ Quotas} className="quota-list">
+ {this.renderQuotas(quota)}
+
+
+ {quota.getScopeSelector().length > 0 && (
+ <>
+ Scope Selector}/>
+
+
+
+ )}
+
+ );
+ }
+}
+
+apiManager.registerViews(resourceQuotaApi, {
+ Details: ResourceQuotaDetails
+})
\ No newline at end of file
diff --git a/dashboard/client/components/+config-resource-quotas/resource-quotas.route.ts b/dashboard/client/components/+config-resource-quotas/resource-quotas.route.ts
new file mode 100644
index 0000000000..1040f2dc09
--- /dev/null
+++ b/dashboard/client/components/+config-resource-quotas/resource-quotas.route.ts
@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const resourceQuotaRoute: RouteProps = {
+ path: "/resourcequotas"
+}
+
+export interface IResourceQuotaRouteParams {
+}
+
+export const resourceQuotaURL = buildURL
+ {fields.map((item, index) => {
+ const { key = "", value = "", required } = item;
+ return (
+
+
+ )
+ }
+
+ render() {
+ const { ...dialogProps } = this.props;
+ const { namespace, name, type } = this;
+ const header =
+ item.key = v}
+ />
+ item.value = v}
+ />
+ Required field : Remove field }
+ className="remove-icon"
+ material="remove_circle_outline"
+ onClick={() => this.removeField(field, index)}
+ />
+
+ )
+ })}
+ Create Secret
;
+ return (
+
+ )
+ }
+}
diff --git a/dashboard/client/components/+config-secrets/index.ts b/dashboard/client/components/+config-secrets/index.ts
new file mode 100644
index 0000000000..cfea583cb3
--- /dev/null
+++ b/dashboard/client/components/+config-secrets/index.ts
@@ -0,0 +1,4 @@
+export * from "./secrets.route"
+export * from "./secrets"
+export * from "./secret-details"
+
diff --git a/dashboard/client/components/+config-secrets/secret-details.scss b/dashboard/client/components/+config-secrets/secret-details.scss
new file mode 100644
index 0000000000..b83b4425da
--- /dev/null
+++ b/dashboard/client/components/+config-secrets/secret-details.scss
@@ -0,0 +1,15 @@
+.SecretDetails {
+ .data {
+ margin-bottom: $margin * 2;
+
+ .name {
+ color: $textColorSecondary;
+ font-weight: $font-weight-bold;
+ padding-bottom: $padding / 2;
+ }
+ }
+
+ .save-btn {
+ margin-top: $margin;
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+config-secrets/secret-details.tsx b/dashboard/client/components/+config-secrets/secret-details.tsx
new file mode 100644
index 0000000000..45a846f399
--- /dev/null
+++ b/dashboard/client/components/+config-secrets/secret-details.tsx
@@ -0,0 +1,118 @@
+import "./secret-details.scss";
+
+import React from "react";
+import isEmpty from "lodash/isEmpty";
+import { autorun, observable } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Input } from "../input";
+import { Button } from "../button";
+import { Notifications } from "../notifications";
+import { base64 } from "../../utils";
+import { Icon } from "../icon";
+import { secretsStore } from "./secrets.store";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Secret, secretsApi } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps
+
+ Type}>
+ {secret.type}
+
+ {!isEmpty(this.data) && (
+ <>
+
+ {
+ Object.entries(this.data).map(([name, value]) => {
+ const revealSecret = this.revealSecret[name];
+ let decodedVal = "";
+ try {
+ decodedVal = base64.decode(value);
+ } catch {
+ decodedVal = "";
+ }
+ value = revealSecret ? decodedVal : value;
+ return (
+
+ );
+ }
+}
+
+apiManager.registerViews(secretsApi, {
+ Details: SecretDetails,
+})
diff --git a/dashboard/client/components/+config-secrets/secrets.route.ts b/dashboard/client/components/+config-secrets/secrets.route.ts
new file mode 100644
index 0000000000..1dcce30e2f
--- /dev/null
+++ b/dashboard/client/components/+config-secrets/secrets.route.ts
@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const secretsRoute: RouteProps = {
+ path: "/secrets"
+}
+
+export interface ISecretsRouteParams {
+}
+
+export const secretsURL = buildURL(secretsRoute.path);
diff --git a/dashboard/client/components/+config-secrets/secrets.scss b/dashboard/client/components/+config-secrets/secrets.scss
new file mode 100644
index 0000000000..dac8b60cb5
--- /dev/null
+++ b/dashboard/client/components/+config-secrets/secrets.scss
@@ -0,0 +1,11 @@
+.Secrets {
+ .TableCell {
+ &.name {
+ flex: 1.5;
+ }
+
+ &.labels {
+ @include table-cell-labels-offsets;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+config-secrets/secrets.store.ts b/dashboard/client/components/+config-secrets/secrets.store.ts
new file mode 100644
index 0000000000..18f3a3e5d3
--- /dev/null
+++ b/dashboard/client/components/+config-secrets/secrets.store.ts
@@ -0,0 +1,12 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { Secret, secretsApi } from "../../api/endpoints";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class SecretsStore extends KubeObjectStore
+
+ )
+ })
+ }
+
+
+ )}
+ {name}
+
+ this.editData(name, value, !revealSecret)}
+ />
+ {decodedVal && (
+ Hide : Show }
+ onClick={() => this.revealSecret[name] = !revealSecret}
+ />)
+ }
+
+
+
+
+ Issuer}>
+
+ {cert.getIssuerName()}
+
+
+
+ Secret Name}>
+
+ {secretName}
+
+
+
+
+ {isCA ? Yes : No }
+
+
+ {commonName && (
+ Common Name}>
+ {commonName}
+
+ )}
+ {dnsNames && (
+ DNS names} labelsOnly>
+ {dnsNames.map(name => )}
+
+ )}
+ {ipAddresses && (
+ IP addresses}>
+ {ipAddresses.join(", ")}
+
+ )}
+ {organization && (
+ Organization}>
+ {organization.join(", ")}
+
+ )}
+ {duration && (
+ Duration}>
+ {duration}
+
+ )}
+ {renewBefore && (
+ Renew Before}>
+ {renewBefore}
+
+ )}
+ {keySize && (
+ Key Size}>
+ {keySize}
+
+ )}
+ {keyAlgorithm && (
+ Key Algorithm}>
+ {keyAlgorithm}
+
+ )}
+
+ Not After}>
+ {moment(notAfter).format("LLL")}
+
+
+ {lastFailureTime && (
+ Last Failure Time}>
+ {lastFailureTime}
+
+ )}
+ Status} labelsOnly>
+ {cert.getConditions().map(({ type, tooltip, isReady }) => {
+ return (
+
+
+ {acme && (
+ <>
+
+
+ );
+ }
+}
+
+apiManager.registerViews(certificatesApi, {
+ Details: CertificateDetails
+})
\ No newline at end of file
diff --git a/dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.scss b/dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.scss
new file mode 100644
index 0000000000..a5c817b2e8
--- /dev/null
+++ b/dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.scss
@@ -0,0 +1,26 @@
+@import "cert-manager.mixins";
+
+.Certificates {
+ .TableCell {
+ &.name {
+ flex: 1.2;
+ }
+
+ &.type {
+ flex: .5;
+ }
+
+ &.status {
+ flex: .5;
+ @include table-cell-labels-offsets;
+
+ .Badge {
+ @include cert-status-bgc;
+ }
+ }
+
+ &.age {
+ flex: .5;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.tsx b/dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.tsx
new file mode 100644
index 0000000000..f198c8fd62
--- /dev/null
+++ b/dashboard/client/components/+custom-resources/certmanager.k8s.io/certificates.tsx
@@ -0,0 +1,105 @@
+import "./certificates.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
+import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
+import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
+import { cssNames, stopPropagation } from "../../../utils";
+import { Link } from "react-router-dom";
+import { Badge } from "../../badge";
+import { apiManager } from "../../../api/api-manager";
+import { Spinner } from "../../spinner";
+
+enum sortBy {
+ name = "name",
+ namespace = "namespace",
+ age = "age",
+ commonName = "common-name",
+ secretName = "secret",
+ issuer = "issuer",
+ type = "type",
+}
+
+@observer
+export class Certificates extends React.Component
+ Domains} labelsOnly>
+ {domains.map(domain => )}
+
+ Http01}>
+ {Object.entries(http01).map(([key, val]) => `${key}: ${val}`)[0]}
+
+ {dns01 && (
+ DNS Provider} labelsOnly>
+ {dns01.provider}
+
+ )}
+
+ )
+ })}
+
+ )}
+
+
+
+
+ Type}>
+ {issuer.getType()}
+
+
+ Status} labelsOnly>
+ {issuer.getConditions().map(({ type, tooltip, isReady }) => {
+ return (
+
+
+ {acme && (() => {
+ const { email, server, skipTLSVerify, privateKeySecretRef, solvers } = acme;
+ return (
+ <>
+ E-mail}>
+ {email}
+
+ Server}>
+ {server}
+
+ {status.acme && (
+ Status URI}>
+ {status.acme.uri}
+
+ )}
+ Private Key Secret}>
+ {renderSecretLink(privateKeySecretRef.name)}
+
+ Skip TLS Verify}>
+ {skipTLSVerify ? Yes : No }
+
+
+ )
+ })()}
+
+ {ca && (() => {
+ const { secretName } = ca;
+ return (
+ <>
+ Secret Name}>
+ {renderSecretLink(secretName)}
+
+
+ )
+ })()}
+
+ {vault && (() => {
+ const { auth, caBundle, path, server } = vault;
+ const { path: authPath, roleId, secretRef } = auth.appRole;
+ return (
+ <>
+ Server}>
+ {server}
+
+ Path}>
+ {path}
+
+ CA Bundle} labelsOnly>
+
+
+
+ Auth App Role}/>
+ Path}>
+ {authPath}
+
+ Role ID}>
+ {roleId}
+
+ {secretRef && (
+ Secret}>
+ {renderSecretLink(secretRef.name)}
+
+ )}
+
+ )
+ })()}
+
+ {venafi && (() => {
+ const { zone, cloud, tpp } = venafi;
+ return (
+ <>
+ Zone}>
+ {zone}
+
+ {cloud && (
+ Cloud API Token Secret}>
+ {renderSecretLink(cloud.apiTokenSecretRef.name)}
+
+ )}
+ {tpp && (
+ <>
+ URL}>
+ {tpp.url}
+
+ CA Bundle} labelsOnly>
+
+
+ Credentials Ref}>
+ {renderSecretLink(tpp.credentialsRef.name)}
+
+
+ )}
+
+ )
+ })()}
+
+
+
+ );
+ }
+}
+
+apiManager.registerViews([issuersApi, clusterIssuersApi], {
+ Details: IssuerDetails
+})
diff --git a/dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.scss b/dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.scss
new file mode 100644
index 0000000000..21d0d81472
--- /dev/null
+++ b/dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.scss
@@ -0,0 +1,27 @@
+@import "cert-manager.mixins";
+
+.Issuers {
+ .TableCell {
+ &.name {
+ flex: 1.2;
+ }
+
+ &.labels {
+ flex: 2;
+ @include table-cell-labels-offsets;
+ }
+
+ &.status {
+ flex: .5;
+ @include table-cell-labels-offsets;
+
+ .Badge {
+ @include cert-status-bgc;
+ }
+ }
+
+ &.age {
+ flex: .5;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.tsx b/dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.tsx
new file mode 100644
index 0000000000..75f256037a
--- /dev/null
+++ b/dashboard/client/components/+custom-resources/certmanager.k8s.io/issuers.tsx
@@ -0,0 +1,103 @@
+import "./issuers.scss"
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
+import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
+import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
+import { cssNames } from "../../../utils";
+import { Badge } from "../../badge";
+import { Spinner } from "../../spinner";
+import { apiManager } from "../../../api/api-manager";
+
+enum sortBy {
+ name = "name",
+ namespace = "namespace",
+ type = "type",
+ labels = "labels",
+ age = "age",
+}
+
+@observer
+export class ClusterIssuers extends React.Component
+
+
+ Group}>
+ {crd.getGroup()}
+
+ Version}>
+ {crd.getVersion()}
+
+ Stored versions}>
+ {crd.getStoredVersions()}
+
+ Scope}>
+ {crd.getScope()}
+
+ Resource}>
+
+ {crd.getResourceTitle()}
+
+
+ Conversion} className="flex gaps align-flex-start">
+
+
+ Conditions} className="conditions" labelsOnly>
+ {
+ crd.getConditions().map(condition => {
+ const { type, message, lastTransitionTime, status } = condition
+ return (
+
+
+ Names}/>
+
+
+ {printerColumns.length > 0 &&
+ <>
+ Additional Printer Columns}/>
+
+
+
+ }
+ {validation &&
+ <>
+ Validation}/>
+
+ )
+ }
+}
+
+apiManager.registerViews(crdApi, {
+ Details: CRDDetails
+})
\ No newline at end of file
diff --git a/dashboard/client/components/+custom-resources/crd-list.scss b/dashboard/client/components/+custom-resources/crd-list.scss
new file mode 100644
index 0000000000..07221c7c58
--- /dev/null
+++ b/dashboard/client/components/+custom-resources/crd-list.scss
@@ -0,0 +1,24 @@
+@import "crd.mixins";
+
+.CrdList {
+ .TableCell {
+ &.kind {
+ flex: 1.5;
+ }
+
+ &.group {
+ flex: 2;
+ }
+ }
+
+ .group-select {
+ .Select {
+ &__placeholder {
+ width: 100%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/dashboard/client/components/+custom-resources/crd-list.tsx b/dashboard/client/components/+custom-resources/crd-list.tsx
new file mode 100644
index 0000000000..5707f27c9d
--- /dev/null
+++ b/dashboard/client/components/+custom-resources/crd-list.tsx
@@ -0,0 +1,122 @@
+import "./crd-list.scss"
+
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { stopPropagation } from "../../utils";
+import { KubeObjectListLayout } from "../kube-object";
+import { crdStore } from "./crd.store";
+import { apiManager } from "../../api/api-manager";
+import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { Select, SelectOption } from "../select";
+import { navigation, setQueryParams } from "../../navigation";
+import { Icon } from "../icon";
+
+enum sortBy {
+ kind = "kind",
+ group = "group",
+ version = "version",
+ scope = "scope",
+ age = "age",
+}
+
+@observer
+export class CrdList extends React.Component {
+ @computed get groups() {
+ return navigation.searchParams.getAsArray("groups")
+ }
+
+ onGroupChange(group: string) {
+ const groups = [...this.groups];
+ const index = groups.findIndex(item => item == group);
+ if (index !== -1) groups.splice(index, 1);
+ else groups.push(group);
+ setQueryParams({ groups })
+ }
+
+ render() {
+ const selectedGroups = this.groups;
+ const sortingCallbacks = {
+ [sortBy.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
+ [sortBy.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
+ [sortBy.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
+ [sortBy.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
+ };
+ return (
+ {message}
+