app/vmui: added table where Labels with the highest number of unique values show (#4271)

* app/vmui: added Labels with the highest number of unique values

* app/vmui: cleanup

* app/vmui: cleanup

* app/vmui: add table description

* app/vmui: fix comment, updated CHANGELOG.md

* app/vmui: disable links

* app/vmui: added actions to the table, it will show values for selected label with the highest number of series

* app/vmui: fix comment

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

@@ -36,7 +36,7 @@ const TableCells: FC<CardinalityTableCells> = ({
       key={row.name}
     >
       <span
-        className="vm-link vm-link_colored"
+        className={"vm-link vm-link_colored"}
         onClick={handleActionClick}
       >
         {row.name}

app/vmui/packages/vmui/src/pages/CardinalityPanel/appConfigurator.ts

@@ -52,7 +52,7 @@ export default class AppConfigurator {
     } else if (isLabel) {
       keys = keys.concat("seriesCountByMetricName", "seriesCountByLabelName");
     } else {
-      keys = keys.concat("seriesCountByMetricName", "seriesCountByLabelName", "seriesCountByLabelValuePair");
+      keys = keys.concat("seriesCountByMetricName", "seriesCountByLabelName", "seriesCountByLabelValuePair", "labelValueCountByLabelName");
     }
     return keys;
   }
@@ -120,7 +120,11 @@ export default class AppConfigurator {
        <p>
           Use this table to identify label values that are storing per each selected series.
        </p>`,
-      labelValueCountByLabelName: "",
+      labelValueCountByLabelName: `
+       <p>
+          This table returns a list of labels with the highest number of the unique values.
+       </p>
+      `,
       seriesCountByLabelValuePair: `
         <p>
           This table returns a list of the label values pairs with the highest number of series.

app/vmui/packages/vmui/src/pages/CardinalityPanel/helpers.ts

@@ -17,6 +17,9 @@ export const queryUpdater: QueryUpdater = {
     return getSeriesSelector(label, value);
   },
   labelValueCountByLabelName: ({ query, match }): string => {
+    if (match === "") {
+      return `{${query}!=""}`;
+    }
     return `${match.replace("}", "")}, ${query}!=""}`;
   },
 };

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

@@ -72,8 +72,8 @@ const CardinalityPanel: FC = () => {
 
       {error && <Alert variant="error">{error}</Alert>}
 
-      {appConfigurator.keys(match, focusLabel).map((keyName) => (
+      {appConfigurator.keys(match, focusLabel).map((keyName) => {
-        <MetricsContent
+        return <MetricsContent
           key={keyName}
           sectionTitle={appConfigurator.sectionsTitles(focusLabel)[keyName]}
           tip={sectionsTips[keyName]}
@@ -84,8 +84,8 @@ const CardinalityPanel: FC = () => {
           totalSeriesPrev={appConfigurator.totalSeries(keyName, true)}
           totalSeries={appConfigurator.totalSeries(keyName)}
           tableHeaderCells={tablesHeaders[keyName]}
-        />
+        />;
-      ))}
+      })}
     </div>
   );
 };

docs/CHANGELOG.md

@@ -48,6 +48,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): store backup creation and completion time in `backup_complete.ignore` file of backup contents. This allows determining the exact timestamp when the backup was created and completed.
 * FEATURE: [vmbackupmanager](https://docs.victoriametrics.com/vmbackupmanager.html): add `created_at` field to the output of `/api/v1/backups` API and `vmbackupmanager backup list` command. See this [doc](https://docs.victoriametrics.com/vmbackupmanager.html#api-methods) for data format details.
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): add support for [different time formats](https://docs.victoriametrics.com/Single-server-VictoriaMetrics.html#timestamp-formats) for `--vm-native-filter-time-start` and `--vm-native-filter-time-end` command-line flags. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4091).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add table with the highest number of unique label values. This table helps to determine labels with a big number of unique values. See [issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4213).
 
 * BUGFIX: reduce the probability of sudden increase in the number of small parts on systems with small number of CPU cores.
 * BUGFIX: reduce the possibility of increased CPU usage when data with timestamps older than one hour is ingested into VictoriaMetrics. This reduces spikes for the graph `sum(rate(vm_slow_per_day_index_inserts_total))`. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4258).