[RMQ-2053] Add support timelines to support page as a new tab

Author: Bowen7

docusaurus.config.js

@@ -81,7 +81,7 @@ const config = {
               ],
             },
           ],
-          end_of_support: "2026-04-15",
+          end_of_support: "2028-04-30",
         },
         '4.0': {
           releases: [

src/components/CommercialSupportTimelines/index.js

@@ -0,0 +1,98 @@
+import Link from '@docusaurus/Link';
+import {getReleaseBranches} from '../RabbitMQServerReleaseInfo';
+import styles from "./index.module.css"
+
+const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
+
+function getTimelineRows(releaseBranches) {
+  const now = Date.now();
+  const rows = [];
+  let previousReleaseDate;
+
+  for (const branch in releaseBranches) {
+    const releaseBranch = releaseBranches[branch];
+    const isReleased = typeof releaseBranch.end_of_support !== 'undefined';
+    const releases = releaseBranch.releases || [];
+    if (!isReleased || releases.length === 0) {
+      continue;
+    }
+
+    const patchRelease = releases[0];
+    const releaseDate = new Date(patchRelease.release_date);
+    const endOfCommunitySupportDate = previousReleaseDate;
+    const endOfCommercialSupportDate = new Date(releaseBranch.end_of_support);
+
+    const isCommunitySupported = endOfCommunitySupportDate === undefined || endOfCommunitySupportDate > now;
+    const isCommercialSupported = endOfCommercialSupportDate > now;
+
+    const endOfCommunitySupport =
+        endOfCommunitySupportDate === undefined
+            ? 'Next Release'
+            : endOfCommunitySupportDate.toLocaleDateString('en-GB', dateOptions);
+    const endOfCommercialSupport = endOfCommercialSupportDate.toLocaleDateString("en-GB", dateOptions);
+
+    rows.push({
+      release: branch,
+      patch: patchRelease.version,
+      releaseDate: releaseDate.toLocaleDateString("en-GB", dateOptions),
+      endOfCommunitySupport,
+      endOfCommercialSupport,
+      isCommunitySupported,
+      isCommercialSupported
+    });
+
+    previousReleaseDate = new Date(releases[releases.length - 1].release_date);
+  }
+
+  return rows;
+}
+
+export function CommercialSupportTimelines() {
+  const releaseBranches = getReleaseBranches();
+
+  const rows = getTimelineRows(releaseBranches);
+  console.log(rows)
+
+  return (
+    <div className="release-information">
+      <table className={styles.timelines_table}>
+        <thead>
+          <tr>
+            <th>Release</th>
+            <th>Patch</th>
+            <th>Date of Release</th>
+            <th>End of Community Support</th>
+            <th>End of Commercial Support*</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.release}>
+              <td>{row.release}</td>
+              <td>{row.patch}</td>
+              <td>{row.releaseDate}</td>
+              <td className={row.isCommunitySupported ? styles.supported : styles.unsupported}>
+                {row.endOfCommunitySupport}
+              </td>
+              <td className={row.isCommercialSupported ? styles.supported : styles.unsupported}>
+                {row.endOfCommercialSupport}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p>
+        *End of Commercial Support dates are indicative. Official commercial support lifecycle information can be found on the <Link to="https://support.broadcom.com/web/ecx/productlifecycle">Broadcom support portal</Link>.
+      </p>
+      <div>
+        <strong>Legend:</strong>
+        <dl className="release-legend">
+          <dt className="supported-release latest-release"></dt>
+          <dd>Latest release, fully supported</dd>
+          <dt className="unsupported-release"></dt>
+          <dd>Old release, unsupported</dd>
+        </dl>
+      </div>
+    </div>
+  );
+}

src/components/CommercialSupportTimelines/index.module.css

@@ -0,0 +1,16 @@
+.timelines_table {
+  display: table;
+  width: 100%;
+}
+
+.timelines_table td, .timelines_table th {
+  padding: calc(var(--ifm-table-cell-padding) / 2) var(--ifm-table-cell-padding);
+}
+
+.supported {
+  background-color: var(--ri-color-latest);
+}
+
+.unsupported {
+  background-color: var(--ri-color-unsupported);
+}

src/pages/contact.js

@@ -4,7 +4,7 @@ import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Mermaid from '@theme/Mermaid';
+import { CommercialSupportTimelines } from '@site/src/components/CommercialSupportTimelines';
 
 import styles from './index.module.css';
 
@@ -60,7 +60,7 @@ export default function Support() {
             <Heading as="h4">Commercial RabbitMQ includes both 24/7 support and features not available in the open source version.</Heading>
 
             <Tabs>
-              <TabItem value="feature-1" label="Enterprise Support" default>
+              <TabItem value="feature-1" label="Commercial Support">
                 <Heading as="h2">Around the clock, around the globe support</Heading>
                 <div className={styles.flex_columns}>
                   <section>
@@ -87,7 +87,10 @@ export default function Support() {
                   </section>
                 </div>
               </TabItem>
-              <TabItem value="feature-2" label="Enterprise Features">
+              <TabItem value="feature-2" label="Support Timelines" default>
+                <CommercialSupportTimelines />
+              </TabItem>
+              <TabItem value="feature-3" label="Enterprise Features">
                 <Heading as="h2">Exclusive capabilities supporting your mission-critical apps</Heading>
                 <div className={styles.flex_columns}>
                   <section>