PAC-1893-integrate custom readme versions with dropdown versions

docs/docs-content/integrations/prometheus-operator.md

@@ -39,9 +39,7 @@ more about the remote monitoring feature.
 
 ## Versions Supported
 
-<br />
-
-<Tabs queryString="versions">
+<Tabs queryString="parent">
 <TabItem label="51.0.x" value="51.0.x">
 
 ## Prerequisites

plugins/packs-integrations.js

@@ -2,9 +2,9 @@
 const { packTypeNames, addOnTypes, layerTypes } = require("../src/constants/packs");
 const packDescription = require("../static/packs-data/packs_information.json");
 const { coerce, rcompare } = require("semver");
-const path = require('path');;
+const path = require('path');
 const mime = require('mime-types');
-import { setTimeout } from "timers/promises";
+const { setTimeout } = require("timers/promises");
 const BASE_URL = require('../static/scripts/constants.js').BASE_URL;
 const fetch = require('node-fetch');
 const { existsSync, promises, open, mkdirSync, writeFile, close, createWriteStream } = require("node:fs");
@@ -84,7 +84,6 @@
       const packDetailsMap = getPackUidMap(selectedRegistries);
       //union of all the versions of all the supported registries of a pack.
       const allSupportedVersions = getAggregatedVersions(selectedRegistries, repositories, packDetailsMap, packName);
-      const latestPackTagVersion = allSupportedVersions.find((version) => version.value === latestPackVersion);
       return {
         name: packName,
         title: packMDValue.spec.displayName,
@@ -104,7 +103,7 @@
         versions: allSupportedVersions,
         disabled: packMDValue.spec.registries[0].annotations?.disabled === "true",
         deprecated: packMDValue.spec.registries[0].annotations?.system_state === "deprecated",
-        latestVersion: latestPackTagVersion?.title,
+        latestVersion: latestPackVersion,
       };
     }
   });
@@ -154,7 +153,7 @@
   return sortedVersions;
 }
 
 function getAggregatedVersions(registries, repositories, packUidMap, packName) {
   const prefferedRegistryUid = repositories?.[0]?.uid;
   //if a pack has multiple registries, then the versions of the pack are aggregated based on the selected registries
   //if a same version in multiple registries, the preferred registry is the higher precendence.
@@ -242,16 +241,23 @@
   return generatedCustomData;
 }
 
-function generateRoutes(packDataMap) {
-  return Object.keys(packDataMap).map((packName) => {
+function generateRoutes(packsAllData) {
+  return packsAllData.map((pack) => {
+   const parentVersion = pack.versions.find((version) => {
+      return version.children.find((child) => child.title === pack.latestVersion);
+    });
+    let path = `/integrations/packs?pack=${pack.name}&version=${pack.latestVersion}`;
+    if (parentVersion && parentVersion.title) {
+      path = `${path}&parent=${parentVersion.title}`;
+    }
     return {
-      path: `/integrations/packs/${packName}`,
+      path: path,
       exact: false,
       component: "@site/src/components/PacksInformation",
       metadata: {
         sourceFilePath: "../docs/docs-content/integrations/packs.mdx",
       },
-      data: packName,
+      data: {name: pack.name, version: pack.latestVersion, parent: parentVersion?.title},
     };
   });
 }
@@ -325,8 +331,7 @@
             await setTimeout(1000);
           }
         }
       } catch (e) {
-        console.error("An error occurred while downloading the image: ", e);
       }
     }
   }
@@ -427,7 +432,7 @@
         repositories,
         logoFilesPathMap
       );
-      const routes = generateRoutes(packsPaletteData);
+      const routes = generateRoutes(unionPackData);
       console.info("completed the generation of the routes");
       routes.map((route) => addRoute(route));
       setGlobalData({ packs: unionPackData, repositories: repositories });

src/components/PacksInformation/PacksInformation.tsx

@@ -5,9 +5,9 @@
 export default function Packs(props: any) {
   return (
     <>
       {props?.route?.data ?
         (<Switch>
-          <Redirect to={`/integrations/packs?pack=${props.route.data}`} />
+          <Redirect to={`/integrations/packs?pack=${props.route.data.name}&version=${props.route.data.version}&parent=${props.route.data.parent}`} />
         </Switch>) : (
           <PacksReadme />
         )

src/components/PacksReadme/PacksReadme.antd.css

@@ -6,3 +6,7 @@
 p {
   font-size: 16px;
 }
+[data-theme = "dark"] .ant-select-tree-list-holder-inner {
+  background-color: #1f1f1f;
+  color: whitesmoke;
+}

src/components/PacksReadme/PacksReadme.module.scss

@@ -13,57 +13,31 @@
   .customReadme {
     h2[id="versions-supported"] {
       display: none;
-
-      + div {
+      + div > ul {
         display: none;
       }
     }
   }
 
   .infoSection {
-    border: 1px solid #3f74be;
-    background-color: #dbecff;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 400;
     padding: 10px;
     margin: 15px;
     width: 100%;
 
-    html[data-theme="dark"] & {
-      border: 1px solid #72a8f5;
-      background-color: #192c47;
-    }
-
     .infoHeading {
       display: flex;
       align-items: center;
       font-size: 12px;
       font-weight: 600;
-      color: #000000;
       text-transform: uppercase;
       padding-bottom: 10px;
 
-      html[data-theme="dark"] & {
-        color: #ffffff;
-      }
-
       .infoIcon {
-        color: #3f74be;
         padding-right: 10px;
         font-size: 16px;
-
-        html[data-theme="dark"] & {
-          color: #72a8f5;
-        }
-      }
-    }
-
-    .content {
-      color: #545f7e;
-
-      html[data-theme="dark"] & {
-        color: #b5bdd4;
       }
     }
   }
@@ -78,40 +52,22 @@
     .emptyContentTitle {
       padding-top: 15px;
       font-size: 20px;
-      color: #545f7e;
       font-weight: 500;
       line-height: 24px;
-
-      html[data-theme="dark"] & {
-        color: #b5bdd4;
-        background-color: #111726;
-      }
     }
 
     .emptyContentDescription {
       font-size: 16px;
       color: #545f7e;
       font-weight: 400;
       line-height: 24px;
-
-      html[data-theme="dark"] & {
-        color: #b5bdd4;
-        background-color: #111726;
-      }
-
       margin-top: 10px;
     }
   }
 
   .description {
     display: flex;
     width: 100%;
-    background-color: #edeef4;
-
-    html[data-theme="dark"] & {
-      background-color: #1c202b;
-    }
-
     padding: 10px;
 
     .packDescFirstCol {
@@ -149,24 +105,12 @@
       flex-direction: column;
       width: 30%;
       padding: 10px;
-      background-color: white;
-      border: 1px solid #dee1ea;
-
-      html[data-theme="dark"] & {
-        background-color: black;
-        border: 1px solid #1f263c;
-      }
 
       .versionSelect {
         height: max-content;
         display: flex;
         flex-direction: row;
         padding: 10px;
-        border: 1px solid #b6bed4;
-
-        html[data-theme="dark"] & {
-          border: 1px solid #1f263c;
-        }
       }
 
       .versionSelectBox {
@@ -188,3 +132,64 @@
     }
   }
 }
+[data-theme="dark"] .description {
+  background-color: #1c202b;
+}
+[data-theme="light"] .description {
+  background-color: #edeef4;
+}
+[data-theme="dark"] .infoSection {
+  border: 1px solid #72a8f5;
+  background-color: #192c47;
+}
+[data-theme="light"] .infoSection {
+  border: 1px solid #3f74be;
+  background-color: #dbecff;
+}
+[data-theme="dark"] .packDescSecondCol {
+  background-color: black;
+  border: 1px solid #1f263c;
+}
+[data-theme="light"] .packDescSecondCol {
+  background-color: white;
+  border: 1px solid #dee1ea;
+}
+[data-theme="light"] .emptyContentDescription {
+  color: #545f7e;
+}
+[data-theme="dark"] .emptyContentDescription {
+  color: #b5bdd4;
+  background-color: #111726;
+}
+[data-theme="dark"] .emptyContentTitle {
+  color: #b5bdd4;
+  background-color: #111726;
+}
+[data-theme="light"] .emptyContentTitle {
+  color: #545f7e;
+  background-color: black;
+}
+[data-theme="dark"] .infoIcon {
+  color: #72a8f5;
+}
+[data-theme="light"] .infoIcon {
+  color: #3f74be;
+}
+[data-theme="dark"] .infoHeading {
+  color: #ffffff;
+}
+[data-theme="light"] .infoHeading {
+  color: #000000;
+}
+[data-theme="light"] .content {
+  color: #545f7e;
+}
+[data-theme="dark"] .content {
+  color: #b5bdd4;
+}
+[data-theme="dark"] .versionSelect {
+  border: 1px solid #1f263c;
+}
+[data-theme="light"] .versionSelect {
+  border: 1px solid #b6bed4;
+}