Show lens-metrics on cluster settings (#2714)

* show lens-metrics on cluster settings

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remove ClusterFeature

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remove ClusterFeature

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak resource applier/stack

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* update metrics stack components

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix drawer menu styles

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* clarify ui

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* built-in -> bundled

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* splitterError -> splitError

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* support multi-doc yamls

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* dedicated action button

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix headers

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* async file operations

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bugs

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/+catalog/catalog-add-button.tsx

@@ -26,7 +26,7 @@ import { Icon } from "../icon";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { observable, reaction } from "mobx";
 import { autobind } from "../../../common/utils";
-import { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityContextMenu } from "../../api/catalog-entity";
+import { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityAddMenu } from "../../api/catalog-entity";
 import { EventEmitter } from "events";
 import { navigate } from "../../navigation";
 
@@ -37,7 +37,7 @@ export type CatalogAddButtonProps = {
 @observer
 export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
   @observable protected isOpen = false;
-  protected menuItems = observable.array<CatalogEntityContextMenu>([]);
+  protected menuItems = observable.array<CatalogEntityAddMenu>([]);
 
   componentDidMount() {
     disposeOnUnmount(this, [

src/renderer/components/+catalog/catalog.tsx

@@ -29,7 +29,6 @@ import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
 import { PageLayout } from "../layout/page-layout";
 import { MenuItem, MenuActions } from "../menu";
-import { Icon } from "../icon";
 import { CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Badge } from "../badge";
 import { HotbarStore } from "../../../common/hotbar-store";
@@ -136,16 +135,16 @@ export class Catalog extends React.Component {
 
     return (
       <MenuActions onOpen={() => item.onContextMenuOpen(this.contextMenu)}>
-        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
-          <Icon material="push_pin" small interactive={true} title="Pin to Hotbar"/> Pin to Hotbar
-        </MenuItem>
         {
           menuItems.map((menuItem, index) => (
             <MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>
-              <Icon material={menuItem.icon} small interactive={true} title={menuItem.title} /> {menuItem.title}
+              {menuItem.title}
             </MenuItem>
           ))
         }
+        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
+          Pin to Hotbar
+        </MenuItem>
       </MenuActions>
     );
   }

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -32,6 +32,7 @@ import { CatalogEntity } from "../../api/catalog-entity";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { entitySettingRegistry } from "../../../extensions/registries";
 import { EntitySettingsRouteParams } from "./entity-settings.route";
+import { groupBy } from "lodash";
 
 interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 }
@@ -57,9 +58,15 @@ export class EntitySettings extends React.Component<Props> {
   async componentDidMount() {
     const { hash } = navigation.location;
 
-    this.ensureActiveTab();
+    if (hash) {
+      const item = this.menuItems.find((item) => item.title === hash.slice(1));
 
-    document.getElementById(hash.slice(1))?.scrollIntoView();
+      if (item) {
+        this.activeTab = item.id;
+      }
+    }
+
+    this.ensureActiveTab();
   }
 
   onTabChange = (tabId: string) => {
@@ -67,18 +74,24 @@ export class EntitySettings extends React.Component<Props> {
   };
 
   renderNavigation() {
+    const groups = Object.entries(groupBy(this.menuItems, (item) => item.group || "Extensions"));
+
     return (
       <>
         <h2>{this.entity.metadata.name}</h2>
         <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
-          <div className="header">Settings</div>
-          { this.menuItems.map((setting) => (
-            <Tab
-              key={setting.id}
-              value={setting.id}
-              label={setting.title}
-              data-testid={`${setting.id}-tab`}
-            />
+          { groups.map((group) => (
+            <>
+              <div className="header">{group[0]}</div>
+              { group[1].map((setting, index) => (
+                <Tab
+                  key={index}
+                  value={setting.id}
+                  label={setting.title}
+                  data-testid={`${setting.id}-tab`}
+                />
+              ))}
+            </>
           ))}
         </Tabs>
       </>
@@ -111,7 +124,7 @@ export class EntitySettings extends React.Component<Props> {
         <section>
           <h2 data-testid={`${activeSetting.id}-header`}>{activeSetting.title}</h2>
           <section>
-            <activeSetting.components.View entity={this.entity} />
+            <activeSetting.components.View entity={this.entity} key={activeSetting.title} />
           </section>
         </section>
       </PageLayout>

src/renderer/components/cluster-settings/cluster-settings.tsx

@@ -43,6 +43,7 @@ entitySettingRegistry.add([
     kind: "KubernetesCluster",
     source: "local",
     title: "General",
+    group: "Settings",
     components: {
       View: (props: { entity: CatalogEntity }) => {
         const cluster = getClusterForEntity(props.entity);
@@ -68,6 +69,7 @@ entitySettingRegistry.add([
     apiVersions: ["entity.k8slens.dev/v1alpha1"],
     kind: "KubernetesCluster",
     title: "Proxy",
+    group: "Settings",
     components: {
       View: (props: { entity: CatalogEntity }) => {
         const cluster = getClusterForEntity(props.entity);
@@ -88,6 +90,7 @@ entitySettingRegistry.add([
     apiVersions: ["entity.k8slens.dev/v1alpha1"],
     kind: "KubernetesCluster",
     title: "Terminal",
+    group: "Settings",
     components: {
       View: (props: { entity: CatalogEntity }) => {
         const cluster = getClusterForEntity(props.entity);
@@ -108,6 +111,7 @@ entitySettingRegistry.add([
     apiVersions: ["entity.k8slens.dev/v1alpha1"],
     kind: "KubernetesCluster",
     title: "Namespaces",
+    group: "Settings",
     components: {
       View: (props: { entity: CatalogEntity }) => {
         const cluster = getClusterForEntity(props.entity);
@@ -128,6 +132,7 @@ entitySettingRegistry.add([
     apiVersions: ["entity.k8slens.dev/v1alpha1"],
     kind: "KubernetesCluster",
     title: "Metrics",
+    group: "Settings",
     components: {
       View: (props: { entity: CatalogEntity }) => {
         const cluster = getClusterForEntity(props.entity);

src/renderer/components/cluster-settings/components/cluster-metrics-setting.scss

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-.MetricsSelect {
-  $spacing: $padding;
-  --flex-gap: #{$spacing};
-
-  .Badge {
-    margin-top: $spacing;
-  }
-
-  .Button {
-    margin-top: $spacing;
-  }
-}

src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx

@@ -19,8 +19,6 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./cluster-metrics-setting.scss";
-
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Select, SelectOption } from "../../select/select";

src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx

@@ -27,6 +27,7 @@ import { SubTitle } from "../../layout/sub-title";
 import { Select, SelectOption } from "../../select";
 import { Input } from "../../input";
 import { observable, computed, autorun } from "mobx";
+import { productName } from "../../../../common/vars";
 
 const options: SelectOption<string>[] = [
   { value: "", label: "Auto detect" },
@@ -102,23 +103,20 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
   render() {
     return (
       <>
-        <SubTitle title="Prometheus installation method"/>
-        <p>
-          Use pre-installed Prometheus service for metrics. Please refer to the{" "}
-          <a href="https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md" target="_blank" rel="noreferrer">guide</a>{" "}
-          for possible configuration changes.
-        </p>
-        <Select
-          value={this.provider}
-          onChange={({value}) => {
-            this.provider = value;
-            this.onSaveProvider();
-          }}
-          options={options}
-        />
-        <small className="hint">What query format is used to fetch metrics from Prometheus</small>
+        <section>
+          <SubTitle title="Prometheus"/>
+          <Select
+            value={this.provider}
+            onChange={({value}) => {
+              this.provider = value;
+              this.onSaveProvider();
+            }}
+            options={options}
+          />
+          <small className="hint">What query format is used to fetch metrics from Prometheus</small>
+        </section>
         {this.canEditPrometheusPath && (
-          <>
+          <section>
             <p>Prometheus service address.</p>
             <Input
               theme="round-black"
@@ -129,9 +127,9 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
             />
             <small className="hint">
               An address to an existing Prometheus installation{" "}
-              ({"<namespace>/<service>:<port>"}). Lens tries to auto-detect address if left empty.
+              ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
             </small>
-          </>
+          </section>
         )}
       </>
     );

src/renderer/components/cluster-settings/components/remove-cluster-button.tsx

@@ -1,57 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import React from "react";
-import { observer } from "mobx-react";
-import { ClusterStore } from "../../../../common/cluster-store";
-import { Cluster } from "../../../../main/cluster";
-import { autobind } from "../../../utils";
-import { Button } from "../../button";
-import { ConfirmDialog } from "../../confirm-dialog";
-
-interface Props {
-  cluster: Cluster;
-}
-
-@observer
-export class RemoveClusterButton extends React.Component<Props> {
-  @autobind()
-  confirmRemoveCluster() {
-    const { cluster } = this.props;
-
-    ConfirmDialog.open({
-      message: <p>Are you sure you want to remove <b>{cluster.preferences.clusterName}</b> from Lens?</p>,
-      labelOk: "Yes",
-      labelCancel: "No",
-      ok: async () => {
-        await ClusterStore.getInstance().removeById(cluster.id);
-      }
-    });
-  }
-
-  render() {
-    return (
-      <Button accent onClick={this.confirmRemoveCluster} className="button-area">
-        Remove Cluster
-      </Button>
-    );
-  }
-}

src/renderer/components/cluster-settings/components/show-metrics.tsx

@@ -19,8 +19,6 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./cluster-metrics-setting.scss";
-
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";

src/renderer/components/drawer/drawer.scss

@@ -83,6 +83,10 @@
     .MenuActions.toolbar .Icon {
       color: $drawerTitleText;
     }
+
+    .Menu {
+      box-shadow: none;
+    }
   }
 
   .drawer-content {
@@ -99,4 +103,4 @@
       width: var(--full-size)
     }
   }
-}
+}

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -105,13 +105,11 @@ export class HotbarEntityIcon extends React.Component<Props> {
     if (!isPersisted) {
       menuItems.unshift({
         title: "Pin to Hotbar",
-        icon: "push_pin",
         onClick: () => add(entity, index)
       });
     } else {
       menuItems.unshift({
         title: "Unpin from Hotbar",
-        icon: "push_pin",
         onClick: () => remove(entity.metadata.uid)
       });
     }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -29,7 +29,6 @@ import GraphemeSplitter from "grapheme-splitter";
 import { CatalogEntityContextMenu } from "../../../common/catalog";
 import { cssNames, IClassName, iter } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
-import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
 import { observer } from "mobx-react";
@@ -137,7 +136,7 @@ export const HotbarIcon = observer(({menuItems = [], ...props}: Props) => {
         { menuItems.map((menuItem) => {
           return (
             <MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem) }>
-              <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
+              {menuItem.title}
             </MenuItem>
           );
         })}

src/renderer/components/menu/menu.scss

@@ -20,7 +20,7 @@
  */
 
 .Menu {
-  --bgc: #{$contentColor};
+  --bgc: #{$layoutBackground};
 
   position: absolute;
   display: flex;
@@ -29,6 +29,8 @@
   list-style: none;
   border: 1px solid $borderColor;
   z-index: 101;
+  box-shadow: rgba(0,0,0,0.24) 0px 8px 16px 0px;
+  border-radius: 4px;
 
   &.portal {
     left: -1000px;