diff --git a/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx b/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx
index 1e730abbfcc..587beb46e2a 100644
--- a/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiContextUi.test.tsx
@@ -55,6 +55,7 @@ describe('LokiContextUi', () => {
label3: 'value3',
},
} as unknown as LogRowModel,
+ onClose: jest.fn(),
};
return defaults;
@@ -113,4 +114,14 @@ describe('LokiContextUi', () => {
jest.useRealTimers();
});
+
+ it('unmounts and calls onClose', async () => {
+ const props = setupProps();
+ const comp = render();
+ comp.unmount();
+
+ await waitFor(() => {
+ expect(props.onClose).toHaveBeenCalled();
+ });
+ });
});
diff --git a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
index 3f14392eccc..33396254e24 100644
--- a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
@@ -13,6 +13,7 @@ export interface LokiContextUiProps {
languageProvider: LokiLanguageProvider;
row: LogRowModel;
updateFilter: (value: ContextFilter[]) => void;
+ onClose: () => void;
}
function getStyles(theme: GrafanaTheme2) {
@@ -43,7 +44,7 @@ const formatOptionLabel = memoizeOne(({ label, description }: SelectableValue([]);
@@ -74,6 +75,13 @@ export function LokiContextUi(props: LokiContextUiProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contextFilters, initialized]);
+ useEffect(() => {
+ return () => {
+ clearTimeout(timerHandle.current);
+ onClose();
+ };
+ }, [onClose]);
+
useAsync(async () => {
await languageProvider.start();
const allLabels = languageProvider.getLabelKeys();
diff --git a/public/app/plugins/datasource/loki/datasource.ts b/public/app/plugins/datasource/loki/datasource.ts
index a96fa406940..b1da90ab4d4 100644
--- a/public/app/plugins/datasource/loki/datasource.ts
+++ b/public/app/plugins/datasource/loki/datasource.ts
@@ -758,7 +758,7 @@ export class LokiDatasource
};
};
- async prepareContextExpr(row: LogRowModel, origQuery?: DataQuery): Promise {
+ async prepareContextExprWithoutParsedLabels(row: LogRowModel, origQuery?: DataQuery): Promise {
await this.languageProvider.start();
const labels = this.languageProvider.getLabelKeys();
const expr = Object.keys(row.labels)
@@ -775,10 +775,17 @@ export class LokiDatasource
return `{${expr}}`;
}
+ async prepareContextExpr(row: LogRowModel, origQuery?: DataQuery): Promise {
+ return await this.prepareContextExprWithoutParsedLabels(row, origQuery);
+ }
+
getLogRowContextUi(row: LogRowModel, runContextQuery: () => void): React.ReactNode {
return LokiContextUi({
row,
languageProvider: this.languageProvider,
+ onClose: () => {
+ this.prepareContextExpr = this.prepareContextExprWithoutParsedLabels;
+ },
updateFilter: (contextFilters: ContextFilter[]) => {
this.prepareContextExpr = async (row: LogRowModel, origQuery?: DataQuery) => {
await this.languageProvider.start();