diff --git a/src/assets/CiCdIcon.svg b/src/assets/CiCdIcon.svg new file mode 100644 index 0000000000..795ae2ff48 --- /dev/null +++ b/src/assets/CiCdIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/KubernetesIcon.svg b/src/assets/KubernetesIcon.svg new file mode 100644 index 0000000000..2220c74e0e --- /dev/null +++ b/src/assets/KubernetesIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/ValidationSettings.svg b/src/assets/ValidationSettings.svg new file mode 100644 index 0000000000..57bccfa373 --- /dev/null +++ b/src/assets/ValidationSettings.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/VsCodeIcon.svg b/src/assets/VsCodeIcon.svg new file mode 100644 index 0000000000..7698e9a6af --- /dev/null +++ b/src/assets/VsCodeIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/atoms/SelectItemImage/SelectItemImage.tsx b/src/components/atoms/SelectItemImage/SelectItemImage.tsx index f9dabc7585..9b7b2d4e19 100644 --- a/src/components/atoms/SelectItemImage/SelectItemImage.tsx +++ b/src/components/atoms/SelectItemImage/SelectItemImage.tsx @@ -1,4 +1,4 @@ -import SelectItemFromLeft from '@assets/SelectItemFromLeft.svg'; +import ValidationSettings from '@assets/ValidationSettings.svg'; import * as S from './SelectItemImage.styled'; @@ -13,7 +13,7 @@ const SelectItemImage: React.FC = props => { return ( - + {text} ); diff --git a/src/components/organisms/ProblemPane/ProblemPane.styled.tsx b/src/components/organisms/ProblemPane/ProblemPane.styled.tsx index cd2b819ef4..30ef1fd6fb 100644 --- a/src/components/organisms/ProblemPane/ProblemPane.styled.tsx +++ b/src/components/organisms/ProblemPane/ProblemPane.styled.tsx @@ -2,7 +2,7 @@ import {Tabs as RawTabs} from 'antd'; import styled from 'styled-components'; -import {BackgroundColors} from '@shared/styles'; +import {BackgroundColors, Colors} from '@shared/styles'; export const ProblemPaneContainer = styled.div` background-color: ${BackgroundColors.darkThemeBackground}; @@ -13,6 +13,81 @@ export const ProblemPaneContainer = styled.div` grid-gap: 15px; `; +export const MainBox = styled.div` + height: 100%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; +`; +export const TextContainer = styled.div` + display: grid; + grid-template-columns: 119px 119px 139px 150px; + grid-column-gap: 50px; + padding: 20px 20px 27px 48px; + width: 756px; + border-radius: 4px; + border: 1px solid ${Colors.grey4}; + overflow: auto; +`; + +export const TextTitle = styled.div` + color: ${Colors.geekblue8}; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin: 30px 0px 30px 0px; +`; + +export const Text = styled.div` + color: ${Colors.grey8}; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 171.429% */ + margin: 10px 0px 20px 0px; +`; + +export const MainColumn = styled.div` + grid-column: 1 / 4; + grid-row: 1; +`; + +export const ImageColumn = styled.div` + grid-column: 4; + grid-row: 1 / 5; +`; + +export const ValidationImage = styled.img` + width: 150px; + height: 138px; + margin-top: 40px; +`; + +export const TextColumn1 = styled.div` + grid-column: 1 / 2; + grid-row: 2; +`; + +export const TextColumn2 = styled.div` + grid-column: 2 / 3; + grid-row: 2; +`; + +export const TextColumn3 = styled.div` + grid-column: 3 / 4; + grid-row: 2; + padding-right: 20px; +`; + +export const TextIcon = styled.img` + cursor: pointer; + height: 32px; + width: 32px; + margin-bottom: 15px; +`; + export const Tabs = styled(RawTabs)` width: 100%; margin-top: -15px; diff --git a/src/components/organisms/ProblemPane/ProblemPane.tsx b/src/components/organisms/ProblemPane/ProblemPane.tsx index 98bc3e2f37..0b5fe13dac 100644 --- a/src/components/organisms/ProblemPane/ProblemPane.tsx +++ b/src/components/organisms/ProblemPane/ProblemPane.tsx @@ -6,16 +6,40 @@ import {DEFAULT_PANE_TITLE_HEIGHT} from '@constants/constants'; import {useAppDispatch, useAppSelector} from '@redux/hooks'; import {setLeftMenuSelection} from '@redux/reducers/ui'; -import {SelectItemImage} from '@atoms'; - import {useProblemPaneMenuItems} from '@hooks/menuItemsHooks'; import {usePaneHeight} from '@hooks/usePaneHeight'; +import CiCdIcon from '@assets/CiCdIcon.svg'; +import KubernetesIcon from '@assets/KubernetesIcon.svg'; +import ValidationSettings from '@assets/ValidationSettings.svg'; +import VsCodeIcon from '@assets/VsCodeIcon.svg'; + import {ProblemInfo, TitleBar} from '@monokle/components'; import {getRuleForResultV2} from '@monokle/validation'; +import { + ADMISSION_CONTROLLER_URL, + MONOKLE_CLI_URL, + MONOKLE_CLOUD_URL, + POLICIES_101_BLOGPOST_URL, + VSCODE_EXTENSION_URL, +} from '@shared/constants/urls'; import {openUrlInExternalBrowser} from '@shared/utils'; -import * as S from './ProblemPane.styled'; +import { + ImageColumn, + MainBox, + MainColumn, + ProblemPaneContainer, + Tabs, + Text, + TextColumn1, + TextColumn2, + TextColumn3, + TextContainer, + TextIcon, + TextTitle, + ValidationImage, +} from './ProblemPane.styled'; const ProblemPane: React.FC = () => { const dispatch = useAppDispatch(); @@ -46,15 +70,65 @@ const ProblemPane: React.FC = () => { if (!rule || !selectedProblem) { return ( - + + + + + Check out misconfigurations and fix them + + + ← See a list of all found misconfigurations for the current validation settings to the left.{' '} + Click on any of them to see and fix these misconfigurations in your YAML resources. + + + Tweak default validation rules and learn about configuration policies in{' '} + dispatch(setLeftMenuSelection('settings'))}>Validation Settings + + + Enforce policies everywhere! + + + openUrlInExternalBrowser(MONOKLE_CLOUD_URL)}>Monokle Cloud allows you to define your + policies in one place and enforce them across the entire software development lifecycle + + + + + + + + Locally in Monokle Desktop and VS Code + + openUrlInExternalBrowser(VSCODE_EXTENSION_URL)}>VSC Extension + + + + + In your CI/CD and GitOps pipelines with the CLI + + openUrlInExternalBrowser(MONOKLE_CLI_URL)}>See on GitHub + + + + + In clusters with the Admission Controller + + openUrlInExternalBrowser(ADMISSION_CONTROLLER_URL)}>See on GitHub + + + + Read openUrlInExternalBrowser(POLICIES_101_BLOGPOST_URL)}>Kubernetes YAML Policies 101{' '} + to learn more! + + + ); } return ( - + - - + {selectedProblem && (
@@ -66,7 +140,7 @@ const ProblemPane: React.FC = () => { />
)} - + ); }; diff --git a/src/shared/constants/urls.ts b/src/shared/constants/urls.ts index 116158087e..717197ca52 100644 --- a/src/shared/constants/urls.ts +++ b/src/shared/constants/urls.ts @@ -1,2 +1,12 @@ export const DEFAULT_TEMPLATES_PLUGIN_URL = 'https://github.com/kubeshop/monokle-default-templates-plugin'; export const DEPENDENCIES_HELP_URL = 'https://kubeshop.github.io/monokle/getting-started/#install-dependencies'; + +export const VSCODE_EXTENSION_URL = 'https://marketplace.visualstudio.com/items?itemName=kubeshop.monokle'; + +export const MONOKLE_CLI_URL = 'https://github.com/kubeshop/monokle-cli'; + +export const ADMISSION_CONTROLLER_URL = 'https://github.com/kubeshop/monokle-admission-controller'; + +export const POLICIES_101_BLOGPOST_URL = 'https://monokle.io/blog/kubernetes-yaml-policies-101'; + +export const MONOKLE_CLOUD_URL = 'https://app.monokle.com';