vmui: minor enhancements (#3471)

* update package-lock.json

* fix: correct handle click by "action" on cardinality page

* fix: correct styles for icons width

* feat: add layout with copyright

* feat: add website and issue to footer

app/vmui/packages/vmui/src/App.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from "preact/compat";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import router from "./router";
 import AppContextProvider from "./contexts/AppContextProvider";
-import HomeLayout from "./components/Home/HomeLayout";
+import Layout from "./components/Layout/Layout";
 import CustomPanel from "./pages/CustomPanel";
 import DashboardsLayout from "./pages/PredefinedPanels";
 import CardinalityPanel from "./pages/CardinalityPanel";
@@ -28,7 +28,7 @@ const App: FC = () => {
         <Routes>
           <Route
             path={"/"}
-            element={<HomeLayout/>}
+            element={<Layout/>}
           >
             <Route
               path={router.home}

app/vmui/packages/vmui/src/components/Header/style.scss

@@ -1,56 +0,0 @@
-@use "src/styles/variables" as *;
-
-.vm-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: $padding-small $padding-medium;
-  gap: $padding-large;
-
-  &_app {
-    padding: $padding-small 0;
-  }
-
-  &-logo {
-    display: grid;
-    align-items: center;
-    justify-content: center;
-
-    &__icon {
-      position: relative;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      width: 100%;
-      margin-bottom: 2px;
-    }
-
-    &__issue {
-      text-align: center;
-      font-size: 10px;
-      opacity: 0.4;
-      color: inherit;
-      text-decoration: underline;
-      transition: 0.2s opacity;
-      white-space: nowrap;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &-nav {
-    font-size: $font-size-small;
-    font-weight: 600;
-  }
-
-  &__settings {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: $padding-small;
-    flex-grow: 1;
-  }
-}

app/vmui/packages/vmui/src/components/Layout/Footer/Footer.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "preact/compat";
+import dayjs from "dayjs";
+import "./style.scss";
+import { LogoIcon } from "../../Main/Icons";
+
+const Footer: FC = () => {
+  const copyrightYears = `2019-${dayjs().format("YYYY")}`;
+
+  return <footer className="vm-footer">
+    <a
+      className="vm-footer__link vm-footer__website"
+      target="_blank"
+      href="https://victoriametrics.com/"
+      rel="noreferrer"
+    >
+      <LogoIcon/>
+      victoriametrics.com
+    </a>
+    <a
+      className="vm-footer__link"
+      target="_blank"
+      href="https://github.com/VictoriaMetrics/VictoriaMetrics/issues/new"
+      rel="noreferrer"
+    >
+      create an issue
+    </a>
+    <div className="vm-footer__copyright">
+      &copy; {copyrightYears} VictoriaMetrics
+    </div>
+  </footer>;
+};
+
+export default Footer;

app/vmui/packages/vmui/src/components/Layout/Footer/style.scss

@@ -0,0 +1,34 @@
+@use "src/styles/variables" as *;
+
+.vm-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $padding-medium;
+  gap: $padding-large;
+  border-top: $border-divider;
+  color: $color-text-secondary;
+
+  &__website {
+    display: grid;
+    grid-template-columns: 12px auto;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+  }
+
+  &__link {
+    transition: color 200ms ease;
+    cursor: pointer;
+
+    &:hover {
+      color: $color-primary;
+      text-decoration: underline;
+    }
+  }
+
+  &__copyright {
+    text-align: right;
+    flex-grow: 1;
+  }
+}

app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx

@@ -1,17 +1,17 @@
 import React, { FC, useMemo, useState } from "preact/compat";
-import { ExecutionControls } from "../Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls";
+import { ExecutionControls } from "../../Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls";
-import { setQueryStringWithoutPageReload } from "../../utils/query-string";
+import { setQueryStringWithoutPageReload } from "../../../utils/query-string";
-import { TimeSelector } from "../Configurators/TimeRangeSettings/TimeSelector/TimeSelector";
+import { TimeSelector } from "../../Configurators/TimeRangeSettings/TimeSelector/TimeSelector";
-import GlobalSettings from "../Configurators/GlobalSettings/GlobalSettings";
+import GlobalSettings from "../../Configurators/GlobalSettings/GlobalSettings";
 import { useLocation, useNavigate } from "react-router-dom";
-import router, { RouterOptions, routerOptions } from "../../router";
+import router, { RouterOptions, routerOptions } from "../../../router";
 import { useEffect } from "react";
-import ShortcutKeys from "../Main/ShortcutKeys/ShortcutKeys";
+import ShortcutKeys from "../../Main/ShortcutKeys/ShortcutKeys";
-import { getAppModeEnable, getAppModeParams } from "../../utils/app-mode";
+import { getAppModeEnable, getAppModeParams } from "../../../utils/app-mode";
-import CardinalityDatePicker from "../Configurators/CardinalityDatePicker/CardinalityDatePicker";
+import CardinalityDatePicker from "../../Configurators/CardinalityDatePicker/CardinalityDatePicker";
-import { LogoIcon } from "../Main/Icons";
+import { LogoFullIcon } from "../../Main/Icons";
-import { getCssVariable } from "../../utils/theme";
+import { getCssVariable } from "../../../utils/theme";
-import Tabs from "../Main/Tabs/Tabs";
+import Tabs from "../../Main/Tabs/Tabs";
 import "./style.scss";
 import classNames from "classnames";
 
@@ -84,23 +84,11 @@ const Header: FC = () => {
   >
     {!appModeEnable && (
       <div
-        className="vm-header-logo"
+        className="vm-header__logo"
+        onClick={onClickLogo}
         style={{ color }}
       >
-        <div
+        <LogoFullIcon/>
-          className="vm-header-logo__icon"
-          onClick={onClickLogo}
-        >
-          <LogoIcon/>
-        </div>
-        <a
-          className="vm-header-logo__issue"
-          target="_blank"
-          href="https://github.com/VictoriaMetrics/VictoriaMetrics/issues/new"
-          rel="noreferrer"
-        >
-            create an issue
-        </a>
       </div>
     )}
     <div className="vm-header-nav">

app/vmui/packages/vmui/src/components/Layout/Header/style.scss

@@ -0,0 +1,37 @@
+@use "../../../styles/variables" as *;
+
+.vm-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: $padding-small $padding-medium;
+  gap: $padding-large;
+
+  &_app {
+    padding: $padding-small 0;
+  }
+
+  &__logo {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 100%;
+    max-width: 65px;
+    margin-bottom: 2px;
+  }
+
+  &-nav {
+    font-size: $font-size-small;
+    font-weight: 600;
+  }
+
+  &__settings {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: $padding-small;
+    flex-grow: 1;
+  }
+}

app/vmui/packages/vmui/src/components/Layout/Layout.tsx

@@ -1,11 +1,12 @@
-import Header from "../Header/Header";
+import Header from "./Header/Header";
 import React, { FC } from "preact/compat";
 import { Outlet } from "react-router-dom";
 import "./style.scss";
 import { getAppModeEnable } from "../../utils/app-mode";
 import classNames from "classnames";
+import Footer from "./Footer/Footer";
 
-const HomeLayout: FC = () => {
+const Layout: FC = () => {
   const appModeEnable = getAppModeEnable();
 
   return <section className="vm-container">
@@ -18,7 +19,8 @@ const HomeLayout: FC = () => {
     >
       <Outlet/>
     </div>
+    {!appModeEnable && <Footer/>}
   </section>;
 };
 
-export default HomeLayout;
+export default Layout;

app/vmui/packages/vmui/src/components/Main/Checkbox/style.scss

@@ -64,10 +64,6 @@ $checkbox-border-radius: $border-radius-small;
       color: $color-white;
       transform: scale(0);
       transition: transform 100ms ease-in-out;
-
-      svg {
-        width: 100%;
-      }
     }
   }
 

app/vmui/packages/vmui/src/components/Main/DatePicker/Calendar/style.scss

@@ -49,10 +49,6 @@
         justify-content: center;
         width: 14px;
         height: 14px;
-
-        svg {
-          width: 100%;
-        }
       }
     }
 

app/vmui/packages/vmui/src/components/Main/Icons/index.tsx

@@ -1,17 +1,26 @@
 import React from "react";
 
-export const LogoIcon = () => (
+export const LogoFullIcon = () => (
   <svg
     viewBox="0 0 74 24"
     fill="currentColor"
   >
     <path
-      d="M6.11771 9.47563C6.4774 9.7554 6.91935 9.90875 7.37507 9.9119H7.42685C7.9076 9.90451 8.38836 9.71964 8.67681 9.46823C10.1856 8.18898 14.5568 4.18115 14.5568 4.18115C15.7254 3.09415 12.4637 2.00716 7.42685 1.99977H7.36768C2.33084 2.00716 -0.930893 3.09415 0.237711 4.18115C0.237711 4.18115 4.60888 8.18898 6.11771 9.47563ZM8.67681 11.6422C8.31807 11.9246 7.87603 12.0806 7.41945 12.0859H7.37507C6.91849 12.0806 6.47645 11.9246 6.11771 11.6422C5.08224 10.7549 1.38413 7.41995 0.00103198 6.14809V8.07806C0.00103198 8.2925 0.0823905 8.57349 0.222919 8.70659L0.293358 8.77097L0.293386 8.77099C1.33788 9.72556 4.83907 12.9253 6.11771 14.0159C6.47645 14.2983 6.91849 14.4543 7.37507 14.4595H7.41945C7.9076 14.4447 8.38096 14.2599 8.67681 14.0159C9.98594 12.9067 13.6249 9.57175 14.5642 8.70659C14.7121 8.57349 14.7861 8.2925 14.7861 8.07806V6.14809C12.7662 7.99781 10.7297 9.82926 8.67681 11.6422ZM7.41945 16.6261C7.87517 16.623 8.31712 16.4696 8.67681 16.1898C10.7298 14.3744 12.7663 12.5405 14.7861 10.6883V12.6257C14.7861 12.8327 14.7121 13.1137 14.5642 13.2468C13.6249 14.1194 9.98594 17.4469 8.67681 18.5561C8.38096 18.8075 7.9076 18.9924 7.41945 18.9998H7.37507C6.91935 18.9966 6.4774 18.8433 6.11771 18.5635C4.91431 17.5371 1.74223 14.6362 0.502336 13.5023C0.3934 13.4027 0.299379 13.3167 0.222919 13.2468C0.0823905 13.1137 0.00103198 12.8327 0.00103198 12.6257V10.6883C1.38413 11.9528 5.08224 15.2951 6.11771 16.1825C6.47645 16.4649 6.91849 16.6209 7.37507 16.6261H7.41945Z"
+      d="M6.11767 10.4759C6.47736 10.7556 6.91931 10.909 7.37503 10.9121H7.42681C7.90756 10.9047 8.38832 10.7199 8.67677 10.4685C10.1856 9.18921 14.5568 5.18138 14.5568 5.18138C15.7254 4.09438 12.4637 3.00739 7.42681 3H7.36764C2.3308 3.00739 -0.930935 4.09438 0.237669 5.18138C0.237669 5.18138 4.60884 9.18921 6.11767 10.4759ZM8.67677 12.6424C8.31803 12.9248 7.87599 13.0808 7.41941 13.0861H7.37503C6.91845 13.0808 6.47641 12.9248 6.11767 12.6424C5.0822 11.7551 1.38409 8.42018 0.000989555 7.14832V9.07829C0.000989555 9.29273 0.0823481 9.57372 0.222877 9.70682L0.293316 9.7712L0.293344 9.77122C1.33784 10.7258 4.83903 13.9255 6.11767 15.0161C6.47641 15.2985 6.91845 15.4545 7.37503 15.4597H7.41941C7.90756 15.4449 8.38092 15.2601 8.67677 15.0161C9.9859 13.9069 13.6249 10.572 14.5642 9.70682C14.7121 9.57372 14.7861 9.29273 14.7861 9.07829V7.14832C12.7662 8.99804 10.7297 10.8295 8.67677 12.6424ZM7.41941 17.6263C7.87513 17.6232 8.31708 17.4698 8.67677 17.19C10.7298 15.3746 12.7663 13.5407 14.7861 11.6885V13.6259C14.7861 13.8329 14.7121 14.1139 14.5642 14.247C13.6249 15.1196 9.9859 18.4471 8.67677 19.5563C8.38092 19.8077 7.90756 19.9926 7.41941 20H7.37503C6.91931 19.9968 6.47736 19.8435 6.11767 19.5637C4.91427 18.5373 1.74219 15.6364 0.502294 14.5025C0.393358 14.4029 0.299337 14.3169 0.222877 14.247C0.0823481 14.1139 0.000989555 13.8329 0.000989555 13.6259V11.6885C1.38409 12.953 5.0822 16.2953 6.11767 17.1827C6.47641 17.4651 6.91845 17.6211 7.37503 17.6263H7.41941Z"
-      fill="currentColor"
     />
     <path
-      d="M35 3.54L29.16 18H26.73L20.89 3.54H23.05C23.2833 3.54 23.4733 3.59667 23.62 3.71C23.7667 3.82333 23.8767 3.97 23.95 4.15L27.36 12.97C27.4733 13.2567 27.58 13.5733 27.68 13.92C27.7867 14.26 27.8867 14.6167 27.98 14.99C28.06 14.6167 28.1467 14.26 28.24 13.92C28.3333 13.5733 28.4367 13.2567 28.55 12.97L31.94 4.15C31.9933 3.99667 32.0967 3.85667 32.25 3.73C32.41 3.60333 32.6033 3.54 32.83 3.54H35ZM52.1767 3.54V18H49.8067V8.66C49.8067 8.28667 49.8267 7.88333 49.8667 7.45L45.4967 15.66C45.2901 16.0533 44.9734 16.25 44.5467 16.25H44.1667C43.7401 16.25 43.4234 16.0533 43.2167 15.66L38.7967 7.42C38.8167 7.64 38.8334 7.85667 38.8467 8.07C38.8601 8.28333 38.8667 8.48 38.8667 8.66V18H36.4967V3.54H38.5267C38.6467 3.54 38.7501 3.54333 38.8367 3.55C38.9234 3.55667 39.0001 3.57333 39.0667 3.6C39.1401 3.62667 39.2034 3.67 39.2567 3.73C39.3167 3.79 39.3734 3.87 39.4267 3.97L43.7567 12C43.8701 12.2133 43.9734 12.4333 44.0667 12.66C44.1667 12.8867 44.2634 13.12 44.3567 13.36C44.4501 13.1133 44.5467 12.8767 44.6467 12.65C44.7467 12.4167 44.8534 12.1933 44.9667 11.98L49.2367 3.97C49.2901 3.87 49.3467 3.79 49.4067 3.73C49.4667 3.67 49.5301 3.62667 49.5967 3.6C49.6701 3.57333 49.7501 3.55667 49.8367 3.55C49.9234 3.54333 50.0267 3.54 50.1467 3.54H52.1767ZM61.063 17.27C61.743 17.27 62.3496 17.1533 62.883 16.92C63.423 16.68 63.8796 16.35 64.253 15.93C64.6263 15.51 64.9096 15.0167 65.103 14.45C65.303 13.8767 65.403 13.26 65.403 12.6V3.85H66.423V12.6C66.423 13.38 66.2996 14.11 66.053 14.79C65.8063 15.4633 65.4496 16.0533 64.983 16.56C64.523 17.06 63.9596 17.4533 63.293 17.74C62.633 18.0267 61.8896 18.17 61.063 18.17C60.2363 18.17 59.4896 18.0267 58.823 17.74C58.163 17.4533 57.5996 17.06 57.133 16.56C56.673 16.0533 56.3196 15.4633 56.073 14.79C55.8263 14.11 55.703 13.38 55.703 12.6V3.85H56.733V12.59C56.733 13.25 56.8296 13.8667 57.023 14.44C57.223 15.0067 57.5063 15.5 57.873 15.92C58.2463 16.34 58.6996 16.67 59.233 16.91C59.773 17.15 60.383 17.27 61.063 17.27ZM71.4442 18H70.4142V3.85H71.4442V18Z"
+      d="M34.9996 5L29.1596 19.46H26.7296L20.8896 5H23.0496C23.2829 5 23.4729 5.05667 23.6196 5.17C23.7663 5.28333 23.8763 5.43 23.9496 5.61L27.3596 14.43C27.4729 14.7167 27.5796 15.0333 27.6796 15.38C27.7863 15.72 27.8863 16.0767 27.9796 16.45C28.0596 16.0767 28.1463 15.72 28.2396 15.38C28.3329 15.0333 28.4363 14.7167 28.5496 14.43L31.9396 5.61C31.9929 5.45667 32.0963 5.31667 32.2496 5.19C32.4096 5.06333 32.603 5 32.8297 5H34.9996ZM52.1763 5V19.46H49.8064V10.12C49.8064 9.74667 49.8263 9.34333 49.8663 8.91L45.4963 17.12C45.2897 17.5133 44.973 17.71 44.5463 17.71H44.1663C43.7397 17.71 43.4231 17.5133 43.2164 17.12L38.7963 8.88C38.8163 9.1 38.833 9.31667 38.8463 9.53C38.8597 9.74333 38.8663 9.94 38.8663 10.12V19.46H36.4963V5H38.5263C38.6463 5 38.7497 5.00333 38.8363 5.01C38.923 5.01667 38.9997 5.03333 39.0663 5.06C39.1397 5.08667 39.203 5.13 39.2563 5.19C39.3163 5.25 39.373 5.33 39.4263 5.43L43.7563 13.46C43.8697 13.6733 43.973 13.8933 44.0663 14.12C44.1663 14.3467 44.263 14.58 44.3563 14.82C44.4497 14.5733 44.5464 14.3367 44.6464 14.11C44.7464 13.8767 44.8531 13.6533 44.9664 13.44L49.2363 5.43C49.2897 5.33 49.3463 5.25 49.4063 5.19C49.4663 5.13 49.5297 5.08667 49.5963 5.06C49.6697 5.03333 49.7497 5.01667 49.8363 5.01C49.923 5.00333 50.0264 5 50.1464 5H52.1763ZM61.0626 18.73C61.7426 18.73 62.3492 18.6133 62.8826 18.38C63.4226 18.14 63.8792 17.81 64.2526 17.39C64.6259 16.97 64.9092 16.4767 65.1026 15.91C65.3026 15.3367 65.4026 14.72 65.4026 14.06V5.31H66.4226V14.06C66.4226 14.84 66.2993 15.57 66.0527 16.25C65.806 16.9233 65.4493 17.5133 64.9827 18.02C64.5227 18.52 63.9592 18.9133 63.2926 19.2C62.6326 19.4867 61.8892 19.63 61.0626 19.63C60.2359 19.63 59.4893 19.4867 58.8227 19.2C58.1627 18.9133 57.5992 18.52 57.1326 18.02C56.6726 17.5133 56.3193 16.9233 56.0727 16.25C55.826 15.57 55.7026 14.84 55.7026 14.06V5.31H56.7327V14.05C56.7327 14.71 56.8292 15.3267 57.0226 15.9C57.2226 16.4667 57.506 16.96 57.8727 17.38C58.246 17.8 58.6993 18.13 59.2327 18.37C59.7727 18.61 60.3826 18.73 61.0626 18.73ZM71.4438 19.46H70.4138V5.31H71.4438V19.46Z"
-      fill="currentColor"
+    />
+  </svg>
+);
+
+export const LogoIcon = () => (
+  <svg
+    viewBox="0 0 15 17"
+    fill="currentColor"
+  >
+    <path
+      d="M6.11767 7.47586C6.47736 7.75563 6.91931 7.90898 7.37503 7.91213H7.42681C7.90756 7.90474 8.38832 7.71987 8.67677 7.46846C10.1856 6.18921 14.5568 2.18138 14.5568 2.18138C15.7254 1.09438 12.4637 0.00739 7.42681 0H7.36764C2.3308 0.00739 -0.930935 1.09438 0.237669 2.18138C0.237669 2.18138 4.60884 6.18921 6.11767 7.47586ZM8.67677 9.64243C8.31803 9.92483 7.87599 10.0808 7.41941 10.0861H7.37503C6.91845 10.0808 6.47641 9.92483 6.11767 9.64243C5.0822 8.75513 1.38409 5.42018 0.000989555 4.14832V6.07829C0.000989555 6.29273 0.0823481 6.57372 0.222877 6.70682L0.293316 6.7712L0.293344 6.77122C1.33784 7.72579 4.83903 10.9255 6.11767 12.0161C6.47641 12.2985 6.91845 12.4545 7.37503 12.4597H7.41941C7.90756 12.4449 8.38092 12.2601 8.67677 12.0161C9.9859 10.9069 13.6249 7.57198 14.5642 6.70682C14.7121 6.57372 14.7861 6.29273 14.7861 6.07829V4.14832C12.7662 5.99804 10.7297 7.82949 8.67677 9.64243ZM7.41941 14.6263C7.87513 14.6232 8.31708 14.4698 8.67677 14.19C10.7298 12.3746 12.7663 10.5407 14.7861 8.68853V10.6259C14.7861 10.8329 14.7121 11.1139 14.5642 11.247C13.6249 12.1196 9.9859 15.4471 8.67677 16.5563C8.38092 16.8077 7.90756 16.9926 7.41941 17H7.37503C6.91931 16.9968 6.47736 16.8435 6.11767 16.5637C4.91427 15.5373 1.74219 12.6364 0.502294 11.5025C0.393358 11.4029 0.299337 11.3169 0.222877 11.247C0.0823481 11.1139 0.000989555 10.8329 0.000989555 10.6259V8.68853C1.38409 9.95303 5.0822 13.2953 6.11767 14.1827C6.47641 14.4651 6.91845 14.6211 7.37503 14.6263H7.41941Z"
     />
   </svg>
 );

app/vmui/packages/vmui/src/components/Main/Modal/style.scss

@@ -40,11 +40,6 @@ $padding-modal: 22px;
         box-sizing: content-box;
         color: $color-white;
         cursor: pointer;
-
-        svg {
-          width: 100%;
-          height: auto;
-        }
       }
     }
   }

app/vmui/packages/vmui/src/components/Main/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { ReactNode, useEffect } from "react";
 import "./style.scss";
 import classNames from "classnames";
 import { getCssVariable } from "../../../utils/theme";
+import useResize from "../../../hooks/useResize";
 
 interface TabsProps {
   activeItem: string
@@ -19,6 +20,7 @@ const Tabs: FC<TabsProps> = ({
   onChange,
   indicatorPlacement = "bottom"
 }) => {
+  const windowSize = useResize(document.body);
   const activeNavRef = useRef<HTMLDivElement>(null);
   const [indicatorPosition, setIndicatorPosition] = useState({ left: 0, width: 0, bottom: 0 });
 
@@ -32,7 +34,7 @@ const Tabs: FC<TabsProps> = ({
       const positionTop = indicatorPlacement === "top";
       setIndicatorPosition({ left, width, bottom: positionTop ? height - 2 : 0 });
     }
-  }, [activeItem, activeNavRef, items]);
+  }, [windowSize, activeItem, activeNavRef, items]);
 
   return <div className="vm-tabs">
     {items.map(item => (

app/vmui/packages/vmui/src/components/Main/TextField/style.scss

@@ -113,11 +113,6 @@
     height: 100%;
     position: absolute;
     color: $color-text-secondary;
-
-    svg {
-      width: 100%;
-      height: auto;
-    }
   }
 
   &__icon-end {

app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/MetricsContent.tsx

@@ -1,9 +1,8 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import EnhancedTable from "../Table/Table";
 import TableCells from "../Table/TableCells/TableCells";
 import BarChart from "../../../components/Chart/BarChart/BarChart";
 import { barOptions } from "../../../components/Chart/BarChart/consts";
-import React, { SyntheticEvent } from "react";
 import { Data, HeadCell } from "../Table/types";
 import { MutableRef } from "preact/hooks";
 import Tabs from "../../../components/Main/Tabs/Tabs";
@@ -15,7 +14,7 @@ interface MetricsProperties {
   rows: Data[];
   activeTab: number;
   onChange: (newValue: string, tabId: string) => void;
-  onActionClick: (e: SyntheticEvent) => void;
+  onActionClick: (name: string) => void;
   tabs: string[];
   chartContainer: MutableRef<HTMLDivElement> | undefined;
   totalSeries: number,

app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableCells/TableCells.tsx

@@ -1,4 +1,3 @@
-import { SyntheticEvent } from "react";
 import React, { FC } from "preact/compat";
 import { Data } from "../types";
 import LineProgress from "../../../../components/Main/LineProgress/LineProgress";
@@ -9,12 +8,16 @@ import Tooltip from "../../../../components/Main/Tooltip/Tooltip";
 interface CardinalityTableCells {
   row: Data,
   totalSeries: number;
-  onActionClick: (e: SyntheticEvent) => void;
+  onActionClick: (name: string) => void;
 }
 
 const TableCells: FC<CardinalityTableCells> = ({ row, totalSeries, onActionClick }) => {
   const progress = totalSeries > 0 ? row.value / totalSeries * 100 : -1;
 
+  const handleActionClick = () => {
+    onActionClick(row.name);
+  };
+
   return <>
     <td
       className="vm-table-cell"
@@ -45,7 +48,7 @@ const TableCells: FC<CardinalityTableCells> = ({ row, totalSeries, onActionClick
           <Button
             variant="text"
             size="small"
-            onClick={onActionClick}
+            onClick={handleActionClick}
           >
             <PlayCircleOutlineIcon/>
           </Button>

app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState } from "react";
-import { SyntheticEvent } from "react";
 import { useFetchQuery } from "./hooks/useCardinalityFetch";
 import { queryUpdater } from "./helpers";
 import { Data } from "./Table/types";
@@ -60,8 +59,7 @@ const Index: FC = () => {
     setTab({ ...stateTabs, [tabId]: +newValue });
   };
 
-  const handleFilterClick = (key: string) => (e: SyntheticEvent) => {
+  const handleFilterClick = (key: string) => (name: string) => {
-    const name = e.currentTarget.id;
     const query = queryUpdater[key](focusLabel, name);
     setQuery(query);
     setQueryHistory(prev => [...prev, query]);

app/vmui/packages/vmui/src/styles/core.scss

@@ -45,3 +45,7 @@ input[type=number]::-webkit-outer-spin-button {
   bottom: $padding-global;
   z-index: 999;
 }
+
+svg {
+  width: 100%;
+}