diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000000..73ce363352 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,39 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - docv2-site # <--- CHECK THIS: Change to 'master' if your branch is named master + +permissions: + contents: write + +jobs: + deploy: + name: Deploy to GitHub Pages + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + # Setup Node.js + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + + # Install Dependencies + - name: Install dependencies + run: npm ci + + # Build the Docusaurus Site + - name: Build website + run: npm run build + + # Publish to the gh-pages branch + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./build + user_name: 'github-actions[bot]' + user_email: 'github-actions[bot]@users.noreply.github.com' diff --git a/docusaurus.config.js b/docusaurus.config.js index 80bb0e19c9..83e41cc474 100755 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -21,7 +21,7 @@ const config = { }, // Set the production url of your site here - url: 'https://docs.devtron.ai', + url: 'https://ndwl.shop', // Set the // pathname under which your site is served // For GitHub pages deployment, it is often '//' baseUrl: '/', @@ -30,7 +30,7 @@ const config = { // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. - organizationName: 'devtron-labs', // Usually your GitHub org/user name. + organizationName: 'hii-arpit', // Usually your GitHub org/user name. projectName: 'devtron-documentation', // Usually your repo name. onBrokenLinks: 'throw', diff --git a/package-lock.json b/package-lock.json index 3d326ed78a..e29881bb1c 100755 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,8 @@ "lucide-react": "^0.544.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-markdown": "^10.1.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.9.1", @@ -9549,6 +9550,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/html-url-attributes": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz", + "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/html-void-elements": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", @@ -15519,6 +15530,33 @@ "webpack": ">=4.41.1 || 5.x" } }, + "node_modules/react-markdown": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz", + "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "devlop": "^1.0.0", + "hast-util-to-jsx-runtime": "^2.0.0", + "html-url-attributes": "^3.0.0", + "mdast-util-to-hast": "^13.0.0", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.0.0", + "unified": "^11.0.0", + "unist-util-visit": "^5.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "@types/react": ">=18", + "react": ">=18" + } + }, "node_modules/react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", diff --git a/package.json b/package.json index 3de5a5b5d0..c60da98cf0 100755 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "lucide-react": "^0.544.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-markdown": "^10.1.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.9.1", diff --git a/sidebars.js b/sidebars.js index 47173bfa91..13251e951b 100755 --- a/sidebars.js +++ b/sidebars.js @@ -531,6 +531,11 @@ const sidebars = { items: [ 'reference/glossary', 'FAQs/devtron-troubleshoot', + { + type: 'link', + label: 'Troubleshooting Guide', + href: '/troubleshooting-guide', + }, { type: 'category', label: 'Upgrade Devtron', diff --git a/src/data/devtron-troubleshooting.json b/src/data/devtron-troubleshooting.json new file mode 100644 index 0000000000..1091ac0b48 --- /dev/null +++ b/src/data/devtron-troubleshooting.json @@ -0,0 +1,499 @@ +[ + { + "id": "unauthorized-global-configurations", + "category": "Installation", + "title": "How to resolve unauthorized errors while saving global configurations", + "summary": "Unauthorized errors usually happen when installation jobs fail.", + "problem": "This occurs most of the time because one or more Devtron installation jobs fail.", + "rootCause": "Incomplete installation jobs or failed migrator execution.", + "steps": [ + "Run: `kubectl get jobs -n devtroncd` and check for jobs with 0/1 completions.", + "Check pods of incomplete jobs: `kubectl get pods -n devtroncd`.", + "If pods are still running, wait; if not, delete the incomplete jobs: `kubectl delete jobs -n devtroncd`.", + "Download migrator: `wget https://raw.githubusercontent.com/devtron-labs/devtron/main/manifests/yamls/migrator.yaml`.", + "Edit migrator.yaml and remove creation of `postgresql-migrator` secret.", + "Apply YAML: `kubectl apply -f migrator.yaml -n devtroncd`.", + "Wait for recreated jobs to complete and retry saving configuration." + ], + "images": [] + }, + { + "id": "rollout-crd-update-required", + "category": "Application Metrics", + "title": "Not able to see deployment metrics or application-metrics not visible", + "summary": "Missing or outdated Rollout CRDs cause metrics visibility issues.", + "problem": "Deployment metrics or application metrics fail to appear.", + "rootCause": "Rollout CRDs are outdated on the cluster.", + "steps": [ + "Apply updated Rollout CRDs:", + "`kubectl apply -f https://raw.githubusercontent.com/devtron-labs/devtron/main/manifests/yamls/rollout.yaml -n devtroncd`" + ], + "images": [] + }, + { + "id": "sso-login-not-working", + "category": "SSO", + "title": "SSO Login not working even after entering correct credentials", + "summary": "SSO login may fail due to missing tokens or Dex issues.", + "problem": "Login fails with errors related to token absence or incorrect OIDC config.", + "rootCause": "Stale or invalid tokens, Dex failing to refresh configuration.", + "steps": [ + "Delete Devtron pod: `kubectl delete pod -n devtroncd -l app=devtron`.", + "Wait for pod restart and retry login." + ], + "images": [] + }, + { + "id": "logs-not-visible-build", + "category": "CI/CD", + "title": "Logs are not visible in UI while running the build", + "summary": "Build logs do not appear and abort fails.", + "problem": "No logs are visible and builds cannot be aborted.", + "rootCause": "kubewatch or NATS-based log forwarding components malfunction.", + "steps": [ + "Check CI pods: `kubectl get pods -n devtron-ci`.", + "If pods are created, delete kubewatch and devtron pods:", + "`kubectl delete pod -n devtroncd -l app=devtron`", + "`kubectl delete pod -n devtroncd -l app=kubewatch`", + "If still unresolved, delete:", + "`kubectl delete pod -n devtroncd devtron-nats-0`", + "`kubectl delete pod -n devtroncd devtron-stan-0`", + "`kubectl delete pod -n devtroncd -l app=devtron`", + "`kubectl delete pod -n devtroncd -l app=kubewatch`", + "Trigger a new build." + ], + "images": [] + }, + { + "id": "grafana-dashboards-not-visible", + "category": "Metrics", + "title": "Grafana dashboards not visible or panel errors appear", + "summary": "Grafana dashboards may not load if org/settings are not correct.", + "problem": "Dashboards show panel errors or 404.", + "rootCause": "Grafana org settings or Prometheus datasource mismatch.", + "steps": [ + "Check Prometheus configuration.", + "Open `/grafana?orgId=2`.", + "If 'Not Found', follow Grafana org recreation steps.", + "Run setup commands inside curl utility pod to reconfigure datasources.", + "Revisit Grafana and ensure datasource and dashboards exist.", + "Update environment from Devtron UI to sync datasources." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/argocd-cookie.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/chrome-cookie.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/safari-preferences.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/safari-cookie.png" + ] + }, + { + "id": "unable-to-login-dashboard", + "category": "Login", + "title": "Unable to login Devtron dashboard even after entering correct password", + "summary": "Browser cookies preserve old ArgoCD tokens, blocking new login.", + "problem": "Login fails despite correct password.", + "rootCause": "Stale argocd token stored in browser cookies.", + "steps": [ + "Open browser developer tools.", + "Delete ArgoCD cookie as per your browser:", + "Firefox → Storage → Cookies → Delete All Session Cookies.", + "Chrome → Application → Cookies → Delete token.", + "Safari → Enable Develop menu → Storage → Cookies → Delete token.", + "Retry login." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/argocd-cookie.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/chrome-cookie.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/safari-preferences.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/safari-cookie.png" + ] + }, + { + "id": "charts-not-found", + "category": "Charts", + "title": "No charts found in Discover section", + "summary": "Charts may not load due to stale repo index.", + "problem": "Discover section shows empty chart list.", + "rootCause": "Chart repositories not refreshed.", + "steps": [ + "Go to Application Management → Configurations → Chart Repository.", + "Click 'Refresh Chart'.", + "Wait 4–5 minutes for charts to sync." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/refresh-charts.png" + ] + }, + + { + "id": "cluster-update-fail", + "category": "Cluster & Infrastructure", + "title": "Not able to update cluster", + "summary": "Cluster update may fail due to stale Devtron pod state.", + "problem": "Updating cluster throws datasource reload errors.", + "rootCause": "Devtron pod caching issues.", + "steps": [ + "Edit cluster settings and click Save.", + "If error appears, delete Devtron pod:", + "`kubectl -ndevtroncd delete po -l app=devtron`", + "Refresh Devtron UI and try again." + ], + "images": [] + }, + + { + "id": "postgres-crashloop", + "category": "Database", + "title": "Postgresql is in crashloop with error - Failed to pull image", + "summary": "Image version mismatch forces PostgreSQL to fail.", + "problem": "Postgres goes into CrashLoopBackOff.", + "rootCause": "Incorrect or outdated PostgreSQL image.", + "steps": [ + "Patch StatefulSet with new images:", + "`kubectl patch ...`", + "Delete Postgres pod so it restarts with new image." + ], + "images": [] + }, + + { + "id": "commit-not-visible-cannot-trigger-build", + "category": "CI/CD", + "title": "Unable to fetch the latest commit and auto-build not working", + "summary": "Git sensor may be stuck.", + "problem": "Devtron is not showing new commits.", + "rootCause": "Git sensor pod malfunction.", + "steps": [ + "Save Git repository again.", + "Check logs: `kubectl logs -n devtroncd -l app=git-sensor`", + "Bounce git-sensor pod:", + "`kubectl delete pod -n devtroncd git-sensor-0`" + ], + "images": [] + }, + + { + "id": "restricted-service-sso", + "category": "SSO", + "title": "SSO login isn’t working when devtron-service is IP restricted", + "summary": "NAT gateway IPs may be blocked.", + "problem": "SSO fails in clusters with IP-restricted service.", + "rootCause": "NAT gateway IP ranges not whitelisted.", + "steps": [ + "Whitelist NAT gateway IPs of the cluster." + ], + "images": [] + }, + + { + "id": "cpu-metrics-missing", + "category": "Metrics", + "title": "CPU metrics not showing but memory metrics visible", + "summary": "Grafana query filter hides CPU metrics.", + "problem": "CPU graphs remain empty.", + "rootCause": "`image!=\"\"` filter blocks CPU metric results.", + "steps": [ + "Login to Grafana.", + "Edit CPU graphs.", + "Remove filter `image!=\"\"`.", + "Save dashboard." + ], + "images": [] + }, + + { + "id": "file-upload-size-restriction", + "category": "Configurations", + "title": "User unable to upload a file above certain size", + "summary": "Ingress body size limit restricts uploads.", + "problem": "Uploads fail for larger files.", + "rootCause": "Ingress `proxy-body-size` limit.", + "steps": [ + "Add annotation:", + "`nginx.ingress.kubernetes.io/proxy-body-size: 100m`" + ], + "images": [] + }, + + { + "id": "aws-lb-controller-unauthorized", + "category": "AWS", + "title": "AWS Load Balancer controller unauthorized", + "summary": "IAM policy missing on nodegroup role.", + "problem": "ALB provisioning fails with unauthorized error.", + "rootCause": "Nodegroup IAM role missing permissions.", + "steps": [ + "Attach required IAM policy:", + "https://raw.githubusercontent.com/kubernetes-sigs/aws-load-balancer-controller/v2.3.1/docs/install/iam_policy.json" + ], + "images": [] + }, + + { + "id": "app-metrics-not-visible-grafana", + "category": "Metrics", + "title": "App metrics not visible in Grafana or Devtron dashboard", + "summary": "Prometheus helm values need update.", + "problem": "Metrics fail to appear for workloads.", + "rootCause": "Kube-prometheus stack value mismatch.", + "steps": [ + "Set `serviceMonitorSelectorNilUsesHelmValues: false` in Prometheus chart values." + ], + "images": [] + }, + + { + "id": "metrics-server-deploy-failure", + "category": "Kubernetes", + "title": "Unable to deploy metrics-server via chart", + "summary": "TLS validation blocks metrics-server deployment.", + "problem": "Metrics-server installation fails.", + "rootCause": "Certificate validation requiring secure kubelet endpoint.", + "steps": [ + "Disable certificate validation:", + "Add `--kubelet-insecure-tls` to metrics-server chart values." + ], + "images": [] + }, + + { + "id": "postgres-delete-db-failed", + "category": "Database", + "title": "Unable to delete a database in Postgres", + "summary": "Active sessions prevent DB deletion.", + "problem": "Database shows 'being accessed by other users' error.", + "rootCause": "Open backend connections.", + "steps": [ + "Terminate sessions:", + "`SELECT pg_terminate_backend(pg_stat_activity.pid)...`", + "Delete DB using: `drop database `" + ], + "images": [] + }, + + { + "id": "reset-admin-password", + "category": "Login", + "title": "Unable to login with admin password or reset password", + "summary": "Admin password may be outdated or corrupted.", + "problem": "Login fails or new admin password is needed.", + "rootCause": "ADMIN_PASSWORD fields in secret outdated.", + "steps": [ + "Backup devtron-secret.", + "Edit secret and remove ADMIN_PASSWORD keys.", + "Restart Dex server.", + "Retrieve new admin password." + ], + "images": [] + }, + + { + "id": "windows-base64-error", + "category": "Windows", + "title": "Admin password retrieval fails on Windows", + "summary": "Windows lacks base64 CLI tools.", + "problem": "'base64 not recognized' error appears.", + "rootCause": "Windows missing base64 binary.", + "steps": [ + "Install base64 utility OR", + "Get encoded password:", + "`kubectl -n devtroncd get secret devtron-secret -o jsonpath='{.data.ACD_PASSWORD}'`", + "Use online base64 decoder." + ], + "images": [] + }, + + { + "id": "postgres-upgrade-failed", + "category": "Upgrade", + "title": "UPGRADE FAILED: cannot patch PostgreSQL StatefulSet", + "summary": "Upgrade fails due to forbidden StatefulSet spec updates.", + "problem": "StatefulSet cannot be patched due to immutable fields.", + "rootCause": "Annotations or volume size mismatch.", + "steps": [ + "Ensure all Devtron resources are annotated/labeled.", + "Add parameter:", + "`--set components.postgres.persistence.volumeSize=20Gi`", + "Retry upgrade." + ], + "images": [] + }, + + { + "id": "blob-storage-configuration", + "category": "Storage", + "title": "Configure Blob Storage", + "summary": "Configure MinIO, AWS S3, Azure, or GCP for logs and cache.", + "problem": "Blob storage not configured or misconfigured.", + "rootCause": "Missing or incorrect provider-specific values.", + "steps": [ + "Follow provider-specific configuration instructions (MinIO, AWS, Azure, GCP)." + ], + "images": [] + }, + + { + "id": "rollout-error-stableRS", + "category": "Rollouts", + "title": "Rollout error: attempt to index a non-table object(nil)", + "summary": "Occurs when using Kubernetes 1.22+ with outdated Rollout CRDs.", + "problem": "Rollout controller throws lua runtime errors.", + "rootCause": "Old CRDs incompatible with K8s >=1.22.", + "steps": [ + "Check rollout chart version.", + "Update to `devtron/rollout` latest chart.", + "Ensure Devtron helm repo is added." + ], + "images": [] + }, + + { + "id": "imagepullbackoff-private-registry", + "category": "Application Deployment", + "title": "Resolve ImagePullBackOff when pulling from private registry", + "summary": "Deployments fail if registry credentials are incorrect.", + "problem": "Pod status shows ImagePullBackOff.", + "rootCause": "Invalid or missing registry credentials.", + "steps": [ + "Use 'How to resolve?' from Devtron UI.", + "Go to Manage Access → select cluster.", + "Redeploy application." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/global-configurations/container-registries/how-to-resolve-latest1.png", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/global-configurations/container-registries/manage-access-latest.jpg", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/global-configurations/container-registries/auto-inject-to-clusters.jpg" + ] + }, + + { + "id": "terminal-timeout-gke", + "category": "GKE", + "title": "Devtron terminal disconnects every 30 seconds on GKE", + "summary": "GKE ingress backendConfig timeout limit causes terminal disconnections.", + "problem": "Terminal disconnects frequently.", + "rootCause": "`timeoutSec` in BackendConfig defaults to 30 seconds.", + "steps": [ + "Create BackendConfig YAML with higher timeout.", + "Apply BackendConfig.", + "Annotate Devtron service with backend-config name." + ], + "images": [] + }, + + { + "id": "argocd-cert-refresh", + "category": "ArgoCD", + "title": "Refreshing ArgoCD certificates when expired", + "summary": "Expired TLS certificates break ArgoCD connectivity.", + "problem": "ArgoCD certs expire, causing login or GitOps failures.", + "rootCause": "Old tls.crt/tls.key in argocd-secret.", + "steps": [ + "Edit `argocd-secret` and remove tls data.", + "Delete ArgoCD server pod.", + "Delete Devtron pod." + ], + "images": [] + }, + + { + "id": "exit-status-128", + "category": "Git", + "title": "Not able to see commits, throwing exit status 128", + "summary": "Git sensor pod cannot fetch repository.", + "problem": "Exit status 128 shown in git-sensor logs.", + "rootCause": "Token invalid or Git sensor pod locked.", + "steps": [ + "Save Git repository again.", + "Check git-sensor logs.", + "Bounce git-sensor pod." + ], + "images": [] + }, + + { + "id": "git-sensor-pvc-full", + "category": "Storage", + "title": "Git-sensor PVC disk full", + "summary": "PVC runs out of space, blocking Git operations.", + "problem": "Git-sensor shows disk full error.", + "rootCause": "PVC too small or volumeExpansion disabled.", + "steps": [ + "Check storageclass attributes.", + "Ensure allowVolumeExpansion = true.", + "Edit PVC to increase size.", + "Bounce git-sensor pod." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/git-sensor-pvc.png" + ] + }, + + { + "id": "invalid-json-argocd", + "category": "ArgoCD", + "title": "Invalid JSON Document error during ArgoCD sync", + "summary": "ArgoCD fails due to malformed last-applied-configuration annotation.", + "problem": "Rollout sync fails with 'Invalid JSON Document'.", + "rootCause": "Manually edited or corrupted JSON annotation.", + "steps": [ + "Copy annotation value.", + "Validate via JSON validator.", + "Fix malformed JSON.", + "Apply corrected configuration." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/invalid-json.jpg" + ] + }, + + { + "id": "bitnami-chart-handshake-failure", + "category": "Charts", + "title": "Bitnami charts not visible, tls handshake failure", + "summary": "TLS handshake failure prevents Bitnami index retrieval.", + "problem": "'tls: handshake failure' when syncing Bitnami charts.", + "rootCause": "Insecure flag erroneously enabled.", + "steps": [ + "Devtron version must be >=0.7.1.", + "Go to Chart Repository → Bitnami.", + "Disable 'Allow Insecure Connection'.", + "Sync charts again." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/bitnami-chart-issue.jpg", + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/devtron-troubleshooting/chart-sync.jpg" + ] + }, + + { + "id": "empty-values-yaml", + "category": "Deployment Charts", + "title": "Advanced (YAML) and Basic (GUI) appear blank in Base Deployment Template", + "summary": "Missing app-values.yaml causes UI sections to be empty.", + "problem": "Deployment template fields show empty values.", + "rootCause": "Chart missing required `app-values.yaml`.", + "steps": [ + "Add `app-values.yaml` to your deployment chart.", + "Upload chart again." + ], + "images": [ + "https://devtron-public-asset.s3.us-east-2.amazonaws.com/images/global-configurations/deployment-charts/empty-values.jpg" + ] + }, + + { + "id": "gitops-deployment-errors", + "category": "GitOps", + "title": "Unable to create GitOps deployment pipeline", + "summary": "Existing external Argo apps require reaving GitOps settings.", + "problem": "GitOps pipeline creation fails.", + "rootCause": "GitOps and Cluster configuration not re-saved after enabling module.", + "steps": [ + "Save GitOps configuration again.", + "Save Cluster configuration again.", + "Retry creating pipeline." + ], + "images": [] + } +] \ No newline at end of file diff --git a/src/pages/troubleshooting-guide.js b/src/pages/troubleshooting-guide.js new file mode 100644 index 0000000000..b4e340bc1f --- /dev/null +++ b/src/pages/troubleshooting-guide.js @@ -0,0 +1,732 @@ +import React, { useMemo, useState } from "react"; +// ⬇️ STANDARD DOCUSAURUS LAYOUT (Adds Navbar & Footer) +import Layout from '@theme/Layout'; +// ⬇️ STANDARD MARKDOWN RENDERER +import ReactMarkdown from 'react-markdown'; +// ⬇️ MAKE SURE THIS IMPORT PATH IS CORRECT +import troubleshootingData from "@site/src/data/devtron-troubleshooting.json"; + +/* ========================================================================== + ⚙️ GITHUB CONFIGURATION + ========================================================================== +*/ +const GITHUB_CONFIG = { + owner: "Hii-Arpit", + repo: "devtron-documentation", + branch: "docv2-site", + filePath: "src/data/devtron-troubleshooting.json" +}; + +/* ========================================================================== + CSS STYLES + ========================================================================== +*/ +const STYLES = ` + /* RESET */ + html { overflow-y: scroll !important; } + .ts-container * { box-sizing: border-box; } + + /* LAYOUT */ + .ts-grid { + display: grid; + grid-template-columns: 230px 1fr; + gap: 2.5rem; + align-items: start; + width: 100%; + } + + /* CARDS */ + .ts-card { + width: 100%; + background: var(--ifm-background-surface-color); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 8px; + margin-bottom: 1rem; + overflow: hidden; + display: flex; flex-direction: column; + transition: all 0.2s ease; + } + .ts-card:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 4px 12px rgba(0,0,0,0.05); + } + [data-theme='dark'] .ts-card:hover { + border-color: #7A8ADE; + box-shadow: 0 4px 16px rgba(122, 138, 222, 0.1); + } + + /* HEADER & CONTENT */ + .ts-header-row { + display: grid; + grid-template-columns: 1fr 40px 40px; + align-items: center; + height: 90px !important; padding: 0 1.5rem; cursor: pointer; background: transparent; + } + + .ts-content { + padding: 1.5rem; border-top: 1px solid var(--ifm-color-emphasis-200); + width: 100%; background-color: rgba(0,0,0,0.01); + } + + /* --- MARKDOWN STYLING --- */ + .ts-md p { margin-bottom: 0.5rem; line-height: 1.6; font-size: 1rem; } + .ts-md p:last-child { margin-bottom: 0; } + .ts-md * { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } + + .ts-md pre { + background: var(--ifm-color-emphasis-100); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 6px; padding: 10px; margin: 0.5rem 0; overflow-x: auto; + } + + .ts-md code { + background: var(--ifm-color-emphasis-100); + border: 1px solid var(--ifm-color-emphasis-200); + padding: 2px 6px; border-radius: 4px; + font-size: 0.9em; font-family: var(--ifm-font-family-monospace); + white-space: pre-wrap !important; word-break: break-all !important; + } + + .ts-md a { color: #0066cc; text-decoration: none; font-weight: 500; } + .ts-md a:hover { text-decoration: underline; color: #0066cc; } + [data-theme='dark'] .ts-md a { color: #53b7d2; } + [data-theme='dark'] .ts-md a:hover { color: #53b7d2; } + + .ts-md ul, .ts-md ol { padding-left: 1.2rem; margin: 0.5rem 0; } + .ts-md li { margin-bottom: 0.25rem; } + .ts-md li p { margin: 0; } + .ts-md img { max-width: 100%; border-radius: 6px; border: 1px solid var(--ifm-color-emphasis-200); margin-top: 0.5rem; } + + /* SECTION HEADERS */ + .ts-content h4 { + margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; + font-weight: 700; text-transform: uppercase; + color: var(--ifm-color-emphasis-700); + letter-spacing: 0.05em; + } + .ts-content h4:first-child { margin-top: 0; } + + /* SIDEBAR */ + .ts-sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 80px; } + + .ts-btn { + text-align: left; padding: 8px 12px; background: transparent; + border: 1px solid transparent; + border-left: 4px solid transparent; + border-radius: 4px; + cursor: pointer; width: 100%; + color: var(--ifm-font-color-base); font-size: 0.9rem; + transition: all 0.2s ease; + } + + .ts-btn:hover { background: rgba(0,0,0,0.05); } + [data-theme='dark'] .ts-btn:hover { background: rgba(255, 255, 255, 0.05); } + + /* ACTIVE STATE: LIGHT MODE */ + .ts-btn.active { + background-color: #f0f8ff; + color: #0066cc; + border-left-color: #1976d2; + font-weight: 600; + border-radius: 0 4px 4px 0; + } + + /* ACTIVE STATE: DARK MODE */ + [data-theme='dark'] .ts-btn.active { + background-color: rgba(255, 215, 0, 0.1); + color: #ffffff; + border-left-color: #FFD700; + font-weight: 600; + } + + /* ICONS */ + .ts-icon-btn { + display: flex; align-items: center; justify-content: center; + width: 32px; height: 32px; border-radius: 4px; + color: var(--ifm-color-emphasis-700); + transition: all 0.2s; + } + .ts-icon-btn:hover { + background-color: var(--ifm-color-emphasis-200); + color: var(--ifm-color-primary); + } + [data-theme='dark'] .ts-icon-btn { color: var(--ifm-color-emphasis-500); } + [data-theme='dark'] .ts-icon-btn:hover { color: #fff; } + .ts-rotate-icon { transition: transform 0.2s; } + + /* MODAL */ + .ts-modal-overlay { + position: fixed; top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.8); + display: flex; align-items: center; justify-content: center; + z-index: 9999; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; + } + .ts-modal { + background: var(--ifm-background-surface-color); + width: 100%; max-width: 650px; max-height: 90vh; overflow-y: auto; + border-radius: 12px; + box-shadow: 0 20px 50px rgba(0,0,0,0.5); + border: 1px solid var(--ifm-color-emphasis-200); + animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); + } + .ts-modal-header { + padding: 1.5rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); + display: flex; justify-content: space-between; align-items: center; + } + .ts-modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } + + /* FORM ELEMENTS */ + .ts-form-group { display: flex; flex-direction: column; gap: 0.5rem; } + .ts-form-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4px; } + .ts-label { font-size: 0.9rem; font-weight: 600; color: var(--ifm-color-emphasis-800); margin: 0; } + .ts-helper { font-size: 0.8rem; color: var(--ifm-color-emphasis-600); margin-top: 2px; } + .ts-link-btn { background: none; border: none; padding: 0; color: var(--ifm-color-primary); font-size: 0.85rem; cursor: pointer; text-decoration: underline; } + + /* --- TABS (Segmented Control Style) --- */ + .ts-tabs { + display: flex; gap: 2px; + background: var(--ifm-color-emphasis-200); + padding: 3px; border-radius: 6px; + align-items: center; + } + + .ts-tab-btn { + background: transparent; border: none; padding: 4px 12px; + font-size: 0.75rem; font-weight: 600; + color: var(--ifm-color-emphasis-600); + cursor: pointer; border-radius: 4px; transition: all 0.2s; + } + + .ts-tab-btn:hover { + color: var(--ifm-color-emphasis-800); + } + + /* Active Tab: LIGHT Mode (White Pill) */ + .ts-tab-btn.active { + background: #fff; + color: var(--ifm-color-primary); + box-shadow: 0 1px 2px rgba(0,0,0,0.15); + } + + /* Active Tab: DARK Mode (Lighter Grey Pill) */ + [data-theme='dark'] .ts-tab-btn.active { + background-color: var(--ifm-color-emphasis-300); /* Distinct from container */ + color: #fff; /* High visibility white */ + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + } + + /* --- INPUTS & ALIGNMENT --- */ + .ts-input, .ts-select { + padding: 0 12px; + padding-right: 32px; /* Space for arrow */ + border-radius: 6px; + border: 1px solid var(--ifm-color-emphasis-400); + background-color: var(--ifm-background-surface-color); + color: var(--ifm-font-color-base); + font-size: 0.95rem; + width: 100%; + height: 42px; /* Fixed match */ + box-sizing: border-box; + } + + /* Custom Arrow for Dropdown */ + .ts-select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + /* Grey Arrow for Light Mode */ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 16px; + } + + /* White Arrow for Dark Mode */ + [data-theme='dark'] .ts-select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + } + + .ts-textarea { + padding: 10px 12px; + border-radius: 6px; + border: 1px solid var(--ifm-color-emphasis-400); + background: var(--ifm-background-surface-color); + color: var(--ifm-font-color-base); + font-size: 0.95rem; + width: 100%; + min-height: 100px; + resize: vertical; + font-family: inherit; + box-sizing: border-box; + } + + .ts-input:focus, .ts-textarea:focus, .ts-select:focus { + outline: none; border-color: var(--ifm-color-primary); + } + + .ts-preview-box { + padding: 12px; border: 1px solid var(--ifm-color-emphasis-300); border-radius: 6px; + background: var(--ifm-color-emphasis-0); min-height: 100px; + font-size: 0.95rem; + } + + .ts-modal-footer { + padding: 1.5rem; border-top: 1px solid var(--ifm-color-emphasis-200); + display: flex; justify-content: flex-end; gap: 1rem; + align-items: center; + background: var(--ifm-color-emphasis-100); + } + + .ts-batch-indicator { + margin-right: auto; + font-size: 0.85rem; + font-weight: 600; + color: var(--ifm-color-success); + background: var(--ifm-color-emphasis-200); + padding: 4px 8px; + border-radius: 4px; + } + + /* BUTTONS */ + .ts-btn-action { + background-color: transparent !important; + padding: 10px 20px; border-radius: 6px; font-weight: 600; + cursor: pointer; transition: all 0.2s ease; + } + + .ts-btn-secondary { + border: 1px solid var(--ifm-color-emphasis-600) !important; + color: var(--ifm-font-color-base) !important; + } + .ts-btn-secondary:hover { + border-color: var(--ifm-color-emphasis-800) !important; + background-color: var(--ifm-color-emphasis-200) !important; + } + + /* Save & Add Another (Distinct Secondary) */ + .ts-btn-add { + border: 1px solid var(--ifm-color-primary) !important; + color: var(--ifm-color-primary) !important; + } + .ts-btn-add:hover { + background-color: var(--ifm-color-emphasis-200) !important; + } + [data-theme='dark'] .ts-btn-add { + color: #fff !important; border-color: #fff !important; + } + [data-theme='dark'] .ts-btn-add:hover { + background-color: rgba(255,255,255,0.1) !important; + } + + .ts-btn-primary { + border: 1px solid var(--ifm-color-primary) !important; + color: var(--ifm-color-primary) !important; + } + .ts-btn-primary:hover { + background-color: rgba(0,0,0,0.05) !important; + text-decoration: none !important; + } + + [data-theme='dark'] .ts-btn-primary { + border-color: #fff !important; + color: #fff !important; + } + [data-theme='dark'] .ts-btn-primary:hover { + border-color: #FFD700 !important; + color: #FFD700 !important; + background-color: rgba(255, 215, 0, 0.1) !important; + } + + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + + @media (max-width: 900px) { + .ts-grid { grid-template-columns: 1fr; gap: 1.5rem; } + .ts-sidebar { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 1rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); } + .ts-btn { width: auto; white-space: nowrap; border: 1px solid var(--ifm-color-emphasis-200); } + .ts-header-row { height: auto !important; min-height: 80px; padding: 1rem; } + .ts-modal { max-height: 100vh; border-radius: 0; height: 100%; } + .ts-modal-footer { flex-direction: column; gap: 0.5rem; } + .ts-batch-indicator { margin-right: 0; margin-bottom: 0.5rem; width: 100%; text-align: center; } + .ts-btn-action { width: 100%; } + } +`; + +// Simple SVG Icons +const EditIcon = () => ( + + + + +); + +const ArrowIcon = () => ( + + + +); + +// --- HELPER COMPONENT: MARKDOWN INPUT --- +const MarkdownInput = ({ label, name, value, onChange, placeholder, helperText, isSteps = false, isImages = false }) => { + const [mode, setMode] = useState('write'); + + const renderPreview = () => { + if (!value) return Nothing to preview; + + if (isImages) { + const urls = value.split(',').map(u => u.trim()).filter(u => u); + if (urls.length === 0) return No valid URLs found; + return ( +
+ {urls.map((url, i) => ( + {`![Screenshot ${i+1}](${url})`} + ))} +
+ ); + } + + if (isSteps) { + return ( +
    + {value.split('\n').filter(line => line.trim() !== '').map((step, i) => ( +
  1. {step}
    2. + ))} +
+ ); + } + + return {value}; + }; + + return ( +
+
+ +
+ + +
+
+ + {mode === 'write' ? ( +