[8.4] [Kubernetes Security] Enable Kubernetes visualization page on security solution (#137090)

* Toggle securitySolution.kubernetesEnabled to true

* Add beta tag to kubernetes page

* Remove unused color from euiTheme

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/kubernetes_security/common/translations.ts

@@ -7,6 +7,10 @@
 
 import { i18n } from '@kbn/i18n';
 
+export const BETA = i18n.translate('xpack.kubernetesSecurity.beta', {
+  defaultMessage: 'Beta',
+});
+
 export const SEARCH_GROUP_CLUSTER = i18n.translate('xpack.kubernetesSecurity.searchGroup.cluster', {
   defaultMessage: 'Cluster',
 });

x-pack/plugins/kubernetes_security/public/components/kubernetes_security_routes/index.tsx

@@ -8,7 +8,14 @@
 import React, { useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiBetaBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiThemeVars } from '@kbn/ui-theme';
@@ -38,6 +45,7 @@ import { useStyles } from './styles';
 import { TreeViewContainer } from '../tree_view_container';
 import { ChartsToggle } from '../charts_toggle';
 import {
+  BETA,
   COUNT_WIDGET_CLUSTERS,
   COUNT_WIDGET_NAMESPACE,
   COUNT_WIDGET_NODES,
@@ -94,7 +102,10 @@ const KubernetesSecurityRoutesComponent = ({
         <EuiFlexGroup gutterSize="none" css={styles.titleSection}>
           <EuiFlexItem>
             <EuiTitle size="l">
-              <h1>{KUBERNETES_TITLE}</h1>
+              <h1 css={styles.titleText}>
+                {KUBERNETES_TITLE}
+                <EuiBetaBadge label={BETA} size="s" css={styles.betaBadge} />
+              </h1>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false} css={styles.titleActions}>

x-pack/plugins/kubernetes_security/public/components/kubernetes_security_routes/styles.ts

@@ -19,6 +19,11 @@ export const useStyles = () => {
       marginBottom: size.l,
     };
 
+    const titleText: CSSObject = {
+      display: 'flex',
+      alignItems: 'center',
+    };
+
     const titleActions: CSSObject = {
       marginLeft: 'auto',
       flexDirection: 'row',
@@ -96,8 +101,13 @@ export const useStyles = () => {
       },
     };
 
+    const betaBadge: CSSObject = {
+      marginLeft: size.m,
+    };
+
     return {
       titleSection,
+      titleText,
       titleActions,
       updatedAt,
       widgetBadge,
@@ -109,6 +119,7 @@ export const useStyles = () => {
       percentageChartTitle,
       widgetHolder,
       widgetsGroup,
+      betaBadge,
     };
   }, [euiTheme]);
 

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -15,7 +15,7 @@ export const allowedExperimentalValues = Object.freeze({
   tGridEnabled: true,
   tGridEventRenderedViewEnabled: true,
   excludePoliciesInFilterEnabled: false,
-  kubernetesEnabled: false,
+  kubernetesEnabled: true,
   disableIsolationUIPendingStatuses: false,
   riskyHostsEnabled: false,
   riskyUsersEnabled: false,