├── .eslintrc.cjs
├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── workflows
    │   ├── codeql-analysis.yml
    │   └── deploy.yml
├── .gitignore
├── .prettierrc
├── .tool-versions
├── .yarn
    └── releases
    │   └── yarn-4.6.0.cjs
├── .yarnrc.yml
├── Dockerfile
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
├── postcss.config.js
├── public
    ├── .nojekyll
    ├── CNAME
    ├── apple-touch-icon.png
    ├── favicon.ico
    ├── favicon.svg
    ├── humans.txt
    ├── icon-192x192.png
    ├── icon-512x512.png
    ├── maskable_icon.png
    ├── pgtune.svg
    ├── pgtune_dark.svg
    └── robots.txt
├── src
    ├── App.css
    ├── App.jsx
    ├── app
    │   ├── AppLayout.jsx
    │   ├── actions
    │   │   └── configurator.js
    │   ├── app-layout.css
    │   ├── listenerMiddleware.js
    │   ├── pages
    │   │   ├── about
    │   │   │   ├── about.css
    │   │   │   ├── index.jsx
    │   │   │   └── logo.svg
    │   │   └── dashboard
    │   │   │   ├── dashboard.css
    │   │   │   ├── index.jsx
    │   │   │   └── pgtune.svg
    │   └── store.js
    ├── common
    │   ├── components
    │   │   ├── appUpdate
    │   │   │   ├── app-update.css
    │   │   │   └── index.jsx
    │   │   ├── configurationForm
    │   │   │   ├── configuration-form.css
    │   │   │   ├── index.jsx
    │   │   │   ├── total-memory-input.css
    │   │   │   ├── totalMemoryInput.jsx
    │   │   │   └── validation.js
    │   │   ├── configurationView
    │   │   │   ├── configuration-view.css
    │   │   │   ├── index.jsx
    │   │   │   ├── solarized-dark.js
    │   │   │   └── solarized-light.js
    │   │   ├── configurator
    │   │   │   ├── configurator.css
    │   │   │   └── index.jsx
    │   │   ├── copyButton
    │   │   │   └── index.jsx
    │   │   ├── form
    │   │   │   ├── dropdown.css
    │   │   │   ├── dropdown.jsx
    │   │   │   ├── field.css
    │   │   │   ├── field.jsx
    │   │   │   ├── simpleDropdown.jsx
    │   │   │   ├── simpleField.jsx
    │   │   │   ├── tooltip.css
    │   │   │   └── tooltip.jsx
    │   │   ├── githubCorner
    │   │   │   ├── github-corner.css
    │   │   │   └── index.jsx
    │   │   ├── infoView
    │   │   │   ├── index.jsx
    │   │   │   └── info-view.css
    │   │   └── themeSwitcher
    │   │   │   ├── index.jsx
    │   │   │   └── theme-switcher.css
    │   └── utils
    │   │   ├── localStorage.js
    │   │   └── onDomReady.js
    ├── css
    │   └── app.css
    ├── features
    │   ├── configuration
    │   │   ├── __tests__
    │   │   │   └── configurationSlice.test.js
    │   │   ├── configurationSlice.js
    │   │   └── constants.js
    │   ├── settings
    │   │   ├── constants.js
    │   │   └── settingsSlice.js
    │   └── sw
    │   │   ├── swSlice.js
    │   │   └── swWindow.js
    ├── hooks
    │   └── useIsMounted.js
    ├── layouts
    │   └── main.liquid
    ├── main.jsx
    ├── pages
    │   ├── about.liquid
    │   └── index.liquid
    └── sw.js
├── vite.config.js
└── yarn.lock


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true, node: true, jest: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |     "plugin:prettier/recommended"
10 |   ],
11 |   ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.js'],
12 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
13 |   settings: { react: { version: '18.2' } },
14 |   plugins: ['react', 'react-refresh'],
15 |   rules: {
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |     'react/jsx-uses-react': 'error'
21 |   },
22 | }
23 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | custom: ["https://www.buymeacoffee.com/leopard"]
4 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: bug
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: feature
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | # For most projects, this workflow file will not need changing; you simply need
 2 | # to commit it to your repository.
 3 | #
 4 | # You may wish to alter this file to override the set of languages analyzed,
 5 | # or to provide custom queries or build logic.
 6 | #
 7 | # ******** NOTE ********
 8 | # We have attempted to detect the languages in your repository. Please check
 9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 | 
14 | on:
15 |   push:
16 |     branches: [ master ]
17 |   pull_request:
18 |     # The branches below must be a subset of the branches above
19 |     branches: [ master ]
20 |   schedule:
21 |     - cron: '43 18 * * 5'
22 | 
23 | jobs:
24 |   analyze:
25 |     name: Analyze
26 |     runs-on: ubuntu-latest
27 |     permissions:
28 |       actions: read
29 |       contents: read
30 |       security-events: write
31 | 
32 |     strategy:
33 |       fail-fast: false
34 |       matrix:
35 |         language: [ 'javascript' ]
36 |         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
37 |         # Learn more about CodeQL language support at https://git.io/codeql-language-support
38 | 
39 |     steps:
40 |     - name: Checkout repository
41 |       uses: actions/checkout@v4
42 | 
43 |     # Initializes the CodeQL tools for scanning.
44 |     - name: Initialize CodeQL
45 |       uses: github/codeql-action/init@v3
46 |       with:
47 |         languages: ${{ matrix.language }}
48 |         # If you wish to specify custom queries, you can do so here or in a config file.
49 |         # By default, queries listed here will override any specified in a config file.
50 |         # Prefix the list here with "+" to use these queries and those in the config file.
51 |         # queries: ./path/to/local/query, your-org/your-repo/queries@main
52 | 
53 |     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
54 |     # If this step fails, then you should remove it and run the build manually (see below)
55 |     - name: Autobuild
56 |       uses: github/codeql-action/autobuild@v3
57 | 
58 |     # ℹ️ Command-line programs to run using the OS shell.
59 |     # 📚 https://git.io/JvXDl
60 | 
61 |     # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
62 |     #    and modify them (or add more) to build your code if your project
63 |     #    uses a compiled language
64 | 
65 |     #- run: |
66 |     #   make bootstrap
67 |     #   make release
68 | 
69 |     - name: Perform CodeQL Analysis
70 |       uses: github/codeql-action/analyze@v3
71 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - master
 7 |   workflow_dispatch:
 8 | 
 9 | permissions:
10 |   contents: read
11 |   pages: write
12 |   id-token: write
13 | 
14 | jobs:
15 |   build:
16 |     name: Build
17 |     runs-on: ubuntu-latest
18 |     steps:
19 |       - name: Checkout
20 |         uses: actions/checkout@v4
21 |         with:
22 |           persist-credentials: false
23 | 
24 |       - name: Install Node.JS
25 |         uses: actions/setup-node@v4
26 |         with:
27 |           check-latest: true
28 |           cache: 'yarn'
29 |           node-version-file: '.tool-versions'
30 | 
31 |       - name: Install Javascript dependencies
32 |         run: yarn install --immutable
33 | 
34 |       - name: Check lints
35 |         run: yarn run lint
36 | 
37 |       - name: Check tests
38 |         run: yarn run test
39 | 
40 |       - name: Build website
41 |         run: yarn run build
42 | 
43 |       - name: Upload Pages Artifact
44 |         uses: actions/upload-pages-artifact@v3
45 |         with:
46 |           path: "dist/"
47 | 
48 |   deploy:
49 |     needs: build
50 |     name: Deploy
51 |     runs-on: ubuntu-latest
52 |     environment:
53 |       name: github-pages
54 |       url: ${{ steps.deployment.outputs.page_url }}
55 |     steps:
56 |       - name: Deploy to GitHub Pages 🚀
57 |         id: deployment
58 |         uses: actions/deploy-pages@v4
59 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .yarn/*
27 | !.yarn/patches
28 | !.yarn/releases
29 | !.yarn/plugins
30 | !.yarn/sdks
31 | !.yarn/versions
32 | .pnp.*
33 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "bracketSpacing": true,
5 |   "arrowParens": "always",
6 |   "printWidth": 100,
7 |   "trailingComma": "none"
8 | }
9 | 


--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | nodejs 22.11.0
2 | 


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | compressionLevel: mixed
2 | 
3 | enableGlobalCache: false
4 | 
5 | yarnPath: .yarn/releases/yarn-4.6.0.cjs
6 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM alpine:latest
 2 | RUN apk update
 3 | RUN apk upgrade
 4 | RUN apk add icu-data-full
 5 | RUN apk add nodejs npm yarn
 6 | WORKDIR /home
 7 | COPY . .
 8 | RUN yarn install
 9 | 
10 | ENV VITE_HOST=0.0.0.0
11 | ENV VITE_PORT=80
12 | EXPOSE $VITE_PORT
13 | ENTRYPOINT ["yarn", "dev"]
14 | 
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Alexey Vasiliev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [PgTune](https://pgtune.leopard.in.ua/) [![Build and Deploy](https://github.com/le0pard/pgtune/actions/workflows/deploy.yml/badge.svg)](https://github.com/le0pard/pgtune/actions/workflows/deploy.yml)
 2 | 
 3 | [![PGTune](https://repository-images.githubusercontent.com/17980400/ff62f200-e3ae-11e9-9169-fcdbb1cbdb20 "PGTune")](https://pgtune.leopard.in.ua/)
 4 | 
 5 | Tuning PostgreSQL config by your hardware. Based on original [pgtune](https://github.com/gregs1104/pgtune). Illustration by [Kate](https://dribbble.com/Kite).
 6 | 
 7 | ## Development
 8 | 
 9 | To start it in development mode, you need install node.js, yarn and run in terminal:
10 | 
11 | ```bash
12 | $ yarn # get all node.js deps
13 | $ yarn dev # start server on 5173 port
14 | ```
15 | 
16 | ## Contributing
17 | 
18 | 1. Fork it
19 | 2. Create your feature branch (`git checkout -b my-new-feature`)
20 | 3. Commit your changes (`git commit -am 'Add some feature'`)
21 | 4. Push to the branch (`git push origin my-new-feature`)
22 | 5. Create new Pull Request
23 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | process.env.TZ = 'UTC' // normalize timezone for tests
 2 | 
 3 | export default {
 4 |   transform: {},
 5 |   coverageReporters: ['json', 'lcov', 'text', 'clover', 'html'],
 6 |   clearMocks: true,
 7 |   moduleNameMapper: {
 8 |     '^@root/(.*)': '<rootDir>/src/$1',
 9 |     '^@app/(.*)': '<rootDir>/src/app/$1',
10 |     '^@css/(.*)': '<rootDir>/src/css/$1',
11 |     '^@common/(.*)': '<rootDir>/src/common/$1',
12 |     '^@features/(.*)': '<rootDir>/src/features/$1',
13 |     '^@hooks/(.*)': '<rootDir>/src/hooks/$1'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pgtune",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "type": "module",
 6 |   "description": "pgtune website",
 7 |   "author": "Alexey Vasiliev",
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "dev": "vite",
11 |     "build": "vite build",
12 |     "preview": "vite preview",
13 |     "lint": "pnpify run prettier --check src postcss.config.js jest.config.js && eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
14 |     "format": "pnpify run prettier --write src postcss.config.js jest.config.js",
15 |     "test": "node --experimental-vm-modules $(yarn bin jest) -c jest.config.js"
16 |   },
17 |   "dependencies": {
18 |     "react": "^19.1.0",
19 |     "react-dom": "^19.1.0"
20 |   },
21 |   "devDependencies": {
22 |     "@reduxjs/toolkit": "^2.6.1",
23 |     "@vitejs/plugin-react": "^4.3.4",
24 |     "@vituum/vite-plugin-liquid": "^1.1.0",
25 |     "@yarnpkg/pnpify": "^4.1.4",
26 |     "classnames": "^2.5.1",
27 |     "clipboard": "^2.0.11",
28 |     "eslint": "^8.57.1",
29 |     "eslint-config-prettier": "^9.1.0",
30 |     "eslint-plugin-prettier": "^5.2.1",
31 |     "eslint-plugin-react": "^7.37.4",
32 |     "eslint-plugin-react-hooks": "^5.2.0",
33 |     "eslint-plugin-react-refresh": "^0.4.19",
34 |     "formik": "^2.4.6",
35 |     "highlight.js": "^11.11.1",
36 |     "jest": "^29.7.0",
37 |     "lodash-es": "^4.17.21",
38 |     "normalize.css": "^8.0.1",
39 |     "postcss": "^8.5.3",
40 |     "postcss-import": "^16.1.0",
41 |     "postcss-load-config": "^6.0.1",
42 |     "postcss-preset-env": "^10.1.5",
43 |     "prettier": "^3.5.3",
44 |     "prop-types": "^15.8.1",
45 |     "react-redux": "^9.2.0",
46 |     "react-router": "^7.5.2",
47 |     "react-router-dom": "^7.5.0",
48 |     "redux-logger": "^3.0.6",
49 |     "terser": "^5.39.0",
50 |     "vite": "^6.2.7",
51 |     "vite-plugin-pwa": "^0.21.2",
52 |     "vituum": "^1.2.0",
53 |     "workbox-core": "^7.3.0",
54 |     "workbox-precaching": "^7.3.0",
55 |     "workbox-webpack-plugin": "^7.3.0",
56 |     "workbox-window": "^7.3.0",
57 |     "yup": "^1.6.1"
58 |   },
59 |   "packageManager": "yarn@4.6.0"
60 | }
61 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   plugins: {
 3 |     'postcss-import': {
 4 |       path: ['src/css']
 5 |     },
 6 |     'postcss-preset-env': {
 7 |       stage: 1,
 8 |       browsers: ['>0.3%', 'Firefox ESR', 'not dead', 'not op_mini all'],
 9 |       features: {
10 |         'custom-properties': {
11 |           strict: false,
12 |           warnings: false,
13 |           preserve: true
14 |         }
15 |       }
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/public/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/le0pard/pgtune/e2c7f3997cdeedabf141eab3e57c2d37075afbae/public/.nojekyll


--------------------------------------------------------------------------------
/public/CNAME:
--------------------------------------------------------------------------------
1 | pgtune.leopard.in.ua
2 | 


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/le0pard/pgtune/e2c7f3997cdeedabf141eab3e57c2d37075afbae/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/le0pard/pgtune/e2c7f3997cdeedabf141eab3e57c2d37075afbae/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="112" height="98" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="pgtune" fill-rule="nonzero"><path d="M25.3 96.8h-7.1c-1.4 0-2.8-.7-4.4-2.2-2.4-2.2-3.9-5-4.9-7.1-1-2.2-3.3-7.8-4-10-2.2-6.7-3.2-11.4-3.2-14 0-.3-.1-3.6.4-6.4.4-2.6 1-6.6 2.8-11.5 1.9-5 3.6-7.9 8.7-14.2 2.8-3.5 6.1-7 9.5-10.2 3.9-3.7 8.2-6.8 12.2-9.6C48.8 2.2 60 1.5 63.1 1.5c1.2 0 2.7.1 4.4.2 5.1.4 7.4 1.2 8.9 1.7l.5.2c7.6 2.7 11.5 6.3 13.6 8.3l.3.3c2.8 2.6 7.1 6.9 11.1 13.6 2.5 4.1 5.3 11 7.7 19.2.7 2.5 1.2 11.2.9 14.7-.2 2.6-1 7.8-3.6 13.3-2.1 4.4-4.5 9.4-8.3 13-1.9 1.8-4.4 3.5-6.9 4.7-2.9 1.4-8.2 2.1-8.4 2.1-4.8 0-6.3-.8-7.4-2.4-.7-.9-.4-1.6-.2-1.9l.5-.8.9-2.1c.5-1.2.9-2.4 1.7-3.6l.1-.2c.7-1 1.4-1.9 2.3-1.9l.1-.2h.9l.3.3s.1.1.2.1c.3.3.7.6 1.1.6h.2c.8-.2 1.7-.6 3.8-3.3 2.8-3.6 3.6-5.2 4.5-7 .2-.4.3-.7.5-1.1 1.4-2.7 2.5-7.6 1.8-12.4-.7-4.9-1.6-7.5-4.8-10.3-1.3-1.1-2.7-1.4-3.5-1.4-.4 0-.6 0-.7.1h-.1v.8c0 .1.6 9.3.4 11.8-.3 5-.8 8.8-1.6 11.3-.9 2.9-2.6 6.1-4.7 9.9-.2.3-.4.7-.6 1.1-.3.5-.6 1.1-.7 1.3-.1.2-2.4 5.1-2.5 5.2v.1c-1.3 2.2-2.1 3.5-2.6 4.1-.7 1-2 2.5-2.8 3.2-1.3 1.4-3 2.2-5 2.2h-9.1c-2.1 0-3.6-1-4.2-2.8l-.3-.9c-.4-1.3-1-3.3-2.1-4.7-1.3-1.7-2.8-2.6-6-2.7h-.2c-2.3 0-5.1.1-5.8.4-1.5.5-1.5.5-1.7 1.6-.4 1.5-.3 1.9-.1 3.5v.2c.4 3.2-.8 4.5-1.9 5.1-.7.4-1.6.4-3 .4h-.7c-1.3.4-3.6.4-5 .4zm17.9-69.7c-.4 1.7-.5 3.5-.4 5.2.1 2.5.8 6.4 3.6 10.9 2.8 4.6 7.1 6.9 8.8 7.7 1 .5 2.3.8 3.7 1-.5-.2-1-.3-1.5-.5-4.7-2.1-6.1-3.7-7.5-5.4l-.1-.1c-2-2.3-3.4-4.7-4.8-8.2-1.7-4.3-2-7.2-1.8-10.3v-.3zm27.6-4.4c-.2.3-.6 1.8-.1 4.1.5 2.2 1.4 3.4 1.8 3.6.3-.4.6-1.8.1-4.1-.5-2.2-1.4-3.4-1.8-3.6z" id="Shape" fill="#cdd9ea"/><path d="M63.2 2.5c1.2 0 2.6.1 4.3.2 5 .3 7.2 1.2 8.7 1.7.2.1.4.1.5.2 7.8 2.8 11.6 6.5 13.5 8.4 2.8 2.6 7 6.8 11 13.4 2.5 4.1 5.2 10.8 7.6 19v.1c.7 2.3 1.1 10.9.8 14.2-.2 2.6-1 7.6-3.5 13-2.1 4.3-4.4 9.2-8.1 12.7-1.9 1.7-4.2 3.3-6.7 4.5-2.8 1.3-7.9 2-7.9 2-4.7 0-5.8-.9-6.6-2-.4-.6-.2-.7-.2-.7l.5-.9c.9-2 1.4-3.8 2.5-5.6.3-.4 1.1-1.6 1.6-1.6h.3c.4 0 .3-.2.3-.2l.2.2c.5.4 1.1.8 1.7.8h.4c1.2-.3 2.3-1 4.4-3.6 2.9-3.7 3.7-5.3 4.6-7.2.2-.3.3-.7.5-1.1 1.4-2.9 2.6-8 1.9-13-.7-5-1.7-8-5.1-10.9-1.6-1.3-3.1-1.6-4.2-1.6-.6 0-1 .1-1.1.1-.1 0-.1.1-.2.1-.2.1-.3.2-.3.3-.1.2-.2.5-.2 1.5.1 1.8.5 9.6.4 11.7-.3 4.9-.8 8.6-1.5 11.1-.8 2.7-2.3 5.6-4.6 9.7-.3.5-1 1.9-1.3 2.4l-2.5 5.3c-1.2 1.9-2.1 3.4-2.5 4.1-.8 1.2-2.6 3.1-2.7 3.2-.4.4-1.7 1.8-4.3 1.8h-9.2c-1.6 0-2.7-.8-3.2-2.1l-.3-.9c-.4-1.4-1-3.4-2.3-5-1.5-1.8-3.2-3-6.8-3h-.2c-1.2 0-5 0-6.1.4-1.8.6-2 .9-2.4 2.3-.4 1.6-.3 2.2-.1 3.8v.2c.3 2.6-.6 3.6-1.4 4.1-.5.3-1.3.3-2.6.3H18c-1.1 0-2.3-.6-3.7-1.9-2.3-2.1-3.7-4.7-4.7-6.8-1-2.1-3.3-7.7-4-9.9-2.1-6.6-3.2-11.2-3.1-13.7 0-.3-.1-3.5.4-6.3.4-2.6.9-6.5 2.8-11.3 1.8-4.9 3.6-7.7 8.6-13.9 2.8-3.4 6-6.9 9.4-10 3.9-3.6 8.1-6.7 12.1-9.5C49.2 3.2 60.3 2.5 63.2 2.5zm-9 10s-2.4 1-5.4 3.2c-1.8 1.4-3.4 3.3-4.7 5.9-.6 1.1-2.6 5.2-2.3 10.8.2 3.1 1.1 7.1 3.7 11.4 2.4 4 6.2 6.7 9.3 8.1 2 .9 4.9 1.4 7.7 1.4 1.5 0 2.9-.1 4.2-.4 3.5-.8 6.1-2.3 7.3-3.1 1.2-.8 3-2.5 3-2.5s-1.9 1.4-3.3 2c-1.4.7-3.6 1.4-5.2 1.7-.9.2-2.9.6-5.2.6-1.7 0-3.6-.2-5.4-1-4.6-2.1-5.9-3.6-7.3-5.2-1.7-2-3.1-4.2-4.6-7.9-1.6-4-1.9-6.8-1.8-9.9.1-2.9.6-4.3 1.3-5.8.6-1.5 1.9-3.6 3.5-5.2 1.7-2 5.1-4 5.2-4.1zm18.4 19h.2c1.1-.2 1.4-2.6.8-5.3-.6-2.5-1.8-4.5-2.8-4.5h-.2c-1.1.2-1.4 2.6-.8 5.3.5 2.6 1.8 4.5 2.8 4.5zM63.2.5C50.6.5 38.3 8.4 34.8 10.8c-4 2.8-8.3 5.9-12.3 9.6-3.4 3.2-6.7 6.7-9.6 10.3-5.2 6.4-7 9.4-8.9 14.5-1.9 5.1-2.5 9.1-2.9 11.7-.4 2.9-.4 6.1-.4 6.6 0 2.7 1 7.4 3.2 14.3.7 2.3 3 7.9 4.1 10.2 1.1 2.2 2.6 5.1 5.1 7.4 1.8 1.7 3.4 2.4 5 2.4h12.6c1.3 0 2.5 0 3.5-.6 1.1-.6 2.9-2.2 2.4-6.1v-.2c-.2-1.6-.2-1.8.1-3.1.1-.2.1-.4.1-.5.2-.1.5-.2 1-.4s3-.3 5.4-.3h.2c2.9 0 4 .8 5.3 2.3 1 1.3 1.6 3.1 1.9 4.3.1.4.2.7.3 1 .7 2.2 2.6 3.5 5.1 3.5h9.2c2.3 0 4.2-.9 5.7-2.5.9-1 2.2-2.4 2.9-3.4.2-.3.5-.7.8-1.3.1.1.2.3.3.4 1.3 1.8 3.1 2.8 8.3 2.8.4 0 5.8-.8 8.8-2.2 2.6-1.3 5.2-3 7.2-4.9 4-3.7 6.4-8.8 8.5-13.3 2.7-5.6 3.5-11 3.7-13.7.3-3.3-.1-12.2-.9-15v-.1c-2.5-8.3-5.3-15.2-7.8-19.4-4.2-6.8-8.5-11.2-11.3-13.8l-.3-.3C89 9 85 5.3 77.2 2.5l-.2-.1-.3-.1c-1.6-.6-4-1.4-9.2-1.8-1.6.1-3.1 0-4.3 0zm18 78.4c1.9-3.4 3.4-6.4 4.2-9.1.8-2.6 1.3-6.5 1.6-11.5.1-2.4-.3-10.6-.4-11.8.7 0 1.6.3 2.6 1.1 3 2.6 3.8 4.9 4.5 9.7.7 4.6-.4 9.3-1.7 11.8-.2.4-.4.7-.5 1.1-.9 1.8-1.6 3.3-4.4 6.8-1.8 2.3-2.6 2.7-3.2 2.9-.1 0-.2-.1-.4-.3l-.1-.1-.6-.5h-1.6v-.1z" id="Shape" fill="#656b74"/></g></g></svg>
2 | 


--------------------------------------------------------------------------------
/public/humans.txt:
--------------------------------------------------------------------------------
 1 | # humanstxt.org/
 2 | # The humans responsible & technology colophon
 3 | 
 4 | /* TEAM */
 5 |   Developer: Alexey Vasiliev
 6 |   Twitter: @leopard_me
 7 | 
 8 |   Web designer: Anna Rotar
 9 |   Twitter: @Ste4any
10 | 
11 | /* SITE */
12 |   Language: English
13 |   Standards: HTML5, CSS3
14 |   Doctype: HTML5
15 |   Source: https://github.com/le0pard/pgtune
16 | 


--------------------------------------------------------------------------------
/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/le0pard/pgtune/e2c7f3997cdeedabf141eab3e57c2d37075afbae/public/icon-192x192.png


--------------------------------------------------------------------------------
/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/le0pard/pgtune/e2c7f3997cdeedabf141eab3e57c2d37075afbae/public/icon-512x512.png


--------------------------------------------------------------------------------
/public/maskable_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/le0pard/pgtune/e2c7f3997cdeedabf141eab3e57c2d37075afbae/public/maskable_icon.png


--------------------------------------------------------------------------------
/public/pgtune.svg:
--------------------------------------------------------------------------------
1 | <svg width="112" height="98" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="pgtune" fill-rule="nonzero"><path d="M25.3 96.8h-7.1c-1.4 0-2.8-.7-4.4-2.2-2.4-2.2-3.9-5-4.9-7.1-1-2.2-3.3-7.8-4-10-2.2-6.7-3.2-11.4-3.2-14 0-.3-.1-3.6.4-6.4.4-2.6 1-6.6 2.8-11.5 1.9-5 3.6-7.9 8.7-14.2 2.8-3.5 6.1-7 9.5-10.2 3.9-3.7 8.2-6.8 12.2-9.6C48.8 2.2 60 1.5 63.1 1.5c1.2 0 2.7.1 4.4.2 5.1.4 7.4 1.2 8.9 1.7l.5.2c7.6 2.7 11.5 6.3 13.6 8.3l.3.3c2.8 2.6 7.1 6.9 11.1 13.6 2.5 4.1 5.3 11 7.7 19.2.7 2.5 1.2 11.2.9 14.7-.2 2.6-1 7.8-3.6 13.3-2.1 4.4-4.5 9.4-8.3 13-1.9 1.8-4.4 3.5-6.9 4.7-2.9 1.4-8.2 2.1-8.4 2.1-4.8 0-6.3-.8-7.4-2.4-.7-.9-.4-1.6-.2-1.9l.5-.8.9-2.1c.5-1.2.9-2.4 1.7-3.6l.1-.2c.7-1 1.4-1.9 2.3-1.9l.1-.2h.9l.3.3s.1.1.2.1c.3.3.7.6 1.1.6h.2c.8-.2 1.7-.6 3.8-3.3 2.8-3.6 3.6-5.2 4.5-7 .2-.4.3-.7.5-1.1 1.4-2.7 2.5-7.6 1.8-12.4-.7-4.9-1.6-7.5-4.8-10.3-1.3-1.1-2.7-1.4-3.5-1.4-.4 0-.6 0-.7.1h-.1v.8c0 .1.6 9.3.4 11.8-.3 5-.8 8.8-1.6 11.3-.9 2.9-2.6 6.1-4.7 9.9-.2.3-.4.7-.6 1.1-.3.5-.6 1.1-.7 1.3-.1.2-2.4 5.1-2.5 5.2v.1c-1.3 2.2-2.1 3.5-2.6 4.1-.7 1-2 2.5-2.8 3.2-1.3 1.4-3 2.2-5 2.2h-9.1c-2.1 0-3.6-1-4.2-2.8l-.3-.9c-.4-1.3-1-3.3-2.1-4.7-1.3-1.7-2.8-2.6-6-2.7h-.2c-2.3 0-5.1.1-5.8.4-1.5.5-1.5.5-1.7 1.6-.4 1.5-.3 1.9-.1 3.5v.2c.4 3.2-.8 4.5-1.9 5.1-.7.4-1.6.4-3 .4h-.7c-1.3.4-3.6.4-5 .4zm17.9-69.7c-.4 1.7-.5 3.5-.4 5.2.1 2.5.8 6.4 3.6 10.9 2.8 4.6 7.1 6.9 8.8 7.7 1 .5 2.3.8 3.7 1-.5-.2-1-.3-1.5-.5-4.7-2.1-6.1-3.7-7.5-5.4l-.1-.1c-2-2.3-3.4-4.7-4.8-8.2-1.7-4.3-2-7.2-1.8-10.3v-.3zm27.6-4.4c-.2.3-.6 1.8-.1 4.1.5 2.2 1.4 3.4 1.8 3.6.3-.4.6-1.8.1-4.1-.5-2.2-1.4-3.4-1.8-3.6z" id="Shape" fill="#cdd9ea"/><path d="M63.2 2.5c1.2 0 2.6.1 4.3.2 5 .3 7.2 1.2 8.7 1.7.2.1.4.1.5.2 7.8 2.8 11.6 6.5 13.5 8.4 2.8 2.6 7 6.8 11 13.4 2.5 4.1 5.2 10.8 7.6 19v.1c.7 2.3 1.1 10.9.8 14.2-.2 2.6-1 7.6-3.5 13-2.1 4.3-4.4 9.2-8.1 12.7-1.9 1.7-4.2 3.3-6.7 4.5-2.8 1.3-7.9 2-7.9 2-4.7 0-5.8-.9-6.6-2-.4-.6-.2-.7-.2-.7l.5-.9c.9-2 1.4-3.8 2.5-5.6.3-.4 1.1-1.6 1.6-1.6h.3c.4 0 .3-.2.3-.2l.2.2c.5.4 1.1.8 1.7.8h.4c1.2-.3 2.3-1 4.4-3.6 2.9-3.7 3.7-5.3 4.6-7.2.2-.3.3-.7.5-1.1 1.4-2.9 2.6-8 1.9-13-.7-5-1.7-8-5.1-10.9-1.6-1.3-3.1-1.6-4.2-1.6-.6 0-1 .1-1.1.1-.1 0-.1.1-.2.1-.2.1-.3.2-.3.3-.1.2-.2.5-.2 1.5.1 1.8.5 9.6.4 11.7-.3 4.9-.8 8.6-1.5 11.1-.8 2.7-2.3 5.6-4.6 9.7-.3.5-1 1.9-1.3 2.4l-2.5 5.3c-1.2 1.9-2.1 3.4-2.5 4.1-.8 1.2-2.6 3.1-2.7 3.2-.4.4-1.7 1.8-4.3 1.8h-9.2c-1.6 0-2.7-.8-3.2-2.1l-.3-.9c-.4-1.4-1-3.4-2.3-5-1.5-1.8-3.2-3-6.8-3h-.2c-1.2 0-5 0-6.1.4-1.8.6-2 .9-2.4 2.3-.4 1.6-.3 2.2-.1 3.8v.2c.3 2.6-.6 3.6-1.4 4.1-.5.3-1.3.3-2.6.3H18c-1.1 0-2.3-.6-3.7-1.9-2.3-2.1-3.7-4.7-4.7-6.8-1-2.1-3.3-7.7-4-9.9-2.1-6.6-3.2-11.2-3.1-13.7 0-.3-.1-3.5.4-6.3.4-2.6.9-6.5 2.8-11.3 1.8-4.9 3.6-7.7 8.6-13.9 2.8-3.4 6-6.9 9.4-10 3.9-3.6 8.1-6.7 12.1-9.5C49.2 3.2 60.3 2.5 63.2 2.5zm-9 10s-2.4 1-5.4 3.2c-1.8 1.4-3.4 3.3-4.7 5.9-.6 1.1-2.6 5.2-2.3 10.8.2 3.1 1.1 7.1 3.7 11.4 2.4 4 6.2 6.7 9.3 8.1 2 .9 4.9 1.4 7.7 1.4 1.5 0 2.9-.1 4.2-.4 3.5-.8 6.1-2.3 7.3-3.1 1.2-.8 3-2.5 3-2.5s-1.9 1.4-3.3 2c-1.4.7-3.6 1.4-5.2 1.7-.9.2-2.9.6-5.2.6-1.7 0-3.6-.2-5.4-1-4.6-2.1-5.9-3.6-7.3-5.2-1.7-2-3.1-4.2-4.6-7.9-1.6-4-1.9-6.8-1.8-9.9.1-2.9.6-4.3 1.3-5.8.6-1.5 1.9-3.6 3.5-5.2 1.7-2 5.1-4 5.2-4.1zm18.4 19h.2c1.1-.2 1.4-2.6.8-5.3-.6-2.5-1.8-4.5-2.8-4.5h-.2c-1.1.2-1.4 2.6-.8 5.3.5 2.6 1.8 4.5 2.8 4.5zM63.2.5C50.6.5 38.3 8.4 34.8 10.8c-4 2.8-8.3 5.9-12.3 9.6-3.4 3.2-6.7 6.7-9.6 10.3-5.2 6.4-7 9.4-8.9 14.5-1.9 5.1-2.5 9.1-2.9 11.7-.4 2.9-.4 6.1-.4 6.6 0 2.7 1 7.4 3.2 14.3.7 2.3 3 7.9 4.1 10.2 1.1 2.2 2.6 5.1 5.1 7.4 1.8 1.7 3.4 2.4 5 2.4h12.6c1.3 0 2.5 0 3.5-.6 1.1-.6 2.9-2.2 2.4-6.1v-.2c-.2-1.6-.2-1.8.1-3.1.1-.2.1-.4.1-.5.2-.1.5-.2 1-.4s3-.3 5.4-.3h.2c2.9 0 4 .8 5.3 2.3 1 1.3 1.6 3.1 1.9 4.3.1.4.2.7.3 1 .7 2.2 2.6 3.5 5.1 3.5h9.2c2.3 0 4.2-.9 5.7-2.5.9-1 2.2-2.4 2.9-3.4.2-.3.5-.7.8-1.3.1.1.2.3.3.4 1.3 1.8 3.1 2.8 8.3 2.8.4 0 5.8-.8 8.8-2.2 2.6-1.3 5.2-3 7.2-4.9 4-3.7 6.4-8.8 8.5-13.3 2.7-5.6 3.5-11 3.7-13.7.3-3.3-.1-12.2-.9-15v-.1c-2.5-8.3-5.3-15.2-7.8-19.4-4.2-6.8-8.5-11.2-11.3-13.8l-.3-.3C89 9 85 5.3 77.2 2.5l-.2-.1-.3-.1c-1.6-.6-4-1.4-9.2-1.8-1.6.1-3.1 0-4.3 0zm18 78.4c1.9-3.4 3.4-6.4 4.2-9.1.8-2.6 1.3-6.5 1.6-11.5.1-2.4-.3-10.6-.4-11.8.7 0 1.6.3 2.6 1.1 3 2.6 3.8 4.9 4.5 9.7.7 4.6-.4 9.3-1.7 11.8-.2.4-.4.7-.5 1.1-.9 1.8-1.6 3.3-4.4 6.8-1.8 2.3-2.6 2.7-3.2 2.9-.1 0-.2-.1-.4-.3l-.1-.1-.6-.5h-1.6v-.1z" id="Shape" fill="#656b74"/></g></g></svg>
2 | 


--------------------------------------------------------------------------------
/public/pgtune_dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="112" height="98" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="pgtune" fill-rule="nonzero"><path d="M25.3 96.8h-7.1c-1.4 0-2.8-.7-4.4-2.2-2.4-2.2-3.9-5-4.9-7.1-1-2.2-3.3-7.8-4-10-2.2-6.7-3.2-11.4-3.2-14 0-.3-.1-3.6.4-6.4.4-2.6 1-6.6 2.8-11.5 1.9-5 3.6-7.9 8.7-14.2 2.8-3.5 6.1-7 9.5-10.2 3.9-3.7 8.2-6.8 12.2-9.6C48.8 2.2 60 1.5 63.1 1.5c1.2 0 2.7.1 4.4.2 5.1.4 7.4 1.2 8.9 1.7l.5.2c7.6 2.7 11.5 6.3 13.6 8.3l.3.3c2.8 2.6 7.1 6.9 11.1 13.6 2.5 4.1 5.3 11 7.7 19.2.7 2.5 1.2 11.2.9 14.7-.2 2.6-1 7.8-3.6 13.3-2.1 4.4-4.5 9.4-8.3 13-1.9 1.8-4.4 3.5-6.9 4.7-2.9 1.4-8.2 2.1-8.4 2.1-4.8 0-6.3-.8-7.4-2.4-.7-.9-.4-1.6-.2-1.9l.5-.8.9-2.1c.5-1.2.9-2.4 1.7-3.6l.1-.2c.7-1 1.4-1.9 2.3-1.9l.1-.2h.9l.3.3s.1.1.2.1c.3.3.7.6 1.1.6h.2c.8-.2 1.7-.6 3.8-3.3 2.8-3.6 3.6-5.2 4.5-7 .2-.4.3-.7.5-1.1 1.4-2.7 2.5-7.6 1.8-12.4-.7-4.9-1.6-7.5-4.8-10.3-1.3-1.1-2.7-1.4-3.5-1.4-.4 0-.6 0-.7.1h-.1v.8c0 .1.6 9.3.4 11.8-.3 5-.8 8.8-1.6 11.3-.9 2.9-2.6 6.1-4.7 9.9-.2.3-.4.7-.6 1.1-.3.5-.6 1.1-.7 1.3-.1.2-2.4 5.1-2.5 5.2v.1c-1.3 2.2-2.1 3.5-2.6 4.1-.7 1-2 2.5-2.8 3.2-1.3 1.4-3 2.2-5 2.2h-9.1c-2.1 0-3.6-1-4.2-2.8l-.3-.9c-.4-1.3-1-3.3-2.1-4.7-1.3-1.7-2.8-2.6-6-2.7h-.2c-2.3 0-5.1.1-5.8.4-1.5.5-1.5.5-1.7 1.6-.4 1.5-.3 1.9-.1 3.5v.2c.4 3.2-.8 4.5-1.9 5.1-.7.4-1.6.4-3 .4h-.7c-1.3.4-3.6.4-5 .4zm17.9-69.7c-.4 1.7-.5 3.5-.4 5.2.1 2.5.8 6.4 3.6 10.9 2.8 4.6 7.1 6.9 8.8 7.7 1 .5 2.3.8 3.7 1-.5-.2-1-.3-1.5-.5-4.7-2.1-6.1-3.7-7.5-5.4l-.1-.1c-2-2.3-3.4-4.7-4.8-8.2-1.7-4.3-2-7.2-1.8-10.3v-.3zm27.6-4.4c-.2.3-.6 1.8-.1 4.1.5 2.2 1.4 3.4 1.8 3.6.3-.4.6-1.8.1-4.1-.5-2.2-1.4-3.4-1.8-3.6z" id="Shape" fill="#cdd9ea"/><path d="M63.2 2.5c1.2 0 2.6.1 4.3.2 5 .3 7.2 1.2 8.7 1.7.2.1.4.1.5.2 7.8 2.8 11.6 6.5 13.5 8.4 2.8 2.6 7 6.8 11 13.4 2.5 4.1 5.2 10.8 7.6 19v.1c.7 2.3 1.1 10.9.8 14.2-.2 2.6-1 7.6-3.5 13-2.1 4.3-4.4 9.2-8.1 12.7-1.9 1.7-4.2 3.3-6.7 4.5-2.8 1.3-7.9 2-7.9 2-4.7 0-5.8-.9-6.6-2-.4-.6-.2-.7-.2-.7l.5-.9c.9-2 1.4-3.8 2.5-5.6.3-.4 1.1-1.6 1.6-1.6h.3c.4 0 .3-.2.3-.2l.2.2c.5.4 1.1.8 1.7.8h.4c1.2-.3 2.3-1 4.4-3.6 2.9-3.7 3.7-5.3 4.6-7.2.2-.3.3-.7.5-1.1 1.4-2.9 2.6-8 1.9-13-.7-5-1.7-8-5.1-10.9-1.6-1.3-3.1-1.6-4.2-1.6-.6 0-1 .1-1.1.1-.1 0-.1.1-.2.1-.2.1-.3.2-.3.3-.1.2-.2.5-.2 1.5.1 1.8.5 9.6.4 11.7-.3 4.9-.8 8.6-1.5 11.1-.8 2.7-2.3 5.6-4.6 9.7-.3.5-1 1.9-1.3 2.4l-2.5 5.3c-1.2 1.9-2.1 3.4-2.5 4.1-.8 1.2-2.6 3.1-2.7 3.2-.4.4-1.7 1.8-4.3 1.8h-9.2c-1.6 0-2.7-.8-3.2-2.1l-.3-.9c-.4-1.4-1-3.4-2.3-5-1.5-1.8-3.2-3-6.8-3h-.2c-1.2 0-5 0-6.1.4-1.8.6-2 .9-2.4 2.3-.4 1.6-.3 2.2-.1 3.8v.2c.3 2.6-.6 3.6-1.4 4.1-.5.3-1.3.3-2.6.3H18c-1.1 0-2.3-.6-3.7-1.9-2.3-2.1-3.7-4.7-4.7-6.8-1-2.1-3.3-7.7-4-9.9-2.1-6.6-3.2-11.2-3.1-13.7 0-.3-.1-3.5.4-6.3.4-2.6.9-6.5 2.8-11.3 1.8-4.9 3.6-7.7 8.6-13.9 2.8-3.4 6-6.9 9.4-10 3.9-3.6 8.1-6.7 12.1-9.5C49.2 3.2 60.3 2.5 63.2 2.5zm-9 10s-2.4 1-5.4 3.2c-1.8 1.4-3.4 3.3-4.7 5.9-.6 1.1-2.6 5.2-2.3 10.8.2 3.1 1.1 7.1 3.7 11.4 2.4 4 6.2 6.7 9.3 8.1 2 .9 4.9 1.4 7.7 1.4 1.5 0 2.9-.1 4.2-.4 3.5-.8 6.1-2.3 7.3-3.1 1.2-.8 3-2.5 3-2.5s-1.9 1.4-3.3 2c-1.4.7-3.6 1.4-5.2 1.7-.9.2-2.9.6-5.2.6-1.7 0-3.6-.2-5.4-1-4.6-2.1-5.9-3.6-7.3-5.2-1.7-2-3.1-4.2-4.6-7.9-1.6-4-1.9-6.8-1.8-9.9.1-2.9.6-4.3 1.3-5.8.6-1.5 1.9-3.6 3.5-5.2 1.7-2 5.1-4 5.2-4.1zm18.4 19h.2c1.1-.2 1.4-2.6.8-5.3-.6-2.5-1.8-4.5-2.8-4.5h-.2c-1.1.2-1.4 2.6-.8 5.3.5 2.6 1.8 4.5 2.8 4.5zM63.2.5C50.6.5 38.3 8.4 34.8 10.8c-4 2.8-8.3 5.9-12.3 9.6-3.4 3.2-6.7 6.7-9.6 10.3-5.2 6.4-7 9.4-8.9 14.5-1.9 5.1-2.5 9.1-2.9 11.7-.4 2.9-.4 6.1-.4 6.6 0 2.7 1 7.4 3.2 14.3.7 2.3 3 7.9 4.1 10.2 1.1 2.2 2.6 5.1 5.1 7.4 1.8 1.7 3.4 2.4 5 2.4h12.6c1.3 0 2.5 0 3.5-.6 1.1-.6 2.9-2.2 2.4-6.1v-.2c-.2-1.6-.2-1.8.1-3.1.1-.2.1-.4.1-.5.2-.1.5-.2 1-.4s3-.3 5.4-.3h.2c2.9 0 4 .8 5.3 2.3 1 1.3 1.6 3.1 1.9 4.3.1.4.2.7.3 1 .7 2.2 2.6 3.5 5.1 3.5h9.2c2.3 0 4.2-.9 5.7-2.5.9-1 2.2-2.4 2.9-3.4.2-.3.5-.7.8-1.3.1.1.2.3.3.4 1.3 1.8 3.1 2.8 8.3 2.8.4 0 5.8-.8 8.8-2.2 2.6-1.3 5.2-3 7.2-4.9 4-3.7 6.4-8.8 8.5-13.3 2.7-5.6 3.5-11 3.7-13.7.3-3.3-.1-12.2-.9-15v-.1c-2.5-8.3-5.3-15.2-7.8-19.4-4.2-6.8-8.5-11.2-11.3-13.8l-.3-.3C89 9 85 5.3 77.2 2.5l-.2-.1-.3-.1c-1.6-.6-4-1.4-9.2-1.8-1.6.1-3.1 0-4.3 0zm18 78.4c1.9-3.4 3.4-6.4 4.2-9.1.8-2.6 1.3-6.5 1.6-11.5.1-2.4-.3-10.6-.4-11.8.7 0 1.6.3 2.6 1.1 3 2.6 3.8 4.9 4.5 9.7.7 4.6-.4 9.3-1.7 11.8-.2.4-.4.7-.5 1.1-.9 1.8-1.6 3.3-4.4 6.8-1.8 2.3-2.6 2.7-3.2 2.9-.1 0-.2-.1-.4-.3l-.1-.1-.6-.5h-1.6v-.1z" id="Shape" fill="#333333"/></g></g></svg>
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |   max-width: 1280px;
 3 |   margin: 0 auto;
 4 |   padding: 2rem;
 5 |   text-align: center;
 6 | }
 7 | 
 8 | .logo {
 9 |   height: 6em;
10 |   padding: 1.5em;
11 |   will-change: filter;
12 |   transition: filter 300ms;
13 | }
14 | .logo:hover {
15 |   filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 |   filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 | 
21 | @keyframes logo-spin {
22 |   from {
23 |     transform: rotate(0deg);
24 |   }
25 |   to {
26 |     transform: rotate(360deg);
27 |   }
28 | }
29 | 
30 | @media (prefers-reduced-motion: no-preference) {
31 |   a:nth-of-type(2) .logo {
32 |     animation: logo-spin infinite 20s linear;
33 |   }
34 | }
35 | 
36 | .card {
37 |   padding: 2em;
38 | }
39 | 
40 | .read-the-docs {
41 |   color: #888;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 3 | import AppLayout from '@app/AppLayout'
 4 | import AboutPage from '@app/pages/about'
 5 | import DashboardPage from '@app/pages/dashboard'
 6 | 
 7 | const App = () => {
 8 |   return (
 9 |     <Router>
10 |       <Routes>
11 |         <Route path="/" element={<AppLayout />}>
12 |           <Route index element={<DashboardPage />} />
13 |           <Route path="about" element={<AboutPage />} />
14 |         </Route>
15 |       </Routes>
16 |     </Router>
17 |   )
18 | }
19 | 
20 | export default App
21 | 


--------------------------------------------------------------------------------
/src/app/AppLayout.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import GithubCorner from '@common/components/githubCorner'
 3 | import AppUpdate from '@common/components/appUpdate'
 4 | import ThemeSwitcher from '@common/components/themeSwitcher'
 5 | import classnames from 'classnames'
 6 | import { matchPath } from 'react-router'
 7 | import { Link, useLocation, Outlet } from 'react-router-dom'
 8 | 
 9 | import './app-layout.css'
10 | 
11 | const AppLayout = () => {
12 |   const location = useLocation()
13 |   const isActive = (path) => matchPath(path, location.pathname)
14 | 
15 |   return (
16 |     <div className="app">
17 |       <GithubCorner />
18 |       <main className="app__main" role="main">
19 |         <nav className="app__navigation" role="navigation">
20 |           <div
21 |             className={classnames('app__navigation__item', {
22 |               'app__navigation__item--active': isActive('/')
23 |             })}
24 |           >
25 |             {isActive('/') ? (
26 |               <div className="app__navigation__active-item">Home</div>
27 |             ) : (
28 |               <Link className="app__navigation__link" to="/">
29 |                 Home
30 |               </Link>
31 |             )}
32 |           </div>
33 |           <div
34 |             className={classnames('app__navigation__big-item', {
35 |               'app__navigation__item--active': isActive('/about')
36 |             })}
37 |           >
38 |             {isActive('/about') ? (
39 |               <div className="app__navigation__active-item">How it works</div>
40 |             ) : (
41 |               <Link className="app__navigation__link" to="/about">
42 |                 How it works
43 |               </Link>
44 |             )}
45 |           </div>
46 |           <div className="app__navigation__item">
47 |             <ThemeSwitcher className="app__navigation__link" />
48 |           </div>
49 |         </nav>
50 | 
51 |         <AppUpdate />
52 | 
53 |         <Outlet />
54 |       </main>
55 |     </div>
56 |   )
57 | }
58 | 
59 | export default AppLayout
60 | 


--------------------------------------------------------------------------------
/src/app/actions/configurator.js:
--------------------------------------------------------------------------------
1 | import { createAction } from '@reduxjs/toolkit'
2 | 
3 | export const submitConfiguration = createAction('Submit configuration')
4 | 


--------------------------------------------------------------------------------
/src/app/app-layout.css:
--------------------------------------------------------------------------------
  1 | .app {
  2 |   background-color: var(--bgColor);
  3 |   display: flex;
  4 |   flex-flow: row wrap;
  5 |   margin-left: auto;
  6 |   margin-right: auto;
  7 |   max-width: 1140px;
  8 | }
  9 | 
 10 | .app__main {
 11 |   border: 1px solid var(--commentColor);
 12 |   flex-basis: 99.9%;
 13 |   flex-grow: 0;
 14 |   flex-shrink: 0;
 15 |   max-width: 99.9%;
 16 |   width: 99.9%;
 17 | }
 18 | 
 19 | .app__main:nth-child(1n) {
 20 |   margin-left: 0;
 21 |   margin-right: 30px;
 22 | }
 23 | 
 24 | .app__main:last-child {
 25 |   margin-right: 0;
 26 | }
 27 | 
 28 | .app__navigation {
 29 |   display: flex;
 30 |   flex-flow: row wrap;
 31 | }
 32 | 
 33 | .app__navigation__item {
 34 |   display: flex;
 35 |   flex-basis: 24.975%;
 36 |   flex-grow: 0;
 37 |   flex-shrink: 0;
 38 |   height: 2.3rem;
 39 |   max-width: 24.975%;
 40 |   text-align: center;
 41 |   width: 24.975%;
 42 |   align-items: center;
 43 |   justify-content: center;
 44 | }
 45 | 
 46 | .app__navigation__item:nth-child(1n) {
 47 |   margin-left: 0;
 48 |   margin-right: 0;
 49 | }
 50 | 
 51 | .app__navigation__item:last-child {
 52 |   margin-right: 0;
 53 | }
 54 | 
 55 | .app__navigation__item:nth-child(4n) {
 56 |   margin-left: auto;
 57 |   margin-right: 0;
 58 | }
 59 | 
 60 | .app__navigation__item--active {
 61 |   background-color: var(--headsColor);
 62 | }
 63 | 
 64 | .app__navigation__big-item {
 65 |   display: flex;
 66 |   flex-basis: 49.95%;
 67 |   flex-grow: 0;
 68 |   flex-shrink: 0;
 69 |   height: 2.3rem;
 70 |   max-width: 49.95%;
 71 |   text-align: center;
 72 |   width: 49.95%;
 73 |   align-items: center;
 74 |   justify-content: center;
 75 | }
 76 | 
 77 | .app__navigation__big-item:nth-child(1n) {
 78 |   margin-left: 0;
 79 |   margin-right: 0;
 80 | }
 81 | 
 82 | .app__navigation__big-item:last-child {
 83 |   margin-right: 0;
 84 | }
 85 | 
 86 | .app__navigation__big-item:nth-child(4n) {
 87 |   margin-left: auto;
 88 |   margin-right: 0;
 89 | }
 90 | 
 91 | .app__navigation__link {
 92 |   line-height: 2.5;
 93 |   display: inline-block;
 94 |   width: 100%;
 95 | }
 96 | 
 97 | .app__navigation__active-item {
 98 |   line-height: 2.5;
 99 |   display: inline-block;
100 |   width: 100%;
101 | }
102 | 


--------------------------------------------------------------------------------
/src/app/listenerMiddleware.js:
--------------------------------------------------------------------------------
1 | import { createListenerMiddleware } from '@reduxjs/toolkit'
2 | 
3 | export const listenerMiddleware = createListenerMiddleware()
4 | 


--------------------------------------------------------------------------------
/src/app/pages/about/about.css:
--------------------------------------------------------------------------------
 1 | .about-page {
 2 |   padding: 0.5rem;
 3 | }
 4 | 
 5 | .about-page-logo {
 6 |   width: 100%;
 7 |   aspect-ratio: 2/1;
 8 | }
 9 | 
10 | .about-page-list li {
11 |   line-height: 150%;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/app/pages/about/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Logo from './logo.svg'
 3 | 
 4 | import './about.css'
 5 | 
 6 | const AboutPage = () => (
 7 |   <div className="about-page">
 8 |     <img className="about-page-logo" src={Logo} alt="PGTune" />
 9 |     <p>
10 |       <strong>PGTune</strong> calculate configuration for PostgreSQL based on the maximum
11 |       performance for a given hardware configuration. It isn&apos;t a{' '}
12 |       <a href="https://en.wikipedia.org/wiki/No_Silver_Bullet">silver bullet</a> for the
13 |       optimization settings of PostgreSQL. Many settings depend not only on the hardware
14 |       configuration, but also on the size of the database, the number of clients and the complexity
15 |       of queries. An optimal configuration of the database can only be made given all these
16 |       parameters are taken into account.
17 |     </p>
18 |     <h3>Useful links</h3>
19 |     <ul className="about-page-list">
20 |       <li>
21 |         <a href="https://github.com/le0pard/pgtune">Source code</a>
22 |       </li>
23 |       <li>
24 |         <a href="https://twitter.com/leopard_me">My twitter</a>
25 |       </li>
26 |     </ul>
27 |   </div>
28 | )
29 | 
30 | export default AboutPage
31 | 


--------------------------------------------------------------------------------
/src/app/pages/about/logo.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" height="680" viewBox="0 0 1360 680" width="1360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h1360v680h-1360z"/></clipPath><mask id="b" height="680" maskUnits="userSpaceOnUse" width="1360" x="0" y="0"><path d="m1360 0h-1360v680h1360z" fill="#fff"/></mask><mask id="c" height="20" maskUnits="userSpaceOnUse" width="68" x="1054" y="634"><path d="m1112 634h-48c-5.52 0-10 4.477-10 10s4.48 10 10 10h48c5.52 0 10-4.477 10-10s-4.48-10-10-10z" fill="#fff"/></mask><mask id="d" height="518" maskUnits="userSpaceOnUse" width="359" x="754" y="71"><path d="m933.5 71c99.14 0 179.5 80.365 179.5 179.5v199.5c0 76.768-62.23 139-139 139h-81c-76.768 0-139-62.232-139-139v-199.5c0-99.135 80.365-179.5 179.5-179.5z" fill="#fff"/></mask><mask id="e" height="266" maskUnits="userSpaceOnUse" width="239" x="582" y="25"><path d="m582.01 25.7464c40.686 1.2916 73.542 33.6444 75.462 74.3056l1.987 42.09c2.079 44.053 38.42 78.69 82.522 78.653l43.91-.037c19.257-.016 34.881 15.582 34.897 34.839v.029c0 19.025-15.423 34.449-34.449 34.449-.148 0-.297-.001-.446-.003l-68.552-.888c-55.085-.713-100.093-44.189-102.715-99.216l-3.325-69.807c-.684-14.379-12.896-25.4794-27.274-24.7946-.674.0322-1.347.0905-2.017.1748z" fill="#fff"/></mask><mask id="f" height="185" maskUnits="userSpaceOnUse" width="127" x="783" y="493"><path d="m793 493h107c5.523 0 10 4.477 10 10v111.5c0 35.07-28.43 63.5-63.5 63.5s-63.5-28.43-63.5-63.5v-111.5c0-5.523 4.477-10 10-10z" fill="#fff"/></mask><mask id="g" height="195" maskUnits="userSpaceOnUse" width="187" x="608" y="463"><path d="m708.974 466.252 81.967 68.778c4.231 3.55 4.783 9.858 1.233 14.088l-71.671 85.414c-22.543 26.866-62.596 30.37-89.461 7.827-26.865-22.542-30.369-62.595-7.827-89.461l71.671-85.414c3.55-4.23 9.858-4.782 14.088-1.232z" fill="#fff"/></mask><mask id="h" height="101" maskUnits="userSpaceOnUse" width="218" x="841" y="354"><path d="m960.794 358.671 77.566 27.077c12.04 4.205 20.11 15.567 20.11 28.324v10.737c0 16.569-13.43 30-30 30h-186.871l34.67-63.567c16.406-30.081 52.176-43.864 84.525-32.571z" fill="#fff"/></mask><g clip-path="url(#a)"><g mask="url(#b)"><path d="m1360 0h-1360v680h1360z" fill="#5bbba9"/><path clip-rule="evenodd" d="m0 530h920v110c0 22.091-17.909 40-40 40h-880z" fill="#fdb148" fill-rule="evenodd"/><path clip-rule="evenodd" d="m440 258h920v232c0 22.091-17.91 40-40 40h-840c-22.091 0-40-17.909-40-40z" fill="#ff615e" fill-rule="evenodd"/><path clip-rule="evenodd" d="m440 408h920v272h-880c-22.091 0-40-17.909-40-40z" fill="#399ce7" fill-rule="evenodd"/><path clip-rule="evenodd" d="m0 231h920v260c0 22.091-17.909 40-40 40h-880z" fill="#399ce7" fill-rule="evenodd"/><path d="m1180 152h-885v570h885z" fill="#2e3139"/><path d="m295 152h-113v570h113z" fill="#353a44"/><path d="m294 225h-112v17h112z" fill="#444c5b"/><path d="m295 131h-113v21h113z" fill="#444c5b"/><path clip-rule="evenodd" d="m197 96h976c3.87 0 7 3.134 7 7v28h-998v-20c0-8.284 6.716-15 15-15z" fill="#e1e4e6" fill-rule="evenodd"/><path d="m203.5 121c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z" fill="#ff615e"/><path d="m223.5 121c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z" fill="#fdb148"/><path d="m243.5 121c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z" fill="#00c6b8"/><path d="m382 131h-87v21h87z" fill="#2e3139"/><path d="m1180 131h-725v21h725z" fill="#2e3139"/><path d="m454 131h-75v21h75z" fill="#3a3f4b"/><path d="m329 197h-1v351h1z" fill="#364b59"/><path d="m343 281h-1v256h1z" fill="#364b59"/><path d="m356 405h-1v30h1z" fill="#364b59"/><path d="m370 413h-1v13h1z" fill="#364b59"/><path d="m370 491h-1v23h1z" fill="#364b59"/><path d="m356 482h-1v42h1z" fill="#364b59"/><path d="m380.5 163h-51c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h51c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m435.5 140h-40c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h40c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m242.5 140h-40c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h40c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m355.5 140h-40c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h40c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m505.5 140h-40c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h40c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m515 140h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m445 140h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m365 140h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m194 140h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m194 163h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><g fill="#d8d8d8"><path d="m312 163h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 174h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 185h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 196h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 207h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 218h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 229h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 240h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 251h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 263h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 274h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 285h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 296h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 307h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 318h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 329h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 340h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 351h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 363h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 374h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 385h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 396h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 407h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 418h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 429h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 440h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 451h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 463h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 474h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 485h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 496h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 507h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 518h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 529h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 540h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 551h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 561h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 572h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 583h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 594h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 605h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 616h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 627h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 638h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 649h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/><path d="m312 660h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"/></g><path d="m209 163h-6.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h6.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m194 203h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m209 203h-6.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h6.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m194 263h-1.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h1.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m217 263h-14.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h14.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m254 174h-46.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h46.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m242 217h-34.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h34.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m242 245h-34.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h34.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m225 277h-17.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h17.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m237 290h-29.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h29.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m242 231h-34.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h34.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m228 187h-20.5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h20.5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#5a7485"/><path d="m462.5 262h-91c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h91c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m482.5 318h-109c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h109c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m396.5 329h-23c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h23c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m430.5 340h-54c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h54c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m481.5 351h-92c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h92c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m475.5 362h-67c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h67c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m453.5 395h-72c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h72c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m425.5 296h-22c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h22c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m430.5 307h-20c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h20c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m510.5 296h-53c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h53c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m514.5 307h-53c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h53c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m341.5 174h-12c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h12c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m341.5 185h-12c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h12c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m355.5 196h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m355.5 218h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m442.5 218h-22c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h22c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m394.5 196h-29c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h29c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m478.5 196h-23c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h23c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m360.5 174h-9c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h9c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m374.5 218h-9c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h9c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m355.5 240h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m364.5 318h-8c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h8c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m364.5 329h-8c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h8c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m367.5 340h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m367.5 351h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m381.5 406h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m361.5 539h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m347.5 550h-11c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h11c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m372.5 484h-2c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h2c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m372.5 395h-16c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h16c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ad80a3"/><path d="m379.5 351h-3c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h3c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m405.5 329h-2c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h2c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m438.5 329h-23c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h23c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m361.5 262h-17c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h17c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m361.5 273h-17c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h17c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m489.5 262h-17c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h17c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m374.5 240h-9c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h9c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m392.5 296h-36c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h36c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m400.5 307h-44c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h44c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m400.5 362h-44c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h44c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m405.5 406h-15c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h15c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m397.5 417h-15c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h15c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m373 430.5c0-1.381-1.119-2.5-2.5-2.5s-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5 2.5-1.119 2.5-2.5z" fill="#d8d8d8"/><path d="m358 441.5c0-1.381-1.119-2.5-2.5-2.5s-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5 2.5-1.119 2.5-2.5z" fill="#d8d8d8"/><path d="m373 519.5c0-1.381-1.119-2.5-2.5-2.5s-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5 2.5-1.119 2.5-2.5z" fill="#d8d8d8"/><path d="m358 530.5c0-1.381-1.119-2.5-2.5-2.5s-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5 2.5-1.119 2.5-2.5z" fill="#d8d8d8"/><path d="m454.5 417h-31c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h31c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ad80a3"/><path d="m414.5 417h-8c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h8c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m442.5 406h-28c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h28c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m394.5 484h-14c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h14c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m442.5 495h-9c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h9c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m483.5 495h-31c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h31c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ad80a3"/><path d="m461.5 484h-58c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h58c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m521.5 362h-37c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h37c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ad80a3"/><path d="m448.5 296h-13c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h13c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m451.5 307h-10c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h10c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m473.5 395h-10c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h10c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m375.5 174h-5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m446.5 196h-43c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h43c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m439.5 240h-55c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h55c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m410.5 218h-26c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h26c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m511.5 218h-59c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h59c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m471.5 240h-22c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h22c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m521.5 240h-40c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h40c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m340.5 572h-8c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h8c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m345.5 639h-13c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h13c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m340.5 605h-8c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h8c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m362.5 572h-13c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h13c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m361.5 583h-29c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h29c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m459.5 572h-88c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h88c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m374.5 583h-5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m372.5 639h-17c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h17c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m382.5 639h-3c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h3c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m363.5 651h-31c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h31c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m374.5 651h-3c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h3c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m405.5 651h-20c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h20c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m440.5 651h-26c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h26c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m417.5 639h-23c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h23c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m428.5 639h-3c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h3c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m468.5 639h-28c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h28c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m479.5 639h-3c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h3c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m527.5 639h-37c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h37c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m539.5 639h-3c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h3c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m412.5 583h-29c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h29c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m425.5 583h-5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m463.5 583h-29c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h29c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m476.5 583h-5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m528.5 583h-43c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h43c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m542.5 583h-5c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h5c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m490.5 572h-22c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h22c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m526.5 572h-27c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h27c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m543.5 296h-24c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h24c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m547.5 307h-24c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h24c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m387.5 207h-43c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h43c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m517.5 229h-173c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h173c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#399ce7"/><path d="m500.5 251h-156c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h156c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#399ce7"/><path d="m481.5 285h-125c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h125c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#399ce7"/><path d="m501.5 384h-145c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h145c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#399ce7"/><path d="m453.5 473h-72c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h72c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m424.5 495h-40c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h40c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m446.5 506h-17c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h17c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m485.5 506h-29c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h29c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ad80a3"/><path d="m420.5 506h-36c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h36c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#d8d8d8"/><path d="m372.5 473h-16c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h16c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ad80a3"/><path d="m473.5 473h-10c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h10c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#fdb148"/><path d="m501.5 462h-145c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h145c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#399ce7"/><path d="m450.5 627h-119c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h119c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#399ce7"/><path d="m518.5 196h-31c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h31c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#07c4a0"/><path d="m447.5 329h-2c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h2c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><path d="m439.5 340h-2c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5h2c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z" fill="#ff615e"/><g fill="#fff" opacity=".60235604546"><path d="m29.908 456h-33.70115c-1.65686 0-3 1.343-3 3v3.023c0 1.657 1.34314 3 3 3h33.70115c1.6568 0 3-1.343 3-3v-3.023c0-1.657-1.3432-3-3-3z" opacity=".776116"/><path d="m66 479.46h-95.0575c-1.6568 0-3 1.343-3 3v3.023c0 1.657 1.3432 3 3 3h95.0575c1.6568 0 3-1.343 3-3v-3.023c0-1.657-1.3432-3-3-3z" opacity=".776116"/><path d="m38.931 520.966h-95.0575c-1.6568 0-3 1.343-3 3v3.023c0 1.656 1.3432 3 3 3h95.0575c1.6569 0 3-1.344 3-3v-3.023c0-1.657-1.3431-3-3-3z" opacity=".478069"/><path d="m65.9999 566.08h-86.0344c-1.6569 0-3 1.344-3 3v3.023c0 1.657 1.3431 3 3 3h86.0344c1.6569 0 3-1.343 3-3v-3.023c0-1.656-1.3431-3-3-3z" opacity=".776116"/><path d="m66 456h-22.8736c-1.6569 0-3 1.343-3 3v3.023c0 1.657 1.3431 3 3 3h22.8736c1.6568 0 3-1.343 3-3v-3.023c0-1.657-1.3432-3-3-3z" opacity=".478069"/><path d="m11.862 542.621h-60.7701c-1.6568 0-3 1.343-3 3v3.023c0 1.657 1.3432 3 3 3h60.7701c1.6569 0 3-1.343 3-3v-3.023c0-1.657-1.3431-3-3-3z" opacity=".478069"/><path d="m-.770119 499.31h-22.873581c-1.6568 0-3 1.343-3 3v3.023c0 1.657 1.3432 3 3 3h22.873581c1.656855 0 2.999999-1.343 2.999999-3v-3.023c0-1.657-1.343144-3-2.999999-3z" opacity=".776116"/><path d="m40.7356 499.31h-30.0919c-1.65688 0-3.00002 1.343-3.00002 3v3.023c0 1.657 1.34314 3 3.00002 3h30.0919c1.6569 0 3-1.343 3-3v-3.023c0-1.657-1.3431-3-3-3z" opacity=".776116"/><path d="m24.4942 589.54h-28.28735c-1.65686 0-3 1.343-3 3v3.023c0 1.657 1.34314 3 3 3h28.28735c1.6569 0 3-1.343 3-3v-3.023c0-1.657-1.3431-3-3-3z" opacity=".776116"/><path d="m66 589.54h-30.092c-1.6568 0-3 1.343-3 3v3.023c0 1.657 1.3432 3 3 3h30.092c1.6568 0 3-1.343 3-3v-3.023c0-1.657-1.3432-3-3-3z" opacity=".465346"/></g><g fill="#fff" opacity=".60235604546"><path d="m146.908 40h-33.701c-1.657 0-3 1.3431-3 3v3.023c0 1.6568 1.343 3 3 3h33.701c1.657 0 3-1.3432 3-3v-3.023c0-1.6569-1.343-3-3-3z" opacity=".776116"/><path d="m183 63.4598h-95.0575c-1.6568 0-3 1.3431-3 3v3.023c0 1.6568 1.3432 3 3 3h95.0575c1.657 0 3-1.3432 3-3v-3.023c0-1.6569-1.343-3-3-3z" opacity=".776116"/><path d="m155.931 104.966h-95.0575c-1.6568 0-3 1.343-3 3v3.023c0 1.656 1.3432 3 3 3h95.0575c1.657 0 3-1.344 3-3v-3.023c0-1.657-1.343-3-3-3z" opacity=".478069"/><path d="m183 150.08h-86.0345c-1.6568 0-3 1.344-3 3v3.023c0 1.657 1.3432 3 3 3h86.0345c1.657 0 3-1.343 3-3v-3.023c0-1.656-1.343-3-3-3z" opacity=".776116"/><path d="m183 40h-22.874c-1.656 0-3 1.3431-3 3v3.023c0 1.6568 1.344 3 3 3h22.874c1.657 0 3-1.3432 3-3v-3.023c0-1.6569-1.343-3-3-3z" opacity=".478069"/><path d="m80.1379 83.3103h-33.7011c-1.6569 0-3 1.3432-3 3v3.023c0 1.6569 1.3431 3 3 3h33.7011c1.6569 0 3-1.3431 3-3v-3.023c0-1.6568-1.3431-3-3-3z" opacity=".478069"/><path d="m56.6782 126.621h-24.6782c-1.6569 0-3 1.343-3 3v3.023c0 1.657 1.3431 3 3 3h24.6782c1.6568 0 3-1.343 3-3v-3.023c0-1.657-1.3432-3-3-3z" opacity=".776116"/><path d="m128.862 126.621h-60.77c-1.6569 0-3 1.343-3 3v3.023c0 1.657 1.3431 3 3 3h60.77c1.657 0 3-1.343 3-3v-3.023c0-1.657-1.343-3-3-3z" opacity=".478069"/><path d="m116.23 83.3103h-22.8737c-1.6568 0-3 1.3432-3 3v3.023c0 1.6569 1.3432 3 3 3h22.8737c1.657 0 3-1.3431 3-3v-3.023c0-1.6568-1.343-3-3-3z" opacity=".776116"/><path d="m157.736 83.3103h-30.092c-1.657 0-3 1.3432-3 3v3.023c0 1.6569 1.343 3 3 3h30.092c1.656 0 3-1.3431 3-3v-3.023c0-1.6568-1.344-3-3-3z" opacity=".776116"/><path d="m141.494 173.54h-28.287c-1.657 0-3 1.343-3 3v3.023c0 1.657 1.343 3 3 3h28.287c1.657 0 3-1.343 3-3v-3.023c0-1.657-1.343-3-3-3z" opacity=".776116"/><path d="m183 173.54h-30.092c-1.657 0-3 1.343-3 3v3.023c0 1.657 1.343 3 3 3h30.092c1.657 0 3-1.343 3-3v-3.023c0-1.657-1.343-3-3-3z" opacity=".465346"/></g><g fill="#353a44" opacity=".60235604546"><path d="m1331.09 656h33.7c1.66 0 3-1.343 3-3v-3.023c0-1.657-1.34-3-3-3h-33.7c-1.65 0-3 1.343-3 3v3.023c0 1.657 1.35 3 3 3z" opacity=".776116"/><path d="m1295 632.54h95.06c1.65 0 3-1.343 3-3v-3.023c0-1.657-1.35-3-3-3h-95.06c-1.66 0-3 1.343-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".776116"/><path d="m1322.07 591.034h95.06c1.65 0 3-1.343 3-3v-3.023c0-1.656-1.35-3-3-3h-95.06c-1.66 0-3 1.344-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".478069"/><path d="m1295 545.92h86.03c1.66 0 3-1.344 3-3v-3.023c0-1.657-1.34-3-3-3h-86.03c-1.66 0-3 1.343-3 3v3.023c0 1.656 1.34 3 3 3z" opacity=".776116"/><path d="m1295 656h22.87c1.66 0 3-1.343 3-3v-3.023c0-1.657-1.34-3-3-3h-22.87c-1.66 0-3 1.343-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".478069"/><path d="m1349.14 569.379h60.77c1.65 0 3-1.343 3-3v-3.023c0-1.657-1.35-3-3-3h-60.77c-1.66 0-3 1.343-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".478069"/><path d="m1361.77 612.69h22.87c1.66 0 3-1.343 3-3v-3.023c0-1.657-1.34-3-3-3h-22.87c-1.66 0-3 1.343-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".776116"/><path d="m1320.26 612.69h30.1c1.65 0 3-1.343 3-3v-3.023c0-1.657-1.35-3-3-3h-30.1c-1.65 0-3 1.343-3 3v3.023c0 1.657 1.35 3 3 3z" opacity=".776116"/><path d="m1336.51 522.46h28.28c1.66 0 3-1.343 3-3v-3.023c0-1.657-1.34-3-3-3h-28.28c-1.66 0-3 1.343-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".776116"/><path d="m1295 522.46h30.09c1.66 0 3-1.343 3-3v-3.023c0-1.657-1.34-3-3-3h-30.09c-1.66 0-3 1.343-3 3v3.023c0 1.657 1.34 3 3 3z" opacity=".465346"/></g><g fill="#fff" opacity=".60235604546"><path d="m1339.91 296h-33.7c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h33.7c1.65 0 3 1.343 3 3v3.023c0 1.657-1.35 3-3 3z" opacity=".776116"/><path d="m1376 272.54h-95.06c-1.65 0-3-1.343-3-3v-3.023c0-1.657 1.35-3 3-3h95.06c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".776116"/><path d="m1348.93 231.034h-95.06c-1.65 0-3-1.343-3-3v-3.023c0-1.656 1.35-3 3-3h95.06c1.66 0 3 1.344 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".478069"/><path d="m1376 185.92h-86.03c-1.66 0-3-1.344-3-3v-3.023c0-1.657 1.34-3 3-3h86.03c1.66 0 3 1.343 3 3v3.023c0 1.656-1.34 3-3 3z" opacity=".776116"/><path d="m1376 296h-22.87c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h22.87c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".478069"/><path d="m1273.14 252.69h-33.7c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h33.7c1.65 0 3 1.343 3 3v3.023c0 1.657-1.35 3-3 3z" opacity=".478069"/><path d="m1249.68 209.379h-24.68c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h24.68c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".776116"/><path d="m1321.86 209.379h-60.77c-1.65 0-3-1.343-3-3v-3.023c0-1.657 1.35-3 3-3h60.77c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".478069"/><path d="m1309.23 252.69h-22.87c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h22.87c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".776116"/><path d="m1350.74 252.69h-30.1c-1.65 0-3-1.343-3-3v-3.023c0-1.657 1.35-3 3-3h30.1c1.65 0 3 1.343 3 3v3.023c0 1.657-1.35 3-3 3z" opacity=".776116"/><path d="m1334.49 162.46h-28.28c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h28.28c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".776116"/><path d="m1376 162.46h-30.09c-1.66 0-3-1.343-3-3v-3.023c0-1.657 1.34-3 3-3h30.09c1.66 0 3 1.343 3 3v3.023c0 1.657-1.34 3-3 3z" opacity=".465346"/></g></g><path clip-rule="evenodd" d="m1138.95 427.112h-193.207c-5.678 0-10.643 3.827-12.088 9.319l-31.899 121.207c-1.757 6.676 2.231 13.513 8.907 15.27 1.038.273 2.107.411 3.181.411h193.216c5.67 0 10.64-3.827 12.08-9.318l31.9-121.208c1.76-6.676-2.23-13.512-8.9-15.269-1.04-.274-2.11-.412-3.19-.412z" fill="#fdb148" fill-rule="evenodd"/><g mask="url(#c)"><path d="m1102.02 665.899-8.34-47.271c-.96-5.439-6.15-9.07-11.58-8.111-5.44.959-9.07 6.145-8.12 11.584l8.34 47.271c.96 5.439 6.15 9.07 11.58 8.111 5.44-.959 9.07-6.145 8.12-11.584z" fill="#ff615e"/><path d="m1114.02 693.899-8.34-47.271c-.96-5.439-6.15-9.07-11.58-8.111-5.44.959-9.07 6.145-8.12 11.584l8.34 47.271c.96 5.439 6.15 9.07 11.58 8.111 5.44-.959 9.07-6.145 8.12-11.584z" fill="#fdb148"/></g><path d="m1062.02 665.899-8.34-47.271c-.96-5.439-6.15-9.071-11.58-8.111-5.44.959-9.07 6.145-8.12 11.584l8.34 47.271c.96 5.439 6.15 9.07 11.58 8.111 5.44-.959 9.07-6.145 8.12-11.584z" fill="#ff615e"/><path d="m963.984 665.899 8.335-47.271c.96-5.439 6.146-9.071 11.585-8.111 5.439.959 9.071 6.145 8.112 11.584l-8.335 47.271c-.96 5.439-6.146 9.07-11.585 8.111s-9.071-6.145-8.112-11.584z" fill="#ff615e" opacity=".598549"/><path d="m923.984 665.899 8.335-47.271c.96-5.439 6.146-9.071 11.585-8.111 5.439.959 9.071 6.145 8.112 11.584l-8.335 47.271c-.96 5.439-6.146 9.07-11.585 8.111s-9.071-6.145-8.112-11.584z" fill="#ff615e" opacity=".598549"/><path d="m1100 578h-183c-7.732 0-14 6.268-14 14s6.268 14 14 14h183c7.73 0 14-6.268 14-14s-6.27-14-14-14z" fill="#ff615e"/><path d="m1010 578h-183c-7.732 0-14 6.268-14 14s6.268 14 14 14h183c7.73 0 14-6.268 14-14s-6.27-14-14-14z" fill="#ab4d4e"/><path clip-rule="evenodd" d="m731 182h116c11.046 0 20 8.954 20 20v57.5c0 42.802-34.698 77.5-77.5 77.5h-1c-42.802 0-77.5-34.698-77.5-77.5v-57.5c0-11.046 8.954-20 20-20z" fill="#4a82c2" fill-rule="evenodd"/><g mask="url(#d)"><path d="m933.5 71c99.14 0 179.5 80.365 179.5 179.5v199.5c0 76.768-62.23 139-139 139h-81c-76.768 0-139-62.232-139-139v-199.5c0-99.135 80.365-179.5 179.5-179.5z" fill="#255ea0"/><g clip-rule="evenodd" fill="#164881" fill-rule="evenodd"><path d="m904.373 675.572 81.967-68.778c4.23-3.55 4.782-9.858 1.232-14.088l-71.671-85.414c-22.542-26.866-62.595-30.37-89.461-7.827-26.865 22.542-30.369 62.595-7.826 89.461l71.67 85.414c3.55 4.23 9.858 4.782 14.089 1.232z"/><path d="m1060.4 193.201 117.53 58.288c4.95 2.454 6.97 8.454 4.52 13.402-.35.711-.79 1.377-1.3 1.985l-57.07 68.015c-29.64 35.327-82.31 39.935-117.64 10.292l-6.17-5.174c-27.835-23.36-31.467-64.867-8.106-92.708 1.924-2.292 4.001-4.45 6.218-6.46l50.858-46.091c3.05-2.762 7.47-3.376 11.16-1.549z"/><path d="m965.794 367.671 77.566 27.077c12.04 4.205 20.11 15.567 20.11 28.324v10.737c0 16.569-13.43 30-30 30h-186.871l34.67-63.567c16.406-30.081 52.176-43.864 84.525-32.571z"/></g></g><g mask="url(#e)"><path d="m582.01 25.7464c40.686 1.2916 73.542 33.6444 75.462 74.3056l1.987 42.09c2.079 44.053 38.42 78.69 82.522 78.653l43.91-.037c19.257-.016 34.881 15.582 34.897 34.839v.029c0 19.025-15.423 34.449-34.449 34.449-.148 0-.297-.001-.446-.003l-68.552-.888c-55.085-.713-100.093-44.189-102.715-99.216l-3.325-69.807c-.684-14.379-12.896-25.4794-27.274-24.7946-.674.0322-1.347.0905-2.017.1748z" fill="#255ea0"/><path clip-rule="evenodd" d="m552.01 75.7464c40.686 1.2916 73.542 33.6446 75.462 74.3056l1.987 42.09c2.079 44.053 38.42 78.69 82.522 78.653l43.91-.037c19.257-.016 34.881 15.582 34.897 34.839v.029c0 19.025-15.423 34.449-34.449 34.449-.148 0-.297-.001-.446-.003l-68.552-.888c-55.085-.713-100.093-44.189-102.715-99.216l-3.325-69.807c-.684-14.379-12.896-25.479-27.274-24.795-.674.033-1.347.091-2.017.175z" fill="#204d88" fill-rule="evenodd"/></g><path clip-rule="evenodd" d="m1032.37 124.695c22.75-14.012 29.63-38.8671 29.63-49.695-7.8 7.6289-13.96 18.4813-32.86 18.4813-18.89 0-37.14-10.8279-37.14 0 0 10.8277 17.63 45.2247 40.37 31.2137z" fill="#255ea0" fill-rule="evenodd"/><path clip-rule="evenodd" d="m1048.71 577.422c26.64 2.033 46.82-14.028 53.18-22.788-10.79 1.586-22.15 6.746-37.44-4.361-15.29-11.106-23.69-30.593-30.05-21.833-6.37 8.76-12.32 46.949 14.31 48.982z" fill="#255ea0" fill-rule="evenodd"/><path clip-rule="evenodd" d="m1017.49 104.445c15.74-9.4298 20.51-26.1577 20.51-33.445-5.4 5.1343-9.66 12.4381-22.74 12.4381s-19.586-2.7173-28.362-4.4469c-8.776-1.7297 14.852 34.8838 30.592 25.4538z" fill="#255ea0" fill-rule="evenodd"/><path d="m885.5 225c10.77 0 19.5-8.954 19.5-20s-8.73-20-19.5-20-19.5 8.954-19.5 20 8.73 20 19.5 20z" fill="#fff"/><path d="m880.5 222c4.142 0 7.5-3.582 7.5-8s-3.358-8-7.5-8-7.5 3.582-7.5 8 3.358 8 7.5 8z" fill="#004879"/><path d="m821.5 225c10.77 0 19.5-8.954 19.5-20s-8.73-20-19.5-20-19.5 8.954-19.5 20 8.73 20 19.5 20z" fill="#fff"/><path d="m815.5 222c4.142 0 7.5-3.582 7.5-8s-3.358-8-7.5-8-7.5 3.582-7.5 8 3.358 8 7.5 8z" fill="#004879"/><path clip-rule="evenodd" d="m878.172 252.425c10.889 0 19.716-8.928 19.716-19.941-16.024 0-21.425 0-39.431 0 0 11.013 8.827 19.941 19.715 19.941z" fill="#4f9ad3" fill-rule="evenodd"/><path clip-rule="evenodd" d="m812.454 252.425c10.888 0 19.715-8.928 19.715-19.941-16.024 0-21.425 0-39.431 0 0 11.013 8.827 19.941 19.716 19.941z" fill="#4f9ad3" fill-rule="evenodd"/><path clip-rule="evenodd" d="m869.696 252.425c10.888 0 19.715-8.928 19.715-19.941-16.024 0-21.425 0-39.431 0 0 11.013 8.827 19.941 19.716 19.941z" fill="#6dc6f9" fill-rule="evenodd"/><path clip-rule="evenodd" d="m803.977 252.425c10.889 0 19.716-8.928 19.716-19.941-16.025 0-21.425 0-39.432 0 0 11.013 8.827 19.941 19.716 19.941z" fill="#6dc6f9" fill-rule="evenodd"/><path d="m854.29 233.038c-2.508-4.778-7.518-8.038-13.29-8.038-5.585 0-10.458 3.053-13.04 7.581" stroke="#2e3139" stroke-linecap="round" stroke-width="8"/><path d="m843.174 183.646-37.489-10.75c-3.716-1.065-7.593 1.083-8.658 4.8-1.066 3.716 1.083 7.592 4.799 8.658l37.489 10.75c3.716 1.065 7.593-1.083 8.658-4.8 1.066-3.716-1.083-7.592-4.799-8.658z" fill="#2e3139"/><path d="m905.218 162.092-36.648-13.339c-3.633-1.322-7.65.551-8.972 4.183-1.322 3.633.551 7.65 4.184 8.972l36.648 13.339c3.633 1.322 7.65-.551 8.972-4.183 1.322-3.633-.551-7.65-4.184-8.972z" fill="#2e3139"/><path clip-rule="evenodd" d="m960.808 204.128 131.552-47.883c10.38-3.778 21.86 1.574 25.64 11.953l22.57 62.02c16.25 44.632-6.77 93.983-51.4 110.227l-7.52 2.737c-44.63 16.244-93.978-6.768-110.222-51.4l-22.574-62.02c-3.778-10.379 1.574-21.856 11.954-25.634z" fill="#4a82c2" fill-rule="evenodd"/><path clip-rule="evenodd" d="m605.567 317.112h193.65c6.039 0 11.214 4.317 12.297 10.258l23.921 131.207c1.238 6.792-3.264 13.302-10.056 14.54-.739.135-1.49.202-2.242.202h-193.65c-6.039 0-11.214-4.317-12.297-10.258l-23.92-131.207c-1.239-6.792 3.263-13.301 10.055-14.539.74-.135 1.49-.203 2.242-.203z" fill="#e3e3e3" fill-rule="evenodd"/><path clip-rule="evenodd" d="m594.614 317.112h193.65c6.039 0 11.214 4.317 12.297 10.258l23.921 131.207c1.238 6.792-3.264 13.302-10.056 14.54-.74.135-1.49.202-2.242.202h-193.65c-6.039 0-11.214-4.317-12.297-10.258l-23.921-131.207c-1.238-6.792 3.264-13.301 10.056-14.539.74-.135 1.49-.203 2.242-.203z" fill="#fff" fill-rule="evenodd"/><path d="m917 458h-260c-7.732 0-14 6.268-14 14s6.268 14 14 14h260c7.732 0 14-6.268 14-14s-6.268-14-14-14z" fill="#c1bfbf"/><path d="m840 458h-183c-7.732 0-14 6.268-14 14s6.268 14 14 14h183c7.732 0 14-6.268 14-14s-6.268-14-14-14z" fill="#e3e3e3"/><g mask="url(#f)"><path d="m793 678h107c5.523 0 10-4.477 10-10v-111.5c0-35.07-28.43-63.5-63.5-63.5s-63.5 28.43-63.5 63.5v111.5c0 5.523 4.477 10 10 10z" fill="#4a82c2"/><path d="m831.002 538.393c10.38-3.778 16.957-11.889 14.69-18.117-2.267-6.227-12.519-8.213-22.898-4.436-10.38 3.778-16.956 11.889-14.69 18.117 2.267 6.228 12.519 8.214 22.898 4.436z" fill="#6aa7ed"/><path clip-rule="evenodd" d="m890 698h107c5.52 0 10-4.477 10-10v-111.5c0-35.07-28.43-63.5-63.5-63.5s-63.5 28.43-63.5 63.5v111.5c0 5.523 4.477 10 10 10z" fill="#255ea0" fill-rule="evenodd" opacity=".548605"/></g><path clip-rule="evenodd" d="m788 675.784h25.371c.552 0 1-.447 1-1v-25.194c0-7.559-6.127-13.686-13.686-13.686-7.558 0-13.685 6.127-13.685 13.686v25.194c0 .553.448 1 1 1z" fill="#6dc6f9" fill-rule="evenodd"/><path clip-rule="evenodd" d="m820.845 675.784h25.371c.552 0 1-.447 1-1v-25.194c0-7.559-6.128-13.686-13.686-13.686s-13.685 6.127-13.685 13.686v25.194c0 .553.448 1 1 1z" fill="#6dc6f9" fill-rule="evenodd"/><path clip-rule="evenodd" d="m853.69 675.784h25.37c.553 0 1-.447 1-1v-25.194c0-7.559-6.127-13.686-13.685-13.686s-13.685 6.127-13.685 13.686v25.194c0 .553.447 1 1 1z" fill="#6dc6f9" fill-rule="evenodd"/><g mask="url(#g)"><path d="m590.059 607.97 81.967 68.778c4.23 3.55 10.538 2.998 14.088-1.232l71.671-85.414c22.542-26.865 19.038-66.918-7.827-89.461s-66.918-19.039-89.461 7.827l-71.671 85.414c-3.55 4.23-2.998 10.538 1.233 14.088z" fill="#4a82c2"/><path clip-rule="evenodd" d="m660.059 672.97 81.967 68.778c4.23 3.55 10.538 2.998 14.088-1.232l71.671-85.414c22.542-26.865 19.038-66.918-7.827-89.461s-66.918-19.039-89.461 7.827l-71.671 85.414c-3.55 4.23-2.998 10.538 1.233 14.088z" fill="#356eaf" fill-rule="evenodd"/></g><path d="m711.794 526.393c10.379 3.778 20.631 1.792 22.898-4.436s-4.31-14.339-14.69-18.117c-10.379-3.777-20.631-1.791-22.898 4.436-2.266 6.228 4.31 14.339 14.69 18.117z" fill="#6aa7ed"/><path clip-rule="evenodd" d="m584.588 600.488 19.436 16.308c.423.355 1.053.299 1.408-.124l16.195-19.3c4.859-5.79 4.103-14.422-1.686-19.28-5.79-4.859-14.422-4.104-19.281 1.686l-16.195 19.301c-.355.423-.3 1.054.123 1.409z" fill="#6dc6f9" fill-rule="evenodd"/><path clip-rule="evenodd" d="m609.749 621.6 19.435 16.308c.423.355 1.054.3 1.409-.123l16.195-19.301c4.858-5.79 4.103-14.422-1.687-19.28s-14.422-4.103-19.28 1.687l-16.195 19.3c-.355.423-.3 1.054.123 1.409z" fill="#6dc6f9" fill-rule="evenodd"/><path clip-rule="evenodd" d="m634.91 642.712 19.435 16.308c.423.355 1.054.3 1.409-.123l16.195-19.301c4.858-5.789 4.103-14.422-1.687-19.28s-14.422-4.103-19.281 1.687l-16.195 19.3c-.355.423-.299 1.054.124 1.409z" fill="#6dc6f9" fill-rule="evenodd"/><path d="m582.5 96c19.054 0 34.5-15.67 34.5-35s-15.446-35-34.5-35-34.5 15.67-34.5 35 15.446 35 34.5 35z" fill="#6dc6f9"/><path d="m578 52.5c0-2.4853-2.015-4.5-4.5-4.5s-4.5 2.0147-4.5 4.5v15c0 2.4853 2.015 4.5 4.5 4.5s4.5-2.0147 4.5-4.5z" fill="#0f4a7e"/><path d="m593 52.5c0-2.4853-2.015-4.5-4.5-4.5s-4.5 2.0147-4.5 4.5v15c0 2.4853 2.015 4.5 4.5 4.5s4.5-2.0147 4.5-4.5z" fill="#0f4a7e"/><g mask="url(#h)"><path d="m960.794 358.671 77.566 27.077c12.04 4.205 20.11 15.567 20.11 28.324v10.737c0 16.569-13.43 30-30 30h-186.871l34.67-63.567c16.406-30.081 52.176-43.864 84.525-32.571z" fill="#558ccb"/><g clip-rule="evenodd" fill="#fff" fill-rule="evenodd"><path d="m848.933 455.984 10.432 6.022c.384.222.87.1 1.084-.272l10.306-17.849c1.826-3.162.659-7.254-2.606-9.139-3.265-1.884-7.391-.849-9.217 2.313l-10.305 17.85c-.215.372-.078.853.306 1.075z"/><path d="m870.933 455.984 10.432 6.022c.384.222.87.1 1.084-.272l10.306-17.849c1.826-3.162.659-7.254-2.606-9.139-3.265-1.884-7.391-.849-9.217 2.313l-10.305 17.85c-.215.372-.078.853.306 1.075z"/><path d="m892.933 455.984 10.432 6.022c.384.222.87.1 1.084-.272l10.306-17.849c1.826-3.162.659-7.254-2.606-9.139-3.265-1.884-7.391-.849-9.217 2.313l-10.305 17.85c-.215.372-.078.853.306 1.075z"/></g><path d="m925.002 395.393c10.38-3.778 16.957-11.889 14.69-18.117-2.267-6.227-12.519-8.213-22.898-4.436-10.38 3.778-16.956 11.889-14.69 18.117 2.267 6.228 12.519 8.214 22.898 4.436z" fill="#6aa7ed"/><path d="m958.792 394.695c5.449-1.984 8.795-6.537 7.473-10.17-1.322-3.632-6.812-4.97-12.261-2.986-5.449 1.983-8.795 6.536-7.473 10.169 1.323 3.633 6.812 4.97 12.261 2.987z" fill="#6aa7ed"/></g><g fill="#255ea0"><path d="m647.8 396.3 1.4 8.2h-5.2l-4-23.4h9.9c1.9 0 3.6.3 5.2 1 1.6.6 2.8 1.6 3.8 2.7 1 1.2 1.6 2.5 1.8 4 .4 2.3-.2 4.1-1.7 5.4s-3.7 2-6.7 2h-4.5zm-.6-3.8h4.7c1.4 0 2.4-.3 3-.9s.9-1.5.7-2.6-.7-2.1-1.6-2.8-1.9-1.1-3.2-1.1h-4.8z"/><path d="m686.4 401.6c-.8 1-1.9 1.8-3.6 2.4-1.6.6-3.5.9-5.6.9-2.2 0-4.2-.4-6-1.3s-3.3-2.2-4.5-3.8c-1.2-1.7-2-3.7-2.4-5.9l-.3-1.6c-.4-2.3-.3-4.3.2-6 .6-1.7 1.6-3 3-3.9 1.5-.9 3.3-1.4 5.4-1.4 3 0 5.5.7 7.4 2s3.3 3.2 4 5.8h-5.1c-.5-1.3-1.2-2.3-2.1-2.9s-2-.9-3.4-.9c-1.8 0-3 .6-3.7 1.8s-.9 3.1-.4 5.5l.3 1.5c.4 2.4 1.3 4.3 2.5 5.6s2.8 1.9 4.8 1.9 3.3-.4 4-1.2l-.7-4h-4.8l-.6-3.5h10z"/><path d="m706.8 385.1h-7.8l3.5 19.5h-5.2l-3.5-19.5h-7.7l-.7-3.9h20.7z"/><path d="m722.6 402.8c-1 1.4-2.6 2.1-4.8 2.1-2 0-3.7-.5-4.9-1.6-1.3-1.1-2.1-2.6-2.5-4.7l-2.2-11.4h5l2.1 11.2c.3 1.8 1.4 2.7 3.2 2.7 1.7 0 2.8-.5 3.2-1.6l-2.3-12.3h5.1l3.2 17.4h-4.7z"/><path d="m733 387.2.5 2c1.1-1.6 2.7-2.3 5-2.3 2 0 3.6.5 4.8 1.6s2 2.7 2.4 4.8l2.1 11.2h-5l-2.1-11.1c-.2-1-.5-1.7-1.1-2.1-.5-.4-1.4-.7-2.4-.7-1.4 0-2.4.6-2.9 1.7l2.3 12.2h-5l-3.3-17.4h4.7z"/><path d="m760.3 404.9c-2.8 0-5.2-.8-7.2-2.3-2-1.6-3.3-3.6-3.8-6.2l-.1-.4c-.3-1.7-.3-3.3.2-4.7s1.3-2.4 2.5-3.2c1.2-.7 2.7-1.1 4.4-1.1 2.6 0 4.8.7 6.5 2.2 1.8 1.5 2.9 3.6 3.4 6.4l.4 1.9h-12c.4 1.1 1 2 2 2.7s2.1 1 3.3 1c1.9 0 3.3-.6 4.2-1.9l3 2.6c-.6 1-1.4 1.8-2.6 2.3-1.3.4-2.7.7-4.2.7zm-3.3-14.2c-1 0-1.8.3-2.3.9s-.7 1.5-.7 2.7h7v-.4c-.2-1-.7-1.8-1.4-2.4s-1.6-.8-2.6-.8z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/app/pages/dashboard/dashboard.css:
--------------------------------------------------------------------------------
  1 | .dashboard-page {
  2 |   padding: 0.5rem;
  3 | }
  4 | 
  5 | .dashboard-header-wrapper {
  6 |   display: flex;
  7 |   flex-flow: row wrap;
  8 |   align-items: center;
  9 |   justify-content: center;
 10 | }
 11 | 
 12 | .dashboard-header-logo {
 13 |   display: flex;
 14 |   flex-basis: 24.975%;
 15 |   flex-grow: 0;
 16 |   flex-shrink: 0;
 17 |   max-width: 24.975%;
 18 |   width: 24.975%;
 19 |   align-items: center;
 20 |   justify-content: flex-end;
 21 | }
 22 | 
 23 | .dashboard-header-logo:nth-child(1n) {
 24 |   margin-left: 0;
 25 |   margin-right: 0;
 26 | }
 27 | 
 28 | .dashboard-header-logo:last-child {
 29 |   margin-right: 0;
 30 | }
 31 | 
 32 | .dashboard-header-logo:nth-child(4n) {
 33 |   margin-left: auto;
 34 |   margin-right: 0;
 35 | }
 36 | 
 37 | .dashboard-header-logo__svg {
 38 |   width: 112px;
 39 |   height: 98px;
 40 | }
 41 | 
 42 | .dashboard-header-title {
 43 |   flex-basis: 24.975%;
 44 |   flex-grow: 0;
 45 |   flex-shrink: 0;
 46 |   max-width: 24.975%;
 47 |   text-align: left;
 48 |   width: 24.975%;
 49 | }
 50 | 
 51 | .dashboard-header-title:nth-child(1n) {
 52 |   margin-left: 0;
 53 |   margin-right: 0;
 54 | }
 55 | 
 56 | .dashboard-header-title:last-child {
 57 |   margin-right: 0;
 58 | }
 59 | 
 60 | .dashboard-header-title:nth-child(4n) {
 61 |   margin-left: auto;
 62 |   margin-right: 0;
 63 | }
 64 | 
 65 | .dashboard-header-title__text {
 66 |   margin: 0 0.5rem;
 67 | }
 68 | 
 69 | @media (width <= 640px) {
 70 |   .dashboard-header-logo {
 71 |     flex-basis: 49.95%;
 72 |     flex-grow: 0;
 73 |     flex-shrink: 0;
 74 |     max-width: 49.95%;
 75 |     width: 49.95%;
 76 |   }
 77 | 
 78 |   .dashboard-header-logo:nth-child(1n) {
 79 |     margin-left: 0;
 80 |     margin-right: 0;
 81 |   }
 82 | 
 83 |   .dashboard-header-logo:last-child {
 84 |     margin-right: 0;
 85 |   }
 86 | 
 87 |   .dashboard-header-logo:nth-child(2n) {
 88 |     margin-left: auto;
 89 |     margin-right: 0;
 90 |   }
 91 | 
 92 |   .dashboard-header-title {
 93 |     flex-basis: 49.95%;
 94 |     flex-grow: 0;
 95 |     flex-shrink: 0;
 96 |     max-width: 49.95%;
 97 |     width: 49.95%;
 98 |   }
 99 | 
100 |   .dashboard-header-title:nth-child(1n) {
101 |     margin-left: 0;
102 |     margin-right: 0;
103 |   }
104 | 
105 |   .dashboard-header-title:last-child {
106 |     margin-right: 0;
107 |   }
108 | 
109 |   .dashboard-header-title:nth-child(2n) {
110 |     margin-left: auto;
111 |     margin-right: 0;
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/src/app/pages/dashboard/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Configurator from '@common/components/configurator'
 3 | import pgtuneLogo from './pgtune.svg'
 4 | 
 5 | import './dashboard.css'
 6 | 
 7 | const DashboardPage = () => (
 8 |   <div className="dashboard-page">
 9 |     <div className="dashboard-header-wrapper">
10 |       <div className="dashboard-header-logo">
11 |         <img alt="Pgtune" className="dashboard-header-logo__svg" src={pgtuneLogo} />
12 |       </div>
13 |       <div className="dashboard-header-title">
14 |         <h1 className="dashboard-header-title__text">PGTune</h1>
15 |       </div>
16 |     </div>
17 |     <Configurator />
18 |   </div>
19 | )
20 | 
21 | export default DashboardPage
22 | 


--------------------------------------------------------------------------------
/src/app/pages/dashboard/pgtune.svg:
--------------------------------------------------------------------------------
1 | <svg width="112" height="98" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="pgtune" fill-rule="nonzero"><path d="M25.3 96.8h-7.1c-1.4 0-2.8-.7-4.4-2.2-2.4-2.2-3.9-5-4.9-7.1-1-2.2-3.3-7.8-4-10-2.2-6.7-3.2-11.4-3.2-14 0-.3-.1-3.6.4-6.4.4-2.6 1-6.6 2.8-11.5 1.9-5 3.6-7.9 8.7-14.2 2.8-3.5 6.1-7 9.5-10.2 3.9-3.7 8.2-6.8 12.2-9.6C48.8 2.2 60 1.5 63.1 1.5c1.2 0 2.7.1 4.4.2 5.1.4 7.4 1.2 8.9 1.7l.5.2c7.6 2.7 11.5 6.3 13.6 8.3l.3.3c2.8 2.6 7.1 6.9 11.1 13.6 2.5 4.1 5.3 11 7.7 19.2.7 2.5 1.2 11.2.9 14.7-.2 2.6-1 7.8-3.6 13.3-2.1 4.4-4.5 9.4-8.3 13-1.9 1.8-4.4 3.5-6.9 4.7-2.9 1.4-8.2 2.1-8.4 2.1-4.8 0-6.3-.8-7.4-2.4-.7-.9-.4-1.6-.2-1.9l.5-.8.9-2.1c.5-1.2.9-2.4 1.7-3.6l.1-.2c.7-1 1.4-1.9 2.3-1.9l.1-.2h.9l.3.3s.1.1.2.1c.3.3.7.6 1.1.6h.2c.8-.2 1.7-.6 3.8-3.3 2.8-3.6 3.6-5.2 4.5-7 .2-.4.3-.7.5-1.1 1.4-2.7 2.5-7.6 1.8-12.4-.7-4.9-1.6-7.5-4.8-10.3-1.3-1.1-2.7-1.4-3.5-1.4-.4 0-.6 0-.7.1h-.1v.8c0 .1.6 9.3.4 11.8-.3 5-.8 8.8-1.6 11.3-.9 2.9-2.6 6.1-4.7 9.9-.2.3-.4.7-.6 1.1-.3.5-.6 1.1-.7 1.3-.1.2-2.4 5.1-2.5 5.2v.1c-1.3 2.2-2.1 3.5-2.6 4.1-.7 1-2 2.5-2.8 3.2-1.3 1.4-3 2.2-5 2.2h-9.1c-2.1 0-3.6-1-4.2-2.8l-.3-.9c-.4-1.3-1-3.3-2.1-4.7-1.3-1.7-2.8-2.6-6-2.7h-.2c-2.3 0-5.1.1-5.8.4-1.5.5-1.5.5-1.7 1.6-.4 1.5-.3 1.9-.1 3.5v.2c.4 3.2-.8 4.5-1.9 5.1-.7.4-1.6.4-3 .4h-.7c-1.3.4-3.6.4-5 .4zm17.9-69.7c-.4 1.7-.5 3.5-.4 5.2.1 2.5.8 6.4 3.6 10.9 2.8 4.6 7.1 6.9 8.8 7.7 1 .5 2.3.8 3.7 1-.5-.2-1-.3-1.5-.5-4.7-2.1-6.1-3.7-7.5-5.4l-.1-.1c-2-2.3-3.4-4.7-4.8-8.2-1.7-4.3-2-7.2-1.8-10.3v-.3zm27.6-4.4c-.2.3-.6 1.8-.1 4.1.5 2.2 1.4 3.4 1.8 3.6.3-.4.6-1.8.1-4.1-.5-2.2-1.4-3.4-1.8-3.6z" id="Shape" fill="#859900"/><path d="M63.2 2.5c1.2 0 2.6.1 4.3.2 5 .3 7.2 1.2 8.7 1.7.2.1.4.1.5.2 7.8 2.8 11.6 6.5 13.5 8.4 2.8 2.6 7 6.8 11 13.4 2.5 4.1 5.2 10.8 7.6 19v.1c.7 2.3 1.1 10.9.8 14.2-.2 2.6-1 7.6-3.5 13-2.1 4.3-4.4 9.2-8.1 12.7-1.9 1.7-4.2 3.3-6.7 4.5-2.8 1.3-7.9 2-7.9 2-4.7 0-5.8-.9-6.6-2-.4-.6-.2-.7-.2-.7l.5-.9c.9-2 1.4-3.8 2.5-5.6.3-.4 1.1-1.6 1.6-1.6h.3c.4 0 .3-.2.3-.2l.2.2c.5.4 1.1.8 1.7.8h.4c1.2-.3 2.3-1 4.4-3.6 2.9-3.7 3.7-5.3 4.6-7.2.2-.3.3-.7.5-1.1 1.4-2.9 2.6-8 1.9-13-.7-5-1.7-8-5.1-10.9-1.6-1.3-3.1-1.6-4.2-1.6-.6 0-1 .1-1.1.1-.1 0-.1.1-.2.1-.2.1-.3.2-.3.3-.1.2-.2.5-.2 1.5.1 1.8.5 9.6.4 11.7-.3 4.9-.8 8.6-1.5 11.1-.8 2.7-2.3 5.6-4.6 9.7-.3.5-1 1.9-1.3 2.4l-2.5 5.3c-1.2 1.9-2.1 3.4-2.5 4.1-.8 1.2-2.6 3.1-2.7 3.2-.4.4-1.7 1.8-4.3 1.8h-9.2c-1.6 0-2.7-.8-3.2-2.1l-.3-.9c-.4-1.4-1-3.4-2.3-5-1.5-1.8-3.2-3-6.8-3h-.2c-1.2 0-5 0-6.1.4-1.8.6-2 .9-2.4 2.3-.4 1.6-.3 2.2-.1 3.8v.2c.3 2.6-.6 3.6-1.4 4.1-.5.3-1.3.3-2.6.3H18c-1.1 0-2.3-.6-3.7-1.9-2.3-2.1-3.7-4.7-4.7-6.8-1-2.1-3.3-7.7-4-9.9-2.1-6.6-3.2-11.2-3.1-13.7 0-.3-.1-3.5.4-6.3.4-2.6.9-6.5 2.8-11.3 1.8-4.9 3.6-7.7 8.6-13.9 2.8-3.4 6-6.9 9.4-10 3.9-3.6 8.1-6.7 12.1-9.5C49.2 3.2 60.3 2.5 63.2 2.5zm-9 10s-2.4 1-5.4 3.2c-1.8 1.4-3.4 3.3-4.7 5.9-.6 1.1-2.6 5.2-2.3 10.8.2 3.1 1.1 7.1 3.7 11.4 2.4 4 6.2 6.7 9.3 8.1 2 .9 4.9 1.4 7.7 1.4 1.5 0 2.9-.1 4.2-.4 3.5-.8 6.1-2.3 7.3-3.1 1.2-.8 3-2.5 3-2.5s-1.9 1.4-3.3 2c-1.4.7-3.6 1.4-5.2 1.7-.9.2-2.9.6-5.2.6-1.7 0-3.6-.2-5.4-1-4.6-2.1-5.9-3.6-7.3-5.2-1.7-2-3.1-4.2-4.6-7.9-1.6-4-1.9-6.8-1.8-9.9.1-2.9.6-4.3 1.3-5.8.6-1.5 1.9-3.6 3.5-5.2 1.7-2 5.1-4 5.2-4.1zm18.4 19h.2c1.1-.2 1.4-2.6.8-5.3-.6-2.5-1.8-4.5-2.8-4.5h-.2c-1.1.2-1.4 2.6-.8 5.3.5 2.6 1.8 4.5 2.8 4.5zM63.2.5C50.6.5 38.3 8.4 34.8 10.8c-4 2.8-8.3 5.9-12.3 9.6-3.4 3.2-6.7 6.7-9.6 10.3-5.2 6.4-7 9.4-8.9 14.5-1.9 5.1-2.5 9.1-2.9 11.7-.4 2.9-.4 6.1-.4 6.6 0 2.7 1 7.4 3.2 14.3.7 2.3 3 7.9 4.1 10.2 1.1 2.2 2.6 5.1 5.1 7.4 1.8 1.7 3.4 2.4 5 2.4h12.6c1.3 0 2.5 0 3.5-.6 1.1-.6 2.9-2.2 2.4-6.1v-.2c-.2-1.6-.2-1.8.1-3.1.1-.2.1-.4.1-.5.2-.1.5-.2 1-.4s3-.3 5.4-.3h.2c2.9 0 4 .8 5.3 2.3 1 1.3 1.6 3.1 1.9 4.3.1.4.2.7.3 1 .7 2.2 2.6 3.5 5.1 3.5h9.2c2.3 0 4.2-.9 5.7-2.5.9-1 2.2-2.4 2.9-3.4.2-.3.5-.7.8-1.3.1.1.2.3.3.4 1.3 1.8 3.1 2.8 8.3 2.8.4 0 5.8-.8 8.8-2.2 2.6-1.3 5.2-3 7.2-4.9 4-3.7 6.4-8.8 8.5-13.3 2.7-5.6 3.5-11 3.7-13.7.3-3.3-.1-12.2-.9-15v-.1c-2.5-8.3-5.3-15.2-7.8-19.4-4.2-6.8-8.5-11.2-11.3-13.8l-.3-.3C89 9 85 5.3 77.2 2.5l-.2-.1-.3-.1c-1.6-.6-4-1.4-9.2-1.8-1.6.1-3.1 0-4.3 0zm18 78.4c1.9-3.4 3.4-6.4 4.2-9.1.8-2.6 1.3-6.5 1.6-11.5.1-2.4-.3-10.6-.4-11.8.7 0 1.6.3 2.6 1.1 3 2.6 3.8 4.9 4.5 9.7.7 4.6-.4 9.3-1.7 11.8-.2.4-.4.7-.5 1.1-.9 1.8-1.6 3.3-4.4 6.8-1.8 2.3-2.6 2.7-3.2 2.9-.1 0-.2-.1-.4-.3l-.1-.1-.6-.5h-1.6v-.1z" id="Shape" fill="#032C36"/></g></g></svg>
2 | 


--------------------------------------------------------------------------------
/src/app/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit'
 2 | import { setupListeners } from '@reduxjs/toolkit/query'
 3 | import { createLogger } from 'redux-logger'
 4 | 
 5 | import { listenerMiddleware } from './listenerMiddleware'
 6 | import configurationReducer from '@features/configuration/configurationSlice'
 7 | import settingsReducer from '@features/settings/settingsSlice'
 8 | import swReducer from '@features/sw/swSlice'
 9 | 
10 | const isDevelopment = process.env.NODE_ENV === 'development'
11 | 
12 | export const configureAppStore = (preloadedState = {}) => {
13 |   const store = configureStore({
14 |     preloadedState,
15 |     reducer: {
16 |       configuration: configurationReducer,
17 |       settings: settingsReducer,
18 |       sw: swReducer
19 |     },
20 |     devTools: isDevelopment,
21 |     middleware: (getDefaultMiddleware) => {
22 |       let middlewares = getDefaultMiddleware().prepend(listenerMiddleware.middleware)
23 | 
24 |       if (isDevelopment) {
25 |         middlewares = middlewares.concat(
26 |           createLogger({
27 |             duration: true,
28 |             timestamp: true,
29 |             diff: true,
30 |             collapsed: true
31 |           })
32 |         )
33 |       }
34 | 
35 |       return middlewares
36 |     }
37 |   })
38 | 
39 |   // enable listener behavior for the store
40 |   setupListeners(store.dispatch)
41 | 
42 |   return store
43 | }
44 | 


--------------------------------------------------------------------------------
/src/common/components/appUpdate/app-update.css:
--------------------------------------------------------------------------------
 1 | .app-update {
 2 |   display: flex;
 3 |   flex-flow: row wrap;
 4 |   border: 1px solid var(--commentColor);
 5 |   margin: 0.6rem;
 6 | }
 7 | 
 8 | .app-update__title {
 9 |   display: flex;
10 |   flex-basis: calc(66.6% - 10px);
11 |   flex-grow: 0;
12 |   flex-shrink: 0;
13 |   max-width: calc(66.6% - 10px);
14 |   text-align: center;
15 |   width: calc(66.6% - 10px);
16 |   align-items: center;
17 |   justify-content: center;
18 | }
19 | 
20 | .app-update__title:nth-child(1n) {
21 |   margin-left: 0;
22 |   margin-right: 30px;
23 | }
24 | 
25 | .app-update__title:last-child {
26 |   margin-right: 0;
27 | }
28 | 
29 | .app-update__title:nth-child(3n) {
30 |   margin-left: auto;
31 |   margin-right: 0;
32 | }
33 | 
34 | .app-update__button-wrapper {
35 |   background-color: var(--headsColor);
36 |   display: flex;
37 |   flex-basis: calc(33.3% - 20px);
38 |   flex-grow: 0;
39 |   flex-shrink: 0;
40 |   max-width: calc(33.3% - 20px);
41 |   text-align: center;
42 |   vertical-align: middle;
43 |   width: calc(33.3% - 20px);
44 |   align-items: center;
45 |   justify-content: center;
46 | }
47 | 
48 | .app-update__button-wrapper:nth-child(1n) {
49 |   margin-left: 0;
50 |   margin-right: 30px;
51 | }
52 | 
53 | .app-update__button-wrapper:last-child {
54 |   margin-right: 0;
55 | }
56 | 
57 | .app-update__button-wrapper:nth-child(3n) {
58 |   margin-left: auto;
59 |   margin-right: 0;
60 | }
61 | 
62 | .app-update__button {
63 |   border: 0;
64 |   background: transparent;
65 |   color: #b58900;
66 |   cursor: pointer;
67 |   width: 100%;
68 |   height: 100%;
69 | }
70 | 


--------------------------------------------------------------------------------
/src/common/components/appUpdate/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useDispatch, useSelector } from 'react-redux'
 3 | import { updating, selectIsNewVersionAvailableSw } from '@features/sw/swSlice'
 4 | 
 5 | import './app-update.css'
 6 | 
 7 | const AppUpdate = () => {
 8 |   const dispatch = useDispatch()
 9 |   const isNewVersionAvailable = useSelector(selectIsNewVersionAvailableSw)
10 | 
11 |   const reloadPage = () => dispatch(updating())
12 | 
13 |   if (!isNewVersionAvailable) {
14 |     return null
15 |   }
16 | 
17 |   return (
18 |     <div className="app-update">
19 |       <h4 className="app-update__title">New version of application is available.</h4>
20 |       <div className="app-update__button-wrapper">
21 |         <button className="app-update__button" onClick={reloadPage}>
22 |           Update application
23 |         </button>
24 |       </div>
25 |     </div>
26 |   )
27 | }
28 | 
29 | export default AppUpdate
30 | 


--------------------------------------------------------------------------------
/src/common/components/configurationForm/configuration-form.css:
--------------------------------------------------------------------------------
 1 | .configuration-form-btn-wrapper {
 2 |   display: flex;
 3 |   flex-flow: row wrap;
 4 | }
 5 | 
 6 | .configuration-form-btn {
 7 |   background-color: var(--headsColor);
 8 |   border: 1px solid var(--commentColor);
 9 |   color: var(--baseColor);
10 |   display: flex;
11 |   flex-basis: 99.9%;
12 |   flex-grow: 0;
13 |   flex-shrink: 0;
14 |   height: 2.6rem;
15 |   max-width: 99.9%;
16 |   text-align: center;
17 |   width: 99.9%;
18 |   align-items: center;
19 |   justify-content: center;
20 | }
21 | 
22 | .configuration-form-btn:nth-child(1n) {
23 |   margin-left: 0;
24 |   margin-right: 30px;
25 | }
26 | 
27 | .configuration-form-btn:last-child {
28 |   margin-right: 0;
29 | }
30 | 
31 | .configuration-form-btn:nth-child(1n) {
32 |   margin-left: auto;
33 |   margin-right: 0;
34 | }
35 | 
36 | .configuration-form-btn--disabled {
37 |   background-color: var(--commentColor);
38 | }
39 | .configuration-form-btn:focus:not(:focus-visible) {
40 |   outline: 0;
41 | }
42 | .configuration-form-btn:hover {
43 |   background-color: var(--buttonHover);
44 | }
45 | .configuration-form-btn:active {
46 |   border-width: 2px;
47 | }
48 | 


--------------------------------------------------------------------------------
/src/common/components/configurationForm/index.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useMemo } from 'react'
  2 | import { useDispatch } from 'react-redux'
  3 | import { useSearchParams } from 'react-router-dom'
  4 | import classnames from 'classnames'
  5 | import { isEmpty } from 'lodash-es'
  6 | import { Formik, Field, Form } from 'formik'
  7 | import FormField from '@common/components/form/field'
  8 | import FormDropdown from '@common/components/form/dropdown'
  9 | import TotalMemoryInput from './totalMemoryInput'
 10 | import { submitConfiguration } from '@app/actions/configurator'
 11 | import { validationSchema } from './validation'
 12 | import {
 13 |   DEFAULT_DB_VERSION,
 14 |   DB_VERSIONS,
 15 |   OS_LINUX,
 16 |   OS_MAC,
 17 |   OS_WINDOWS,
 18 |   DB_TYPE_WEB,
 19 |   DB_TYPE_OLTP,
 20 |   DB_TYPE_DW,
 21 |   DB_TYPE_DESKTOP,
 22 |   DB_TYPE_MIXED,
 23 |   HARD_DRIVE_SSD,
 24 |   HARD_DRIVE_SAN,
 25 |   HARD_DRIVE_HDD,
 26 |   SIZE_UNIT_GB,
 27 |   MAX_NUMERIC_VALUE
 28 | } from '@features/configuration/constants'
 29 | 
 30 | import './configuration-form.css'
 31 | 
 32 | const FORM_DEFAULTS = {
 33 |   dbVersion: DEFAULT_DB_VERSION,
 34 |   osType: OS_LINUX,
 35 |   dbType: DB_TYPE_WEB,
 36 |   cpuNum: '',
 37 |   totalMemory: '',
 38 |   totalMemoryUnit: SIZE_UNIT_GB,
 39 |   connectionNum: '',
 40 |   hdType: HARD_DRIVE_SSD
 41 | }
 42 | 
 43 | const FORM_FIELDS = Object.keys(FORM_DEFAULTS)
 44 | 
 45 | const dbVersionOptions = () =>
 46 |   DB_VERSIONS.map((version) => ({
 47 |     label: String(version),
 48 |     value: version
 49 |   }))
 50 | 
 51 | const osTypeOptions = () => [
 52 |   {
 53 |     label: 'Linux',
 54 |     value: OS_LINUX
 55 |   },
 56 |   {
 57 |     label: 'OS X',
 58 |     value: OS_MAC
 59 |   },
 60 |   {
 61 |     label: 'Windows',
 62 |     value: OS_WINDOWS
 63 |   }
 64 | ]
 65 | 
 66 | const dbTypeOptions = () => [
 67 |   {
 68 |     label: 'Web application',
 69 |     value: DB_TYPE_WEB
 70 |   },
 71 |   {
 72 |     label: 'Online transaction processing system',
 73 |     value: DB_TYPE_OLTP
 74 |   },
 75 |   {
 76 |     label: 'Data warehouse',
 77 |     value: DB_TYPE_DW
 78 |   },
 79 |   {
 80 |     label: 'Desktop application',
 81 |     value: DB_TYPE_DESKTOP
 82 |   },
 83 |   {
 84 |     label: 'Mixed type of application',
 85 |     value: DB_TYPE_MIXED
 86 |   }
 87 | ]
 88 | 
 89 | const hdTypeOptions = () => [
 90 |   {
 91 |     label: 'SSD storage',
 92 |     value: HARD_DRIVE_SSD
 93 |   },
 94 |   {
 95 |     label: 'Network (SAN) storage',
 96 |     value: HARD_DRIVE_SAN
 97 |   },
 98 |   {
 99 |     label: 'HDD storage',
100 |     value: HARD_DRIVE_HDD
101 |   }
102 | ]
103 | 
104 | const filterFormParams = (params = {}) => {
105 |   const paramKeys = Object.keys(params)
106 |   return FORM_FIELDS.reduce((arr, key) => {
107 |     if (paramKeys.includes(key)) {
108 |       arr[key] = params[key]
109 |     }
110 |     return arr
111 |   }, {})
112 | }
113 | 
114 | const ConfigurationForm = () => {
115 |   const dispatch = useDispatch()
116 |   const [searchParams, setSearchParams] = useSearchParams()
117 | 
118 |   const handleGenerateConfig = (values, { setSubmitting }) => {
119 |     setSearchParams(new URLSearchParams(values))
120 |     setSubmitting(false)
121 |   }
122 | 
123 |   const urlParams = useMemo(() => {
124 |     return filterFormParams(Object.fromEntries(searchParams.entries()))
125 |   }, [searchParams])
126 | 
127 |   const formParams = useMemo(() => {
128 |     if (isEmpty(urlParams)) {
129 |       return FORM_DEFAULTS
130 |     }
131 | 
132 |     let vParams = urlParams
133 | 
134 |     try {
135 |       validationSchema.validateSync(vParams)
136 |     } catch (e) {
137 |       console.warn('Url params error', e)
138 |       vParams = {} // back to default
139 |     }
140 | 
141 |     return Object.assign({}, FORM_DEFAULTS, vParams)
142 |   }, [urlParams])
143 | 
144 |   useEffect(() => {
145 |     dispatch(submitConfiguration(formParams))
146 |   }, [dispatch, formParams])
147 | 
148 |   return (
149 |     <Formik
150 |       onSubmit={handleGenerateConfig}
151 |       initialValues={formParams}
152 |       validationSchema={validationSchema}
153 |     >
154 |       {({ isSubmitting }) => (
155 |         <Form>
156 |           <Field
157 |             name="dbVersion"
158 |             component={FormDropdown}
159 |             label="DB version"
160 |             options={dbVersionOptions()}
161 |             tooltip="PostgreSQL version (find out via 'SELECT version();')"
162 |           />
163 |           <Field
164 |             name="osType"
165 |             component={FormDropdown}
166 |             label="OS Type"
167 |             options={osTypeOptions()}
168 |             tooltip="Operation system of the PostgreSQL server host"
169 |           />
170 |           <Field
171 |             name="dbType"
172 |             component={FormDropdown}
173 |             label="DB Type"
174 |             options={dbTypeOptions()}
175 |             tooltip="For what type of application is PostgreSQL used"
176 |           />
177 |           <TotalMemoryInput tooltip="How much memory can PostgreSQL use" />
178 |           <Field
179 |             name="cpuNum"
180 |             type="number"
181 |             component={FormField}
182 |             autoComplete="off"
183 |             autoCorrect="off"
184 |             autoCapitalize="none"
185 |             min={1}
186 |             max={MAX_NUMERIC_VALUE}
187 |             step={1}
188 |             pattern="[0-9]{1,6}"
189 |             placeholder="Number of CPUs (optional)"
190 |             label="Number of CPUs"
191 |             tooltip={
192 |               <span>
193 |                 Number of CPUs, which PostgreSQL can use
194 |                 <br />
195 |                 CPUs = threads per core * cores per socket * sockets
196 |               </span>
197 |             }
198 |           />
199 |           <Field
200 |             name="connectionNum"
201 |             type="number"
202 |             component={FormField}
203 |             autoComplete="off"
204 |             autoCorrect="off"
205 |             autoCapitalize="none"
206 |             min={20}
207 |             max={MAX_NUMERIC_VALUE}
208 |             step={1}
209 |             pattern="[0-9]{1,6}"
210 |             placeholder="Number of Connections (optional)"
211 |             label="Number of Connections"
212 |             tooltip="Maximum number of PostgreSQL client connections"
213 |           />
214 |           <Field
215 |             name="hdType"
216 |             component={FormDropdown}
217 |             label="Data Storage"
218 |             options={hdTypeOptions()}
219 |             tooltip="Type of data storage device"
220 |           />
221 |           <div className="configuration-form-btn-wrapper">
222 |             <button
223 |               className={classnames('configuration-form-btn', {
224 |                 'configuration-form-btn--disabled': isSubmitting
225 |               })}
226 |               type="submit"
227 |               disabled={isSubmitting}
228 |             >
229 |               Generate
230 |             </button>
231 |           </div>
232 |         </Form>
233 |       )}
234 |     </Formik>
235 |   )
236 | }
237 | 
238 | export default ConfigurationForm
239 | 


--------------------------------------------------------------------------------
/src/common/components/configurationForm/total-memory-input.css:
--------------------------------------------------------------------------------
  1 | .total-memory {
  2 |   display: flex;
  3 |   flex-flow: row wrap;
  4 |   margin-bottom: 1rem;
  5 | }
  6 | 
  7 | .total-memory-label {
  8 |   flex-basis: calc(62.4375% - 11.25px);
  9 |   flex-grow: 0;
 10 |   flex-shrink: 0;
 11 |   font-size: 1.1rem;
 12 |   max-width: calc(62.4375% - 11.25px);
 13 |   width: calc(62.4375% - 11.25px);
 14 | }
 15 | 
 16 | .total-memory-label:nth-child(1n) {
 17 |   margin-left: 0;
 18 |   margin-right: 30px;
 19 | }
 20 | 
 21 | .total-memory-label:last-child {
 22 |   margin-right: 0;
 23 | }
 24 | 
 25 | .total-memory-label:nth-child(2n) {
 26 |   margin-left: auto;
 27 |   margin-right: 0;
 28 | }
 29 | 
 30 | .total-memory-tooltip {
 31 |   flex-basis: calc(37.4625% - 18.75px);
 32 |   flex-grow: 0;
 33 |   flex-shrink: 0;
 34 |   font-size: 0.8rem;
 35 |   max-width: calc(37.4625% - 18.75px);
 36 |   text-align: right;
 37 |   width: calc(37.4625% - 18.75px);
 38 | }
 39 | 
 40 | .total-memory-tooltip:nth-child(1n) {
 41 |   margin-left: 0;
 42 |   margin-right: 30px;
 43 | }
 44 | 
 45 | .total-memory-tooltip:last-child {
 46 |   margin-right: 0;
 47 | }
 48 | 
 49 | .total-memory-tooltip:nth-child(2n) {
 50 |   margin-left: auto;
 51 |   margin-right: 0;
 52 | }
 53 | 
 54 | .total-memory-tooltip__link {
 55 |   border-bottom: 1px dotted #b58900;
 56 |   text-decoration: none;
 57 |   vertical-align: middle;
 58 |   margin-right: 4px;
 59 | }
 60 | 
 61 | .total-memory-amount {
 62 |   flex-basis: calc(79.92% - 0.8px);
 63 |   flex-grow: 0;
 64 |   flex-shrink: 0;
 65 |   max-width: calc(79.92% - 0.8px);
 66 |   width: calc(79.92% - 0.8px);
 67 | }
 68 | 
 69 | .total-memory-amount:nth-child(1n) {
 70 |   margin-left: 0;
 71 |   margin-right: 4px;
 72 | }
 73 | 
 74 | .total-memory-amount:last-child {
 75 |   margin-right: 0;
 76 | }
 77 | 
 78 | .total-memory-amount:nth-child(2n) {
 79 |   margin-left: auto;
 80 |   margin-right: 0;
 81 | }
 82 | 
 83 | .total-memory-amount__input {
 84 |   background-color: var(--inputBg);
 85 |   border: 1px solid var(--inputBorder);
 86 |   border-radius: 0;
 87 |   box-sizing: border-box;
 88 |   color: var(--inputColor);
 89 |   font-size: 1.3rem;
 90 |   padding: 2px 1px;
 91 |   width: 100%;
 92 | }
 93 | 
 94 | .total-memory-amount__input:placeholder {
 95 |   color: var(--inputColorPlaceholder);
 96 |   font-size: 1.2rem;
 97 | }
 98 | 
 99 | .total-memory-amount__input:focus:not(:focus-visible) {
100 |   outline: none;
101 | }
102 | 
103 | .total-memory-amount__error {
104 |   color: #dc322f;
105 |   font-size: 0.8rem;
106 | }
107 | 
108 | .total-memory-unit {
109 |   flex-basis: calc(19.98% - 3.2px);
110 |   flex-grow: 0;
111 |   flex-shrink: 0;
112 |   max-width: calc(19.98% - 3.2px);
113 |   width: calc(19.98% - 3.2px);
114 | }
115 | 
116 | .total-memory-unit:nth-child(1n) {
117 |   margin-left: 0;
118 |   margin-right: 4px;
119 | }
120 | 
121 | .total-memory-unit:last-child {
122 |   margin-right: 0;
123 | }
124 | 
125 | .total-memory-unit:nth-child(2n) {
126 |   margin-left: auto;
127 |   margin-right: 0;
128 | }
129 | 
130 | .total-memory-unit__select {
131 |   width: calc(100% - 2px);
132 |   font-size: 1.3rem;
133 |   color: var(--inputColor);
134 |   border-radius: 0;
135 |   appearance: none;
136 |   border: 1px solid var(--inputBorder);
137 |   background-color: var(--inputBg);
138 |   padding: 2px 1px;
139 | }
140 | 
141 | .total-memory-unit__select:focus:not(:focus-visible) {
142 |   outline: none;
143 | }
144 | 


--------------------------------------------------------------------------------
/src/common/components/configurationForm/totalMemoryInput.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Field } from 'formik'
 4 | import Tooltip from '@common/components/form/tooltip'
 5 | import FormSimpleField from '@common/components/form/simpleField'
 6 | import FormSimpleDropdown from '@common/components/form/simpleDropdown'
 7 | import { SIZE_UNIT_MB, SIZE_UNIT_GB, MAX_NUMERIC_VALUE } from '@features/configuration/constants'
 8 | 
 9 | import './total-memory-input.css'
10 | 
11 | const totalMemoryUnitOptions = () => [
12 |   {
13 |     label: 'GB',
14 |     value: SIZE_UNIT_GB
15 |   },
16 |   {
17 |     label: 'MB',
18 |     value: SIZE_UNIT_MB
19 |   }
20 | ]
21 | 
22 | const TotalMemoryInput = ({ tooltip }) => {
23 |   const inputID = 'TotalMemoryId'
24 | 
25 |   return (
26 |     <div className="total-memory">
27 |       <label className="total-memory-label" htmlFor={inputID}>
28 |         Total Memory (RAM)
29 |       </label>
30 |       <Tooltip
31 |         id={`tooltip${inputID}`}
32 |         label="what is this?"
33 |         text={tooltip}
34 |         className="total-memory-tooltip"
35 |       />
36 |       <Field
37 |         name="totalMemory"
38 |         type="number"
39 |         className="total-memory-amount"
40 |         inputClassName="total-memory-amount__input"
41 |         errorClassName="total-memory-amount__error"
42 |         component={FormSimpleField}
43 |         id={inputID}
44 |         autoFocus={true}
45 |         autoComplete="off"
46 |         autoCorrect="off"
47 |         autoCapitalize="none"
48 |         required="required"
49 |         min={1}
50 |         max={MAX_NUMERIC_VALUE}
51 |         step={1}
52 |         pattern="[0-9]{1,6}"
53 |         placeholder="Memory size (RAM, required)"
54 |       />
55 |       <Field
56 |         name="totalMemoryUnit"
57 |         label="Memory units"
58 |         className="total-memory-unit"
59 |         selectClassName="total-memory-unit__select"
60 |         component={FormSimpleDropdown}
61 |         options={totalMemoryUnitOptions()}
62 |       />
63 |     </div>
64 |   )
65 | }
66 | 
67 | TotalMemoryInput.propTypes = {
68 |   tooltip: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]).isRequired
69 | }
70 | 
71 | export default TotalMemoryInput
72 | 


--------------------------------------------------------------------------------
/src/common/components/configurationForm/validation.js:
--------------------------------------------------------------------------------
 1 | import * as Yup from 'yup'
 2 | import {
 3 |   DB_VERSIONS,
 4 |   OS_LINUX,
 5 |   OS_WINDOWS,
 6 |   OS_MAC,
 7 |   DB_TYPE_WEB,
 8 |   DB_TYPE_OLTP,
 9 |   DB_TYPE_DW,
10 |   DB_TYPE_DESKTOP,
11 |   DB_TYPE_MIXED,
12 |   SIZE_UNIT_MB,
13 |   SIZE_UNIT_GB,
14 |   HARD_DRIVE_HDD,
15 |   HARD_DRIVE_SSD,
16 |   HARD_DRIVE_SAN,
17 |   MAX_NUMERIC_VALUE
18 | } from '@features/configuration/constants'
19 | 
20 | const MIN_MB_MEMORY = 512
21 | 
22 | const DB_TYPES = [DB_TYPE_WEB, DB_TYPE_OLTP, DB_TYPE_DW, DB_TYPE_DESKTOP, DB_TYPE_MIXED]
23 | 
24 | const HARD_DRIVE_TYPES = [HARD_DRIVE_HDD, HARD_DRIVE_SSD, HARD_DRIVE_SAN]
25 | 
26 | export const validationSchema = Yup.object().shape({
27 |   dbVersion: Yup.number().required('Required').oneOf(DB_VERSIONS, 'Unsupported database version'),
28 |   osType: Yup.string().required('Required').oneOf([OS_LINUX, OS_WINDOWS, OS_MAC], 'Unsupported OS'),
29 |   dbType: Yup.string().required('Required').oneOf(DB_TYPES, 'Unsupported database type'),
30 |   totalMemoryUnit: Yup.string()
31 |     .required('Required')
32 |     .oneOf([SIZE_UNIT_MB, SIZE_UNIT_GB], 'Unsupported unit'),
33 |   totalMemory: Yup.number()
34 |     .required('Required')
35 |     .integer('Must be an integer')
36 |     .when('totalMemoryUnit', (totalMemoryUnit, schema) => {
37 |       if (totalMemoryUnit === SIZE_UNIT_MB) {
38 |         return schema.min(MIN_MB_MEMORY, `Must be greater than or equal to ${MIN_MB_MEMORY} MB`)
39 |       }
40 |       return schema.min(1, 'Must be greater than zero')
41 |     })
42 |     .max(MAX_NUMERIC_VALUE, `Must be less than or equal to ${MAX_NUMERIC_VALUE}`),
43 |   hdType: Yup.string().required('Required').oneOf(HARD_DRIVE_TYPES, 'Unsupported hard drive'),
44 |   cpuNum: Yup.number()
45 |     .transform((value) => (isNaN(value) ? null : value))
46 |     .nullable()
47 |     .notRequired()
48 |     .integer('Must be an integer')
49 |     .min(1, 'Must be greater than zero')
50 |     .max(MAX_NUMERIC_VALUE, `Must be less than or equal to ${MAX_NUMERIC_VALUE}`),
51 |   connectionNum: Yup.number()
52 |     .transform((value) => (isNaN(value) ? null : value))
53 |     .nullable()
54 |     .notRequired()
55 |     .integer('Must be an integer')
56 |     .min(20, 'Must be greater than or equal to 20')
57 |     .max(MAX_NUMERIC_VALUE, `Must be less than or equal to ${MAX_NUMERIC_VALUE}`)
58 | })
59 | 


--------------------------------------------------------------------------------
/src/common/components/configurationView/configuration-view.css:
--------------------------------------------------------------------------------
 1 | .configuration-view-tabs-wrapper {
 2 |   display: flex;
 3 |   flex-flow: row wrap;
 4 | }
 5 | 
 6 | .configuration-view-tab {
 7 |   cursor: pointer;
 8 |   display: flex;
 9 |   flex-basis: 49.95%;
10 |   flex-grow: 0;
11 |   flex-shrink: 0;
12 |   height: 2rem;
13 |   margin-top: 1rem;
14 |   max-width: 49.95%;
15 |   text-align: center;
16 |   width: 49.95%;
17 |   align-items: center;
18 |   justify-content: center;
19 |   border: 0;
20 |   background: transparent;
21 |   color: var(--baseColor);
22 | }
23 | 
24 | .configuration-view-tab:nth-child(1n) {
25 |   margin-left: 0;
26 |   margin-right: 0;
27 | }
28 | 
29 | .configuration-view-tab:last-child {
30 |   margin-right: 0;
31 | }
32 | 
33 | .configuration-view-tab:nth-child(2n) {
34 |   margin-left: auto;
35 |   margin-right: 0;
36 | }
37 | 
38 | .configuration-view-tab--active {
39 |   border-bottom: 2px solid #cb4b16;
40 |   background-color: var(--headsColor);
41 | }
42 | 
43 | .configuration-view-copy-wrapper {
44 |   display: flex;
45 |   flex-flow: row wrap;
46 | }
47 | 
48 | .configuration-view-copy-button {
49 |   background-color: var(--headsColor);
50 |   border: 1px solid var(--commentColor);
51 |   color: var(--baseColor);
52 |   display: flex;
53 |   flex-basis: 99.9%;
54 |   flex-grow: 0;
55 |   flex-shrink: 0;
56 |   height: 2.6rem;
57 |   max-width: 99.9%;
58 |   text-align: center;
59 |   width: 99.9%;
60 |   align-items: center;
61 |   justify-content: center;
62 | }
63 | 
64 | .configuration-view-copy-button:nth-child(1n) {
65 |   margin-left: 0;
66 |   margin-right: 30px;
67 | }
68 | 
69 | .configuration-view-copy-button:last-child {
70 |   margin-right: 0;
71 | }
72 | 
73 | .configuration-view-copy-button:nth-child(1n) {
74 |   margin-left: auto;
75 |   margin-right: 0;
76 | }
77 | 
78 | .configuration-view-copy-button:focus {
79 |   outline: 0;
80 | }
81 | .configuration-view-copy-button:hover {
82 |   background-color: var(--buttonHover);
83 | }
84 | .configuration-view-copy-button:active {
85 |   border-width: 2px;
86 | }
87 | 


--------------------------------------------------------------------------------
/src/common/components/configurationView/index.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback } from 'react'
  2 | import classnames from 'classnames'
  3 | import { useDispatch, useSelector } from 'react-redux'
  4 | import hljs from 'highlight.js/lib/core'
  5 | import iniLang from 'highlight.js/lib/languages/ini'
  6 | import sqlLang from 'highlight.js/lib/languages/sql'
  7 | import solarizedLight from './solarized-light'
  8 | import solarizedDark from './solarized-dark'
  9 | import CopyButton from '@common/components/copyButton'
 10 | import { APP_THEMES_LIGHT, TAB_CONFIG, TAB_ALTER_SYSTEM } from '@features/settings/constants'
 11 | import {
 12 |   selectDBVersion,
 13 |   selectOSType,
 14 |   selectDBType,
 15 |   selectTotalMemory,
 16 |   selectTotalMemoryUnit,
 17 |   selectCPUNum,
 18 |   selectConnectionNum,
 19 |   selectHDType,
 20 |   selectMaxConnections,
 21 |   selectHugePages,
 22 |   selectSharedBuffers,
 23 |   selectEffectiveCacheSize,
 24 |   selectMaintenanceWorkMem,
 25 |   selectCheckpointSegments,
 26 |   selectCheckpointCompletionTarget,
 27 |   selectWalBuffers,
 28 |   selectDefaultStatisticsTarget,
 29 |   selectRandomPageCost,
 30 |   selectEffectiveIoConcurrency,
 31 |   selectParallelSettings,
 32 |   selectWorkMem,
 33 |   selectWarningInfoMessages,
 34 |   selectWalLevel
 35 | } from '@features/configuration/configurationSlice'
 36 | import {
 37 |   openConfigTab,
 38 |   selectTabSettings,
 39 |   selectThemeSettings
 40 | } from '@features/settings/settingsSlice'
 41 | 
 42 | import './configuration-view.css'
 43 | 
 44 | hljs.registerLanguage('ini', iniLang)
 45 | hljs.registerLanguage('sql', sqlLang)
 46 | 
 47 | const KB_UNIT_MAP = {
 48 |   KB_PER_MB: 1024,
 49 |   KB_PER_GB: 1048576
 50 | }
 51 | 
 52 | // This uses larger units only if there's no loss of resolution in displaying
 53 | // with that value. Therefore, if using this to output newly assigned
 54 | // values, that value needs to be rounded appropriately if you want
 55 | // it to show up as an even number of MB or GB
 56 | const formatValue = (value) => {
 57 |   const result = (() => {
 58 |     if (value % KB_UNIT_MAP['KB_PER_GB'] === 0) {
 59 |       return {
 60 |         value: Math.floor(value / KB_UNIT_MAP['KB_PER_GB']),
 61 |         unit: 'GB'
 62 |       }
 63 |     }
 64 |     if (value % KB_UNIT_MAP['KB_PER_MB'] === 0) {
 65 |       return {
 66 |         value: Math.floor(value / KB_UNIT_MAP['KB_PER_MB']),
 67 |         unit: 'MB'
 68 |       }
 69 |     }
 70 |     return {
 71 |       value,
 72 |       unit: 'kB'
 73 |     }
 74 |   })()
 75 | 
 76 |   // return formatted
 77 |   return `${result.value}${result.unit}`
 78 | }
 79 | 
 80 | const renderCodeInlineCss = (codeHighlightStyle) => {
 81 |   return Object.keys(codeHighlightStyle).map((className) => {
 82 |     const content = codeHighlightStyle[className]
 83 |     const body = Object.keys(content)
 84 |       .map((key) => `${key}: ${content[key]};`)
 85 |       .join('')
 86 | 
 87 |     return `.${className} { ${body} }`
 88 |   })
 89 | }
 90 | 
 91 | const renderHightlightedCode = (code, isAlterSystem) => {
 92 |   return hljs.highlight(code, { language: isAlterSystem ? 'sql' : 'ini' }).value
 93 | }
 94 | 
 95 | const ConfigurationView = () => {
 96 |   const dispatch = useDispatch()
 97 | 
 98 |   // hardware configuration
 99 |   const dbVersion = useSelector(selectDBVersion)
100 |   const osType = useSelector(selectOSType)
101 |   const dbType = useSelector(selectDBType)
102 |   const totalMemory = useSelector(selectTotalMemory)
103 |   const totalMemoryUnit = useSelector(selectTotalMemoryUnit)
104 |   const cpuNum = useSelector(selectCPUNum)
105 |   const connectionNum = useSelector(selectConnectionNum)
106 |   const hdType = useSelector(selectHDType)
107 |   // computed settings
108 |   const maxConnectionsVal = useSelector(selectMaxConnections)
109 |   const hugePagesVal = useSelector(selectHugePages)
110 |   const sharedBuffersVal = useSelector(selectSharedBuffers)
111 |   const effectiveCacheSizeVal = useSelector(selectEffectiveCacheSize)
112 |   const maintenanceWorkMemVal = useSelector(selectMaintenanceWorkMem)
113 |   const checkpointSegmentsVal = useSelector(selectCheckpointSegments)
114 |   const walLevelVal = useSelector(selectWalLevel)
115 |   const checkpointCompletionTargetVal = useSelector(selectCheckpointCompletionTarget)
116 |   const walBuffersVal = useSelector(selectWalBuffers)
117 |   const defaultStatisticsTargetVal = useSelector(selectDefaultStatisticsTarget)
118 |   const randomPageCostVal = useSelector(selectRandomPageCost)
119 |   const effectiveIoConcurrencyVal = useSelector(selectEffectiveIoConcurrency)
120 |   const parallelSettingsVal = useSelector(selectParallelSettings)
121 |   const workMemVal = useSelector(selectWorkMem)
122 |   // warnings
123 |   const warningInfoMessagesVal = useSelector(selectWarningInfoMessages)
124 |   // tab state
125 |   const tabState = useSelector(selectTabSettings)
126 |   // app theme
127 |   const theme = useSelector(selectThemeSettings)
128 |   // tab click state
129 |   const handleClickTab = useCallback((tab) => dispatch(openConfigTab(tab)), [dispatch])
130 | 
131 |   const isAlterSystem = TAB_ALTER_SYSTEM === tabState
132 | 
133 |   const warningInfo = () =>
134 |     warningInfoMessagesVal.map((item) => `${isAlterSystem ? '--' : '#'} ${item}`).join('\n')
135 | 
136 |   const hardwareConfiguration = () =>
137 |     [
138 |       ['DB Version', dbVersion],
139 |       ['OS Type', osType],
140 |       ['DB Type', dbType],
141 |       ['Total Memory (RAM)', `${totalMemory} ${totalMemoryUnit}`],
142 |       ['CPUs num', cpuNum],
143 |       ['Connections num', connectionNum],
144 |       ['Data Storage', hdType]
145 |     ]
146 |       .filter((item) => !!item[1])
147 |       .map((item) => `${isAlterSystem ? '--' : '#'} ${item[0]}: ${item[1]}`)
148 |       .join('\n')
149 | 
150 |   const getCheckpointSegments = () =>
151 |     checkpointSegmentsVal.map((item) => {
152 |       if (item.key === 'checkpoint_segments') {
153 |         return [item.key, item.value]
154 |       }
155 |       return [item.key, formatValue(item.value)]
156 |     })
157 | 
158 |   const getWalLevel = () => walLevelVal.map((item) => [item.key, item.value])
159 | 
160 |   const getParallelSettings = () => parallelSettingsVal.map((item) => [item.key, item.value])
161 | 
162 |   const postgresqlConfig = () => {
163 |     const configData = [
164 |       ['max_connections', maxConnectionsVal],
165 |       ['shared_buffers', formatValue(sharedBuffersVal)],
166 |       ['effective_cache_size', formatValue(effectiveCacheSizeVal)],
167 |       ['maintenance_work_mem', formatValue(maintenanceWorkMemVal)],
168 |       ['checkpoint_completion_target', checkpointCompletionTargetVal],
169 |       ['wal_buffers', formatValue(walBuffersVal)],
170 |       ['default_statistics_target', defaultStatisticsTargetVal],
171 |       ['random_page_cost', randomPageCostVal],
172 |       ['effective_io_concurrency', effectiveIoConcurrencyVal],
173 |       ['work_mem', formatValue(workMemVal)],
174 |       ['huge_pages', hugePagesVal]
175 |     ]
176 |       .concat(getCheckpointSegments())
177 |       .concat(getParallelSettings())
178 |       .concat(getWalLevel())
179 | 
180 |     return configData
181 |       .filter((item) => !!item[1])
182 |       .map((item) =>
183 |         isAlterSystem ? `ALTER SYSTEM SET\n ${item[0]} = '${item[1]}';` : `${item[0]} = ${item[1]}`
184 |       )
185 |       .join('\n')
186 |   }
187 | 
188 |   const generateConfig = () => {
189 |     let config = [hardwareConfiguration(), '', postgresqlConfig()]
190 | 
191 |     if (warningInfoMessagesVal.length > 0) {
192 |       config = [warningInfo(), '', ...config]
193 |     }
194 |     return config.join('\n')
195 |   }
196 | 
197 |   const renderTabs = () => {
198 |     return (
199 |       <div className="configuration-view-tabs-wrapper">
200 |         <button
201 |           className={classnames('configuration-view-tab', {
202 |             'configuration-view-tab--active': TAB_CONFIG === tabState
203 |           })}
204 |           onClick={() => handleClickTab(TAB_CONFIG)}
205 |         >
206 |           postgresql.conf
207 |         </button>
208 |         <button
209 |           className={classnames('configuration-view-tab', {
210 |             'configuration-view-tab--active': TAB_ALTER_SYSTEM === tabState
211 |           })}
212 |           onClick={() => handleClickTab(TAB_ALTER_SYSTEM)}
213 |         >
214 |           ALTER SYSTEM
215 |         </button>
216 |       </div>
217 |     )
218 |   }
219 | 
220 |   const renderConfigResult = () => {
221 |     const generatedConfigRes = generateConfig()
222 | 
223 |     return (
224 |       <React.Fragment>
225 |         {isAlterSystem ? (
226 |           <p>
227 |             <strong>ALTER SYSTEM</strong> writes the given parameter setting to the{' '}
228 |             <strong>postgresql.auto.conf</strong> file, which is read in addition to{' '}
229 |             <strong>postgresql.conf</strong>
230 |           </p>
231 |         ) : (
232 |           <p>
233 |             Add/modify this settings in <strong>postgresql.conf</strong> and restart database
234 |           </p>
235 |         )}
236 |         <pre style={{ display: 'block', overflowX: 'auto', padding: '0.5rem' }}>
237 |           <code
238 |             style={{ whiteSpace: 'pre' }}
239 |             dangerouslySetInnerHTML={{
240 |               __html: renderHightlightedCode(generatedConfigRes, isAlterSystem)
241 |             }}
242 |           />
243 |         </pre>
244 |         <div className="configuration-view-copy-wrapper">
245 |           <CopyButton
246 |             className="configuration-view-copy-button"
247 |             text={generatedConfigRes}
248 |             label="Copy configuration"
249 |           />
250 |         </div>
251 |       </React.Fragment>
252 |     )
253 |   }
254 | 
255 |   const codeHighlightStyle = APP_THEMES_LIGHT === theme ? solarizedLight : solarizedDark
256 | 
257 |   return (
258 |     <div>
259 |       {renderTabs()}
260 |       {renderConfigResult()}
261 |       <style>{renderCodeInlineCss(codeHighlightStyle)}</style>
262 |     </div>
263 |   )
264 | }
265 | 
266 | export default ConfigurationView
267 | 


--------------------------------------------------------------------------------
/src/common/components/configurationView/solarized-dark.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   hljs: {
  3 |     display: 'block',
  4 |     'overflow-x': 'auto',
  5 |     padding: '0.5em',
  6 |     background: '#002b36',
  7 |     color: '#839496'
  8 |   },
  9 |   'hljs-comment': {
 10 |     color: '#586e75'
 11 |   },
 12 |   'hljs-quote': {
 13 |     color: '#586e75'
 14 |   },
 15 |   'hljs-keyword': {
 16 |     color: '#859900'
 17 |   },
 18 |   'hljs-selector-tag': {
 19 |     color: '#859900'
 20 |   },
 21 |   'hljs-addition': {
 22 |     color: '#859900'
 23 |   },
 24 |   'hljs-number': {
 25 |     color: '#2aa198'
 26 |   },
 27 |   'hljs-string': {
 28 |     color: '#2aa198'
 29 |   },
 30 |   'hljs-meta .hljs-meta-string': {
 31 |     color: '#2aa198'
 32 |   },
 33 |   'hljs-literal': {
 34 |     color: '#2aa198'
 35 |   },
 36 |   'hljs-doctag': {
 37 |     color: '#2aa198'
 38 |   },
 39 |   'hljs-regexp': {
 40 |     color: '#2aa198'
 41 |   },
 42 |   'hljs-title': {
 43 |     color: '#268bd2'
 44 |   },
 45 |   'hljs-section': {
 46 |     color: '#268bd2'
 47 |   },
 48 |   'hljs-name': {
 49 |     color: '#268bd2'
 50 |   },
 51 |   'hljs-selector-id': {
 52 |     color: '#268bd2'
 53 |   },
 54 |   'hljs-selector-class': {
 55 |     color: '#268bd2'
 56 |   },
 57 |   'hljs-attribute': {
 58 |     color: '#b58900'
 59 |   },
 60 |   'hljs-attr': {
 61 |     color: '#b58900'
 62 |   },
 63 |   'hljs-variable': {
 64 |     color: '#b58900'
 65 |   },
 66 |   'hljs-template-variable': {
 67 |     color: '#b58900'
 68 |   },
 69 |   'hljs-class .hljs-title': {
 70 |     color: '#b58900'
 71 |   },
 72 |   'hljs-type': {
 73 |     color: '#b58900'
 74 |   },
 75 |   'hljs-symbol': {
 76 |     color: '#cb4b16'
 77 |   },
 78 |   'hljs-bullet': {
 79 |     color: '#cb4b16'
 80 |   },
 81 |   'hljs-subst': {
 82 |     color: '#cb4b16'
 83 |   },
 84 |   'hljs-meta': {
 85 |     color: '#cb4b16'
 86 |   },
 87 |   'hljs-meta .hljs-keyword': {
 88 |     color: '#cb4b16'
 89 |   },
 90 |   'hljs-selector-attr': {
 91 |     color: '#cb4b16'
 92 |   },
 93 |   'hljs-selector-pseudo': {
 94 |     color: '#cb4b16'
 95 |   },
 96 |   'hljs-link': {
 97 |     color: '#cb4b16'
 98 |   },
 99 |   'hljs-built_in': {
100 |     color: '#dc322f'
101 |   },
102 |   'hljs-deletion': {
103 |     color: '#dc322f'
104 |   },
105 |   'hljs-formula': {
106 |     background: '#073642'
107 |   },
108 |   'hljs-emphasis': {
109 |     'font-style': 'italic'
110 |   },
111 |   'hljs-strong': {
112 |     'font-weight': 'bold'
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/src/common/components/configurationView/solarized-light.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   hljs: {
  3 |     display: 'block',
  4 |     'overflow-x': 'auto',
  5 |     padding: '0.5em',
  6 |     background: '#fdf6e3',
  7 |     color: '#657b83'
  8 |   },
  9 |   'hljs-comment': {
 10 |     color: '#93a1a1'
 11 |   },
 12 |   'hljs-quote': {
 13 |     color: '#93a1a1'
 14 |   },
 15 |   'hljs-keyword': {
 16 |     color: '#859900'
 17 |   },
 18 |   'hljs-selector-tag': {
 19 |     color: '#859900'
 20 |   },
 21 |   'hljs-addition': {
 22 |     color: '#859900'
 23 |   },
 24 |   'hljs-number': {
 25 |     color: '#2aa198'
 26 |   },
 27 |   'hljs-string': {
 28 |     color: '#2aa198'
 29 |   },
 30 |   'hljs-meta .hljs-meta-string': {
 31 |     color: '#2aa198'
 32 |   },
 33 |   'hljs-literal': {
 34 |     color: '#2aa198'
 35 |   },
 36 |   'hljs-doctag': {
 37 |     color: '#2aa198'
 38 |   },
 39 |   'hljs-regexp': {
 40 |     color: '#2aa198'
 41 |   },
 42 |   'hljs-title': {
 43 |     color: '#268bd2'
 44 |   },
 45 |   'hljs-section': {
 46 |     color: '#268bd2'
 47 |   },
 48 |   'hljs-name': {
 49 |     color: '#268bd2'
 50 |   },
 51 |   'hljs-selector-id': {
 52 |     color: '#268bd2'
 53 |   },
 54 |   'hljs-selector-class': {
 55 |     color: '#268bd2'
 56 |   },
 57 |   'hljs-attribute': {
 58 |     color: '#b58900'
 59 |   },
 60 |   'hljs-attr': {
 61 |     color: '#b58900'
 62 |   },
 63 |   'hljs-variable': {
 64 |     color: '#b58900'
 65 |   },
 66 |   'hljs-template-variable': {
 67 |     color: '#b58900'
 68 |   },
 69 |   'hljs-class .hljs-title': {
 70 |     color: '#b58900'
 71 |   },
 72 |   'hljs-type': {
 73 |     color: '#b58900'
 74 |   },
 75 |   'hljs-symbol': {
 76 |     color: '#cb4b16'
 77 |   },
 78 |   'hljs-bullet': {
 79 |     color: '#cb4b16'
 80 |   },
 81 |   'hljs-subst': {
 82 |     color: '#cb4b16'
 83 |   },
 84 |   'hljs-meta': {
 85 |     color: '#cb4b16'
 86 |   },
 87 |   'hljs-meta .hljs-keyword': {
 88 |     color: '#cb4b16'
 89 |   },
 90 |   'hljs-selector-attr': {
 91 |     color: '#cb4b16'
 92 |   },
 93 |   'hljs-selector-pseudo': {
 94 |     color: '#cb4b16'
 95 |   },
 96 |   'hljs-link': {
 97 |     color: '#cb4b16'
 98 |   },
 99 |   'hljs-built_in': {
100 |     color: '#dc322f'
101 |   },
102 |   'hljs-deletion': {
103 |     color: '#dc322f'
104 |   },
105 |   'hljs-formula': {
106 |     background: '#eee8d5'
107 |   },
108 |   'hljs-emphasis': {
109 |     'font-style': 'italic'
110 |   },
111 |   'hljs-strong': {
112 |     'font-weight': 'bold'
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/src/common/components/configurator/configurator.css:
--------------------------------------------------------------------------------
  1 | .configurator {
  2 |   display: flex;
  3 |   flex-flow: row wrap;
  4 | }
  5 | 
  6 | .configurator-form-wrapper {
  7 |   flex-basis: calc(49.95% - 1.5rem);
  8 |   flex-grow: 0;
  9 |   flex-shrink: 0;
 10 |   max-width: calc(49.95% - 1.5rem);
 11 |   width: calc(49.95% - 1.5rem);
 12 | }
 13 | 
 14 | .configurator-form-wrapper:nth-child(1n) {
 15 |   margin-left: 0;
 16 |   margin-right: 3rem;
 17 | }
 18 | 
 19 | .configurator-form-wrapper:last-child {
 20 |   margin-right: 0;
 21 | }
 22 | 
 23 | .configurator-form-wrapper:nth-child(2n) {
 24 |   margin-left: auto;
 25 |   margin-right: 0;
 26 | }
 27 | 
 28 | .configurator-result-wrapper {
 29 |   flex-basis: calc(49.95% - 1.5rem);
 30 |   flex-grow: 0;
 31 |   flex-shrink: 0;
 32 |   max-width: calc(49.95% - 1.5rem);
 33 |   width: calc(49.95% - 1.5rem);
 34 | }
 35 | 
 36 | .configurator-result-wrapper:nth-child(1n) {
 37 |   margin-left: 0;
 38 |   margin-right: 3rem;
 39 | }
 40 | 
 41 | .configurator-result-wrapper:last-child {
 42 |   margin-right: 0;
 43 | }
 44 | 
 45 | .configurator-result-wrapper:nth-child(2n) {
 46 |   margin-left: auto;
 47 |   margin-right: 0;
 48 | }
 49 | 
 50 | .configurator-form-subtitle {
 51 |   color: #b58900;
 52 |   text-align: center;
 53 |   margin: 0.2rem 0;
 54 | }
 55 | 
 56 | @media (width <= 640px) {
 57 |   .configurator-form-wrapper {
 58 |     flex-basis: 99.9%;
 59 |     flex-grow: 0;
 60 |     flex-shrink: 0;
 61 |     max-width: 99.9%;
 62 |     width: 99.9%;
 63 |   }
 64 | 
 65 |   .configurator-form-wrapper:nth-child(1n) {
 66 |     margin-left: 0;
 67 |     margin-right: 30px;
 68 |   }
 69 | 
 70 |   .configurator-form-wrapper:last-child {
 71 |     margin-right: 0;
 72 |   }
 73 | 
 74 |   .configurator-form-wrapper:nth-child(1n) {
 75 |     margin-left: auto;
 76 |     margin-right: 0;
 77 |   }
 78 | 
 79 |   .configurator-result-wrapper {
 80 |     flex-basis: 99.9%;
 81 |     flex-grow: 0;
 82 |     flex-shrink: 0;
 83 |     max-width: 99.9%;
 84 |     width: 99.9%;
 85 |   }
 86 | 
 87 |   .configurator-result-wrapper:nth-child(1n) {
 88 |     margin-left: 0;
 89 |     margin-right: 30px;
 90 |   }
 91 | 
 92 |   .configurator-result-wrapper:last-child {
 93 |     margin-right: 0;
 94 |   }
 95 | 
 96 |   .configurator-result-wrapper:nth-child(1n) {
 97 |     margin-left: auto;
 98 |     margin-right: 0;
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/src/common/components/configurator/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { useDispatch, useSelector } from 'react-redux'
 3 | import { selectIsConfigured, resetConfiguration } from '@features/configuration/configurationSlice'
 4 | import InfoView from '@common/components/infoView'
 5 | import ConfigurationForm from '@common/components/configurationForm'
 6 | import ConfigurationView from '@common/components/configurationView'
 7 | 
 8 | import './configurator.css'
 9 | 
10 | const Configurator = () => {
11 |   const dispatch = useDispatch()
12 |   const isConfigured = useSelector(selectIsConfigured)
13 | 
14 |   useEffect(() => {
15 |     return () => dispatch(resetConfiguration())
16 |   }, [dispatch])
17 | 
18 |   return (
19 |     <div className="configurator">
20 |       <div className="configurator-form-wrapper">
21 |         <h4 className="configurator-form-subtitle">Parameters of your system</h4>
22 |         <ConfigurationForm />
23 |       </div>
24 |       <div className="configurator-result-wrapper">
25 |         {isConfigured ? <ConfigurationView /> : <InfoView />}
26 |       </div>
27 |     </div>
28 |   )
29 | }
30 | 
31 | export default Configurator
32 | 


--------------------------------------------------------------------------------
/src/common/components/copyButton/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useState, useEffect } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { useIsMounted } from '@hooks/useIsMounted'
 4 | import Clipboard from 'clipboard'
 5 | 
 6 | const COPIED_TIMEOUT = 2000
 7 | 
 8 | const CopyButton = ({
 9 |   text,
10 |   className,
11 |   label = 'Copy',
12 |   successLabel = 'Copied',
13 |   errorLabel = 'Error'
14 | }) => {
15 |   const copyButton = useRef()
16 |   const clipboard = useRef()
17 |   const isMounted = useIsMounted()
18 |   const [copiedSuccess, setCopiedSuccess] = useState(false)
19 |   const [copiedError, setCopiedError] = useState(false)
20 | 
21 |   useEffect(() => {
22 |     const resetState = () => {
23 |       setTimeout(() => {
24 |         if (clipboard.current && isMounted()) {
25 |           setCopiedSuccess(false)
26 |           setCopiedError(false)
27 |         }
28 |       }, COPIED_TIMEOUT)
29 |     }
30 | 
31 |     if (isMounted() && copyButton.current) {
32 |       clipboard.current = new Clipboard(copyButton.current)
33 |       clipboard.current.on('success', () => {
34 |         setCopiedSuccess(true)
35 |         resetState()
36 |       })
37 |       clipboard.current.on('error', () => {
38 |         setCopiedError(true)
39 |         resetState()
40 |       })
41 | 
42 |       return () => {
43 |         if (clipboard.current) {
44 |           clipboard.current.destroy()
45 |           clipboard.current = null
46 |         }
47 |       }
48 |     }
49 | 
50 |     return () => {}
51 |   }, [isMounted])
52 | 
53 |   const renderLabel = () => {
54 |     if (copiedSuccess) {
55 |       return successLabel
56 |     } else if (copiedError) {
57 |       return errorLabel
58 |     } else {
59 |       return label
60 |     }
61 |   }
62 | 
63 |   return (
64 |     <button className={className} ref={copyButton} data-clipboard-text={text}>
65 |       {renderLabel()}
66 |     </button>
67 |   )
68 | }
69 | 
70 | CopyButton.propTypes = {
71 |   className: PropTypes.string,
72 |   text: PropTypes.string.isRequired,
73 |   label: PropTypes.string,
74 |   successLabel: PropTypes.string,
75 |   errorLabel: PropTypes.string
76 | }
77 | 
78 | export default CopyButton
79 | 


--------------------------------------------------------------------------------
/src/common/components/form/dropdown.css:
--------------------------------------------------------------------------------
  1 | .form-dropdown {
  2 |   display: flex;
  3 |   flex-flow: row wrap;
  4 |   margin-bottom: 1rem;
  5 | }
  6 | 
  7 | .form-dropdown-label {
  8 |   flex-basis: calc(62.4375% - 11.25px);
  9 |   flex-grow: 0;
 10 |   flex-shrink: 0;
 11 |   font-size: 1.1rem;
 12 |   max-width: calc(62.4375% - 11.25px);
 13 |   width: calc(62.4375% - 11.25px);
 14 | }
 15 | 
 16 | .form-dropdown-label:nth-child(1n) {
 17 |   margin-left: 0;
 18 |   margin-right: 30px;
 19 | }
 20 | 
 21 | .form-dropdown-label:last-child {
 22 |   margin-right: 0;
 23 | }
 24 | 
 25 | .form-dropdown-label:nth-child(2n) {
 26 |   margin-left: auto;
 27 |   margin-right: 0;
 28 | }
 29 | 
 30 | .form-dropdown-tooltip {
 31 |   flex-basis: calc(37.4625% - 18.75px);
 32 |   flex-grow: 0;
 33 |   flex-shrink: 0;
 34 |   font-size: 0.8rem;
 35 |   max-width: calc(37.4625% - 18.75px);
 36 |   text-align: right;
 37 |   width: calc(37.4625% - 18.75px);
 38 | }
 39 | 
 40 | .form-dropdown-tooltip:nth-child(1n) {
 41 |   margin-left: 0;
 42 |   margin-right: 30px;
 43 | }
 44 | 
 45 | .form-dropdown-tooltip:last-child {
 46 |   margin-right: 0;
 47 | }
 48 | 
 49 | .form-dropdown-tooltip:nth-child(2n) {
 50 |   margin-left: auto;
 51 |   margin-right: 0;
 52 | }
 53 | 
 54 | .form-dropdown-tooltip__button {
 55 |   border-bottom: 1px dotted #b58900;
 56 |   text-decoration: none;
 57 |   vertical-align: middle;
 58 |   margin-right: 4px;
 59 | }
 60 | 
 61 | .form-dropdown-wrapper {
 62 |   flex-basis: 99.9%;
 63 |   flex-grow: 0;
 64 |   flex-shrink: 0;
 65 |   max-width: 99.9%;
 66 |   width: 99.9%;
 67 | }
 68 | 
 69 | .form-dropdown-wrapper:nth-child(1n) {
 70 |   margin-left: 0;
 71 |   margin-right: 30px;
 72 | }
 73 | 
 74 | .form-dropdown-wrapper:last-child {
 75 |   margin-right: 0;
 76 | }
 77 | 
 78 | .form-dropdown-wrapper:nth-child(1n) {
 79 |   margin-left: auto;
 80 |   margin-right: 0;
 81 | }
 82 | 
 83 | .form-dropdown-wrapper__select {
 84 |   width: 100%;
 85 |   font-size: 1.3rem;
 86 |   color: var(--inputColor);
 87 |   border-radius: 0;
 88 |   appearance: none;
 89 |   border: 1px solid var(--inputBorder);
 90 |   background-color: var(--inputBg);
 91 |   padding: 2px 1px;
 92 |   box-sizing: border-box;
 93 | }
 94 | .form-dropdown-wrapper__select:focus:not(:focus-visible) {
 95 |   outline: none;
 96 | }
 97 | 
 98 | .form-dropdown-error {
 99 |   color: #dc322f;
100 |   flex-basis: 99.9%;
101 |   flex-grow: 0;
102 |   flex-shrink: 0;
103 |   font-size: 0.8rem;
104 |   max-width: 99.9%;
105 |   width: 99.9%;
106 | }
107 | 
108 | .form-dropdown-error:nth-child(1n) {
109 |   margin-left: 0;
110 |   margin-right: 30px;
111 | }
112 | 
113 | .form-dropdown-error:last-child {
114 |   margin-right: 0;
115 | }
116 | 
117 | .form-dropdown-error:nth-child(1n) {
118 |   margin-left: auto;
119 |   margin-right: 0;
120 | }
121 | 


--------------------------------------------------------------------------------
/src/common/components/form/dropdown.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { camelCase } from 'lodash-es'
 4 | import Tooltip from './tooltip'
 5 | 
 6 | import './dropdown.css'
 7 | 
 8 | const FormDropdown = ({ label, tooltip, options, field, form: { touched, errors }, ...rest }) => {
 9 |   const dropdownID = camelCase(`${field.name}-id`)
10 |   const isError = touched[field.name] && errors[field.name]
11 | 
12 |   return (
13 |     <div className="form-dropdown">
14 |       <label className="form-dropdown-label" htmlFor={dropdownID}>
15 |         {label}
16 |       </label>
17 |       <Tooltip
18 |         id={`tooltip${dropdownID}`}
19 |         label="what is this?"
20 |         text={tooltip}
21 |         className="form-dropdown-tooltip"
22 |       />
23 |       <div className="form-dropdown-wrapper">
24 |         <select
25 |           {...field}
26 |           {...rest}
27 |           className="form-dropdown-wrapper__select"
28 |           aria-describedby={`tooltip${dropdownID}Content`}
29 |           id={dropdownID}
30 |         >
31 |           {options.map((option, index) => {
32 |             return (
33 |               <option key={index} value={option.value}>
34 |                 {option.label}
35 |               </option>
36 |             )
37 |           })}
38 |         </select>
39 |         {isError && <div className="form-dropdown-error">{errors[field.name]}</div>}
40 |       </div>
41 |     </div>
42 |   )
43 | }
44 | 
45 | FormDropdown.propTypes = {
46 |   label: PropTypes.string.isRequired,
47 |   tooltip: PropTypes.string.isRequired,
48 |   field: PropTypes.shape({
49 |     name: PropTypes.string.isRequired,
50 |     value: PropTypes.any
51 |   }).isRequired,
52 |   form: PropTypes.shape({
53 |     touched: PropTypes.object,
54 |     errors: PropTypes.object
55 |   }).isRequired,
56 |   options: PropTypes.arrayOf(
57 |     PropTypes.shape({
58 |       label: PropTypes.string.isRequired,
59 |       value: PropTypes.any.isRequired
60 |     }).isRequired
61 |   )
62 | }
63 | 
64 | export default FormDropdown
65 | 


--------------------------------------------------------------------------------
/src/common/components/form/field.css:
--------------------------------------------------------------------------------
  1 | .form-field {
  2 |   display: flex;
  3 |   flex-flow: row wrap;
  4 |   margin-bottom: 1rem;
  5 | }
  6 | 
  7 | .form-field-label {
  8 |   flex-basis: calc(62.4375% - 11.25px);
  9 |   flex-grow: 0;
 10 |   flex-shrink: 0;
 11 |   font-size: 1.1rem;
 12 |   max-width: calc(62.4375% - 11.25px);
 13 |   width: calc(62.4375% - 11.25px);
 14 | }
 15 | 
 16 | .form-field-label:nth-child(1n) {
 17 |   margin-left: 0;
 18 |   margin-right: 30px;
 19 | }
 20 | 
 21 | .form-field-label:last-child {
 22 |   margin-right: 0;
 23 | }
 24 | 
 25 | .form-field-label:nth-child(2n) {
 26 |   margin-left: auto;
 27 |   margin-right: 0;
 28 | }
 29 | 
 30 | .form-field-tooltip {
 31 |   flex-basis: calc(37.4625% - 18.75px);
 32 |   flex-grow: 0;
 33 |   flex-shrink: 0;
 34 |   font-size: 0.8rem;
 35 |   max-width: calc(37.4625% - 18.75px);
 36 |   text-align: right;
 37 |   width: calc(37.4625% - 18.75px);
 38 | }
 39 | 
 40 | .form-field-tooltip:nth-child(1n) {
 41 |   margin-left: 0;
 42 |   margin-right: 30px;
 43 | }
 44 | 
 45 | .form-field-tooltip:last-child {
 46 |   margin-right: 0;
 47 | }
 48 | 
 49 | .form-field-tooltip:nth-child(2n) {
 50 |   margin-left: auto;
 51 |   margin-right: 0;
 52 | }
 53 | 
 54 | .form-field-tooltip__button {
 55 |   border-bottom: 1px dotted #b58900;
 56 |   text-decoration: none;
 57 |   vertical-align: middle;
 58 |   margin-right: 4px;
 59 | }
 60 | 
 61 | .form-field-wrapper {
 62 |   flex-basis: 99.9%;
 63 |   flex-grow: 0;
 64 |   flex-shrink: 0;
 65 |   max-width: 99.9%;
 66 |   width: 99.9%;
 67 | }
 68 | 
 69 | .form-field-wrapper:nth-child(1n) {
 70 |   margin-left: 0;
 71 |   margin-right: 30px;
 72 | }
 73 | 
 74 | .form-field-wrapper:last-child {
 75 |   margin-right: 0;
 76 | }
 77 | 
 78 | .form-field-wrapper:nth-child(1n) {
 79 |   margin-left: auto;
 80 |   margin-right: 0;
 81 | }
 82 | 
 83 | .form-field-wrapper__input {
 84 |   width: 100%;
 85 |   font-size: 1.3rem;
 86 |   color: var(--inputColor);
 87 |   border-radius: 0;
 88 |   border: 1px solid var(--inputBorder);
 89 |   background-color: var(--inputBg);
 90 |   padding: 2px 1px;
 91 |   box-sizing: border-box;
 92 | }
 93 | .form-field-wrapper__input:placeholder {
 94 |   font-size: 1.2rem;
 95 |   color: var(--inputColorPlaceholder);
 96 | }
 97 | .form-field-wrapper__input:focus:not(:focus-visible) {
 98 |   outline: none;
 99 | }
100 | 
101 | .form-field-error {
102 |   color: #dc322f;
103 |   flex-basis: 99.9%;
104 |   flex-grow: 0;
105 |   flex-shrink: 0;
106 |   font-size: 0.8rem;
107 |   max-width: 99.9%;
108 |   width: 99.9%;
109 | }
110 | 
111 | .form-field-error:nth-child(1n) {
112 |   margin-left: 0;
113 |   margin-right: 30px;
114 | }
115 | 
116 | .form-field-error:last-child {
117 |   margin-right: 0;
118 | }
119 | 
120 | .form-field-error:nth-child(1n) {
121 |   margin-left: auto;
122 |   margin-right: 0;
123 | }
124 | 


--------------------------------------------------------------------------------
/src/common/components/form/field.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { camelCase } from 'lodash-es'
 4 | import Tooltip from './tooltip'
 5 | 
 6 | import './field.css'
 7 | 
 8 | const FormField = ({ label, tooltip, field, form: { touched, errors }, ...rest }) => {
 9 |   const inputID = camelCase(`${field.name}-id`)
10 |   const isError = touched[field.name] && errors[field.name]
11 | 
12 |   return (
13 |     <div className="form-field">
14 |       <label className="form-field-label" htmlFor={inputID}>
15 |         {label}
16 |       </label>
17 |       <Tooltip
18 |         id={`tooltip${inputID}`}
19 |         label="what is this?"
20 |         text={tooltip}
21 |         className="form-field-tooltip"
22 |       />
23 |       <div className="form-field-wrapper">
24 |         <input
25 |           {...field}
26 |           {...rest}
27 |           className="form-field-wrapper__input"
28 |           aria-label={label}
29 |           aria-describedby={`tooltip${inputID}Content`}
30 |           id={inputID}
31 |         />
32 |         {isError && <div className="form-field-error">{errors[field.name]}</div>}
33 |       </div>
34 |     </div>
35 |   )
36 | }
37 | 
38 | FormField.propTypes = {
39 |   label: PropTypes.string.isRequired,
40 |   tooltip: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]).isRequired,
41 |   field: PropTypes.shape({
42 |     name: PropTypes.string.isRequired,
43 |     value: PropTypes.any
44 |   }).isRequired,
45 |   form: PropTypes.shape({
46 |     touched: PropTypes.object,
47 |     errors: PropTypes.object
48 |   }).isRequired
49 | }
50 | 
51 | export default FormField
52 | 


--------------------------------------------------------------------------------
/src/common/components/form/simpleDropdown.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import './dropdown.css'
 5 | 
 6 | const FormSimpleDropdown = ({
 7 |   field,
 8 |   options,
 9 |   label,
10 |   className,
11 |   selectClassName,
12 |   errorClassName,
13 |   form: { touched, errors },
14 |   ...rest
15 | }) => {
16 |   const isError = touched[field.name] && errors[field.name]
17 | 
18 |   return (
19 |     <div className={className}>
20 |       <select {...field} {...rest} className={selectClassName} aria-label={label}>
21 |         {options.map((option, index) => {
22 |           return (
23 |             <option key={index} value={option.value}>
24 |               {option.label}
25 |             </option>
26 |           )
27 |         })}
28 |       </select>
29 |       {isError && <div className={errorClassName}>{errors[field.name]}</div>}
30 |     </div>
31 |   )
32 | }
33 | 
34 | FormSimpleDropdown.propTypes = {
35 |   field: PropTypes.shape({
36 |     name: PropTypes.string.isRequired,
37 |     value: PropTypes.any
38 |   }).isRequired,
39 |   label: PropTypes.string.isRequired,
40 |   className: PropTypes.string,
41 |   selectClassName: PropTypes.string,
42 |   errorClassName: PropTypes.string,
43 |   options: PropTypes.arrayOf(
44 |     PropTypes.shape({
45 |       label: PropTypes.string.isRequired,
46 |       value: PropTypes.any.isRequired
47 |     }).isRequired
48 |   ),
49 |   form: PropTypes.shape({
50 |     touched: PropTypes.object,
51 |     errors: PropTypes.object
52 |   }).isRequired
53 | }
54 | 
55 | export default FormSimpleDropdown
56 | 


--------------------------------------------------------------------------------
/src/common/components/form/simpleField.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import './field.css'
 5 | 
 6 | const FormSimpleField = ({
 7 |   field,
 8 |   className,
 9 |   inputClassName,
10 |   errorClassName,
11 |   form: { touched, errors },
12 |   ...rest
13 | }) => {
14 |   const isError = touched[field.name] && errors[field.name]
15 | 
16 |   return (
17 |     <div className={className}>
18 |       <input {...field} {...rest} className={inputClassName} />
19 |       {isError && <div className={errorClassName}>{errors[field.name]}</div>}
20 |     </div>
21 |   )
22 | }
23 | 
24 | FormSimpleField.propTypes = {
25 |   field: PropTypes.shape({
26 |     name: PropTypes.string.isRequired,
27 |     value: PropTypes.any
28 |   }).isRequired,
29 |   className: PropTypes.string,
30 |   inputClassName: PropTypes.string,
31 |   errorClassName: PropTypes.string,
32 |   form: PropTypes.shape({
33 |     touched: PropTypes.object,
34 |     errors: PropTypes.object
35 |   }).isRequired
36 | }
37 | 
38 | export default FormSimpleField
39 | 


--------------------------------------------------------------------------------
/src/common/components/form/tooltip.css:
--------------------------------------------------------------------------------
 1 | .tooltip-container {
 2 |   position: relative;
 3 |   display: inline-block;
 4 | }
 5 | 
 6 | .tooltip-button {
 7 |   display: inline-block;
 8 |   box-sizing: border-box;
 9 |   border: none;
10 |   background-color: transparent;
11 |   cursor: pointer;
12 |   color: #b58900;
13 | }
14 | 
15 | .tooltip-block {
16 |   color: var(--inputColor);
17 |   position: absolute;
18 |   padding: 0.5rem;
19 |   margin-bottom: 1rem;
20 |   bottom: 50%;
21 |   left: 0%;
22 |   transform: translateX(-50%);
23 |   min-height: 20px;
24 |   border-radius: 0;
25 |   background-color: #b58900;
26 |   border: 1px solid var(--inputBorder);
27 |   white-space: nowrap;
28 | }
29 | .tooltip-block__visible {
30 |   transform: translateY(0) translateX(-50%);
31 |   opacity: 1;
32 |   visibility: visible;
33 |   transition:
34 |     transform 300ms ease,
35 |     opacity 300ms,
36 |     visibility 300ms 0s;
37 | }
38 | .tooltip-block__visible:after {
39 |   top: 100%;
40 | }
41 | .tooltip-block__hidden {
42 |   transform: translateY(100%) translateX(-50%);
43 |   opacity: 0;
44 |   visibility: hidden;
45 |   transition:
46 |     transform 300ms ease,
47 |     opacity 300ms,
48 |     visibility 300ms 300ms;
49 | }
50 | .tooltip-block__hidden:after {
51 |   top: 0;
52 | }
53 | 
54 | @media (width <= 640px) {
55 |   .tooltip-block {
56 |     white-space: normal;
57 |   }
58 |   .tooltip-block:after {
59 |     left: 90%;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/common/components/form/tooltip.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | import './tooltip.css'
 6 | 
 7 | const Tooltip = ({ id, label, text, className }) => {
 8 |   const tooltipRef = useRef()
 9 |   const [isVisible, setVisibility] = useState(false)
10 | 
11 |   useEffect(() => {
12 |     const closeTooltip = (e) => {
13 |       if (tooltipRef.current && !tooltipRef.current.contains(e.target) && isVisible) {
14 |         setVisibility(false)
15 |       }
16 |     }
17 | 
18 |     document.body.addEventListener('click', closeTooltip)
19 |     return () => document.body.removeEventListener('click', closeTooltip)
20 |   }, [isVisible])
21 | 
22 |   const toggleTooltip = () => {
23 |     setVisibility((visible) => !visible)
24 |   }
25 | 
26 |   return (
27 |     <div ref={tooltipRef} className={classnames('tooltip-container', className)}>
28 |       <div
29 |         className={classnames('tooltip-block', {
30 |           ['tooltip-block__visible']: isVisible,
31 |           ['tooltip-block__hidden']: !isVisible
32 |         })}
33 |       >
34 |         {text}
35 |       </div>
36 |       <button
37 |         id={`${id}Content`}
38 |         className={classnames('tooltip-button', {
39 |           [`${className}__button`]: !!className
40 |         })}
41 |         type="button"
42 |         onClick={toggleTooltip}
43 |       >
44 |         {label}
45 |       </button>
46 |     </div>
47 |   )
48 | }
49 | 
50 | Tooltip.propTypes = {
51 |   id: PropTypes.string,
52 |   label: PropTypes.string.isRequired,
53 |   text: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]).isRequired,
54 |   className: PropTypes.string
55 | }
56 | 
57 | export default Tooltip
58 | 


--------------------------------------------------------------------------------
/src/common/components/githubCorner/github-corner.css:
--------------------------------------------------------------------------------
 1 | .github-corner:hover .github-corner-arm {
 2 |   animation: octocat-wave 560ms ease-in-out;
 3 | }
 4 | 
 5 | @keyframes octocat-wave {
 6 |   0%,
 7 |   100% {
 8 |     transform: rotate(0);
 9 |   }
10 |   20%,
11 |   60% {
12 |     transform: rotate(-25deg);
13 |   }
14 |   40%,
15 |   80% {
16 |     transform: rotate(10deg);
17 |   }
18 | }
19 | @media (max-width: 500px) {
20 |   .github-corner .github-corner-arm {
21 |     animation: octocat-wave 560ms ease-in-out;
22 |   }
23 |   .github-corner:hover .github-corner-arm {
24 |     animation: none;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/common/components/githubCorner/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useSelector } from 'react-redux'
 3 | import { selectThemeSettings } from '@features/settings/settingsSlice'
 4 | import { APP_THEMES_LIGHT, APP_THEMES_DARK } from '@features/settings/constants'
 5 | 
 6 | import './github-corner.css'
 7 | 
 8 | const GithubCorner = () => {
 9 |   const appTheme = useSelector(selectThemeSettings)
10 |   const theme = APP_THEMES_LIGHT === appTheme ? APP_THEMES_DARK : APP_THEMES_LIGHT
11 | 
12 |   if (!window.matchMedia('(min-width: 500px)').matches) {
13 |     return null // hide for small screens
14 |   }
15 | 
16 |   const svgStyles = () => {
17 |     const lightColor = '#fff'
18 |     const darkColor = '#151513'
19 | 
20 |     const baseStyles = {
21 |       position: 'absolute',
22 |       top: 0,
23 |       border: 0,
24 |       right: 0
25 |     }
26 | 
27 |     if (APP_THEMES_LIGHT === theme) {
28 |       return {
29 |         ...baseStyles,
30 |         fill: lightColor,
31 |         color: darkColor
32 |       }
33 |     } else {
34 |       return {
35 |         ...baseStyles,
36 |         fill: darkColor,
37 |         color: lightColor
38 |       }
39 |     }
40 |   }
41 | 
42 |   return (
43 |     <a
44 |       href="https://github.com/le0pard/pgtune"
45 |       className="github-corner"
46 |       aria-label="View source on Github"
47 |     >
48 |       <svg width="80" height="80" viewBox="0 0 250 250" style={svgStyles()} aria-hidden="true">
49 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
50 |         <path
51 |           d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
52 |           fill="currentColor"
53 |           style={{ transformOrigin: '130px 106px' }}
54 |           className="github-corner-arm"
55 |         />
56 |         <path
57 |           d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
58 |           fill="currentColor"
59 |           className="github-corner-body"
60 |         />
61 |       </svg>
62 |     </a>
63 |   )
64 | }
65 | 
66 | export default GithubCorner
67 | 


--------------------------------------------------------------------------------
/src/common/components/infoView/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import './info-view.css'
 4 | 
 5 | const InfoView = () => (
 6 |   <div>
 7 |     <p>
 8 |       You need provide basic information about your hardware configuration, where is working
 9 |       PostgreSQL database. Results will be calculated after clicking &quot;Generate&quot; button
10 |     </p>
11 |     <p className="info-view-db-type__description">
12 |       More information about &quot;DB Type&quot; setting:
13 |     </p>
14 |     <ul className="info-view-db-type__list">
15 |       <li>
16 |         <div className="info-view-db-type__header">Web Application (web)</div>
17 |         <ul>
18 |           <li>Typically CPU-bound</li>
19 |           <li>DB much smaller than RAM</li>
20 |           <li>90% or more simple queries</li>
21 |         </ul>
22 |       </li>
23 |       <li>
24 |         <div className="info-view-db-type__header">Online Transaction Processing (oltp)</div>
25 |         <ul>
26 |           <li>Typically CPU- or I/O-bound</li>
27 |           <li>DB slightly larger than RAM to 1TB</li>
28 |           <li>20-40% small data write queries</li>
29 |           <li>Some long transactions and complex read queries</li>
30 |         </ul>
31 |       </li>
32 |       <li>
33 |         <div className="info-view-db-type__header">Data Warehouse (dw)</div>
34 |         <ul>
35 |           <li>Typically I/O- or RAM-bound</li>
36 |           <li>Large bulk loads of data</li>
37 |           <li>Large complex reporting queries</li>
38 |           <li>Also called &quot;Decision Support&quot; or &quot;Business Intelligence&quot;</li>
39 |         </ul>
40 |       </li>
41 |       <li>
42 |         <div className="info-view-db-type__header">Desktop application</div>
43 |         <ul>
44 |           <li>Not a dedicated database</li>
45 |           <li>A general workstation, perhaps for a developer</li>
46 |         </ul>
47 |       </li>
48 |       <li>
49 |         <div className="info-view-db-type__header">Mixed type of application</div>
50 |         <ul>
51 |           <li>Mixed DW and OLTP characteristics</li>
52 |           <li>A wide mixture of queries</li>
53 |         </ul>
54 |       </li>
55 |     </ul>
56 |   </div>
57 | )
58 | 
59 | export default InfoView
60 | 


--------------------------------------------------------------------------------
/src/common/components/infoView/info-view.css:
--------------------------------------------------------------------------------
 1 | .info-view-db-type__description {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | .info-view-db-type__list {
 6 |   font-size: 0.8rem;
 7 |   margin: 0;
 8 | }
 9 | 
10 | .info-view-db-type__header {
11 |   font-size: 1rem;
12 |   padding: 8px 0px;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/common/components/themeSwitcher/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react'
 2 | import { useDispatch, useSelector } from 'react-redux'
 3 | import { toggleTheme, selectThemeSettings } from '@features/settings/settingsSlice'
 4 | import classnames from 'classnames'
 5 | import { APP_THEMES_DARK } from '@features/settings/constants'
 6 | 
 7 | import './theme-switcher.css'
 8 | 
 9 | const ThemeSwitcher = () => {
10 |   const htmlRoot = useRef()
11 |   const dispatch = useDispatch()
12 |   const theme = useSelector(selectThemeSettings)
13 | 
14 |   useEffect(() => {
15 |     htmlRoot.current = document.querySelector(':root')
16 |   }, [])
17 | 
18 |   useEffect(() => {
19 |     if (htmlRoot.current) {
20 |       htmlRoot.current.className = theme
21 |     }
22 |   }, [theme])
23 | 
24 |   const handleToggleTheme = () => {
25 |     dispatch(toggleTheme())
26 |   }
27 | 
28 |   const isDarkThemeActive = theme === APP_THEMES_DARK
29 | 
30 |   return (
31 |     <label className="toggle-wrapper" htmlFor="theme-toggle">
32 |       <div
33 |         className={classnames('toggle', {
34 |           toggle__dark: isDarkThemeActive
35 |         })}
36 |       >
37 |         <span className="toggle-hidden-block">
38 |           {isDarkThemeActive ? 'Enable Light Mode' : 'Enable Dark Mode'}
39 |         </span>
40 |         <div className="toggle-icons">
41 |           <svg
42 |             width="24"
43 |             height="24"
44 |             viewBox="0 0 24 24"
45 |             fill="none"
46 |             xmlns="http://www.w3.org/2000/svg"
47 |           >
48 |             <path d="M6.995 12C6.995 14.761 9.241 17.007 12.002 17.007C14.763 17.007 17.009 14.761 17.009 12C17.009 9.239 14.763 6.993 12.002 6.993C9.241 6.993 6.995 9.239 6.995 12ZM11 19H13V22H11V19ZM11 2H13V5H11V2ZM2 11H5V13H2V11ZM19 11H22V13H19V11Z" />
49 |             <path d="M5.63702 19.778L4.22302 18.364L6.34402 16.243L7.75802 17.657L5.63702 19.778Z" />
50 |             <path d="M16.242 6.34405L18.364 4.22205L19.778 5.63605L17.656 7.75805L16.242 6.34405Z" />
51 |             <path d="M6.34402 7.75902L4.22302 5.63702L5.63802 4.22302L7.75802 6.34502L6.34402 7.75902Z" />
52 |             <path d="M19.778 18.3639L18.364 19.7779L16.242 17.6559L17.656 16.2419L19.778 18.3639Z" />
53 |           </svg>
54 | 
55 |           <svg
56 |             width="24"
57 |             height="24"
58 |             viewBox="0 0 24 24"
59 |             fill="none"
60 |             xmlns="http://www.w3.org/2000/svg"
61 |           >
62 |             <path d="M12 11.807C10.7418 10.5483 9.88488 8.94484 9.53762 7.1993C9.19037 5.45375 9.36832 3.64444 10.049 2C8.10826 2.38205 6.3256 3.33431 4.92899 4.735C1.02399 8.64 1.02399 14.972 4.92899 18.877C8.83499 22.783 15.166 22.782 19.072 18.877C20.4723 17.4805 21.4245 15.6983 21.807 13.758C20.1625 14.4385 18.3533 14.6164 16.6077 14.2692C14.8622 13.9219 13.2588 13.0651 12 11.807V11.807Z" />
63 |           </svg>
64 |         </div>
65 |         <input
66 |           id="theme-toggle"
67 |           name="theme-toggle"
68 |           type="checkbox"
69 |           defaultChecked={isDarkThemeActive}
70 |           onChange={handleToggleTheme}
71 |         />
72 |       </div>
73 |     </label>
74 |   )
75 | }
76 | 
77 | export default ThemeSwitcher
78 | 


--------------------------------------------------------------------------------
/src/common/components/themeSwitcher/theme-switcher.css:
--------------------------------------------------------------------------------
 1 | .toggle-hidden-block {
 2 |   clip: rect(0 0 0 0);
 3 |   clip-path: inset(50%);
 4 |   height: 1px;
 5 |   overflow: hidden;
 6 |   position: absolute;
 7 |   white-space: nowrap;
 8 |   width: 1px;
 9 | }
10 | 
11 | .toggle-wrapper {
12 |   width: 4rem;
13 |   display: block;
14 | }
15 | 
16 | .toggle {
17 |   background: var(--baseColor);
18 |   border-radius: 40px;
19 |   padding: 0.5rem;
20 |   position: relative;
21 |   transition: background 0.5s ease;
22 |   cursor: pointer;
23 | }
24 | 
25 | .toggle::before {
26 |   content: '';
27 |   display: block;
28 |   height: 1.22rem;
29 |   width: 1.22rem;
30 |   border-radius: 30px;
31 |   background: var(--headsColor);
32 |   position: absolute;
33 |   top: 0.33rem;
34 |   z-index: 2;
35 |   transform: translate(0);
36 |   transition: transform 0.5s ease;
37 | }
38 | 
39 | .toggle__dark::before {
40 |   transform: translateX(1.8rem);
41 | }
42 | 
43 | .toggle input {
44 |   opacity: 0;
45 |   position: absolute;
46 |   top: 0;
47 | }
48 | 
49 | .toggle-icons {
50 |   display: flex;
51 |   justify-content: space-between;
52 |   align-items: center;
53 |   height: 100%;
54 |   margin: 0 5px;
55 | }
56 | 
57 | .toggle .toggle-icons svg {
58 |   fill: var(--headsColor);
59 |   height: 0.9rem;
60 |   width: 0.9rem;
61 |   z-index: 0;
62 | }
63 | 


--------------------------------------------------------------------------------
/src/common/utils/localStorage.js:
--------------------------------------------------------------------------------
 1 | export const LocalStorage = {
 2 |   getItem: (key) => {
 3 |     const value = window.localStorage.getItem(key)
 4 |     if (value) {
 5 |       return JSON.parse(value)
 6 |     } else {
 7 |       return null
 8 |     }
 9 |   },
10 |   setItem: (key, value) => {
11 |     window.localStorage.setItem(key, JSON.stringify(value))
12 |   },
13 |   removeItem: (key) => {
14 |     window.localStorage.removeItem(key)
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/common/utils/onDomReady.js:
--------------------------------------------------------------------------------
1 | export const onDomReady = (callback) => {
2 |   if (document.readyState !== 'loading') {
3 |     return setTimeout(callback, 0)
4 |   } else {
5 |     return document.addEventListener('DOMContentLoaded', () => callback())
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/css/app.css:
--------------------------------------------------------------------------------
  1 | @import 'normalize.css';
  2 | 
  3 | :root {
  4 |   --baseColor: #657b83;
  5 |   --bgColor: #fdf6e3;
  6 |   --headsColor: #eee8d5;
  7 |   --emphColor: #586e75;
  8 |   --commentColor: #93a1a1;
  9 |   --inputBg: #fefcf6;
 10 |   --inputBgDisabled: #93a1a1;
 11 |   --inputColor: #073642;
 12 |   --inputBorder: #93a1a1;
 13 |   --inputColorPlaceholder: #b8c4c9;
 14 |   --buttonHover: #fdfcf9;
 15 | }
 16 | 
 17 | :root.dark {
 18 |   --baseColor: #839496;
 19 |   --bgColor: #002b36;
 20 |   --headsColor: #073642;
 21 |   --emphColor: #93a1a1;
 22 |   --commentColor: #586e75;
 23 |   --inputBg: #073642;
 24 |   --inputBgDisabled: #586e75;
 25 |   --inputColor: #eee8d5;
 26 |   --inputBorder: #586e75;
 27 |   --inputColorPlaceholder: #3b4445;
 28 |   --buttonHover: #021014;
 29 | }
 30 | 
 31 | :root {
 32 |   font-size: 18px;
 33 | }
 34 | 
 35 | @media (min-width: 420px) and (max-width: 980px) {
 36 |   :root {
 37 |     font-size: calc(18px + (22 - 18) * ((100vw - 420px) / (980 - 420)));
 38 |   }
 39 | }
 40 | @media (min-width: 980px) {
 41 |   :root {
 42 |     font-size: 22px;
 43 |   }
 44 | }
 45 | 
 46 | html {
 47 |   background-color: var(--headsColor);
 48 |   color: var(--baseColor);
 49 | }
 50 | 
 51 | body {
 52 |   font-family: system-ui;
 53 | }
 54 | 
 55 | a {
 56 |   color: #b58900;
 57 | }
 58 | 
 59 | a:hover {
 60 |   color: #cb4b16;
 61 |   text-decoration: none;
 62 | }
 63 | 
 64 | pre {
 65 |   font-family: system-ui;
 66 |   font-size: 0.8125rem;
 67 |   background-color: var(--bgColor);
 68 |   color: var(--baseColor);
 69 |   border: 1px solid var(--commentColor);
 70 |   padding: 0.8125rem;
 71 |   box-shadow: 5px 5px 8px var(--headsColor);
 72 |   white-space: pre-wrap;
 73 | }
 74 | pre code {
 75 |   background-color: var(--bgColor);
 76 | }
 77 | 
 78 | h1,
 79 | h2,
 80 | h3,
 81 | h4,
 82 | h5,
 83 | h6 {
 84 |   color: #859900;
 85 | }
 86 | 
 87 | h1 {
 88 |   font-size: 2.4rem;
 89 | }
 90 | 
 91 | h2 {
 92 |   font-size: 2rem;
 93 | }
 94 | 
 95 | h3 {
 96 |   font-size: 1.8rem;
 97 | }
 98 | 
 99 | h4 {
100 |   font-size: 1.4rem;
101 | }
102 | 
103 | h5 {
104 |   font-size: 1.3rem;
105 | }
106 | 
107 | h6 {
108 |   font-size: 1.15rem;
109 | }
110 | 
111 | input[type='number']::-webkit-inner-spin-button,
112 | input[type='number']::-webkit-outer-spin-button {
113 |   appearance: none;
114 |   margin: 0;
115 | }
116 | 
117 | input[type='number'] {
118 |   appearance: textfield;
119 | }
120 | 
121 | button::-moz-focus-inner,
122 | input::-moz-focus-inner {
123 |   border: 0;
124 |   padding: 0;
125 | }
126 | 
127 | :focus:not(:focus-visible) {
128 |   outline: none;
129 | }
130 | 
131 | #root {
132 |   padding: 0.8rem;
133 | }
134 | 


--------------------------------------------------------------------------------
/src/features/configuration/__tests__/configurationSlice.test.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   selectIsConfigured,
  3 |   selectMaxConnections,
  4 |   selectDefaultStatisticsTarget,
  5 |   selectRandomPageCost,
  6 |   selectEffectiveIoConcurrency,
  7 |   selectParallelSettings,
  8 |   selectWalLevel
  9 | } from '../configurationSlice'
 10 | 
 11 | describe('selectIsConfigured', () => {
 12 |   it('nothing set', () => {
 13 |     expect(
 14 |       selectIsConfigured({
 15 |         configuration: {}
 16 |       })
 17 |     ).toEqual(false)
 18 |   })
 19 |   it('set totalMemory', () => {
 20 |     expect(
 21 |       selectIsConfigured({
 22 |         configuration: {
 23 |           totalMemory: 100
 24 |         }
 25 |       })
 26 |     ).toEqual(true)
 27 |   })
 28 | })
 29 | 
 30 | describe('selectMaxConnections', () => {
 31 |   it('web app', () => {
 32 |     expect(
 33 |       selectMaxConnections({
 34 |         configuration: {
 35 |           dbType: 'web'
 36 |         }
 37 |       })
 38 |     ).toEqual(200)
 39 |   })
 40 |   it('oltp app', () => {
 41 |     expect(
 42 |       selectMaxConnections({
 43 |         configuration: {
 44 |           dbType: 'oltp'
 45 |         }
 46 |       })
 47 |     ).toEqual(300)
 48 |   })
 49 |   it('dw app', () => {
 50 |     expect(
 51 |       selectMaxConnections({
 52 |         configuration: {
 53 |           dbType: 'dw'
 54 |         }
 55 |       })
 56 |     ).toEqual(40)
 57 |   })
 58 |   it('desktop app', () => {
 59 |     expect(
 60 |       selectMaxConnections({
 61 |         configuration: {
 62 |           dbType: 'desktop'
 63 |         }
 64 |       })
 65 |     ).toEqual(20)
 66 |   })
 67 |   it('mixed app', () => {
 68 |     expect(
 69 |       selectMaxConnections({
 70 |         configuration: {
 71 |           dbType: 'mixed'
 72 |         }
 73 |       })
 74 |     ).toEqual(100)
 75 |   })
 76 | })
 77 | 
 78 | describe('selectDefaultStatisticsTarget', () => {
 79 |   it('web app', () => {
 80 |     expect(
 81 |       selectDefaultStatisticsTarget({
 82 |         configuration: {
 83 |           dbType: 'web'
 84 |         }
 85 |       })
 86 |     ).toEqual(100)
 87 |   })
 88 |   it('oltp app', () => {
 89 |     expect(
 90 |       selectDefaultStatisticsTarget({
 91 |         configuration: {
 92 |           dbType: 'oltp'
 93 |         }
 94 |       })
 95 |     ).toEqual(100)
 96 |   })
 97 |   it('dw app', () => {
 98 |     expect(
 99 |       selectDefaultStatisticsTarget({
100 |         configuration: {
101 |           dbType: 'dw'
102 |         }
103 |       })
104 |     ).toEqual(500)
105 |   })
106 |   it('desktop app', () => {
107 |     expect(
108 |       selectDefaultStatisticsTarget({
109 |         configuration: {
110 |           dbType: 'desktop'
111 |         }
112 |       })
113 |     ).toEqual(100)
114 |   })
115 |   it('mixed app', () => {
116 |     expect(
117 |       selectDefaultStatisticsTarget({
118 |         configuration: {
119 |           dbType: 'mixed'
120 |         }
121 |       })
122 |     ).toEqual(100)
123 |   })
124 | })
125 | 
126 | describe('selectRandomPageCost', () => {
127 |   it('hdd', () => {
128 |     expect(
129 |       selectRandomPageCost({
130 |         configuration: {
131 |           hdType: 'hdd'
132 |         }
133 |       })
134 |     ).toEqual(4)
135 |   })
136 |   it('ssd', () => {
137 |     expect(
138 |       selectRandomPageCost({
139 |         configuration: {
140 |           hdType: 'ssd'
141 |         }
142 |       })
143 |     ).toEqual(1.1)
144 |   })
145 |   it('san', () => {
146 |     expect(
147 |       selectRandomPageCost({
148 |         configuration: {
149 |           hdType: 'san'
150 |         }
151 |       })
152 |     ).toEqual(1.1)
153 |   })
154 | })
155 | 
156 | describe('selectEffectiveIoConcurrency', () => {
157 |   it('hdd', () => {
158 |     expect(
159 |       selectEffectiveIoConcurrency({
160 |         configuration: {
161 |           osType: 'linux',
162 |           hdType: 'hdd'
163 |         }
164 |       })
165 |     ).toEqual(2)
166 |   })
167 |   it('ssd', () => {
168 |     expect(
169 |       selectEffectiveIoConcurrency({
170 |         configuration: {
171 |           osType: 'linux',
172 |           hdType: 'ssd'
173 |         }
174 |       })
175 |     ).toEqual(200)
176 |   })
177 |   it('san', () => {
178 |     expect(
179 |       selectEffectiveIoConcurrency({
180 |         configuration: {
181 |           osType: 'linux',
182 |           hdType: 'san'
183 |         }
184 |       })
185 |     ).toEqual(300)
186 |   })
187 |   it('ssd and windows', () => {
188 |     expect(
189 |       selectEffectiveIoConcurrency({
190 |         configuration: {
191 |           osType: 'windows',
192 |           hdType: 'ssd'
193 |         }
194 |       })
195 |     ).toEqual(null)
196 |   })
197 | })
198 | 
199 | describe('selectParallelSettings', () => {
200 |   it('less 2 cpu provided', () => {
201 |     expect(
202 |       selectParallelSettings({
203 |         configuration: {
204 |           dbVersion: 14,
205 |           cpuNum: 1
206 |         }
207 |       })
208 |     ).toEqual([])
209 |   })
210 |   it('postgresql 13', () => {
211 |     expect(
212 |       selectParallelSettings({
213 |         configuration: {
214 |           dbVersion: 13,
215 |           cpuNum: 12
216 |         }
217 |       })
218 |     ).toEqual([
219 |       { key: 'max_worker_processes', value: 12 },
220 |       { key: 'max_parallel_workers_per_gather', value: 4 },
221 |       { key: 'max_parallel_workers', value: 12 },
222 |       { key: 'max_parallel_maintenance_workers', value: 4 }
223 |     ])
224 |   })
225 |   it('postgresql 10', () => {
226 |     expect(
227 |       selectParallelSettings({
228 |         configuration: {
229 |           dbVersion: 10,
230 |           cpuNum: 12
231 |         }
232 |       })
233 |     ).toEqual([
234 |       { key: 'max_worker_processes', value: 12 },
235 |       { key: 'max_parallel_workers_per_gather', value: 4 },
236 |       { key: 'max_parallel_workers', value: 12 }
237 |     ])
238 |   })
239 | 
240 |   it('postgresql 10 with 31 cpu', () => {
241 |     expect(
242 |       selectParallelSettings({
243 |         configuration: {
244 |           dbVersion: 10,
245 |           cpuNum: 31
246 |         }
247 |       })
248 |     ).toEqual([
249 |       { key: 'max_worker_processes', value: 31 },
250 |       { key: 'max_parallel_workers_per_gather', value: 4 },
251 |       { key: 'max_parallel_workers', value: 31 }
252 |     ])
253 |   })
254 | 
255 |   it('postgresql 12 with 31 cpu and DWH', () => {
256 |     expect(
257 |       selectParallelSettings({
258 |         configuration: {
259 |           dbVersion: 12,
260 |           cpuNum: 31,
261 |           dbType: 'dw'
262 |         }
263 |       })
264 |     ).toEqual([
265 |       { key: 'max_worker_processes', value: 31 },
266 |       { key: 'max_parallel_workers_per_gather', value: 16 },
267 |       { key: 'max_parallel_workers', value: 31 },
268 |       { key: 'max_parallel_maintenance_workers', value: 4 }
269 |     ])
270 |   })
271 | })
272 | 
273 | describe('selectWalLevel', () => {
274 |   it('desktop app', () => {
275 |     expect(
276 |       selectWalLevel({
277 |         configuration: {
278 |           dbType: 'desktop'
279 |         }
280 |       })
281 |     ).toEqual([
282 |       { key: 'wal_level', value: 'minimal' },
283 |       { key: 'max_wal_senders', value: '0' }
284 |     ])
285 |   })
286 | 
287 |   it('web app', () => {
288 |     expect(
289 |       selectWalLevel({
290 |         configuration: {
291 |           dbType: 'web'
292 |         }
293 |       })
294 |     ).toEqual([])
295 |   })
296 | })
297 | 


--------------------------------------------------------------------------------
/src/features/configuration/configurationSlice.js:
--------------------------------------------------------------------------------
  1 | import { createSlice, createSelector } from '@reduxjs/toolkit'
  2 | import { submitConfiguration } from '@app/actions/configurator'
  3 | import {
  4 |   DEFAULT_DB_VERSION,
  5 |   OS_LINUX,
  6 |   OS_WINDOWS,
  7 |   DB_TYPE_WEB,
  8 |   DB_TYPE_OLTP,
  9 |   DB_TYPE_DW,
 10 |   DB_TYPE_DESKTOP,
 11 |   DB_TYPE_MIXED,
 12 |   SIZE_UNIT_GB,
 13 |   HARD_DRIVE_SSD,
 14 |   HARD_DRIVE_HDD,
 15 |   HARD_DRIVE_SAN
 16 | } from './constants'
 17 | 
 18 | const SIZE_UNIT_MAP = {
 19 |   KB: 1024,
 20 |   MB: 1048576,
 21 |   GB: 1073741824,
 22 |   TB: 1099511627776
 23 | }
 24 | 
 25 | const DEFAULT_DB_SETTINGS = {
 26 |   default: {
 27 |     ['max_worker_processes']: 8,
 28 |     ['max_parallel_workers_per_gather']: 2,
 29 |     ['max_parallel_workers']: 8
 30 |   }
 31 | }
 32 | 
 33 | // redux
 34 | 
 35 | const initialState = {
 36 |   dbVersion: DEFAULT_DB_VERSION,
 37 |   osType: OS_LINUX,
 38 |   dbType: DB_TYPE_WEB,
 39 |   totalMemory: null,
 40 |   totalMemoryUnit: SIZE_UNIT_GB,
 41 |   cpuNum: null,
 42 |   connectionNum: null,
 43 |   hdType: HARD_DRIVE_SSD
 44 | }
 45 | 
 46 | const configurationSlice = createSlice({
 47 |   name: 'configuration',
 48 |   initialState,
 49 |   reducers: {
 50 |     resetConfiguration: () => {
 51 |       return {
 52 |         ...initialState
 53 |       }
 54 |     }
 55 |   },
 56 |   extraReducers: (builder) => {
 57 |     builder.addCase(submitConfiguration, (_state, { payload }) => {
 58 |       return {
 59 |         dbVersion: parseFloat(payload.dbVersion),
 60 |         osType: payload.osType,
 61 |         dbType: payload.dbType,
 62 |         totalMemory: parseInt(payload.totalMemory, 10),
 63 |         totalMemoryUnit: payload.totalMemoryUnit,
 64 |         cpuNum: payload.cpuNum ? parseInt(payload.cpuNum, 10) : null,
 65 |         connectionNum: payload.connectionNum ? parseInt(payload.connectionNum, 10) : null,
 66 |         hdType: payload.hdType
 67 |       }
 68 |     })
 69 |   }
 70 | })
 71 | 
 72 | export const { resetConfiguration } = configurationSlice.actions
 73 | 
 74 | // selectors
 75 | 
 76 | const selectConfiguration = (state) => state.configuration
 77 | 
 78 | export const selectDBVersion = (state) => selectConfiguration(state).dbVersion
 79 | export const selectOSType = (state) => selectConfiguration(state).osType
 80 | export const selectDBType = (state) => selectConfiguration(state).dbType
 81 | export const selectTotalMemory = (state) => selectConfiguration(state).totalMemory
 82 | export const selectTotalMemoryUnit = (state) => selectConfiguration(state).totalMemoryUnit
 83 | export const selectCPUNum = (state) => selectConfiguration(state).cpuNum || null
 84 | export const selectConnectionNum = (state) => selectConfiguration(state).connectionNum || null
 85 | export const selectHDType = (state) => selectConfiguration(state).hdType
 86 | 
 87 | const selectTotalMemoryInBytes = createSelector(
 88 |   [selectTotalMemory, selectTotalMemoryUnit],
 89 |   (totalMemory, totalMemoryUnit) => totalMemory * SIZE_UNIT_MAP[totalMemoryUnit]
 90 | )
 91 | 
 92 | const selectTotalMemoryInKb = createSelector(
 93 |   [selectTotalMemoryInBytes],
 94 |   (totalMemoryBytes) => totalMemoryBytes / SIZE_UNIT_MAP['KB']
 95 | )
 96 | 
 97 | const selectDbDefaultValues = createSelector(
 98 |   [selectDBVersion],
 99 |   (dbVersion) => DEFAULT_DB_SETTINGS[dbVersion] || DEFAULT_DB_SETTINGS.default
100 | )
101 | 
102 | export const selectIsConfigured = createSelector(
103 |   [selectTotalMemory],
104 |   (totalMemory) => !!totalMemory
105 | )
106 | 
107 | export const selectMaxConnections = createSelector(
108 |   [selectConnectionNum, selectDBType],
109 |   (connectionNum, dbType) =>
110 |     connectionNum
111 |       ? connectionNum
112 |       : {
113 |           [DB_TYPE_WEB]: 200,
114 |           [DB_TYPE_OLTP]: 300,
115 |           [DB_TYPE_DW]: 40,
116 |           [DB_TYPE_DESKTOP]: 20,
117 |           [DB_TYPE_MIXED]: 100
118 |         }[dbType]
119 | )
120 | 
121 | export const selectHugePages = createSelector(
122 |   [selectTotalMemoryInKb],
123 |   // more 32GB - better also have huge page
124 |   (totalMemoryKBytes) => (totalMemoryKBytes >= 33554432 ? 'try' : 'off')
125 | )
126 | 
127 | export const selectSharedBuffers = createSelector(
128 |   [selectTotalMemoryInKb, selectDBType, selectOSType, selectDBVersion],
129 |   (totalMemoryKb, dbType, osType, dbVersion) => {
130 |     let sharedBuffersValue = {
131 |       [DB_TYPE_WEB]: Math.floor(totalMemoryKb / 4),
132 |       [DB_TYPE_OLTP]: Math.floor(totalMemoryKb / 4),
133 |       [DB_TYPE_DW]: Math.floor(totalMemoryKb / 4),
134 |       [DB_TYPE_DESKTOP]: Math.floor(totalMemoryKb / 16),
135 |       [DB_TYPE_MIXED]: Math.floor(totalMemoryKb / 4)
136 |     }[dbType]
137 |     if (dbVersion < 10 && OS_WINDOWS === osType) {
138 |       // Limit shared_buffers to 512MB on Windows
139 |       const winMemoryLimit = (512 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB']
140 |       if (sharedBuffersValue > winMemoryLimit) {
141 |         sharedBuffersValue = winMemoryLimit
142 |       }
143 |     }
144 |     return sharedBuffersValue
145 |   }
146 | )
147 | 
148 | export const selectEffectiveCacheSize = createSelector(
149 |   [selectTotalMemoryInKb, selectDBType],
150 |   (totalMemoryKb, dbType) =>
151 |     ({
152 |       [DB_TYPE_WEB]: Math.floor((totalMemoryKb * 3) / 4),
153 |       [DB_TYPE_OLTP]: Math.floor((totalMemoryKb * 3) / 4),
154 |       [DB_TYPE_DW]: Math.floor((totalMemoryKb * 3) / 4),
155 |       [DB_TYPE_DESKTOP]: Math.floor(totalMemoryKb / 4),
156 |       [DB_TYPE_MIXED]: Math.floor((totalMemoryKb * 3) / 4)
157 |     })[dbType]
158 | )
159 | 
160 | export const selectMaintenanceWorkMem = createSelector(
161 |   [selectTotalMemoryInKb, selectDBType, selectOSType],
162 |   (totalMemoryKb, dbType, osType) => {
163 |     let maintenanceWorkMemValue = {
164 |       [DB_TYPE_WEB]: Math.floor(totalMemoryKb / 16),
165 |       [DB_TYPE_OLTP]: Math.floor(totalMemoryKb / 16),
166 |       [DB_TYPE_DW]: Math.floor(totalMemoryKb / 8),
167 |       [DB_TYPE_DESKTOP]: Math.floor(totalMemoryKb / 16),
168 |       [DB_TYPE_MIXED]: Math.floor(totalMemoryKb / 16)
169 |     }[dbType]
170 |     // Cap maintenance RAM at 2GB on servers with lots of memory
171 |     const memoryLimit = (2 * SIZE_UNIT_MAP['GB']) / SIZE_UNIT_MAP['KB']
172 |     if (maintenanceWorkMemValue >= memoryLimit) {
173 |       if (OS_WINDOWS === osType) {
174 |         // 2048MB (2 GB) will raise error at Windows, so we need remove 1 MB from it
175 |         maintenanceWorkMemValue = memoryLimit - (1 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB']
176 |       } else {
177 |         maintenanceWorkMemValue = memoryLimit
178 |       }
179 |     }
180 |     return maintenanceWorkMemValue
181 |   }
182 | )
183 | 
184 | export const selectCheckpointSegments = createSelector([selectDBType], (dbType) => {
185 |   return [
186 |     {
187 |       key: 'min_wal_size',
188 |       value: {
189 |         [DB_TYPE_WEB]: (1024 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
190 |         [DB_TYPE_OLTP]: (2048 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
191 |         [DB_TYPE_DW]: (4096 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
192 |         [DB_TYPE_DESKTOP]: (100 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
193 |         [DB_TYPE_MIXED]: (1024 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB']
194 |       }[dbType]
195 |     },
196 |     {
197 |       key: 'max_wal_size',
198 |       value: {
199 |         [DB_TYPE_WEB]: (4096 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
200 |         [DB_TYPE_OLTP]: (8192 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
201 |         [DB_TYPE_DW]: (16384 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
202 |         [DB_TYPE_DESKTOP]: (2048 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB'],
203 |         [DB_TYPE_MIXED]: (4096 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB']
204 |       }[dbType]
205 |     }
206 |   ]
207 | })
208 | 
209 | export const selectCheckpointCompletionTarget = createSelector(
210 |   [],
211 |   () => 0.9 // based on https://github.com/postgres/postgres/commit/bbcc4eb2
212 | )
213 | 
214 | export const selectWalBuffers = createSelector([selectSharedBuffers], (sharedBuffersValue) => {
215 |   // Follow auto-tuning guideline for wal_buffers added in 9.1, where it's
216 |   // set to 3% of shared_buffers up to a maximum of 16MB.
217 |   let walBuffersValue = Math.floor((3 * sharedBuffersValue) / 100)
218 |   const maxWalBuffer = (16 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB']
219 |   if (walBuffersValue > maxWalBuffer) {
220 |     walBuffersValue = maxWalBuffer
221 |   }
222 |   // It's nice of wal_buffers is an even 16MB if it's near that number. Since
223 |   // that is a common case on Windows, where shared_buffers is clipped to 512MB,
224 |   // round upwards in that situation
225 |   const walBufferNearValue = (14 * SIZE_UNIT_MAP['MB']) / SIZE_UNIT_MAP['KB']
226 |   if (walBuffersValue > walBufferNearValue && walBuffersValue < maxWalBuffer) {
227 |     walBuffersValue = maxWalBuffer
228 |   }
229 |   // if less, than 32 kb, than set it to minimum
230 |   if (walBuffersValue < 32) {
231 |     walBuffersValue = 32
232 |   }
233 |   return walBuffersValue
234 | })
235 | 
236 | export const selectDefaultStatisticsTarget = createSelector(
237 |   [selectDBType],
238 |   (dbType) =>
239 |     ({
240 |       [DB_TYPE_WEB]: 100,
241 |       [DB_TYPE_OLTP]: 100,
242 |       [DB_TYPE_DW]: 500,
243 |       [DB_TYPE_DESKTOP]: 100,
244 |       [DB_TYPE_MIXED]: 100
245 |     })[dbType]
246 | )
247 | 
248 | export const selectRandomPageCost = createSelector([selectHDType], (hdType) => {
249 |   return {
250 |     [HARD_DRIVE_HDD]: 4,
251 |     [HARD_DRIVE_SSD]: 1.1,
252 |     [HARD_DRIVE_SAN]: 1.1
253 |   }[hdType]
254 | })
255 | 
256 | export const selectEffectiveIoConcurrency = createSelector(
257 |   [selectOSType, selectHDType],
258 |   (osType, hdType) => {
259 |     if (osType !== OS_LINUX) {
260 |       return null
261 |     }
262 |     return {
263 |       [HARD_DRIVE_HDD]: 2,
264 |       [HARD_DRIVE_SSD]: 200,
265 |       [HARD_DRIVE_SAN]: 300
266 |     }[hdType]
267 |   }
268 | )
269 | 
270 | export const selectParallelSettings = createSelector(
271 |   [selectDBVersion, selectDBType, selectCPUNum],
272 |   (dbVersion, dbType, cpuNum) => {
273 |     if (!cpuNum || cpuNum < 4) {
274 |       return []
275 |     }
276 | 
277 |     let workersPerGather = Math.ceil(cpuNum / 2)
278 | 
279 |     if (dbType !== DB_TYPE_DW && workersPerGather > 4) {
280 |       workersPerGather = 4 // no clear evidence, that each new worker will provide big benefit for each noew core
281 |     }
282 | 
283 |     let config = [
284 |       {
285 |         key: 'max_worker_processes',
286 |         value: cpuNum
287 |       },
288 |       {
289 |         key: 'max_parallel_workers_per_gather',
290 |         value: workersPerGather
291 |       }
292 |     ]
293 | 
294 |     if (dbVersion >= 10) {
295 |       config.push({
296 |         key: 'max_parallel_workers',
297 |         value: cpuNum
298 |       })
299 |     }
300 | 
301 |     if (dbVersion >= 11) {
302 |       let parallelMaintenanceWorkers = Math.ceil(cpuNum / 2)
303 | 
304 |       if (parallelMaintenanceWorkers > 4) {
305 |         parallelMaintenanceWorkers = 4 // no clear evidence, that each new worker will provide big benefit for each noew core
306 |       }
307 | 
308 |       config.push({
309 |         key: 'max_parallel_maintenance_workers',
310 |         value: parallelMaintenanceWorkers
311 |       })
312 |     }
313 | 
314 |     return config
315 |   }
316 | )
317 | 
318 | export const selectWorkMem = createSelector(
319 |   [
320 |     selectTotalMemoryInKb,
321 |     selectSharedBuffers,
322 |     selectMaxConnections,
323 |     selectParallelSettings,
324 |     selectDbDefaultValues,
325 |     selectDBType
326 |   ],
327 |   (
328 |     totalMemoryKb,
329 |     sharedBuffersValue,
330 |     maxConnectionsValue,
331 |     parallelSettingsValue,
332 |     dbDefaultValues,
333 |     dbType
334 |   ) => {
335 |     const parallelForWorkMem = (() => {
336 |       if (parallelSettingsValue.length) {
337 |         const maxWorkerProcesses = parallelSettingsValue.find(
338 |           (param) => param['key'] === 'max_worker_processes'
339 |         )
340 |         if (maxWorkerProcesses && maxWorkerProcesses['value'] && maxWorkerProcesses['value'] > 0) {
341 |           return maxWorkerProcesses['value']
342 |         }
343 |       }
344 |       if (dbDefaultValues['max_worker_processes'] && dbDefaultValues['max_worker_processes'] > 0) {
345 |         return dbDefaultValues['max_worker_processes']
346 |       }
347 |       return 1
348 |     })()
349 |     // work_mem is assigned any time a query calls for a sort, or a hash, or any other structure that needs a space allocation, which can happen multiple times per query. So you're better off assuming max_connections * 2 or max_connections * 3 is the amount of RAM that will actually use in reality. At the very least, you need to subtract shared_buffers from the amount you're distributing to connections in work_mem.
350 |     // The other thing to consider is that there's no reason to run on the edge of available memory. If you do that, there's a very high risk the out-of-memory killer will come along and start killing PostgreSQL backends. Always leave a buffer of some kind in case of spikes in memory usage. So your maximum amount of memory available in work_mem should be (RAM - shared_buffers) / ((max_connections + max_worker_processes) * 3).
351 |     const workMemValue =
352 |       (totalMemoryKb - sharedBuffersValue) / ((maxConnectionsValue + parallelForWorkMem) * 3)
353 |     let workMemResult = {
354 |       [DB_TYPE_WEB]: Math.floor(workMemValue),
355 |       [DB_TYPE_OLTP]: Math.floor(workMemValue),
356 |       [DB_TYPE_DW]: Math.floor(workMemValue / 2),
357 |       [DB_TYPE_DESKTOP]: Math.floor(workMemValue / 6),
358 |       [DB_TYPE_MIXED]: Math.floor(workMemValue / 2)
359 |     }[dbType]
360 |     // if less, than 64 kb, than set it to minimum
361 |     if (workMemResult < 64) {
362 |       workMemResult = 64
363 |     }
364 |     return workMemResult
365 |   }
366 | )
367 | 
368 | export const selectWarningInfoMessages = createSelector(
369 |   [selectTotalMemoryInBytes],
370 |   (totalMemory) => {
371 |     if (totalMemory < 256 * SIZE_UNIT_MAP['MB']) {
372 |       return ['WARNING', 'this tool not being optimal', 'for low memory systems']
373 |     }
374 |     if (totalMemory > 100 * SIZE_UNIT_MAP['GB']) {
375 |       return ['WARNING', 'this tool not being optimal', 'for very high memory systems']
376 |     }
377 |     return []
378 |   }
379 | )
380 | 
381 | export const selectWalLevel = createSelector([selectDBType], (dbType) => {
382 |   if (dbType === DB_TYPE_DESKTOP) {
383 |     return [
384 |       {
385 |         key: 'wal_level',
386 |         value: 'minimal'
387 |       },
388 |       // max_wal_senders must be 0 when wal_level=minimal
389 |       {
390 |         key: 'max_wal_senders',
391 |         value: '0'
392 |       }
393 |     ]
394 |   }
395 | 
396 |   return []
397 | })
398 | 
399 | // Export the slice reducer as the default export
400 | export default configurationSlice.reducer
401 | 


--------------------------------------------------------------------------------
/src/features/configuration/constants.js:
--------------------------------------------------------------------------------
 1 | // postgresql versions
 2 | export const DEFAULT_DB_VERSION = 17
 3 | export const DB_VERSIONS = [DEFAULT_DB_VERSION, 16, 15, 14, 13, 12, 11, 10]
 4 | // os types
 5 | export const OS_LINUX = 'linux'
 6 | export const OS_WINDOWS = 'windows'
 7 | export const OS_MAC = 'mac'
 8 | // db types
 9 | export const DB_TYPE_WEB = 'web'
10 | export const DB_TYPE_OLTP = 'oltp'
11 | export const DB_TYPE_DW = 'dw'
12 | export const DB_TYPE_DESKTOP = 'desktop'
13 | export const DB_TYPE_MIXED = 'mixed'
14 | // size units
15 | export const SIZE_UNIT_MB = 'MB'
16 | export const SIZE_UNIT_GB = 'GB'
17 | // harddrive types
18 | export const HARD_DRIVE_SSD = 'ssd'
19 | export const HARD_DRIVE_SAN = 'san'
20 | export const HARD_DRIVE_HDD = 'hdd'
21 | // maximum value for integer fields
22 | export const MAX_NUMERIC_VALUE = 999999
23 | 


--------------------------------------------------------------------------------
/src/features/settings/constants.js:
--------------------------------------------------------------------------------
1 | export const APP_THEMES_LIGHT = 'light'
2 | export const APP_THEMES_DARK = 'dark'
3 | // tabs
4 | export const TAB_CONFIG = 'config_tab'
5 | export const TAB_ALTER_SYSTEM = 'alter_tab'
6 | 


--------------------------------------------------------------------------------
/src/features/settings/settingsSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, isAnyOf } from '@reduxjs/toolkit'
 2 | import { listenerMiddleware } from '@app/listenerMiddleware'
 3 | import { submitConfiguration } from '@app/actions/configurator'
 4 | import { LocalStorage } from '@common/utils/localStorage'
 5 | 
 6 | import { APP_THEMES_LIGHT, APP_THEMES_DARK, TAB_CONFIG } from './constants'
 7 | 
 8 | const initialState = {
 9 |   tabState: TAB_CONFIG,
10 |   theme: APP_THEMES_LIGHT
11 | }
12 | 
13 | const settingsSlice = createSlice({
14 |   name: 'settings',
15 |   initialState,
16 |   reducers: {
17 |     openConfigTab: (state, action) => {
18 |       state.tabState = action.payload
19 |     },
20 |     toggleTheme: (state) => {
21 |       state.theme = APP_THEMES_LIGHT === state.theme ? APP_THEMES_DARK : APP_THEMES_LIGHT
22 |     }
23 |   },
24 |   extraReducers: (builder) => {
25 |     builder.addCase(submitConfiguration, (state) => {
26 |       state.tabState = TAB_CONFIG
27 |     })
28 |   }
29 | })
30 | 
31 | export const { openConfigTab, toggleTheme } = settingsSlice.actions
32 | 
33 | export const selectSettings = (state) => state.settings
34 | export const selectThemeSettings = (state) => selectSettings(state).theme
35 | export const selectTabSettings = (state) => selectSettings(state).tabState
36 | 
37 | // Export the slice reducer as the default export
38 | export default settingsSlice.reducer
39 | 
40 | // listeners
41 | listenerMiddleware.startListening({
42 |   matcher: isAnyOf(toggleTheme),
43 |   effect: (_action, listenerApi) => {
44 |     LocalStorage.setItem('theme', selectThemeSettings(listenerApi.getState()))
45 |   }
46 | })
47 | 


--------------------------------------------------------------------------------
/src/features/sw/swSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, isAnyOf } from '@reduxjs/toolkit'
 2 | import { listenerMiddleware } from '@app/listenerMiddleware'
 3 | import { skipWaitingMessageAndReload } from './swWindow'
 4 | 
 5 | const initialState = {
 6 |   isNewVersionAvailable: false
 7 | }
 8 | 
 9 | const swSlice = createSlice({
10 |   name: 'sw',
11 |   initialState,
12 |   reducers: {
13 |     readyToUpdated: (state) => {
14 |       state.isNewVersionAvailable = true
15 |     },
16 |     updating: (state) => {
17 |       state.isNewVersionAvailable = false
18 |     }
19 |   }
20 | })
21 | 
22 | export const { readyToUpdated, updating } = swSlice.actions
23 | 
24 | export const selectSw = (state) => state.sw
25 | export const selectIsNewVersionAvailableSw = (state) => selectSw(state).isNewVersionAvailable
26 | 
27 | // Export the slice reducer as the default export
28 | export default swSlice.reducer
29 | 
30 | // listeners
31 | listenerMiddleware.startListening({
32 |   matcher: isAnyOf(updating),
33 |   effect: () => skipWaitingMessageAndReload()
34 | })
35 | 


--------------------------------------------------------------------------------
/src/features/sw/swWindow.js:
--------------------------------------------------------------------------------
 1 | import { Workbox, messageSW } from 'workbox-window'
 2 | import { readyToUpdated } from './swSlice'
 3 | 
 4 | let wb = null
 5 | let wbRegistration = null
 6 | 
 7 | export const skipWaitingMessageAndReload = () => {
 8 |   wb.addEventListener('controlling', () => window.location.reload())
 9 | 
10 |   if (wbRegistration && wbRegistration.waiting) {
11 |     // Send a message to the waiting service worker,
12 |     // instructing it to activate.
13 |     messageSW(wbRegistration.waiting, { type: 'SKIP_WAITING' })
14 |   }
15 | }
16 | 
17 | export const initServiceWorker = (store) => {
18 |   if ('serviceWorker' in navigator) {
19 |     wb = new Workbox('/sw.js')
20 | 
21 |     const showUpdatedInfo = () => store.dispatch(readyToUpdated())
22 | 
23 |     wb.addEventListener('waiting', showUpdatedInfo)
24 |     wb.addEventListener('externalwaiting', showUpdatedInfo)
25 | 
26 |     // Register the service worker after event listeners have been added.
27 |     wb.register().then((r) => {
28 |       wbRegistration = r
29 |     })
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/hooks/useIsMounted.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useCallback } from 'react'
 2 | 
 3 | export const useIsMounted = () => {
 4 |   const mounted = useRef(false)
 5 | 
 6 |   useEffect(() => {
 7 |     mounted.current = true
 8 |     return () => {
 9 |       mounted.current = false
10 |     }
11 |   }, [])
12 | 
13 |   return useCallback(() => mounted.current, [])
14 | }
15 | 


--------------------------------------------------------------------------------
/src/layouts/main.liquid:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 7 |     <meta name="keywords" content="pgtune, postgresql, postgres, tuning, config, configuration, free, open source" />
 8 |     <meta name="description" content="PgTune - Tuning PostgreSQL config by your hardware" />
 9 |     <meta name="theme-color" content="#fdf6e3" />
10 |     <link type="text/plain" rel="author" href="/humans.txt" />
11 |     <title>PGTune - calculate configuration for PostgreSQL based on the maximum performance for a given hardware configuration</title>
12 |   </head>
13 |   <body>
14 |     <div id="root"></div>
15 |     <script async="async" defer="defer" type="module" src="/src/main.jsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import '@css/app.css'
 2 | 
 3 | import React from 'react'
 4 | import ReactDOM from 'react-dom/client'
 5 | import { Provider } from 'react-redux'
 6 | import { configureAppStore } from '@app/store'
 7 | import { initServiceWorker } from '@features/sw/swWindow'
 8 | import { LocalStorage } from '@common/utils/localStorage'
 9 | import { onDomReady } from '@common/utils/onDomReady'
10 | import { APP_THEMES_LIGHT, APP_THEMES_DARK } from '@features/settings/constants'
11 | import App from './App.jsx'
12 | 
13 | const preloadedState = () => {
14 |   if (!window) {
15 |     return {}
16 |   }
17 | 
18 |   let theme = LocalStorage.getItem('theme')
19 | 
20 |   if (!theme) {
21 |     if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
22 |       theme = APP_THEMES_DARK
23 |     }
24 |   }
25 | 
26 |   return {
27 |     settings: {
28 |       theme: theme || APP_THEMES_LIGHT
29 |     }
30 |   }
31 | }
32 | 
33 | const start = () => {
34 |   const rootElement = document.getElementById('root')
35 |   const store = configureAppStore(preloadedState())
36 | 
37 |   initServiceWorker(store)
38 | 
39 |   ReactDOM.createRoot(rootElement).render(
40 |     <React.StrictMode>
41 |       <Provider store={store}>
42 |         <App />
43 |       </Provider>
44 |     </React.StrictMode>
45 |   )
46 | }
47 | 
48 | onDomReady(start)
49 | 


--------------------------------------------------------------------------------
/src/pages/about.liquid:
--------------------------------------------------------------------------------
1 | {% include 'layouts/main.liquid' %}
2 | 


--------------------------------------------------------------------------------
/src/pages/index.liquid:
--------------------------------------------------------------------------------
1 | {% include 'layouts/main.liquid' %}
2 | 


--------------------------------------------------------------------------------
/src/sw.js:
--------------------------------------------------------------------------------
 1 | import { clientsClaim } from 'workbox-core'
 2 | import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute'
 3 | import { cleanupOutdatedCaches } from 'workbox-precaching/cleanupOutdatedCaches'
 4 | 
 5 | const cachedAssets = self.__WB_MANIFEST
 6 | 
 7 | self.addEventListener('message', (event) => {
 8 |   if (event.data && event.data.type === 'SKIP_WAITING') {
 9 |     self.skipWaiting()
10 |   }
11 | })
12 | 
13 | clientsClaim()
14 | cleanupOutdatedCaches()
15 | 
16 | precacheAndRoute(cachedAssets)
17 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import { VitePWA } from 'vite-plugin-pwa'
 4 | import vituum from 'vituum'
 5 | import liquid from '@vituum/vite-plugin-liquid'
 6 | import react from '@vitejs/plugin-react'
 7 | 
 8 | // https://vitejs.dev/config/
 9 | export default defineConfig({
10 |   build: {
11 |     cssCodeSplit: false,
12 |     sourcemap: true,
13 |     minify: 'terser'
14 |   },
15 |   server: {
16 |     host: process.env.VITE_HOST || 'localhost',
17 |     port: process.env.VITE_PORT || 5173
18 |   },
19 |   plugins: [
20 |     vituum(),
21 |     liquid({
22 |       root: './src'
23 |     }),
24 |     react(),
25 |     VitePWA({
26 |       injectRegister: null,
27 |       strategies: 'injectManifest',
28 |       registerType: 'prompt',
29 |       srcDir: 'src',
30 |       filename: 'sw.js',
31 |       base: '/',
32 |       scope: '/',
33 |       includeAssets: [
34 |         'favicon.svg',
35 |         'favicon.ico',
36 |         'icon-192x192.png',
37 |         'icon-512x512.png',
38 |         'maskable_icon.png',
39 |         'about.html'
40 |       ],
41 |       injectManifest: {
42 |         globPatterns: ['**/*.{css,js,html,png,svg,ico}']
43 |       },
44 |       devOptions: {
45 |         enabled: true,
46 |         type: 'module'
47 |       },
48 |       manifest: {
49 |         name: 'PGTune',
50 |         short_name: 'PGTune',
51 |         description: 'PgTune - Tuning PostgreSQL config by your hardware',
52 |         display: 'standalone',
53 |         start_url: '/',
54 |         theme_color: '#fdf6e3',
55 |         background_color: '#fdf6e3',
56 |         icons: [
57 |           {
58 |             src: '/icon-192x192.png',
59 |             sizes: '192x192',
60 |             type: 'image/png',
61 |             purpose: 'any'
62 |           },
63 |           {
64 |             src: '/icon-512x512.png',
65 |             sizes: '512x512',
66 |             type: 'image/png',
67 |             purpose: 'any'
68 |           },
69 |           {
70 |             src: '/maskable_icon.png',
71 |             sizes: '1024x1024',
72 |             type: 'image/png',
73 |             purpose: 'maskable'
74 |           }
75 |         ]
76 |       }
77 |     })
78 |   ],
79 |   resolve: {
80 |     alias: {
81 |       '@root': resolve(__dirname, 'src'),
82 |       '@app': resolve(__dirname, 'src/app'),
83 |       '@css': resolve(__dirname, 'src/css'),
84 |       '@common': resolve(__dirname, 'src/common'),
85 |       '@features': resolve(__dirname, 'src/features'),
86 |       '@hooks': resolve(__dirname, 'src/hooks')
87 |     }
88 |   }
89 | })
90 | 


--------------------------------------------------------------------------------