Fix cluster settings prometheus configuration (#663)

* Removing legacy browserCheck() utility

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

* Revert select box-shadow (outline) color

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

* Allowing to save prometheus service address

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

src/renderer/browser-check.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Notifications } from "./components/notifications";
-import { Trans } from "@lingui/macro";
-
-export function browserCheck() {
-  const ua = window.navigator.userAgent
-  const msie = ua.indexOf('MSIE ')  // IE < 11
-  const trident = ua.indexOf('Trident/')  // IE 11
-  const edge = ua.indexOf('Edge')  // Edge
-  if (msie > 0 || trident > 0 || edge > 0) {
-    Notifications.info(
-      <p>
-        <Trans>
-          <b>Your browser does not support all Lens features. </b>{" "}
-          Please consider using another browser.
-        </Trans>
-      </p>
-    )
-  }
-}

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 {
@@ -82,4 +86,10 @@
   .Input, .Select {
     margin-top: 10px;
   }
+
+  .Select {
+    &__control {
+      box-shadow: 0 0 0 1px $borderFaintColor;
+    }
+  }
 }

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<string>[] = [
   { value: "", label: "Auto detect" },
@@ -17,6 +18,52 @@ interface Props {
 
 @observer
 export class ClusterPrometheusSetting extends React.Component<Props> {
+  @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<Props> {
           <a href="https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md" target="_blank">guide</a>{" "}
           for possible configuration changes.
         </p>
+        <p>Prometheus installation method.</p>
         <Select
-          value={this.props.cluster.preferences.prometheusProvider?.type || ""}
+          value={this.provider}
           onChange={({value}) => {
-            const provider = {
+            this.provider = value;
-              prometheusProvider: {
+            this.onSaveProvider();
-                type: value
-              }
-            }
-            merge(this.props.cluster.preferences, provider);
           }}
           options={options}
         />
+        <span className="hint">What query format is used to fetch metrics from Prometheus</span>
+        {this.canEditPrometheusPath && (
+          <>
+            <p>Prometheus service address.</p>
+            <Input
+              theme="round-black"
+              value={this.path}
+              onChange={(value) => this.path = value}
+              onBlur={this.onSavePath}
+              placeholder="<namespace>/<service>:<port>"
+            />
+            <span className="hint">
+              An address to an existing Prometheus installation{" "}
+              ({'<namespace>/<service>:<port>'}). Lens tries to auto-detect address if left empty.
+            </span>
+          </>
+        )}
       </>
     );
   }

src/renderer/components/select/select.scss

@@ -31,7 +31,7 @@ html {
       border-radius: $radius;
       background: transparent;
       min-height: 0;
-      box-shadow: 0 0 0 1px $borderFaintColor;
+      box-shadow: 0 0 0 1px $halfGray;
 
       &--is-focused {
         box-shadow: 0 0 0 2px $primary;