GroupBy: Non-applicable values

packages/scenes/src/variables/groupby/GroupByValueContainer.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { getSelectStyles, useTheme2 } from '@grafana/ui';
+
+export interface GroupByContainerProps {
+  innerProps: JSX.IntrinsicElements['div'];
+  filtersApplicability?: Array<{ key: string; isApplicable: boolean }>;
+}
+
+export const GroupByValueContainer = ({
+  filtersApplicability,
+  children,
+}: React.PropsWithChildren<GroupByContainerProps>) => {
+  const theme = useTheme2();
+  const styles = getSelectStyles(theme);
+  console.log(children, filtersApplicability);
+
+  return (
+    <div className={styles.multiValueContainer}>
+      {React.Children.map(children, (child) => {
+        // Check if child is a valid React element with props
+        if (!React.isValidElement(child) || !child.props?.data?.value) {
+          return child;
+        }
+
+        const filterApplicability = filtersApplicability?.find((filter) => filter.key === child.props.data.value);
+
+        if (!filterApplicability) {
+          return child;
+        }
+
+        if (!filterApplicability.isApplicable) {
+          return <s key={filterApplicability.key}>{child}</s>;
+        }
+
+        return child;
+      })}
+    </div>
+  );
+};

packages/scenes/src/variables/groupby/GroupByVariable.tsx

@@ -18,6 +18,7 @@ import { getOptionSearcher } from '../components/getOptionSearcher';
 import { getEnrichedFiltersRequest } from '../getEnrichedFiltersRequest';
 import { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject';
 import { DefaultGroupByCustomIndicatorContainer } from './DefaultGroupByCustomIndicatorContainer';
+import { GroupByValueContainer, GroupByContainerProps } from './GroupByValueContainer';
 
 export interface GroupByVariableState extends MultiValueVariableState {
   /** Defaults to "Group" */
@@ -276,6 +277,21 @@ export function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVa
     defaultValue,
   } = model.useState();
 
+  const arr = [
+    {
+      key: 'cluster',
+      isApplicable: false,
+    },
+    {
+      key: 'container',
+      isApplicable: false,
+    },
+    {
+      key: 'cpu',
+      isApplicable: true,
+    },
+  ];
+
   const values = useMemo<Array<SelectableValue<VariableValueSingle>>>(() => {
     const arrayValue = isArray(value) ? value : [value];
     const arrayText = isArray(text) ? text : [text];
@@ -358,6 +374,11 @@ export function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVa
               IndicatorsContainer: () => <DefaultGroupByCustomIndicatorContainer model={model} />,
             }
           : {}),
+        MultiValueContainer: ({ innerProps, children }: React.PropsWithChildren<GroupByContainerProps>) => (
+          <GroupByValueContainer innerProps={innerProps} filtersApplicability={arr}>
+            {children}
+          </GroupByValueContainer>
+        ),
       }}
       onInputChange={onInputChange}
       onBlur={() => {