diff --git a/src/components/quickstarts/QuickstartFilter.js b/src/components/quickstarts/QuickstartFilter.js deleted file mode 100644 index ede36cac7..000000000 --- a/src/components/quickstarts/QuickstartFilter.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@emotion/react'; -import { Icon } from '@newrelic/gatsby-theme-newrelic'; - -import check from '../../images/check.svg'; - -const QuickstartFilter = ({ - name, - type, - icon, - count, - isChecked, - handleFilter, - className, -}) => ( -
-
- - -
- handleFilter(type, e)} - css={css` - appearance: none; - border: solid 1px var(--primary-text-color); - height: 1rem; - width: 1rem; - border-radius: 3px; - :hover { - cursor: pointer; - } - :checked { - background-color: var(--color-brand-500); - border: solid 1px var(--color-brand-500); - background-image: url(${check}); - background-position: 50%; - background-repeat: no-repeat; - } - :disabled { - border: solid 1px var(--border-color); - cursor: auto; - } - `} - /> -
-); - -QuickstartFilter.propTypes = { - name: PropTypes.string, - type: PropTypes.string, - icon: PropTypes.string, - count: PropTypes.number, - isChecked: PropTypes.bool, - handleFilter: PropTypes.func, - className: PropTypes.string, -}; - -export default QuickstartFilter; diff --git a/src/images/guided-install.svg b/src/images/guided-install.svg deleted file mode 100644 index 2e84949f2..000000000 --- a/src/images/guided-install.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - Guided Install - - - diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index ebfad7616..000ea0c6f 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -7,38 +7,22 @@ import { css } from '@emotion/react'; import SegmentedControl from '../components/SegmentedControl'; import Overlay from '../components/Overlay'; import PackTile from '../components/PackTile'; -import IOLogo from '../components/IOLogo'; import IOBanner from '../components/IOBanner'; -import QuickstartFilter from '../components/quickstarts/QuickstartFilter'; import { SearchInput, useTessen, Button, - Link, - Icon, } from '@newrelic/gatsby-theme-newrelic'; import { navigate } from '@reach/router'; import BUILD_YOUR_OWN from '../images/build-your-own.svg'; -import GUIDED_INSTALL from '../images/guided-install.svg'; import { useDebounce } from 'react-use'; import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; -import { - QUICKSTARTS_REPO, - RESERVED_QUICKSTART_IDS, - NR1_GUIDED_INSTALL_NERDLET, -} from '../data/constants'; +import { QUICKSTARTS_REPO, RESERVED_QUICKSTART_IDS } from '../data/constants'; import CATEGORIES from '../data/instant-observability-categories'; -import { getGuidedInstallStackedNr1Url } from '../utils/get-pack-nr1-url'; import SuperTiles from '../components/SuperTiles'; -const FILTERS = [ - { name: 'Dashboards', type: 'dashboards', icon: 'nr-dashboard' }, - { name: 'Alerts', type: 'alerts', icon: 'nr-alert' }, - { name: 'Data sources', type: 'documentation', icon: 'nr-document' }, -]; - const VIEWS = { GRID: 'Grid view', LIST: 'List view', @@ -76,15 +60,6 @@ const filterBySearch = (search) => ({ ); }; -/** - * Filters a quickstart based on a content type. - * @param {String} type The content type (e.g. 'alerts'). - * @returns {(Function) => Boolean} Callback function to be used by filter. - */ -const filterByContentType = (type) => (quickstart) => { - return type === [] || (quickstart[type] && quickstart[type].length > 0); -}; - /** * Filters a quickstart based on a category. * @param {String} category The category type (e.g. 'featured'). @@ -106,63 +81,31 @@ const QuickstartsPage = ({ data, location }) => { const tessen = useTessen(); const [search, setSearch] = useState(''); - const [filters, setFilters] = useState([]); const [category, setCategory] = useState(''); - const [isFilterOverlayOpen, setIsFilterOverlayOpen] = useState(false); const [isCategoriesOverlayOpen, setIsCategoriesOverlayOpen] = useState(false); useEffect(() => { const params = new URLSearchParams(location.search); const searchParam = params.get('search'); - const filterParam = params.get('filter'); const categoryParam = params.get('category'); setSearch(searchParam); - setFilters( - !filterParam || filterParam === '' ? [] : filterParam.split(',') - ); setCategory(categoryParam || ''); - if (searchParam || filterParam || categoryParam) { + if (searchParam || categoryParam) { tessen.track({ eventName: 'instantObservability', category: 'QuickstartCatalogSearch', - filter: filterParam, search: searchParam, quickstartCategory: categoryParam, }); } }, [location.search, tessen]); - const closeFilterOverlay = () => { - setIsFilterOverlayOpen(false); - }; - const closeCategoriesOverlay = () => { setIsCategoriesOverlayOpen(false); }; - const filterByContentTypes = (quickstart) => - filters.every((filter) => filterByContentType(filter)(quickstart)); - - const handleFilter = (value, e) => { - const currentFilters = filters.slice(); - const params = new URLSearchParams(location.search); - - if (e.target.checked) { - currentFilters.push(value); - setFilters(currentFilters); - params.set('filter', currentFilters); - } else { - const filteredFilters = currentFilters.filter( - (filter) => filter !== value - ); - setFilters(filteredFilters); - params.set('filter', filteredFilters); - } - navigate(`?${params.toString()}`); - }; - const handleSearch = (value) => { if (value !== null && value !== undefined) { const params = new URLSearchParams(location.search); @@ -181,14 +124,6 @@ const QuickstartsPage = ({ data, location }) => { } }; - const clearFilters = () => { - setFilters([]); - const params = new URLSearchParams(location.search); - params.set('filter', []); - - navigate(`?${params.toString()}`); - }; - useDebounce( () => { handleSearch(search); @@ -203,10 +138,7 @@ const QuickstartsPage = ({ data, location }) => { let sortedQuickstarts = sortFeaturedQuickstarts(alphaSort); // Hard-code for moving codestream object to front of sortedQuickstarts array - CM - if ( - (!category && !filters.length && !search) || - (category === 'featured' && !filters.length && !search) - ) { + if ((!category && !search) || (category === 'featured' && !search)) { // uuid is codestream id specifically - CM const codestreamIndex = sortedQuickstarts.findIndex( ({ id }) => id === '29bd9a4a-1c19-4219-9694-0942f6411ce7' @@ -222,30 +154,15 @@ const QuickstartsPage = ({ data, location }) => { } } - const filteredSearchAndCategoryQuickstarts = sortedQuickstarts + const filteredQuickstarts = sortedQuickstarts .filter(filterBySearch(search)) .filter(filterByCategory(category)); - const filteredQuickstarts = filters?.reduce( - (acc, filter) => acc.filter(filterByContentType(filter)), - filteredSearchAndCategoryQuickstarts - ); - const categoriesWithCount = CATEGORIES.map((cat) => ({ ...cat, count: quickstarts .filter(filterBySearch(search)) - .filter(filterByCategory(cat.value)) - .filter(filterByContentTypes).length, - })); - - const filtersWithCount = FILTERS.map((filter) => ({ - ...filter, - count: quickstarts - .filter(filterBySearch(search)) - .filter(filterByContentTypes) - .filter(filterByContentType(filter.type)) - .filter(filterByCategory(category)).length, + .filter(filterByCategory(cat.value)).length, })); return ( @@ -282,9 +199,6 @@ const QuickstartsPage = ({ data, location }) => { data-swiftype-index={false} css={css` grid-area: sidebar; - border-right: ${isMobile - ? 'none' - : '1px solid var(--divider-color)'}; height: calc(100vh - var(--global-header-height)); position: sticky; top: var(--global-header-height); @@ -308,102 +222,31 @@ const QuickstartsPage = ({ data, location }) => { } `} > - - - -

- A place to find quickstarts of resources like dashboards, - instrumentation, and alerts to help you monitor your environment. -

- @@ -472,86 +315,6 @@ const QuickstartsPage = ({ data, location }) => { > Categories - - - -
-

- Filter -

-
- {filtersWithCount.map(({ name, type, icon, count }) => ( - - ))} -
-
- -
-
- { )} - {isMobile && filters.length > 0 && ( - - )}
{ `} `} > - {filters?.length === 1 && filters[0] === 'documentation' ? ( - // if data source filter is selected, display guided install - - - ) : ( - // else, display build your own quickstart - - - )} + {filteredQuickstarts.map((pack) => ( ( htmlFor={htmlFor} css={css` display: block; - font-size: 12px; - font-weight: bold; - margin-bottom: 0.25rem; + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.5rem; `} > {children}