diff --git a/web/docs/installation.mdx b/web/docs/installation.mdx index 027d1e8f..a9853f7d 100644 --- a/web/docs/installation.mdx +++ b/web/docs/installation.mdx @@ -57,7 +57,7 @@ Both checks are required before proceeding with the installation. import { InstallationSnippet } from '@site/src/components/Installation'; Install the plugin using `kubectl` by applying the manifest for the latest -release: +release or using the Helm chart: diff --git a/web/docs/troubleshooting.md b/web/docs/troubleshooting.md index fe57262f..c57a81ec 100644 --- a/web/docs/troubleshooting.md +++ b/web/docs/troubleshooting.md @@ -485,14 +485,10 @@ If problems persist: ### Plugin Limitations -1. **Installation method**: Currently only supports manifest and Kustomize - installation ([#351](https://github.com/cloudnative-pg/plugin-barman-cloud/issues/351) - - Helm chart requested) - -2. **Sidecar resource sharing**: The plugin sidecar container shares pod +1. **Sidecar resource sharing**: The plugin sidecar container shares pod resources with PostgreSQL -3. **Plugin restart behavior**: Restarting the sidecar container requires +2. **Plugin restart behavior**: Restarting the sidecar container requires restarting the entire PostgreSQL pod ## Recap of General Debugging Steps @@ -588,4 +584,3 @@ kubectl get secret -n -o jsonpath='{.data}' | jq 'keys * **"NoSuchBucket"** — Verify the bucket exists and the endpoint URL is correct. * **"Connection timeout"** — Check network connectivity and firewall rules. * **"SSL certificate problem"** — For self-signed certificates, verify the CA bundle configuration. - diff --git a/web/src/components/Installation/index.tsx b/web/src/components/Installation/index.tsx index 064a0ead..854f9225 100644 --- a/web/src/components/Installation/index.tsx +++ b/web/src/components/Installation/index.tsx @@ -1,16 +1,31 @@ import {ReactElement} from 'react'; import CodeBlock from '@theme/CodeBlock'; import {useCurrentVersion} from '@site/src/hooks/versions'; +import {MultiLangCodeBlock} from '@site/src/components/MultiLangCodeBlock'; // InstallationSnippet is the kubectl incantation to install the lastest // available version of the Barman Cloud Plugin. export function InstallationSnippet(): ReactElement { const latest = useCurrentVersion('latestReleased'); - return ( - - {`kubectl apply -f \\ - https://github.com/cloudnative-pg/plugin-barman-cloud/releases/download/v${latest}/manifest.yaml`} - - ); -} + const snippets = [ + { + label: 'kubectl', + language: 'sh', + code: `kubectl apply -f \\ +https://github.com/cloudnative-pg/plugin-barman-cloud/releases/download/v${latest}/manifest.yaml`, + }, + { + label: 'Helm', + language: 'sh', + code: `helm repo add cnpg https://cloudnative-pg.github.io/charts +helm repo update +helm upgrade \\ + --install \\ + --namespace cnpg-system \\ + plugin-barman-cloud cnpg/plugin-barman-cloud`, + }, + ]; + + return ; +} diff --git a/web/src/components/MultiLangCodeBlock/index.tsx b/web/src/components/MultiLangCodeBlock/index.tsx new file mode 100644 index 00000000..a0cc5411 --- /dev/null +++ b/web/src/components/MultiLangCodeBlock/index.tsx @@ -0,0 +1,79 @@ +import React, {ReactElement, useState} from 'react'; +import CodeBlock from '@theme/CodeBlock'; + +export type Snippet = { + label: string; // visible tab label (e.g. "Shell", "Helm", "Go") + language: string; // language prop for CodeBlock (e.g. "sh", "yaml", "go") + code: string; // the snippet to display +}; + +type Props = { + snippets: Snippet[]; + defaultIndex?: number; + className?: string; +}; + +export function MultiLangCodeBlock({snippets, defaultIndex = 0, className}: Props): ReactElement | null { + const safeDefault = Math.max(0, Math.min(defaultIndex, snippets.length - 1)); + const [active, setActive] = useState(snippets.length > 0 ? safeDefault : -1); + + if (snippets.length === 0) return null; + + const tabStyle: React.CSSProperties = { + padding: '0.3rem 0.5rem', + cursor: 'pointer', + border: '0', + borderRadius: 'var(--ifm-code-border-radius)', + margin: '0 0 0 0', + fontSize: '0.8125rem', + color: 'inherit', + }; + + const activeTabStyle: React.CSSProperties = { + ...tabStyle, + fontWeight: 700, + }; + + const tabsContainerStyle: React.CSSProperties = { + display: 'flex', + alignItems: 'flex-end', + justifyContent: 'flex-end', + gap: '0.25rem', + margin: '0 0 -0.5rem', + padding: '0.5rem 0.5rem 1rem', + flexWrap: 'wrap', + }; + + const wrapperStyle: React.CSSProperties = { + overflow: 'hidden', + padding: '0', + }; + + return ( +
+
+ {snippets.map((ex, idx) => ( + + ))} +
+ +
+ +{snippets[active].code} + +
+
+ ); +} + +export default MultiLangCodeBlock; diff --git a/web/versioned_docs/version-0.13.0/installation.mdx b/web/versioned_docs/version-0.13.0/installation.mdx index 027d1e8f..a9853f7d 100644 --- a/web/versioned_docs/version-0.13.0/installation.mdx +++ b/web/versioned_docs/version-0.13.0/installation.mdx @@ -57,7 +57,7 @@ Both checks are required before proceeding with the installation. import { InstallationSnippet } from '@site/src/components/Installation'; Install the plugin using `kubectl` by applying the manifest for the latest -release: +release or using the Helm chart: diff --git a/web/versioned_docs/version-0.13.0/troubleshooting.md b/web/versioned_docs/version-0.13.0/troubleshooting.md index fe57262f..c57a81ec 100644 --- a/web/versioned_docs/version-0.13.0/troubleshooting.md +++ b/web/versioned_docs/version-0.13.0/troubleshooting.md @@ -485,14 +485,10 @@ If problems persist: ### Plugin Limitations -1. **Installation method**: Currently only supports manifest and Kustomize - installation ([#351](https://github.com/cloudnative-pg/plugin-barman-cloud/issues/351) - - Helm chart requested) - -2. **Sidecar resource sharing**: The plugin sidecar container shares pod +1. **Sidecar resource sharing**: The plugin sidecar container shares pod resources with PostgreSQL -3. **Plugin restart behavior**: Restarting the sidecar container requires +2. **Plugin restart behavior**: Restarting the sidecar container requires restarting the entire PostgreSQL pod ## Recap of General Debugging Steps @@ -588,4 +584,3 @@ kubectl get secret -n -o jsonpath='{.data}' | jq 'keys * **"NoSuchBucket"** — Verify the bucket exists and the endpoint URL is correct. * **"Connection timeout"** — Check network connectivity and firewall rules. * **"SSL certificate problem"** — For self-signed certificates, verify the CA bundle configuration. -