diff --git a/Makefile b/Makefile index 7953ff0..6bedddd 100644 --- a/Makefile +++ b/Makefile @@ -13,11 +13,17 @@ generate-diagrams: $(OUT) $(SRCDIR)/%.$(OUTPUT_FORMAT): $(SRCDIR)/%.mdd npm run generate-diagram -- --input $< --output $@ -run: ## run Pokeshop API on docker compose +run/pokeshop: ## run Pokeshop API on docker compose docker compose -f docker-compose.yml -f ./docker-compose.stream.yml up -down: ## stop Pokeshop API running on docker compose +down/pokeshop: ## stop Pokeshop API running on docker compose docker compose -f docker-compose.yml -f ./docker-compose.stream.yml down run/tracetests: ## run Trace-based tests on Pokeshop API with Tracetest - docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml run tracebased-tests \ No newline at end of file + docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml run tracebased-tests + +run: ## run Pokeshop API on Docker Compose and run Trace-based tests with Tracetest + docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml up + +down: ## stop Pokeshop API on Docker Compose and run Trace-based tests with Tracetest + docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml down diff --git a/api/src/api.ts b/api/src/api.ts index b62c3b2..4529130 100644 --- a/api/src/api.ts +++ b/api/src/api.ts @@ -31,11 +31,11 @@ async function startApp() { healthcheckHandler, // should be first than getByIdHandler since both paths could collide createHandler, getHandler, - getByIdHandler, featuredHandler, + searchHandler, + getByIdHandler, importHandler, removeHandler, - searchHandler, updateHandler, ]; diff --git a/api/src/handlers/get.handler.ts b/api/src/handlers/get.handler.ts index 3396f65..19dad58 100644 --- a/api/src/handlers/get.handler.ts +++ b/api/src/handlers/get.handler.ts @@ -2,7 +2,7 @@ import { jsonResponse } from '@pokemon/middlewares/response'; import { getPokemonRepository } from '@pokemon/repositories'; const get = async (ctx, next) => { - const { skip = '0', take = '20' } = ctx.request.query || {}; + const { skip = '0', take = '100' } = ctx.request.query || {}; const query = { skip: +skip, take: +take }; const repository = getPokemonRepository(); diff --git a/docker-compose.yml b/docker-compose.yml index 19953f7..5d7733a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -28,6 +28,7 @@ services: queue: image: rabbitmq:3.9 + restart: unless-stopped ports: - 5672:5672 - 15672:15672 diff --git a/docs/installing.md b/docs/installing.md index d6e6c71..d5f586e 100644 --- a/docs/installing.md +++ b/docs/installing.md @@ -2,38 +2,52 @@ ## Run it locally -To try it locally, you can use `docker-compose` to run the API, its Worker, and all its dependencies. +To try it locally, you can use Docker Compose to run the API, its Worker, and all its dependencies. ### Requirements -- [docker](https://www.docker.com/get-started/) -- [docker-compose](https://docs.docker.com/compose/install/) + +1. [Docker](https://www.docker.com/get-started/) +2. [Docker Compose](https://docs.docker.com/compose/install/) ### Steps 1. Clone the project -2. Go to the `api` folder inside the project folder -3. Execute `docker-compose up` +2. Go to the `pokeshop` project folder +3. Execute `make run` ### Script ```$ git clone git@github.com:kubeshop/pokeshop.git -cd pokeshop/api -docker-compose up +cd pokeshop +make run ``` +This will start the Pokeshop app on `http://localhost:8081` and Tracetest on `http://localhost:11633`. + +The `make run` command will also trigger four **Tests** when started. + +![tracetest initial tests](https://res.cloudinary.com/djwdcmwdz/image/upload/v1693846733/docs/localhost_11633__10_px4kqa.png) + +As well as one **Test Suite**. + +![tracetest initial test suite](https://res.cloudinary.com/djwdcmwdz/image/upload/v1693846736/docs/localhost_11633__11_coms2i.png) + + ## Run on a Kubernetes cluster If you want to run this project on a real cluster, we provide a helm chart to install it. This installation doesn't create a jaeger instance for you, so you have to install it manually and set the `JAEGER_HOST` and `JAEGER_PORT` on the `env` section of the file `helm-chart/values.yml`. ### Requirements + 1. [helm](https://helm.sh/) ### Steps + 1. Clone the project 2. Go to the helm-chart folder inside the project folder 3. Execute `helm dependency update` 4. Update `JAEGER_HOST` and `JAEGER_PORT` on the file `helm-chart/values.yml` to reflect your cluster's jaeger instance 5. Execute `helm install -n demo -f values.yaml --create-namespace demo .` -> :warning: **This will create a namespace called "demo" on your cluster**. If you wish to change it, replace `-n demo` on step 5 with `-n `. \ No newline at end of file +> :warning: **This will create a namespace called "demo" on your cluster**. If you wish to change it, replace `-n demo` on step 5 with `-n `. diff --git a/web/package-lock.json b/web/package-lock.json index 9dfad77..fd52105 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -24,6 +24,7 @@ "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "antd": "^4.21.6", + "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.1", @@ -33,6 +34,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/lodash": "^4.14.197", "@types/styled-components": "^5.1.25", "openapi-typescript": "^5.4.1" } @@ -4397,6 +4399,12 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.197", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.197.tgz", + "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==", + "dev": true + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -21328,6 +21336,12 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/lodash": { + "version": "4.14.197", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.197.tgz", + "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==", + "dev": true + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", diff --git a/web/package.json b/web/package.json index c0247d2..301d475 100644 --- a/web/package.json +++ b/web/package.json @@ -19,6 +19,7 @@ "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "antd": "^4.21.6", + "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.1", @@ -56,6 +57,7 @@ "styled-components": "5" }, "devDependencies": { + "@types/lodash": "^4.14.197", "@types/styled-components": "^5.1.25", "openapi-typescript": "^5.4.1" }, diff --git a/web/src/components/Header/HeaderMenu.tsx b/web/src/components/Header/HeaderMenu.tsx index ecd365f..a453a35 100644 --- a/web/src/components/Header/HeaderMenu.tsx +++ b/web/src/components/Header/HeaderMenu.tsx @@ -1,4 +1,4 @@ -import { DOCUMENTATION_URL, GITHUB_URL } from '../../constants/common'; +import { DOCUMENTATION_URL, GITHUB_URL, DISCORD_URL } from '../../constants/common'; import * as S from './Header.styled'; interface IProps { @@ -26,6 +26,14 @@ export const HeaderMenu = ({ pathname }: IProps) => { ), }, + { + key: 'discord', + label: ( + + Discord + + ), + }, ]} /> ); diff --git a/web/src/components/PokemonList/PokemonList.tsx b/web/src/components/PokemonList/PokemonList.tsx index 9bc7cae..d4a50c9 100644 --- a/web/src/components/PokemonList/PokemonList.tsx +++ b/web/src/components/PokemonList/PokemonList.tsx @@ -1,3 +1,4 @@ +import _ from 'lodash'; import { TPokemon } from '../../types/pokemon'; import PokemonCard from '../PokemonCard'; import * as S from './PokemonList.styled'; @@ -16,7 +17,7 @@ const PokemonList = ({ pokemonList, totalCount, title, isFeaturedList = false }: {title} - {totalCount} - {pokemonList.map(pokemon => ( + {_.map(pokemonList, pokemon => ( ))} diff --git a/web/src/constants/common.ts b/web/src/constants/common.ts index 8be4b8f..40b983e 100644 --- a/web/src/constants/common.ts +++ b/web/src/constants/common.ts @@ -1,4 +1,4 @@ -export const DOCUMENTATION_URL = 'https://kubeshop.github.io/tracetest/'; +export const DOCUMENTATION_URL = 'https://docs.tracetest.io'; export const GITHUB_URL = 'https://github.com/kubeshop/tracetest'; export const GITHUB_ISSUES_URL = 'https://github.com/kubeshop/tracetest/issues/new/choose'; export const DISCORD_URL = 'https://discord.gg/6zupCZFQbe'; diff --git a/web/src/hooks/usePokemonCrud.ts b/web/src/hooks/usePokemonCrud.ts index ef02325..24e5cbb 100644 --- a/web/src/hooks/usePokemonCrud.ts +++ b/web/src/hooks/usePokemonCrud.ts @@ -13,12 +13,14 @@ const usePokemonCrud = () => { const createPokemon = useMutation(PokemonGateway.create, { onSuccess: () => { queryClient.invalidateQueries(CACHE_KEY); + queryClient.invalidateQueries(FEATURED_CACHE_KEY); }, }); const importPokemon = useMutation(PokemonGateway.import, { onSuccess: () => { queryClient.invalidateQueries(CACHE_KEY); + queryClient.invalidateQueries(FEATURED_CACHE_KEY); }, }); diff --git a/web/src/pages/Home/Home.tsx b/web/src/pages/Home/Home.tsx index dce7cda..bf7e1d5 100644 --- a/web/src/pages/Home/Home.tsx +++ b/web/src/pages/Home/Home.tsx @@ -20,10 +20,14 @@ const HomePage = () => { - + );