diff --git a/src/renderer/components/+cluster-settings/cluster-settings.scss b/src/renderer/components/+cluster-settings/cluster-settings.scss
index e02a4da5f8..acb59ea0ac 100644
--- a/src/renderer/components/+cluster-settings/cluster-settings.scss
+++ b/src/renderer/components/+cluster-settings/cluster-settings.scss
@@ -57,6 +57,10 @@
font-size: smaller;
opacity: 0.8;
}
+
+ p + p, .hint + p {
+ padding-top: $padding;
+ }
}
.status-table {
@@ -79,7 +83,13 @@
}
}
- .Input,.Select {
+ .Input, .Select {
margin-top: 10px;
}
+
+ .Select {
+ &__control {
+ box-shadow: 0 0 0 1px $borderFaintColor;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
index e4f81bb18a..ef0ec55551 100644
--- a/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
+++ b/src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx
@@ -1,10 +1,11 @@
import React from "react";
-import merge from "lodash/merge";
import { observer } from "mobx-react";
import { prometheusProviders } from "../../../../common/prometheus-providers";
import { Cluster } from "../../../../main/cluster";
import { SubTitle } from "../../layout/sub-title";
import { Select, SelectOption } from "../../select";
+import { Input } from "../../input";
+import { observable, computed } from "mobx";
const options: SelectOption[] = [
{ value: "", label: "Auto detect" },
@@ -17,6 +18,52 @@ interface Props {
@observer
export class ClusterPrometheusSetting extends React.Component {
+ @observable path = "";
+ @observable provider = "";
+
+ @computed get canEditPrometheusPath() {
+ if (this.provider === "" || this.provider === "lens") return false;
+ return true;
+ }
+
+ componentDidMount() {
+ const { prometheus, prometheusProvider } = this.props.cluster.preferences;
+ if (prometheus) {
+ const prefix = prometheus.prefix || "";
+ this.path = `${prometheus.namespace}/${prometheus.service}:${prometheus.port}${prefix}`;
+ }
+ if (prometheusProvider) {
+ this.provider = prometheusProvider.type;
+ }
+ }
+
+ parsePrometheusPath = () => {
+ if (!this.provider || !this.path) {
+ return null;
+ }
+ const parsed = this.path.split(/\/|:/, 3);
+ const apiPrefix = this.path.substring(parsed.join("/").length);
+ if (!parsed[0] || !parsed[1] || !parsed[2]) {
+ return null;
+ }
+ return {
+ namespace: parsed[0],
+ service: parsed[1],
+ port: parseInt(parsed[2]),
+ prefix: apiPrefix
+ }
+ }
+
+ onSaveProvider = () => {
+ this.props.cluster.preferences.prometheusProvider = this.provider ?
+ { type: this.provider } :
+ null;
+ }
+
+ onSavePath = () => {
+ this.props.cluster.preferences.prometheus = this.parsePrometheusPath();
+ };
+
render() {
return (
<>
@@ -26,18 +73,32 @@ export class ClusterPrometheusSetting extends React.Component {
guide{" "}
for possible configuration changes.
+ Prometheus installation method.