show more info based #45 discussion

le0pard · Dec 19, 2020 · 069afd3 · 069afd3
1 parent 10f6479
commit 069afd3
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 88 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/middleman/middleman
-  revision: 1a8e3460d855c757425a1462a971dfad6cf01bd4
+  revision: 457b18447bf3ded09ffe1fb4b39718288cb19d9d
   specs:
     middleman (5.0.0.rc.2)
       coffee-script (~> 2.2)
@@ -64,7 +64,7 @@ GEM
     erubis (2.7.0)
     execjs (2.7.0)
     fastimage (2.2.0)
-    ffi (1.13.1)
+    ffi (1.14.0)
     haml (5.2.1)
       temple (>= 0.8.0)
       tilt
@@ -82,7 +82,7 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.10)
     memoist (0.16.2)
     minitest (5.14.2)
-    oj (3.10.16)
+    oj (3.10.17)
     padrino-helpers (0.14.4)
       i18n (~> 0.6, >= 0.6.7)
       padrino-support (= 0.14.4)
@@ -92,7 +92,7 @@ GEM
     parslet (1.8.2)
     public_suffix (4.0.6)
     rack (2.2.3)
-    rake (13.0.1)
+    rake (13.0.2)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -110,7 +110,7 @@ GEM
     tilt (2.0.10)
     toml (0.2.0)
       parslet (~> 1.8.0)
-    tzinfo (1.2.8)
+    tzinfo (1.2.9)
       thread_safe (~> 0.1)
     uglifier (4.2.0)
       execjs (>= 0.3.0, < 3)

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
     "@babel/plugin-transform-regenerator": "7.12.1",
     "@babel/plugin-transform-runtime": "7.12.10",
-    "@babel/preset-env": "7.12.10",
+    "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
     "@babel/runtime": "7.12.5",
     "@babel/runtime-corejs3": "7.12.5",
@@ -50,7 +50,7 @@
     "normalize.css": "8.0.1",
     "postcss": "8.2.1",
     "postcss-browser-reporter": "0.6.0",
-    "postcss-import": "13.0.0",
+    "postcss-import": "14.0.0",
     "postcss-loader": "4.1.0",
     "postcss-preset-env": "6.7.0",
     "postcss-reporter": "7.0.2",
@@ -74,7 +74,7 @@
     "terser-webpack-plugin": "5.0.3",
     "text-encoding": "0.7.0",
     "url-loader": "4.1.1",
-    "webpack": "5.10.1",
+    "webpack": "5.11.0",
     "webpack-assets-manifest": "5.0.0",
     "whatwg-fetch": "3.5.0",
     "workbox-webpack-plugin": "6.0.2",
@@ -84,7 +84,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.12.1",
     "babel-jest": "26.6.3",
-    "eslint": "7.15.0",
+    "eslint": "7.16.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",

diff --git a/webpack/components/configurationForm/index.js b/webpack/components/configurationForm/index.js
@@ -57,19 +57,19 @@ const dbTypeOptions = () => (
       value: DB_TYPE_WEB
     },
     {
-      label: 'Online transaction processing systems',
+      label: 'Online transaction processing system',
       value: DB_TYPE_OLTP
     },
     {
-      label: 'Data warehouses',
+      label: 'Data warehouse',
       value: DB_TYPE_DW
     },
     {
-      label: 'Desktop applications',
+      label: 'Desktop application',
       value: DB_TYPE_DESKTOP
     },
     {
-      label: 'Mixed type of applications',
+      label: 'Mixed type of application',
       value: DB_TYPE_MIXED
     }
   ]

diff --git a/webpack/components/infoView/index.js b/webpack/components/infoView/index.js
@@ -1,9 +1,56 @@
 import React from 'react'
 
+import './info-view.sass'
+
 const InfoView = () => (
-  <p>
-    You need provide basic information about your hardware configuration, where is working PostgreSQL database. Results will be calculated after clicking "Generate" button
-  </p>
+  <div>
+    <p>
+      You need provide basic information about your hardware configuration, where is working PostgreSQL database. Results will be calculated after clicking "Generate" button
+    </p>
+    <p className="info-view-db-type__description">More information about "DB Type" setting:</p>
+    <ul className="info-view-db-type__list">
+      <li>
+        <div className="info-view-db-type__header">Web Application (web)</div>
+        <ul>
+          <li>Typically CPU-bound</li>
+          <li>DB much smaller than RAM</li>
+          <li>90% or more simple queries</li>
+        </ul>
+      </li>
+      <li>
+        <div className="info-view-db-type__header">Online Transaction Processing (oltp)</div>
+        <ul>
+          <li>Typically CPU- or I/O-bound</li>
+          <li>DB slightly larger than RAM to 1TB</li>
+          <li>20-40% small data write queries</li>
+          <li>Some long transactions and complex read queries</li>
+        </ul>
+      </li>
+      <li>
+        <div className="info-view-db-type__header">Data Warehouse (dw)</div>
+        <ul>
+          <li>Typically I/O- or RAM-bound</li>
+          <li>Large bulk loads of data</li>
+          <li>Large complex reporting queries</li>
+          <li>Also called "Decision Support" or "Business Intelligence"</li>
+        </ul>
+      </li>
+      <li>
+        <div className="info-view-db-type__header">Desktop application</div>
+        <ul>
+          <li>Not a dedicated database</li>
+          <li>A general workstation, perhaps for a developer</li>
+        </ul>
+      </li>
+      <li>
+        <div className="info-view-db-type__header">Mixed type of application</div>
+        <ul>
+          <li>Mixed DW and OLTP characteristics</li>
+          <li>A wide mixture of queries</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
 )
 
 export default InfoView
diff --git a/webpack/components/infoView/info-view.sass b/webpack/components/infoView/info-view.sass
@@ -0,0 +1,10 @@
+.info-view-db-type__description
+  margin: 0
+
+.info-view-db-type__list
+  font-size: 0.9rem
+  margin: 0
+
+.info-view-db-type__header
+  font-size: 1.1rem
+  padding: 8px 0px