convert prometheus metrics browser

2025-12-01 10:54:47 +00:00
parent 6de2336232
commit 2ae4ff8b4d
2 changed files with 22 additions and 20 deletions
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { FixedSizeList } from 'react-window';
+import { List } from 'react-window';

 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -65,15 +65,12 @@ export function MetricSelector() {
          className={styles.valueListWrapper}
          data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.metricList}
        >
-          <FixedSizeList
-            height={Math.min(450, filteredMetrics.length * LIST_ITEM_SIZE)}
-            itemCount={filteredMetrics.length}
-            itemSize={LIST_ITEM_SIZE}
-            itemKey={(i) => filteredMetrics[i].name}
-            width={300}
+          <List
+            rowProps={{}}
+            rowCount={filteredMetrics.length}
+            rowHeight={LIST_ITEM_SIZE}
            className={styles.valueList}
-          >
-            {({ index, style }) => {
+            rowComponent={({ index, style }) => {
              const metric = filteredMetrics[index];
              return (
                <div style={style}>
@@ -92,7 +89,11 @@ export function MetricSelector() {
                </div>
              );
            }}
-          </FixedSizeList>
+            style={{
+              height: Math.min(450, filteredMetrics.length * LIST_ITEM_SIZE),
+              width: 300,
+            }}
+          />
        </div>
      </div>
    </div>
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { FixedSizeList } from 'react-window';
+import { List } from 'react-window';

 import { selectors } from '@grafana/e2e-selectors';
 import { t, Trans } from '@grafana/i18n';
@@ -78,15 +78,16 @@ export function ValueSelector() {
                <div className={styles.valueTitle}>
                  <PromLabel name={lk} active={true} hidden={false} facets={lv.length} onClick={onLabelKeyClick} />
                </div>
-                <FixedSizeList
-                  height={Math.min(200, LIST_ITEM_SIZE * (lv.length || 0))}
-                  itemCount={lv.length || 0}
-                  itemSize={28}
-                  itemKey={(i) => lv[i]}
-                  width={200}
+                <List
+                  rowProps={{}}
+                  rowCount={lv.length || 0}
+                  rowHeight={28}
+                  style={{
+                    height: Math.min(200, LIST_ITEM_SIZE * (lv.length || 0)),
+                    width: 200,
+                  }}
                  className={styles.valueList}
-                >
-                  {({ index, style }) => {
+                  rowComponent={({ index, style }) => {
                    const value = lv[index];
                    const isSelected = selectedLabelValues[lk]?.includes(value);
                    return (
@@ -101,7 +102,7 @@ export function ValueSelector() {
                      </div>
                    );
                  }}
-                </FixedSizeList>
+                />
              </div>
            );
          })}