diff --git a/src/data/quickstarts.json b/src/data/quickstarts.json index 868b7fa11..12b9baf11 100644 --- a/src/data/quickstarts.json +++ b/src/data/quickstarts.json @@ -65,6 +65,7 @@ "url": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/apache/dashboards/apache.json" } ], + "keywords": ["featured"], "description": "Official New Relic pack for Apache\nUse this pack together with the New Relic Apache On Host Integration to get insight into the performance of your Apache instances.\n\n", "documentation": [ { @@ -179,6 +180,7 @@ "url": "https://docs.newrelic.com/docs/distributed-tracing/trace-api/introduction-trace-api/" } ], + "keywords": ["featured"], "iconUrl": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/apis/trace/icon.png", "id": "VHJhY2UgYW5kIFNwYW4gQVBJ", "level": "NEWRELIC", @@ -3118,6 +3120,7 @@ "url": "https://docs.newrelic.com/docs/integrations/open-source-telemetry-integrations/open-source-telemetry-integration-list/new-relics-dropwizard-integration" } ], + "keywords": ["featured"], "iconUrl": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/dropwizard-metrics-reporter/icon.svg", "id": "ZHJvcHdpemFyZC1tZXRyaWNzLXJlcG9ydGVy", "level": "COMMUNITY", @@ -3391,6 +3394,7 @@ "url": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/gatsby-build/dashboards/gatsby-build.json" } ], + "keywords": ["featured"], "description": "The Gatsby observability pack allows you to get visibility into the build time of your Gatsby Sites, \nusing [Open Telemetry](https://docs.newrelic.com/docs/integrations/open-source-telemetry-integrations/opentelemetry/introduction-opentelemetry-new-relic/)\nto collect each step as a span in a Distributed Trace. This Dashboard lets you monitor your build in real-time to highlight which steps are affecting performance,\nso you can improve them faster.\n\n\n", "documentation": [], "iconUrl": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/gatsby-build/icon.png", diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index 798bf9785..a239db42b 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -18,6 +18,7 @@ import { import { useDebounce } from 'react-use'; import { navigate } from '@reach/router'; import BUILD_YOUR_OWN from '../images/build-your-own.svg'; +import { sortFeaturedPacks } from '../utils/sortFeaturedPacks'; const { QUICKSTARTS_REPO } = require('../data/constants'); @@ -26,6 +27,7 @@ const packContentsFilterGroups = [ 'Dashboards', 'Alerts', 'Data sources', + 'Featured', ]; const VIEWS = { @@ -33,6 +35,8 @@ const VIEWS = { LIST: 'List view', }; +const packContentsDataSources = ['documentation']; + const QuickstartsPage = ({ data, location }) => { const tessen = useTessen(); const detectMobile = useMobileDetect(); @@ -41,7 +45,7 @@ const QuickstartsPage = ({ data, location }) => { const { allQuickstarts: { nodes: quickstarts }, } = data; - + const [filteredPacks, setFilteredPacks] = useState(quickstarts); const { queryParams } = useQueryParams(); @@ -119,12 +123,25 @@ const QuickstartsPage = ({ data, location }) => { queryParams.has('packContains') && queryParams.get('packContains') !== 'All' ) { - tempFilteredPacks = tempFilteredPacks.filter( - (pack) => - pack[queryParams.get('packContains').toLowerCase()]?.length > 0 - ); + if (queryParams.get('packContains') === 'Featured') { + tempFilteredPacks = tempFilteredPacks.filter((pack) => + pack.keywords?.includes('featured') + ); + } else if (queryParams.get('packContains') === 'Data sources') { + tempFilteredPacks = tempFilteredPacks.filter((pack) => { + return Object.keys(pack).some( + (key) => + packContentsDataSources.includes(key) && pack[key].length > 0 + ); + }); + } else { + tempFilteredPacks = tempFilteredPacks.filter( + (pack) => + pack[queryParams.get('packContains').toLowerCase()]?.length > 0 + ); + } } - + tempFilteredPacks = sortFeaturedPacks(tempFilteredPacks); setFilteredPacks(tempFilteredPacks); }, [queryParams, quickstarts]); @@ -138,13 +155,29 @@ const QuickstartsPage = ({ data, location }) => { const filterCount = filteredPacks.length; return { filterName, filterCount }; } + if (filterName === 'Featured') { + const filterCount = filteredPacks.filter((pack) => + pack.keywords?.includes(filterName.toLowerCase()) + ).length; + return { filterName, filterCount }; + } + if (filterName === 'Data sources') { + const filterCount = filteredPacks.filter((pack) => + Object.keys(pack).some( + (key) => + packContentsDataSources.includes(key) && pack[key].length > 0 + ) + ).length; + return { filterName, filterCount }; + } const filterCount = filteredPacks.filter( - (pack) => pack[filterName.toLowerCase()] + (pack) => + pack[filterName.toLowerCase()] && + pack[filterName.toLowerCase()].length > 0 ).length; return { filterName, filterCount }; } ); - return ( <> { `} /> )} + {filterName === 'Featured' && ( + + )} {!filterName || (filterName === 'All' && ( { /> {filteredPacks.map((pack) => ( - + ))} @@ -443,6 +491,7 @@ export const pageQuery = graphql` logoUrl packUrl level + keywords dashboards { description name diff --git a/src/utils/sortFeaturedPacks.js b/src/utils/sortFeaturedPacks.js new file mode 100644 index 000000000..919e755a4 --- /dev/null +++ b/src/utils/sortFeaturedPacks.js @@ -0,0 +1,9 @@ +export const sortFeaturedPacks = (packs) => { + const featuredPacks = packs.filter((pack) => + pack.keywords?.includes('featured') + ); + const nonFeaturedPacks = packs.filter( + (pack) => !pack.keywords?.includes('featured') + ); + return [...featuredPacks, ...nonFeaturedPacks]; +};