+
+ {queries.length > 0 &&
+ map(
+ queries,
+ (query): JSX.Element => {
+ return (
+
+ );
+ },
+ )}
+
+
+ {map(staging, (item) => {
+ return {item};
+ })}
+
+
+
+
+
+ );
+}
+
+export default MetricTagKeyFilter;
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/styles.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/styles.ts
new file mode 100644
index 0000000000..fcb7e20372
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/styles.ts
@@ -0,0 +1,30 @@
+import { grey } from '@ant-design/colors';
+import { Tag } from 'antd';
+import styled from 'styled-components';
+
+export const SearchContainer = styled.div<{
+ isDarkMode: boolean;
+ disabled?: boolean;
+}>`
+ background: ${({ isDarkMode }): string => (isDarkMode ? '#000' : '#fff')};
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 0.2rem;
+ border: 1px solid #ccc5;
+ ${({ disabled }): string => (disabled ? `cursor: not-allowed;` : '')}
+`;
+export const QueryChipContainer = styled.span`
+ display: flex;
+ align-items: center;
+ margin-right: 0.5rem;
+ &:hover {
+ & > * {
+ background: ${grey.primary}44;
+ }
+ }
+`;
+
+export const QueryChipItem = styled(Tag)`
+ margin-right: 0.1rem;
+`;
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/types.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/types.ts
new file mode 100644
index 0000000000..89340d6cbe
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/types.ts
@@ -0,0 +1,18 @@
+export interface IOption {
+ label: string;
+ value: string;
+}
+
+export interface IMetricBuilderTagKeyQuery {
+ id: string;
+ tagKey: string;
+ operator: string;
+ tagValue: string[];
+}
+
+export interface ITagKeyValueQuery {
+ id: string;
+ key: string;
+ op: string;
+ value: string[];
+}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/utils.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/utils.ts
new file mode 100644
index 0000000000..ba3ce8bca9
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/utils.ts
@@ -0,0 +1,55 @@
+import {
+ getResourceAttributesTagKeys,
+ getResourceAttributesTagValues,
+} from 'api/metrics/getResourceAttributes';
+import { v4 as uuid } from 'uuid';
+
+import { TagKeyOperator } from '../../Options';
+import { IOption, ITagKeyValueQuery } from './types';
+
+export const OperatorSchema: IOption[] = TagKeyOperator;
+
+export const GetTagKeys = async (metricName: string): Promise