Running dashboard in docker high CPU and RAM usage

[ohuu]

This I think is related to another issue I raised in the saleor repo #9680

Running dashboard in docker uses insane amounts of CPU and RAM. My laptop is on fire every time I run dashboard in dev because the CPU is being thrashed.

At first I thought it was just Docker Desktop being rubbish, but running top in the container running saleor-dashboard suggests otherwise:

Here is the relevant snippet of my docker-compose file and the dockerfile it refers to just in case that's useful

saleor_dashboard:
    container_name: saleor_dashboard
    restart: unless-stopped
    build:
      context: ./saleor-dashboard
      dockerfile: ./Dockerfile.dev
    ports: 
      - 9000:9000
    volumes:
      - ./saleor-dashboard/:/app:cached
      - /app/node_modules/
    command: npm start -- --host 0.0.0.0

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG APP_MOUNT_URI
ARG API_URI
ARG STATIC_URL
ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/}
ENV STATIC_URL ${STATIC_URL:-/}

EXPOSE 9000
CMD npm start -- --host 0.0.0.0

Is anyone else seeing this in their setup? Any idea what might be causing this crazy resource usage?

[matteius]

I'll give the Dockerfile.dev a try but I am not seeing anything like this with the production Dockerfile buildout.

[matteius]

@ohuu What version of docker-compose are you on, and what are you invoking to being up Dockerfile.dev? FWIW I am using: docker-compose version 1.29.2, build unknown Docker version 20.10.14, build a224086349

[matteius]

I did just note one thing in the Dockerfile.dev build:

husky > Setting up git hooks
Husky requires Git >=2.13.0. Got v2.11.0.
husky > Failed to install

I am surprised to see the Dockerfile is using node 14 -- probably that is why the git on that image is so old. Not that any of that has to do with your issue ...

I have built the Dockerfile.dev using: docker build -f Dockerfile.dev . I then started the built image with docker run --publish 9000:9000 57b718db4802

Click to expand output!

matteius@matteius-VirtualBox:~/mattscoinage/saleor-dashboard$ docker run --publish 9000:9000 57b718db4802

[email protected] start /app npm run build-types && webpack-dev-server -d "--host" "0.0.0.0"

[email protected] build-types /app graphql-codegen

[15:06:51] Parse configuration [started] [15:06:51] Parse configuration [completed] [15:06:51] Generate outputs [started] [15:06:51] Generate ./src/graphql/fragmentTypes.generated.ts [started] [15:06:51] Generate ./src/graphql/typePolicies.generated.ts [started] [15:06:51] Generate ./src/graphql/types.generated.ts [started] [15:06:51] Generate to ./src/graphql/hooks.generated.ts (using EXPERIMENTAL preset "import-types") [started] [15:06:51] Load GraphQL schemas [started] [15:06:51] Load GraphQL schemas [started] [15:06:51] Load GraphQL schemas [started] [15:06:51] Load GraphQL schemas [started] [15:06:51] Load GraphQL schemas [completed] [15:06:51] Load GraphQL documents [started] [15:06:51] Load GraphQL documents [completed] [15:06:51] Generate [started] [15:06:51] Generate [completed] [15:06:51] Generate ./src/graphql/typePolicies.generated.ts [completed] [15:06:52] Load GraphQL schemas [completed] [15:06:52] Load GraphQL documents [started] [15:06:52] Load GraphQL schemas [completed] [15:06:52] Load GraphQL documents [started] [15:06:52] Load GraphQL documents [completed] [15:06:52] Generate [started] [15:06:52] Generate [completed] [15:06:52] Generate ./src/graphql/fragmentTypes.generated.ts [completed] [15:06:53] Load GraphQL schemas [completed] [15:06:53] Load GraphQL documents [started] [15:06:53] Load GraphQL documents [completed] [15:06:53] Generate [started] [15:07:03] Generate [completed] [15:07:03] Generate ./src/graphql/types.generated.ts [completed] [15:07:03] Load GraphQL documents [completed] [15:07:03] Generate [started] [15:07:12] Generate [completed] [15:07:12] Generate to ./src/graphql/hooks.generated.ts (using EXPERIMENTAL preset "import-types") [completed] [15:07:12] Generate outputs [completed] Starting type checking service... Using 1 worker with 2048MB memory limit ℹ ｢wds｣: Project is running at http://0.0.0.0:9000/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /app/build/dashboard/ ℹ ｢wds｣: 404s will fallback to /index.html ℹ ｢wdm｣: wait until bundle finished: / Type checking in progress... ⚠ ｢wdm｣: Hash: f5510c52556c6c1a9d49 Version: webpack 4.46.0 Time: 41871ms Built at: 06/19/2022 3:07:59 PM Asset Size Chunks Chunk Names 0.js 228 KiB 0 [emitted]
1.js 222 KiB 1 [emitted]
10.js 229 KiB 10 [emitted]
11.js 222 KiB 11 [emitted]
12.js 222 KiB 12 [emitted]
13.js 231 KiB 13 [emitted]
14.js 228 KiB 14 [emitted]
15.js 222 KiB 15 [emitted]
16.js 223 KiB 16 [emitted]
17.js 223 KiB 17 [emitted]
18.js 222 KiB 18 [emitted]
19.js 222 KiB 19 [emitted]
2.js 226 KiB 2 [emitted]
20.js 224 KiB 20 [emitted]
21.js 222 KiB 21 [emitted]
22.js 222 KiB 22 [emitted]
23.js 255 KiB 23 [emitted]
24.js 223 KiB 24 [emitted]
25.js 222 KiB 25 [emitted]
26.js 224 KiB 26 [emitted]
27.js 223 KiB 27 [emitted]
28.js 228 KiB 28 [emitted]
29.js 229 KiB 29 [emitted]
3.js 222 KiB 3 [emitted]
30.js 257 KiB 30 [emitted]
31.js 222 KiB 31 [emitted]
32.js 222 KiB 32 [emitted]
33.js 222 KiB 33 [emitted]
34.js 228 KiB 34 [emitted]
35.js 222 KiB 35 [emitted]
36.js 226 KiB 36 [emitted]
37.js 222 KiB 37 [emitted]
38.js 255 KiB 38 [emitted]
39.js 230 KiB 39 [emitted]
4.js 222 KiB 4 [emitted]
40.js 219 KiB 40 [emitted]
41.js 221 KiB 41 [emitted]
5.js 223 KiB 5 [emitted]
6.js 222 KiB 6 [emitted]
7.js 224 KiB 7 [emitted]
8.js 230 KiB 8 [emitted]
9.js 241 KiB 9 [emitted]
ChevronDown.svg 297 bytes [emitted]
activate-icon.svg 869 bytes [emitted]
app-install-error.svg 34.9 KiB [emitted]
apple-touch-icon.png 6.45 KiB [emitted]
close-thin.svg 340 bytes [emitted]
dashboard.js 56.2 MiB dashboard [emitted] dashboard favicon-16x16.png 877 bytes [emitted]
favicon-32x32.png 1.26 KiB [emitted]
index.html 386 bytes [emitted]
login-background.svg 25.2 KiB [emitted]
logo-dark-small.svg 865 bytes [emitted]
logo-dark.svg 2.03 KiB [emitted]
logo-light.svg 3.57 KiB [emitted]
menu-apps-icon.svg 1.58 KiB [emitted]
menu-catalog-icon.svg 805 bytes [emitted]
menu-configure-icon.svg 4.99 KiB [emitted]
menu-customers-icon.svg 920 bytes [emitted]
menu-discounts-icon.svg 1.15 KiB [emitted]
menu-home-icon.svg 732 bytes [emitted]
menu-orders-icon.svg 1.19 KiB [emitted]
menu-pages-icon.svg 1.35 KiB [emitted]
menu-translation-icon.svg 1.44 KiB [emitted]
not-found-404.svg 1.21 KiB [emitted]
photo-icon.svg 2.24 KiB [emitted]
placeholder255x255.png 4.6 KiB [emitted]
placeholder60x60.png 2.23 KiB [emitted]
plus-icon.svg 284 bytes [emitted]
safari-pinned-tab.svg 838 bytes [emitted]
settings-icon.svg 518 bytes [emitted]
support-icon.svg 293 bytes [emitted]
what.svg 24.7 KiB [emitted]
Entrypoint dashboard = dashboard.js [0] multi (webpack)-dev-server/client?http://0.0.0.0:9000 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {dashboard} [built] [./node_modules/@apollo/client/index.js] 67 bytes {dashboard} [built] [./node_modules/@saleor/macaw-ui/dist/esm/index.js] 221 KiB {dashboard} [built] [./node_modules/@saleor/sdk/dist/sdk.esm.js] 66.9 KiB {dashboard} [built] [./node_modules/react-dom/index.js] 567 bytes {dashboard} [built] [./node_modules/react-error-boundary/dist/commonjs/index.js] 805 bytes {dashboard} [built] [./node_modules/react-gtm-module/dist/index.js] 250 bytes {dashboard} [built] [./node_modules/react-intl/lib/index.js] 1.69 KiB {dashboard} [built] [./node_modules/react-router-dom/esm/react-router-dom.js] 9.18 KiB {dashboard} [built] [./node_modules/react/index.js] 189 bytes {dashboard} [built] [./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:9000] (webpack)-dev-server/client?http://0.0.0.0:9000 4 KiB {dashboard} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 2.54 KiB {dashboard} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 804 bytes {dashboard} [built] [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.49 KiB {dashboard} [built] [./src/index.tsx] 9.75 KiB {dashboard} [built] + 9152 hidden modules

WARNING in ./src/hooks/makeQuery.ts 43:0-68 "export 'LazyQueryHookOptions' was not found in '@apollo/client' @ ./src/hooks/makeSearch.ts @ ./src/searches/useAvailableProductAttributeSearch.ts @ ./src/productTypes/views/ProductTypeUpdate/index.tsx @ ./src/productTypes/index.tsx @ ./src/index.tsx Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 512 bytes {0} [built] [./node_modules/lodash/lodash.js] 531 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 178 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 523 bytes {0} [built] ℹ ｢wdm｣: Compiled with warnings.

I then ran docker stats 36d52c7e76a8

CONTAINER ID   NAME                  CPU %     MEM USAGE / LIMIT     MEM %     NET I/O         BLOCK I/O        PIDS
36d52c7e76a8   crazy_proskuriakova   9.99%     2.183GiB / 5.674GiB   38.48%    55kB / 9.52MB   238MB / 14.4MB   42

So yeah its using 2.183GiB before I even login running this way--I apparently don't have it pointing at my backend proper, so unable to report how much it uses after I login in this comment.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.