convert LokiLabelBrowser

This commit is contained in:
Ashley Harrison
2025-12-01 11:36:08 +00:00
parent 039ee5802f
commit fdcdf80eb6
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
import { sortBy } from 'lodash'; import { sortBy } from 'lodash';
import { ChangeEvent } from 'react'; import { ChangeEvent } from 'react';
import * as React from 'react'; import * as React from 'react';
import { FixedSizeList } from 'react-window'; import { List } from 'react-window';
import { CoreApp, GrafanaTheme2, TimeRange } from '@grafana/data'; import { CoreApp, GrafanaTheme2, TimeRange } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime'; import { reportInteraction } from '@grafana/runtime';
@@ -505,18 +505,19 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
onClick={this.onClickLabel} onClick={this.onClickLabel}
/> />
</div> </div>
<FixedSizeList <List
height={200} rowCount={label.values?.length || 0}
itemCount={label.values?.length || 0} rowHeight={28}
itemSize={28} rowProps={{}}
itemKey={(i) => label.values?.[i].name ?? i} style={{
width={200} height: 200,
width: 200,
}}
className={styles.valueList} className={styles.valueList}
> rowComponent={({ index, style }) => {
{({ index, style }) => {
const value = label.values?.[index]; const value = label.values?.[index];
if (!value) { if (!value) {
return null; return <></>;
} }
return ( return (
<div style={style}> <div style={style}>
@@ -531,7 +532,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
</div> </div>
); );
}} }}
</FixedSizeList> />
</div> </div>
))} ))}
</div> </div>