+
+ );
+}
diff --git a/src/components/Technologies/Technologies.module.scss b/src/components/Technologies/Technologies.module.scss
index ae777eea6a..7985a058f1 100644
--- a/src/components/Technologies/Technologies.module.scss
+++ b/src/components/Technologies/Technologies.module.scss
@@ -1,8 +1,6 @@
.wrapper {
padding: 15px 0;
.technologyWrapper {
- display: flex;
- flex-wrap: wrap;
margin-top: 32px;
}
.imageWrapper {
@@ -13,11 +11,6 @@
width: 100%;
margin: 5px 0 5px;
}
-
- .imageWrapper > img {
- max-height: 100%;
- max-width: 100%;
- }
.card {
width: 120px;
height: 120px;
@@ -44,4 +37,14 @@
text-align: center;
word-break: break-word;
}
+ .ant-collapse {
+ width: 100%;
+ border: 0 none;
+ background: white;
+ }
+}
+.ant-collapse {
+ width: 100%;
+ border: 0 none;
+ background: white;
}
diff --git a/src/components/Technologies/Technologies.tsx b/src/components/Technologies/Technologies.tsx
index b0a8cdb156..b443b33b19 100644
--- a/src/components/Technologies/Technologies.tsx
+++ b/src/components/Technologies/Technologies.tsx
@@ -2,9 +2,12 @@ import React, { useState, useMemo } from "react";
import Fuse from "fuse.js";
import styles from "./Technologies.module.scss";
import Search from "./Search";
-import CategorySelector from "./CategorySelector";
import { PacksData, IntegrationsData } from "../Integrations/IntegrationTypes";
import TechnologyCard from "./TechnologyCard";
+import PacksFilters from "./PacksFilters";
+import { packTypeNames } from "./PackConstants";
+import { Collapse } from "antd";
+import "./technologies.antd.css";
const searchOptions = {
threshold: 0.5,
@@ -16,64 +19,65 @@ interface TechnologiesProps {
}
export default function Technologies({ data }: TechnologiesProps) {
- const [selectedCategory, setSelectedCategory] = useState("all");
+ const [selectedFilters, setSelectedFilters] = useState({ category: [""]});
const [searchValue, setSearchValue] = useState("");
const categories = useMemo(() => {
- const categoriesSet = data.reduce(
- (accumulator, technology) => {
- const categories = technology.fields.category || [];
- categories.forEach((category) => {
- accumulator.add(category);
- });
- return accumulator;
- },
- new Set(["all"])
- );
- return new Set([...categoriesSet].sort());
- }, [data]);
-
- const technologies = useMemo(() => {
- let technologies = [...data].sort((pack1, pack2) => {
- const category1 = pack1.fields.category[0];
- const category2 = pack2.fields.category[0];
-
- if (category1 < category2) {
- return -1;
- }
-
- if (category1 > category2) {
- return 1;
+ const categoriesMap = new Map();
+ data.forEach((technology) => {
+ const key = technology.fields.packType;
+ if(categoriesMap.has(key)){
+ categoriesMap.get(key).push(technology.fields);
+ } else {
+ categoriesMap.set(key, new Array(technology.fields));
}
-
- return 0;
});
-
- if (searchValue) {
- const fuse = new Fuse(technologies, searchOptions);
- technologies = fuse.search(searchValue).map(({ item }) => item);
- }
-
- if (selectedCategory !== "all") {
- technologies = technologies.filter(({ fields }) => fields.category.includes(selectedCategory)) || [];
- }
-
- return technologies;
- }, [data, searchValue, selectedCategory]);
+ const sortedCategoriesMap = new Map([...categoriesMap.entries()].sort());
+ const categoryKeys = Array.from(sortedCategoriesMap.keys());
+ categoryKeys.forEach((category) => {
+ const fields = sortedCategoriesMap.get(category);
+ fields.sort((field1, field2) => {
+ if(field1.name > field2.name){
+ return 1;
+ } else if(field1.name < field2.name){
+ return -1;
+ } else {
+ return 0;
+ }
+ });
+ })
+ return sortedCategoriesMap;
+ }, [data]);
const onSearch = (event: React.ChangeEvent
+
+
+
+
+
+
-
);
diff --git a/src/components/Technologies/TechnologyCard.tsx b/src/components/Technologies/TechnologyCard.tsx
index 67a7c9c382..3185aa3ddd 100644
--- a/src/components/Technologies/TechnologyCard.tsx
+++ b/src/components/Technologies/TechnologyCard.tsx
@@ -1,20 +1,30 @@
import React from "react";
import Link from "@docusaurus/Link";
import styles from "./Technologies.module.scss";
+import PackCardIcon from "./PackCardIcon";
+import osLayerIcon from "@site/static/assets/packs/os_layer.svg";
+import Image from "@theme/IdealImage";
+import IconMapper from "@site/src/components/IconMapper/IconMapper";
+
interface TechnologyCardProps {
title: string;
slug: string;
logoUrl: string;
+ type: string;
}
-export default function TechnologyCard({ title, slug, logoUrl }: TechnologyCardProps) {
+export default function TechnologyCard({ title, slug, logoUrl, type }: TechnologyCardProps) {
+ const handleImageError = (e: any) => {
+ console.log(`Failed to load e.target.src: ${e.target.src}`);
+ e.target.src.display = "none"
+ //
- {technologies.map(({ fields }) => {
- const { title, slug, logoUrl } = fields;
- return
+ {renderPacksCategories()}
+
-
diff --git a/src/components/Technologies/technologies.antd.css b/src/components/Technologies/technologies.antd.css
new file mode 100644
index 0000000000..e00e015ae8
--- /dev/null
+++ b/src/components/Technologies/technologies.antd.css
@@ -0,0 +1,12 @@
+.ant-collapse {
+ width: 100%;
+ border: 0 none;
+ background: white;
+}
+.ant-collapse-content-box {
+ display: flex;
+ flex-wrap: wrap;
+}
+.ant-select {
+ width: 200px
+}
diff --git a/src/theme/Root/Root.tsx b/src/theme/Root/Root.tsx
index e962534a39..55abde4a2f 100644
--- a/src/theme/Root/Root.tsx
+++ b/src/theme/Root/Root.tsx
@@ -1,5 +1,7 @@
import React from "react";
import MendableAIWidget from "../../components/MendableAIWidget";
+import "antd/dist/antd.css";
+
export default function Root({ children }: { children: React.ReactNode }) {
return (
diff --git a/static/assets/packs/app_layer.svg b/static/assets/packs/app_layer.svg
new file mode 100644
index 0000000000..0546d733ca
--- /dev/null
+++ b/static/assets/packs/app_layer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/assets/packs/authentication_layer.svg b/static/assets/packs/authentication_layer.svg
new file mode 100644
index 0000000000..5b54c141ef
--- /dev/null
+++ b/static/assets/packs/authentication_layer.svg
@@ -0,0 +1,4 @@
+
diff --git a/static/assets/packs/cni_layer.svg b/static/assets/packs/cni_layer.svg
new file mode 100644
index 0000000000..6190df0eca
--- /dev/null
+++ b/static/assets/packs/cni_layer.svg
@@ -0,0 +1,11 @@
+
diff --git a/static/assets/packs/csi_layer.svg b/static/assets/packs/csi_layer.svg
new file mode 100644
index 0000000000..4dff687862
--- /dev/null
+++ b/static/assets/packs/csi_layer.svg
@@ -0,0 +1,4 @@
+
diff --git a/static/assets/packs/ingress_layer.svg b/static/assets/packs/ingress_layer.svg
new file mode 100644
index 0000000000..28a02fefb6
--- /dev/null
+++ b/static/assets/packs/ingress_layer.svg
@@ -0,0 +1,5 @@
+
diff --git a/static/assets/packs/k8s_layer.svg b/static/assets/packs/k8s_layer.svg
new file mode 100644
index 0000000000..643cb21c2a
--- /dev/null
+++ b/static/assets/packs/k8s_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/load_balancer_layer.svg b/static/assets/packs/load_balancer_layer.svg
new file mode 100644
index 0000000000..b676b5f9d1
--- /dev/null
+++ b/static/assets/packs/load_balancer_layer.svg
@@ -0,0 +1,10 @@
+
diff --git a/static/assets/packs/logging_layer.svg b/static/assets/packs/logging_layer.svg
new file mode 100644
index 0000000000..491f49d8fa
--- /dev/null
+++ b/static/assets/packs/logging_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/misc_layer.svg b/static/assets/packs/misc_layer.svg
new file mode 100644
index 0000000000..806f5d04fb
--- /dev/null
+++ b/static/assets/packs/misc_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/monitoring_layer.svg b/static/assets/packs/monitoring_layer.svg
new file mode 100644
index 0000000000..fcf3bf26b3
--- /dev/null
+++ b/static/assets/packs/monitoring_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/os_layer.svg b/static/assets/packs/os_layer.svg
new file mode 100644
index 0000000000..4d8a3e8b9e
--- /dev/null
+++ b/static/assets/packs/os_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/registry_layer.svg b/static/assets/packs/registry_layer.svg
new file mode 100644
index 0000000000..1408268e00
--- /dev/null
+++ b/static/assets/packs/registry_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/security_layer.svg b/static/assets/packs/security_layer.svg
new file mode 100644
index 0000000000..216408aefd
--- /dev/null
+++ b/static/assets/packs/security_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/service_mesh_layer.svg b/static/assets/packs/service_mesh_layer.svg
new file mode 100644
index 0000000000..87f68780ee
--- /dev/null
+++ b/static/assets/packs/service_mesh_layer.svg
@@ -0,0 +1,3 @@
+
diff --git a/static/assets/packs/system_app_layer.svg b/static/assets/packs/system_app_layer.svg
new file mode 100644
index 0000000000..462a2fb7bb
--- /dev/null
+++ b/static/assets/packs/system_app_layer.svg
@@ -0,0 +1,3 @@
+
From af3e9aac18766b824d74fb3227b2817b49fabc12 Mon Sep 17 00:00:00 2001
From: nage1234 <88926279+nage1234@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:29:39 +0530
Subject: [PATCH 03/23] filters logic added for various pack filters
---
plugins/packs-integrations.js | 39 ++++---------
.../Integrations/IntegrationTypes.ts | 2 +
.../CategorySelector/AdditionalFilters.tsx | 57 +++++++++++++++----
.../CategorySelector.module.scss | 1 +
.../additionalFilters.antd.css | 4 ++
src/components/Technologies/PacksFilters.tsx | 8 ++-
src/components/Technologies/Technologies.tsx | 39 ++++++++++---
7 files changed, 100 insertions(+), 50 deletions(-)
diff --git a/plugins/packs-integrations.js b/plugins/packs-integrations.js
index c6b0b27a9c..043ab06678 100644
--- a/plugins/packs-integrations.js
+++ b/plugins/packs-integrations.js
@@ -2,25 +2,6 @@ import api from "../src/services/api";
import { setTimeout } from "timers/promises";
import { packTypeNames } from "../src/components/Technologies/PackConstants";
-/*const layerMap = {
- k8s: "Kubernetes",
- cni: "network",
- os: "operating system",
- servicemesh: "service mesh",
- monitoring: "monitoring",
- csi: "storage",
- logging: "logging",
- "load balancer": "load balancer",
- ingress: "ingress",
- authentication: "authentication",
- registry: "registry",
- "system app": "system app",
- spectro: "spectro",
- security: "security",
- serverless: "serverless",
- "app services": "app services",
-
-}*/
function generateIntegrationData(allContent) {
const packsData = allContent["docusaurus-plugin-content-docs"].default.loadedVersions[0].docs
@@ -57,7 +38,6 @@ function combineAPICustomPackData(packsMData, packsPaletteDetailsData, customPac
const layer = packMDValue.spec.layer === "addon" ? packMDValue.spec.addonType : packTypeNames[packMDValue.spec.layer];
return {
fields: {
- sidebar_label: packMDValue.spec.name,
name: packMDValue.spec.name,
title: packMDValue.spec.displayName,
description: 'dynamically generated',
@@ -71,6 +51,7 @@ function combineAPICustomPackData(packsMData, packsPaletteDetailsData, customPac
tags: [],
slug: '/integrations/${packMDValue.spec.name}',
id: 'integrations/${packMDValue.spec.name}',
+ verified: packMDValue.spec.registries[0].annotations?.source === "spectrocloud",
}
};
}
@@ -106,15 +87,17 @@ async function pluginPacksAndIntegrationsData() {
let counter = 0;
let promises = new Array();
for (let i = 0; i < packDataArr.length; i++) {
- counter+=1
const packData = packDataArr[i];
- packMDMap[packData.spec.name]=packData;
- promises.push(api.get(packUrl + packData.spec.registries[0].latestPackUid));
- if(counter%10 === 0 || i === packDataArr.length-1) {
- await setTimeout(2000);
- const response2 = await Promise.all(promises);
- apiPacksData = apiPacksData.concat(response2.map((pack) => pack.data));
- promises = [];
+ if(packData.spec.registries.length) {
+ counter+=1
+ packMDMap[packData.spec.name]=packData;
+ promises.push(api.get(packUrl + packData.spec.registries[0].latestPackUid));
+ if(counter%10 === 0 || i === packDataArr.length-1) {
+ await setTimeout(2000);
+ const response2 = await Promise.all(promises);
+ apiPacksData = apiPacksData.concat(response2.map((pack) => pack.data));
+ promises = [];
+ }
}
}
return {packsPaletteData: packMDMap, packsPaletteDetailsData: apiPacksData} ;
diff --git a/src/components/Integrations/IntegrationTypes.ts b/src/components/Integrations/IntegrationTypes.ts
index 2f0fbc7504..4638929188 100644
--- a/src/components/Integrations/IntegrationTypes.ts
+++ b/src/components/Integrations/IntegrationTypes.ts
@@ -9,6 +9,8 @@ export interface FrontMatterData {
slug: string;
id: string;
packType: string;
+ verified: boolean;
+ cloudTypes: string[];
}
export interface PacksData {
diff --git a/src/components/Technologies/CategorySelector/AdditionalFilters.tsx b/src/components/Technologies/CategorySelector/AdditionalFilters.tsx
index ccd116d55d..c502596455 100644
--- a/src/components/Technologies/CategorySelector/AdditionalFilters.tsx
+++ b/src/components/Technologies/CategorySelector/AdditionalFilters.tsx
@@ -1,13 +1,20 @@
import React, { useState } from "react";
-import { Dropdown, Tag, MenuProps, Space } from 'antd';
-import { fontAwesomeIcons } from "../../IconMapper/dynamicFontAwesomeImports";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tag, Space, Menu } from 'antd';
+import type { MenuProps } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import styles from "./CategorySelector.module.scss";
import "./additionalFilters.antd.css";
-export default function AdditionalFilters() {
- const items: MenuProps['items'] = [
+interface MenuItemProps {
+ label: string;
+ key: string;
+}
+interface AdditionalFiltersProps {
+ selectAdditionalFilters: (additionalFilters: string[]) => void;
+}
+
+export default function AdditionalFilters({ selectAdditionalFilters }: AdditionalFiltersProps) {
+ const [items, setItems] = useState
- 
-
+ {title}
-
-
+ {selectedItems.map((item) => (
+ removeItem(item.key)}>{item.label}
+ ))}
+
- )
+ );
}
diff --git a/src/components/Technologies/CategorySelector/CategorySelector.module.scss b/src/components/Technologies/CategorySelector/CategorySelector.module.scss
index efc4875655..0024c3d3a7 100644
--- a/src/components/Technologies/CategorySelector/CategorySelector.module.scss
+++ b/src/components/Technologies/CategorySelector/CategorySelector.module.scss
@@ -3,6 +3,7 @@
flex-wrap: wrap;
margin-top: 15px;
margin-bottom: 15px;
+ align-items: center;
.selectorCard {
padding: 4px 12px;
background: var(--ifm-breadcrumb-item-background-active);
diff --git a/src/components/Technologies/CategorySelector/additionalFilters.antd.css b/src/components/Technologies/CategorySelector/additionalFilters.antd.css
index c842d6b610..2f1e668ecd 100644
--- a/src/components/Technologies/CategorySelector/additionalFilters.antd.css
+++ b/src/components/Technologies/CategorySelector/additionalFilters.antd.css
@@ -7,3 +7,7 @@
.ant-btn {
background-color: #d9d9d9;
}
+.ant-menu-horizontal {
+ background-color: #d9d9d9;
+ line-height: 32px;
+}
diff --git a/src/components/Technologies/PacksFilters.tsx b/src/components/Technologies/PacksFilters.tsx
index 8216885a4b..03b4f87202 100644
--- a/src/components/Technologies/PacksFilters.tsx
+++ b/src/components/Technologies/PacksFilters.tsx
@@ -6,7 +6,7 @@ import CustomLabel from "./CategorySelector/CustomLabel";
import AdditionalFilters from "./CategorySelector/AdditionalFilters";
interface PackFiltersProps {
categories: string[];
- selectedFilters: { category: string[], provider: string};
+ selectedFilters: { category: string[], provider: string, additionalFilters: string[]};
setSelectedSearchFilters: (...args: any[]) => void;
}
export default function PacksFilters({ categories, selectedFilters, setSelectedSearchFilters }: PackFiltersProps) {
@@ -18,6 +18,10 @@ export default function PacksFilters({ categories, selectedFilters, setSelectedS
setSelectedSearchFilters({provider: provider});
console.log("provider", provider);
}
+ function selectAdditionalFilters(additionalFilters: string[]) {
+ setSelectedSearchFilters({additionalFilters: additionalFilters});
+ console.log("additionalFilters", additionalFilters);
+ }
return (
@@ -29,7 +33,7 @@ export default function PacksFilters({ categories, selectedFilters, setSelectedS
-
- Versions Supported
{child.title}
+
+ );
+}
diff --git a/src/components/PacksReadme/index.ts b/src/components/PacksReadme/index.ts
new file mode 100644
index 0000000000..c24c28cf29
--- /dev/null
+++ b/src/components/PacksReadme/index.ts
@@ -0,0 +1,3 @@
+import PacksReadme from "./PacksReadme";
+
+export default PacksReadme;
diff --git a/src/components/Technologies/CategorySelector/CategorySelector.test.tsx b/src/components/Technologies/CategorySelector/CategorySelector.test.tsx
index d728c06eca..53e680c813 100644
--- a/src/components/Technologies/CategorySelector/CategorySelector.test.tsx
+++ b/src/components/Technologies/CategorySelector/CategorySelector.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { render, fireEvent, screen } from "@testing-library/react";
-import CategorySelector from "./CategorySelector";
+import CategorySelector from "./TypeSelector";
describe("CategorySelector Component", () => {
const mockSelectCategory = jest.fn();
diff --git a/src/components/Technologies/CategorySelector/CustomLabel.tsx b/src/components/Technologies/CategorySelector/CustomLabel.tsx
index b31b44a20c..b7ec114277 100644
--- a/src/components/Technologies/CategorySelector/CustomLabel.tsx
+++ b/src/components/Technologies/CategorySelector/CustomLabel.tsx
@@ -4,13 +4,16 @@ import styles from "./CustomLabel.module.scss";
interface CustomLabelProps {
label: string;
+ className?: string;
}
-export default function CustomLabel({ label }: CustomLabelProps) {
+export default function CustomLabel({ label, className = "" }: CustomLabelProps) {
const { Text } = Typography;
return (
-
+
+
+
+ {packName}
+
+
+
+
+ {packData.customDescription}
+
+ {versionSupportedTextRender()}
+
+
+ {renderTabs()}
+
+
- {label}
-
+ <>
+
+ {label}
+
+
);
}
diff --git a/src/components/Technologies/PackCardIcon.tsx b/src/components/Technologies/PackCardIcon.tsx
index e21138d8af..f5be6be57d 100644
--- a/src/components/Technologies/PackCardIcon.tsx
+++ b/src/components/Technologies/PackCardIcon.tsx
@@ -4,9 +4,9 @@ import IconMapper from "@site/src/components/IconMapper/IconMapper";
import { Image } from "antd";
interface PackCardIconProps {
- title: string;
- logoUrl: string;
- type: string;
+ title?: string;
+ logoUrl?: string;
+ type?: string;
}
export default function PackCardIcon({ title, logoUrl, type }: PackCardIconProps) {
@@ -16,13 +16,13 @@ export default function PackCardIcon({ title, logoUrl, type }: PackCardIconProps
console.log(`Failed to load e.target.src: ${e.target.src}`);
e.target.style.display = "none";
setIsError(true);
- //
{isError ?( = {
+ 'app services': 'App Services',
+ authentication: 'Authentication',
+ ingress: 'Ingress',
k8s: 'Kubernetes',
+ 'load balancer': 'Load Balancer',
+ logging: 'Logging',
+ monitoring: 'Monitoring',
cni: 'Network',
os: 'Operating System',
+ registry: 'Registry',
+ security: 'Security',
servicemesh: 'Service Mesh',
- monitoring: 'Monitoring',
csi: 'Storage',
- logging: 'Logging',
- 'load balancer': 'Load Balancer',
- ingress: 'Ingress',
- authentication: 'Authentication',
- registry: 'Registry',
'system app': 'System App',
- spectro: 'Spectro',
- security: 'Security',
- serverless: 'Serverless',
- 'app services': 'App Services',
} as const;
export const cloudProviderTypes = {
@@ -52,3 +48,23 @@ export const cloudProviderTypes = {
'edge-native': 'Edge Native',
custom: 'Custom',
} as const;
+
+export const layerTypes = [
+ 'k8s',
+ 'cni',
+ 'os',
+ 'csi',
+] as const;
+
+export const addOnTypes = [
+ 'app services',
+ 'authentication',
+ 'ingress',
+ 'load balancer',
+ 'logging',
+ 'monitoring',
+ 'registry',
+ 'security',
+ 'servicemesh',
+ 'system app',
+] as const;
diff --git a/src/components/Technologies/Technologies.module.scss b/src/components/Technologies/Technologies.module.scss
index 7985a058f1..5dee3eb926 100644
--- a/src/components/Technologies/Technologies.module.scss
+++ b/src/components/Technologies/Technologies.module.scss
@@ -2,6 +2,10 @@
padding: 15px 0;
.technologyWrapper {
margin-top: 32px;
+ svg {
+ vertical-align: bottom;
+ margin-right: 5px;
+ }
}
.imageWrapper {
display: flex;
diff --git a/src/components/Technologies/Technologies.tsx b/src/components/Technologies/Technologies.tsx
index 330c985402..de0db0f785 100644
--- a/src/components/Technologies/Technologies.tsx
+++ b/src/components/Technologies/Technologies.tsx
@@ -8,6 +8,7 @@ import PacksFilters from "./PacksFilters";
import { packTypeNames } from "./PackConstants";
import { Collapse } from "antd";
import "./technologies.antd.css";
+import IconMapper from "../IconMapper/IconMapper";
const searchOptions = {
threshold: 0.5,
@@ -54,8 +55,8 @@ export default function Technologies({ data }: TechnologiesProps) {
};
const renderPacks = (fields: FrontMatterData[]) => {
return fields.map((field) => {
- const { title, slug, logoUrl, packType } = field;
- return {renderPacks(filteredTechCards)} )
+ const obj = ({renderPacks(filteredTechCards)} )
categoryItems.push(obj)
});
return categoryItems;
};
+ function addPanelHeader(category: string) {
+ return (
+ <>
+ ) => {
setSelectedFilters((prevState) => ({
...prevState,
diff --git a/src/components/Technologies/TechnologyCard.tsx b/src/components/Technologies/TechnologyCard.tsx
index 3185aa3ddd..f0b8316ef7 100644
--- a/src/components/Technologies/TechnologyCard.tsx
+++ b/src/components/Technologies/TechnologyCard.tsx
@@ -1,32 +1,31 @@
import React from "react";
-import Link from "@docusaurus/Link";
+import { useHistory } from "react-router-dom";
import styles from "./Technologies.module.scss";
import PackCardIcon from "./PackCardIcon";
-import osLayerIcon from "@site/static/assets/packs/os_layer.svg";
-import Image from "@theme/IdealImage";
-import IconMapper from "@site/src/components/IconMapper/IconMapper";
-
interface TechnologyCardProps {
+ name: string;
title: string;
- slug: string;
logoUrl: string;
type: string;
}
-export default function TechnologyCard({ title, slug, logoUrl, type }: TechnologyCardProps) {
+export default function TechnologyCard({ name, title, logoUrl, type }: TechnologyCardProps) {
+ const history = useHistory();
const handleImageError = (e: any) => {
console.log(`Failed to load e.target.src: ${e.target.src}`);
e.target.src.display = "none"
- //;
+ readme: Map;
versions: VersionTemplate[];
+ community: boolean;
}
export interface VersionTemplate {
diff --git a/src/components/PacksReadme/PacksReadme.tsx b/src/components/PacksReadme/PacksReadme.tsx
index 5712da8235..ca35ff9b70 100644
--- a/src/components/PacksReadme/PacksReadme.tsx
+++ b/src/components/PacksReadme/PacksReadme.tsx
@@ -1,11 +1,9 @@
import React, { useEffect, useState, useMemo, lazy, Suspense, ReactElement } from "react";
-import { useLocation } from 'react-router-dom';
import { IntegrationsData, PacksData } from "../Integrations/IntegrationTypes";
import styles from "./PacksReadme.module.scss";
import { Select, List, Tabs } from "antd";
import CustomLabel from "../Technologies/CategorySelector/CustomLabel";
import PackCardIcon from "../Technologies/PackCardIcon";
-import { Typography } from "antd";
import Markdown from 'markdown-to-jsx';
import "./PacksReadme.antd.css";
import { usePluginData } from "@docusaurus/useGlobalData";
@@ -15,21 +13,19 @@ import PacksIntegrationsPluginData from "../Integrations/IntegrationTypes";
interface TechnologiesProps {
data: PacksData | IntegrationsData;
}
+interface PackReadmeProps {
+ customDescription: string,
+ packReadme: any,
+ versions: Array,
+ title: string,
+ logoUrl: string,
+ type: string
+}
export default function PacksReadme() {
- const { Text } = Typography;
- //const location = useLocation();
- //const packName = location?.state?.id || "";
const [selectedVersion, setSelectedVersion] = useState("");
- //const [md, setMd] = useState(null);
- //let Custom = falco;
-
- //const [md, setMd] = useState | null>(null);
-
const [md, setMd] = useState | null>(null);
const packName = new URLSearchParams(window.location.search).get("pack")
-
-
useEffect(() => {
const importComponent = async () => {
try {
@@ -51,7 +47,7 @@ export default function PacksReadme() {
const _packData = packs.filter((pack) => pack.fields.name === packName)[0];
if(_packData) {
setSelectedVersion(_packData.fields.versions[0].title);
- return {
+ const packDataInfo: PackReadmeProps = {
customDescription: _packData.fields.description,
packReadme: _packData.fields.readme,
versions: _packData.fields.versions,
@@ -59,6 +55,7 @@ export default function PacksReadme() {
logoUrl: _packData.fields.logoUrl,
type: _packData.fields.packType,
};
+ return packDataInfo;
}
return {
customDescription: "",
@@ -85,16 +82,15 @@ export default function PacksReadme() {
function versionSupportedTextRender() {
if(selectedVersion) {
const listVersion = packData.versions?.find((ver) => ver.title === selectedVersion);
- if(listVersion) {
+ if (listVersion) {
return (
<>
}
dataSource={listVersion.children}
- renderItem={child =>
-
-
-
+ {title}
- handleClick()}>
+
+
);
}
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
index 98ead581ce..0bed73a2cb 100644
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -4,6 +4,10 @@ declare module "*.module.scss";
declare module "*.png";
+declare module '*.md' {
+ const value: string; // markdown is just a string
+ export default value;
+}
interface Mendable {
/* eslint-disable @typescript-eslint/no-explicit-any */
initialize: (config: any) => void;
diff --git a/src/services/api/index.js b/src/services/api/index.js
index e8448cf35a..3db7236ddb 100644
--- a/src/services/api/index.js
+++ b/src/services/api/index.js
@@ -14,6 +14,7 @@ axiosRetry(api, {
retries: 3,
retryDelay: (...arg) => axiosRetry.exponentialDelay(...arg, 1000),
retryCondition(error) {
+ console.log("error === ", error);
switch (error.response.status) {
case 500:
case 501:
diff --git a/src/theme/MDXComponents/MDXComponents.ts b/src/theme/MDXComponents/MDXComponents.ts
index 6323974fac..9094f1488a 100644
--- a/src/theme/MDXComponents/MDXComponents.ts
+++ b/src/theme/MDXComponents/MDXComponents.ts
@@ -6,6 +6,7 @@ import Tooltip from "@site/src/components/Tooltip/Tooltip";
import PointsOfInterest from "@site/src/components/PointOfInterest/index";
import YouTube from "@site/src/components/Youtube/Youtube";
import Packs from "@site/src/components/Integrations/Packs/Packs";
+import PacksInformation from "@site/src/components/PacksInformation/PacksInformation";
import AppTiers from "@site/src/components/Integrations/AppTiers/AppTiers";
import PacksTable from "@site/src/components/PacksTable/PacksTable";
import TOCInline from "@theme/TOCInline";
@@ -20,6 +21,7 @@ export default {
PointsOfInterest,
YouTube,
Packs,
+ PacksInformation,
AppTiers,
PacksTable,
TOCInline,
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 2f73749538..ef7f29bd74 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -4,6 +4,11 @@ declare module "*.module.scss";
declare module "*.png";
+declare module '*.md' {
+ const value: string; // markdown is just a string
+ export default value;
+}
+
interface Mendable {
initialize: () => void;
// Add other methods or properties as needed
diff --git a/static/packs-data/packs_information.json b/static/packs-data/packs_information.json
new file mode 100644
index 0000000000..8ffa0540b4
--- /dev/null
+++ b/static/packs-data/packs_information.json
@@ -0,0 +1,18 @@
+[
+ {
+ "name": "centos",
+ "description": "CentOS Linux distribution is a stable, predictable, manageable and reproducible platform derived from the sources of RedHat Enterprise Linux (RHEL). It provides a rich base platform for open source communities to build upon. Spectro Cloudprovides CentOS as a development framework for its users."
+ },
+ {
+ "name": "cni-flannel",
+ "description": "Flannel is a network layer, layer three, fabric for Kubernetes. It is designed to work with Linux routing infrastructure and creates a virtual network that gives each computing host a subnet. Flannel uses either the Kubernetes API or etcd directly to store the network configuration, the allocated subnets, and any auxiliary data such as the host’s public IP address."
+ },
+ {
+ "name": "cni-cilium",
+ "description": "The Cilium agent runs on all clusters and servers to provide networking, security and observability to the workload running on that node."
+ },
+ {
+ "name": "csi-rook",
+ "description": "Rook is a cloud-native storage orchestrator for Kubernetes, providing the platform, framework, and support for a diverse set of storage solutions to natively integrate with cloud-native environments. Rook turns storage"
+ }
+]
From 2a78b10604f646c999f4660242d6dc3d6e2acec3 Mon Sep 17 00:00:00 2001
From: nage1234 <88926279+nage1234@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:08:08 +0530
Subject: [PATCH 05/23] fixed the filter issue, handled api failure, eslint
error fixed
---
plugins/packs-integrations.js | 22 +++++-----
.../Integrations/IntegrationTypes.ts | 3 +-
src/components/PacksReadme/PacksReadme.tsx | 43 ++++++++-----------
.../CategorySelector/AdditionalFilters.tsx | 4 --
src/components/Technologies/Technologies.tsx | 22 ++++++----
src/services/api/index.js | 3 +-
6 files changed, 48 insertions(+), 49 deletions(-)
diff --git a/plugins/packs-integrations.js b/plugins/packs-integrations.js
index 3358b86f51..4d76fa7e95 100644
--- a/plugins/packs-integrations.js
+++ b/plugins/packs-integrations.js
@@ -19,8 +19,6 @@ function getReadMeMap(packValues) {
const map = new Map();
packValues.forEach((packValue) => {
map[packValue.packUid] = packValue.readme;
- console.log("packValue.packUid = ---------- ", packValue.packUid);
- console.log("packValue.readme =************* ", packValue.readme);
});
return map;
}
@@ -120,8 +118,8 @@ function getAggregatedVersions(tags, packValues, packName, layer) {
packUid: version.packUid,
};
});
- console.log("roots length= ", roots.length);
- console.log("_sortedVersions length= ", _sortedVersions.length);
+ //console.log("roots length= ", roots.length);
+ //console.log("_sortedVersions length= ", _sortedVersions.length);
_sortedVersions.forEach((version) => {
const parentTags = version?.parentTags || [];
const parent = parentTags.find(matchAmbiguousPatch);
@@ -141,7 +139,7 @@ function getAggregatedVersions(tags, packValues, packName, layer) {
});
}
});
- console.log("roots = ", JSON.stringify(roots));
+ //console.log("roots = ", JSON.stringify(roots));
return roots;
}
@@ -169,7 +167,7 @@ function generateRoutes(packDataMap, packsData) {
}
async function fetchPackListItems(queryParams, packDataArr, counter) {
- const payload = {filter: { type: ["spectro", "oci"], environment:["aws"]}};
+ const payload = {filter: { type: ["spectro", "oci"], environment:["aws"] }};
//const payload = {filter: { type: ["spectro", "oci"], layer: ["os", "k8s"], environment:["aws"]}}
//const payload = {"filter":{"displayName":{"contains":""},"ignoreCase":true,"type":["spectro"],"layer":["csi"],"environment":["openstack"],"registryUid":["5e2031962f090e2d3d8a3290"]}};
counter+=1;
@@ -177,7 +175,7 @@ async function fetchPackListItems(queryParams, packDataArr, counter) {
await setTimeout(2000);
}
const response = await api.post('/v1/packs/search'+queryParams, payload);
- console.log("response.data.listmeta.count = ", response.data.listmeta.count);
+ //console.log("response.data.listmeta.count = ", response.data.listmeta.count);
const tempPackArr = packDataArr.concat(response.data.items);
if(response.data.listmeta.continue) {
return fetchPackListItems("?limit=100&continue="+response.data.listmeta.continue, tempPackArr, counter);
@@ -194,7 +192,7 @@ async function pluginPacksAndIntegrationsData() {
packDataArr = packDataArr.filter((pack) => {
return layerTypes.includes(pack.spec.layer) || (pack.spec.layer === "addon" && addOnTypes.includes(pack.spec.addonType));
})
- console.log("packDataArr length = ", packDataArr.length)
+ //console.log("packDataArr length = ", packDataArr.length)
const packUrl = "v1/packs/";
const packMDMap = new Map();
let apiPacksData = [];
@@ -209,13 +207,15 @@ async function pluginPacksAndIntegrationsData() {
promises.push(api.get(`${packUrl}${packData.spec.name}/registries/${packData.spec.registries[0].uid}?cloudType=${cloudType}&layer=${packData.spec.layer}`));
if(counter%10 === 0 || i === packDataArr.length-1) {
await setTimeout(2000);
- const response2 = await Promise.all(promises);
- apiPacksData = apiPacksData.concat(response2.map((pack) => pack.data));
+ //const response2 = await Promise.all(promises);
+ const results = await Promise.all(promises.map(p => p.catch(e => e)));
+ const validResults = results.filter(result => !(result instanceof Error));
+ apiPacksData = apiPacksData.concat(validResults.map((pack) => pack.data));
promises = [];
}
}
}
- console.log("packDescription = ", packDescription);
+ //console.log("packDescription = ", packDescription);
return {packsPaletteData: packMDMap, packsPaletteDetailsData: apiPacksData, packsDescription: packDescription} ;
},
async contentLoaded({ allContent, content, actions }) {
diff --git a/src/components/Integrations/IntegrationTypes.ts b/src/components/Integrations/IntegrationTypes.ts
index 337cab3acc..699417ac88 100644
--- a/src/components/Integrations/IntegrationTypes.ts
+++ b/src/components/Integrations/IntegrationTypes.ts
@@ -12,8 +12,9 @@ export interface FrontMatterData {
packType: string;
verified: boolean;
cloudTypes: string[];
- readme: Map{title}
+ - Versions Supported
{child.title}
{child.title}
-
+
);
diff --git a/src/components/Technologies/Technologies.module.scss b/src/components/Technologies/Technologies.module.scss
index 5dee3eb926..89057f21e6 100644
--- a/src/components/Technologies/Technologies.module.scss
+++ b/src/components/Technologies/Technologies.module.scss
@@ -31,6 +31,7 @@
0px 0px 2px rgba(0, 0, 0, 0.2),
0px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 8px;
+ cursor: pointer;
}
.title {
diff --git a/src/components/Technologies/Technologies.tsx b/src/components/Technologies/Technologies.tsx
index 01e46b388d..ef4d761f0b 100644
--- a/src/components/Technologies/Technologies.tsx
+++ b/src/components/Technologies/Technologies.tsx
@@ -20,27 +20,27 @@ interface TechnologiesProps {
}
export default function Technologies({ data }: TechnologiesProps) {
- const [selectedFilters, setSelectedFilters] = useState<{category: string[], provider: string, additionalFilters: string[]}>({category: [], provider: "", additionalFilters: []})
+ const [selectedFilters, setSelectedFilters] = useState<{ category: string[], provider: string, additionalFilters: string[] }>({ category: [], provider: "", additionalFilters: [] })
const [searchValue, setSearchValue] = useState("");
const categories = useMemo(() => {
- const categoriesMap = new Map();
- data.forEach((technology) => {
- const key = technology.fields.packType;
- if (categoriesMap.has(key)){
- categoriesMap.get(key).push(technology.fields);
+ const categoriesMap = data.reduce((acc: MaphandleClick()}>
-
+ ) => void;
+ onSearch: (searchString: string) => void;
placeholder: string;
}
@@ -22,7 +22,7 @@ export default function IntegrationSearch({ onSearch, placeholder }: Integration
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
- onSearch(e);
+ onSearch(e.target.value);
}}
/>
{
setInputValue("");
+ onSearch("");
ref.current?.focus();
}}
/>
diff --git a/src/components/Technologies/Technologies.tsx b/src/components/Technologies/Technologies.tsx
index ef4d761f0b..78a06a3d22 100644
--- a/src/components/Technologies/Technologies.tsx
+++ b/src/components/Technologies/Technologies.tsx
@@ -50,52 +50,65 @@ export default function Technologies({ data }: TechnologiesProps) {
return sortedCategoriesMap;
}, [data]);
- const onSearch = (event: React.ChangeEvent) => {
- setSearchValue(event.target.value);
- };
- const renderPacks = (fields: FrontMatterData[]) => {
- return fields.map((field) => {
- const { title, logoUrl, packType, name } = field;
- return ();
categoryKeys.forEach((category) => {
- let filteredTechCards = categories.get(category);
+ let filteredCards = categories.get(category);
if (searchValue) {
- const fuse = new Fuse(filteredTechCards, searchOptions);
- filteredTechCards = fuse.search(searchValue).map(({ item }) => item);
+ const fuse = new Fuse(filteredCards, searchOptions);
+ filteredCards = fuse.search(searchValue).map(({ item }) => item);
}
if (selectedFilters.provider) {
- filteredTechCards = filteredTechCards.filter((techCard: FrontMatterData) => {
+ filteredCards = filteredCards.filter((techCard: FrontMatterData) => {
return techCard.cloudTypes.includes("all") || techCard.cloudTypes.includes(selectedFilters.provider);
});
}
if (selectedFilters.additionalFilters?.length && selectedFilters.additionalFilters.includes("Verified")) {
- filteredTechCards = filteredTechCards.filter((techCard: FrontMatterData) => {
+ filteredCards = filteredCards.filter((techCard: FrontMatterData) => {
return techCard.verified;
- });
+ }) as FrontMatterData[];
}
if (selectedFilters.additionalFilters?.length && selectedFilters.additionalFilters.includes("Community")) {
- filteredTechCards = filteredTechCards.filter((techCard: FrontMatterData) => {
+ filteredCards = filteredCards.filter((techCard: FrontMatterData) => {
return techCard.community;
});
}
- if (filteredTechCards.length) {
- const obj = ({renderPacks(filteredTechCards)} )
- categoryItems.push(obj);
+ selectedCategoryItems.set(category, filteredCards);
+ });
+ if (!selectedFilters.category.length && !selectedFilters.provider && !selectedFilters.additionalFilters.length && !searchValue) {
+ return categories;
+ } else {
+ return selectedCategoryItems;
+ }
+ }, [data, selectedFilters, searchValue]);
+
+ const onSearch = (value: string) => {
+ setSearchValue(value);
+ };
+ const renderPacks = (fields: FrontMatterData[]) => {
+ return fields.map((field) => {
+ const { title, logoUrl, packType, name } = field;
+ return {renderPacks(categoryItems)} )
+ renderedCategoryItems.push(obj);
}
});
- return categoryItems;
+ return renderedCategoryItems;
};
function addPanelHeader(category: string) {
return (
From 71ad8d639de1a61b285529b7b540f3729fc026e5 Mon Sep 17 00:00:00 2001
From: nage1234 <88926279+nage1234@users.noreply.github.com>
Date: Tue, 16 Apr 2024 21:59:46 +0530
Subject: [PATCH 12/23] formatted the doc
---
src/components/PacksInformation/PacksInformation.tsx | 6 +++---
src/components/PacksReadme/PacksReadme.tsx | 1 -
2 files changed, 3 insertions(+), 4 deletions(-)
diff --git a/src/components/PacksInformation/PacksInformation.tsx b/src/components/PacksInformation/PacksInformation.tsx
index a32f600e19..b2645a8402 100644
--- a/src/components/PacksInformation/PacksInformation.tsx
+++ b/src/components/PacksInformation/PacksInformation.tsx
@@ -3,15 +3,15 @@ import { useLocation } from 'react-router-dom';
import PacksReadme from "@site/src/components/PacksReadme";
import { Switch, useRouteMatch, Redirect } from 'react-router-dom'
-export default function Packs(props:any) {
+export default function Packs(props: any) {
let match = useRouteMatch();
const location = useLocation();
const packName = location?.state?.id;
return (
<>
- { props?.route?.data ?
+ {props?.route?.data ?
(
- ) : (
("");
const [md, setMd] = useState | null>(null);
+ const empty_icon_light = useBaseUrl('/img/empty_icon_table_light.svg');
+ const empty_icon_dark = useBaseUrl('/img/empty_icon_table_dark.svg');
+ const { isDarkTheme } = useColorMode();
+ const { defaultAlgorithm, darkAlgorithm } = theme;
const packName = new URLSearchParams(window.location.search).get("pack")
useEffect(() => {
const importComponent = async () => {
@@ -42,7 +44,6 @@ export default function PacksReadme() {
const packData = useMemo(() => {
const { packs } = usePluginData("plugin-packs-integrations") as PacksIntegrationsPluginData;
-
const _packData = packs.filter((pack) => pack.fields.name === packName)[0];
if (_packData) {
setSelectedVersion(`${_packData.fields.versions[0].title}`);
@@ -78,25 +79,6 @@ export default function PacksReadme() {
});
}
- function versionSupportedTextRender() {
- if (selectedVersion) {
- const listVersion = packData.versions?.find((ver) => ver.title === selectedVersion);
- if (listVersion) {
- return (
- <>
-
}
- dataSource={listVersion.children}
- renderItem={(child: any) => handleClick()}>
+
);
diff --git a/src/services/api/index.js b/src/services/api/index.js
index c61ca5f062..520e361571 100644
--- a/src/services/api/index.js
+++ b/src/services/api/index.js
@@ -1,5 +1,6 @@
import axios from 'axios';
import axiosRetry from 'axios-retry';
+import { pRateLimit } from 'p-ratelimit';
const api = axios.create({
baseURL: 'https://dev.spectrocloud.com',
@@ -10,6 +11,12 @@ const api = axios.create({
}
});
+const limit = pRateLimit({
+ interval: 2000, // 1000 ms == 1 second
+ rate: 10, // 30 API calls per interval
+ concurrency: 10, // no more than 10 running at once
+});
+
axiosRetry(api, {
retries: 3,
retryDelay: (...arg) => axiosRetry.exponentialDelay(...arg, 1000),
@@ -27,4 +34,10 @@ axiosRetry(api, {
});
-module.exports = api;
+function callRateLimitAPI(urls) {
+ return Promise.allSettled(
+ urls.map(url => limit(() => (api.get(url)).catch(e => e)))
+ );
+}
+
+module.exports = { api, callRateLimitAPI };
From 369e37ee4d45b1554f5e564f4ab564761e0eb36f Mon Sep 17 00:00:00 2001
From: nage1234 <88926279+nage1234@users.noreply.github.com>
Date: Tue, 16 Apr 2024 21:55:23 +0530
Subject: [PATCH 11/23] fixed broken search, moved the filtering logic to memo
---
src/components/Technologies/Search/Search.tsx | 5 +-
src/components/Technologies/Technologies.tsx | 61 +++++++++++--------
2 files changed, 40 insertions(+), 26 deletions(-)
diff --git a/src/components/Technologies/Search/Search.tsx b/src/components/Technologies/Search/Search.tsx
index c471eaa8c2..fb6fc3f0d6 100644
--- a/src/components/Technologies/Search/Search.tsx
+++ b/src/components/Technologies/Search/Search.tsx
@@ -4,7 +4,7 @@ import styles from "./Search.module.scss";
import { faSearch, faTimes } from "@fortawesome/free-solid-svg-icons";
interface IntegrationSearchProps {
- onSearch: (searchString: React.ChangeEvent{title}
- Versions Supported
{child.title}
+
+ );
}
return (
No content available
+ The content for this pack is not available.
+
-
-
-
{packName}
-
-
+
);
}
diff --git a/src/components/Technologies/CategorySelector/CustomLabel.module.scss b/src/components/Technologies/CategorySelector/CustomLabel.module.scss
index bbf834a581..511a015d6c 100644
--- a/src/components/Technologies/CategorySelector/CustomLabel.module.scss
+++ b/src/components/Technologies/CategorySelector/CustomLabel.module.scss
@@ -1,6 +1,10 @@
.customLabel {
font-size: 14px;
background-color: #dee1ea;
+ html[data-theme="dark"] & {
+ color: white;
+ background-color: #1c202b;
+ }
height: 32px;
align-self: center;
padding-top: 5px;
diff --git a/src/components/Technologies/CategorySelector/CustomLabel.tsx b/src/components/Technologies/CategorySelector/CustomLabel.tsx
index b7ec114277..17be4e5afe 100644
--- a/src/components/Technologies/CategorySelector/CustomLabel.tsx
+++ b/src/components/Technologies/CategorySelector/CustomLabel.tsx
@@ -12,7 +12,7 @@ export default function CustomLabel({ label, className = "" }: CustomLabelProps)
return (
<>
+
-
+
+ {packName}
+
+
+
+
{packData.customDescription}
-
- {packData.customDescription}
+
+ {renderTabs()}
-
- {versionSupportedTextRender()}
-
-
- {renderTabs()}
-
+
- {label}
+ {label}
);
diff --git a/src/components/Technologies/CategorySelector/TypeSelector.tsx b/src/components/Technologies/CategorySelector/TypeSelector.tsx
index 13ce8d38fa..787506e780 100644
--- a/src/components/Technologies/CategorySelector/TypeSelector.tsx
+++ b/src/components/Technologies/CategorySelector/TypeSelector.tsx
@@ -1,7 +1,8 @@
import React from "react";
import styles from "./CategorySelector.module.scss";
-import { Select } from "antd";
+import { Select, ConfigProvider, ThemeConfig, theme } from "antd";
import { packTypeNames } from "../PackConstants";
+import { useColorMode } from "@docusaurus/theme-common";
interface TypeSelectorProps {
categories: string[];
@@ -23,6 +24,7 @@ export default function TypeSelector({ categories, selected = [""], selectCatego
return (
+