From 5469d97271679fe8c73d8b3e68dadbba3dc5f307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Tue, 3 Oct 2023 14:43:32 +0200 Subject: [PATCH 001/150] feat: creation of the project --- racksdb/web/ui/.eslintrc.cjs | 15 +++ racksdb/web/ui/.gitignore | 28 ++++++ racksdb/web/ui/.prettierrc.json | 8 ++ racksdb/web/ui/.vscode/extensions.json | 8 ++ racksdb/web/ui/README.md | 52 +++++++++++ racksdb/web/ui/env.d.ts | 1 + racksdb/web/ui/index.html | 13 +++ racksdb/web/ui/package.json | 39 ++++++++ racksdb/web/ui/public/favicon.ico | Bin 0 -> 4286 bytes racksdb/web/ui/src/App.vue | 85 +++++++++++++++++ racksdb/web/ui/src/assets/base.css | 86 +++++++++++++++++ racksdb/web/ui/src/assets/logo.svg | 1 + racksdb/web/ui/src/assets/main.css | 35 +++++++ racksdb/web/ui/src/components/HelloWorld.vue | 41 ++++++++ racksdb/web/ui/src/components/TheWelcome.vue | 88 ++++++++++++++++++ racksdb/web/ui/src/components/WelcomeItem.vue | 87 +++++++++++++++++ .../components/__tests__/HelloWorld.spec.ts | 11 +++ .../ui/src/components/icons/IconCommunity.vue | 7 ++ .../components/icons/IconDocumentation.vue | 7 ++ .../ui/src/components/icons/IconEcosystem.vue | 7 ++ .../ui/src/components/icons/IconSupport.vue | 7 ++ .../ui/src/components/icons/IconTooling.vue | 19 ++++ racksdb/web/ui/src/main.ts | 11 +++ racksdb/web/ui/src/router/index.ts | 23 +++++ racksdb/web/ui/src/views/AboutView.vue | 15 +++ racksdb/web/ui/src/views/HomeView.vue | 9 ++ racksdb/web/ui/tsconfig.app.json | 12 +++ racksdb/web/ui/tsconfig.json | 14 +++ racksdb/web/ui/tsconfig.node.json | 16 ++++ racksdb/web/ui/tsconfig.vitest.json | 9 ++ racksdb/web/ui/vite.config.ts | 16 ++++ racksdb/web/ui/vitest.config.ts | 14 +++ 32 files changed, 784 insertions(+) create mode 100644 racksdb/web/ui/.eslintrc.cjs create mode 100644 racksdb/web/ui/.gitignore create mode 100644 racksdb/web/ui/.prettierrc.json create mode 100644 racksdb/web/ui/.vscode/extensions.json create mode 100644 racksdb/web/ui/README.md create mode 100644 racksdb/web/ui/env.d.ts create mode 100644 racksdb/web/ui/index.html create mode 100644 racksdb/web/ui/package.json create mode 100644 racksdb/web/ui/public/favicon.ico create mode 100644 racksdb/web/ui/src/App.vue create mode 100644 racksdb/web/ui/src/assets/base.css create mode 100644 racksdb/web/ui/src/assets/logo.svg create mode 100644 racksdb/web/ui/src/assets/main.css create mode 100644 racksdb/web/ui/src/components/HelloWorld.vue create mode 100644 racksdb/web/ui/src/components/TheWelcome.vue create mode 100644 racksdb/web/ui/src/components/WelcomeItem.vue create mode 100644 racksdb/web/ui/src/components/__tests__/HelloWorld.spec.ts create mode 100644 racksdb/web/ui/src/components/icons/IconCommunity.vue create mode 100644 racksdb/web/ui/src/components/icons/IconDocumentation.vue create mode 100644 racksdb/web/ui/src/components/icons/IconEcosystem.vue create mode 100644 racksdb/web/ui/src/components/icons/IconSupport.vue create mode 100644 racksdb/web/ui/src/components/icons/IconTooling.vue create mode 100644 racksdb/web/ui/src/main.ts create mode 100644 racksdb/web/ui/src/router/index.ts create mode 100644 racksdb/web/ui/src/views/AboutView.vue create mode 100644 racksdb/web/ui/src/views/HomeView.vue create mode 100644 racksdb/web/ui/tsconfig.app.json create mode 100644 racksdb/web/ui/tsconfig.json create mode 100644 racksdb/web/ui/tsconfig.node.json create mode 100644 racksdb/web/ui/tsconfig.vitest.json create mode 100644 racksdb/web/ui/vite.config.ts create mode 100644 racksdb/web/ui/vitest.config.ts diff --git a/racksdb/web/ui/.eslintrc.cjs b/racksdb/web/ui/.eslintrc.cjs new file mode 100644 index 00000000..6f40582d --- /dev/null +++ b/racksdb/web/ui/.eslintrc.cjs @@ -0,0 +1,15 @@ +/* eslint-env node */ +require('@rushstack/eslint-patch/modern-module-resolution') + +module.exports = { + root: true, + 'extends': [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript', + '@vue/eslint-config-prettier/skip-formatting' + ], + parserOptions: { + ecmaVersion: 'latest' + } +} diff --git a/racksdb/web/ui/.gitignore b/racksdb/web/ui/.gitignore new file mode 100644 index 00000000..38adffa6 --- /dev/null +++ b/racksdb/web/ui/.gitignore @@ -0,0 +1,28 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/racksdb/web/ui/.prettierrc.json b/racksdb/web/ui/.prettierrc.json new file mode 100644 index 00000000..66e23359 --- /dev/null +++ b/racksdb/web/ui/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "semi": false, + "tabWidth": 2, + "singleQuote": true, + "printWidth": 100, + "trailingComma": "none" +} \ No newline at end of file diff --git a/racksdb/web/ui/.vscode/extensions.json b/racksdb/web/ui/.vscode/extensions.json new file mode 100644 index 00000000..009a5348 --- /dev/null +++ b/racksdb/web/ui/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "Vue.volar", + "Vue.vscode-typescript-vue-plugin", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode" + ] +} diff --git a/racksdb/web/ui/README.md b/racksdb/web/ui/README.md new file mode 100644 index 00000000..ba1b7916 --- /dev/null +++ b/racksdb/web/ui/README.md @@ -0,0 +1,52 @@ +# ui + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +npm run test:unit +``` + +### Lint with [ESLint](https://eslint.org/) + +```sh +npm run lint +``` diff --git a/racksdb/web/ui/env.d.ts b/racksdb/web/ui/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/racksdb/web/ui/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/racksdb/web/ui/index.html b/racksdb/web/ui/index.html new file mode 100644 index 00000000..a8885448 --- /dev/null +++ b/racksdb/web/ui/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/racksdb/web/ui/package.json b/racksdb/web/ui/package.json new file mode 100644 index 00000000..2c6f58e7 --- /dev/null +++ b/racksdb/web/ui/package.json @@ -0,0 +1,39 @@ +{ + "name": "ui", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "test:unit": "vitest", + "build-only": "vite build", + "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "format": "prettier --write src/" + }, + "dependencies": { + "vue": "^3.3.4", + "vue-router": "^4.2.4" + }, + "devDependencies": { + "@rushstack/eslint-patch": "^1.3.3", + "@tsconfig/node18": "^18.2.2", + "@types/jsdom": "^21.1.3", + "@types/node": "^18.17.17", + "@vitejs/plugin-vue": "^4.3.4", + "@vue/eslint-config-prettier": "^8.0.0", + "@vue/eslint-config-typescript": "^12.0.0", + "@vue/test-utils": "^2.4.1", + "@vue/tsconfig": "^0.4.0", + "eslint": "^8.49.0", + "eslint-plugin-vue": "^9.17.0", + "jsdom": "^22.1.0", + "npm-run-all2": "^6.0.6", + "prettier": "^3.0.3", + "typescript": "~5.2.0", + "vite": "^4.4.9", + "vitest": "^0.34.4", + "vue-tsc": "^1.8.11" + } +} diff --git a/racksdb/web/ui/public/favicon.ico b/racksdb/web/ui/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/racksdb/web/ui/src/App.vue b/racksdb/web/ui/src/App.vue new file mode 100644 index 00000000..7905b051 --- /dev/null +++ b/racksdb/web/ui/src/App.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/racksdb/web/ui/src/assets/base.css b/racksdb/web/ui/src/assets/base.css new file mode 100644 index 00000000..8816868a --- /dev/null +++ b/racksdb/web/ui/src/assets/base.css @@ -0,0 +1,86 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: + color 0.5s, + background-color 0.5s; + line-height: 1.6; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/racksdb/web/ui/src/assets/logo.svg b/racksdb/web/ui/src/assets/logo.svg new file mode 100644 index 00000000..75656603 --- /dev/null +++ b/racksdb/web/ui/src/assets/logo.svg @@ -0,0 +1 @@ + diff --git a/racksdb/web/ui/src/assets/main.css b/racksdb/web/ui/src/assets/main.css new file mode 100644 index 00000000..e8667cd4 --- /dev/null +++ b/racksdb/web/ui/src/assets/main.css @@ -0,0 +1,35 @@ +@import './base.css'; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/racksdb/web/ui/src/components/HelloWorld.vue b/racksdb/web/ui/src/components/HelloWorld.vue new file mode 100644 index 00000000..38d821ef --- /dev/null +++ b/racksdb/web/ui/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/racksdb/web/ui/src/components/TheWelcome.vue b/racksdb/web/ui/src/components/TheWelcome.vue new file mode 100644 index 00000000..49d8f735 --- /dev/null +++ b/racksdb/web/ui/src/components/TheWelcome.vue @@ -0,0 +1,88 @@ + + + diff --git a/racksdb/web/ui/src/components/WelcomeItem.vue b/racksdb/web/ui/src/components/WelcomeItem.vue new file mode 100644 index 00000000..6d7086ae --- /dev/null +++ b/racksdb/web/ui/src/components/WelcomeItem.vue @@ -0,0 +1,87 @@ + + + diff --git a/racksdb/web/ui/src/components/__tests__/HelloWorld.spec.ts b/racksdb/web/ui/src/components/__tests__/HelloWorld.spec.ts new file mode 100644 index 00000000..25332020 --- /dev/null +++ b/racksdb/web/ui/src/components/__tests__/HelloWorld.spec.ts @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import HelloWorld from '../HelloWorld.vue' + +describe('HelloWorld', () => { + it('renders properly', () => { + const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) + expect(wrapper.text()).toContain('Hello Vitest') + }) +}) diff --git a/racksdb/web/ui/src/components/icons/IconCommunity.vue b/racksdb/web/ui/src/components/icons/IconCommunity.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/racksdb/web/ui/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/racksdb/web/ui/src/components/icons/IconDocumentation.vue b/racksdb/web/ui/src/components/icons/IconDocumentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/racksdb/web/ui/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/racksdb/web/ui/src/components/icons/IconEcosystem.vue b/racksdb/web/ui/src/components/icons/IconEcosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/racksdb/web/ui/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/racksdb/web/ui/src/components/icons/IconSupport.vue b/racksdb/web/ui/src/components/icons/IconSupport.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/racksdb/web/ui/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/racksdb/web/ui/src/components/icons/IconTooling.vue b/racksdb/web/ui/src/components/icons/IconTooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/racksdb/web/ui/src/components/icons/IconTooling.vue @@ -0,0 +1,19 @@ + + diff --git a/racksdb/web/ui/src/main.ts b/racksdb/web/ui/src/main.ts new file mode 100644 index 00000000..5a5dbdba --- /dev/null +++ b/racksdb/web/ui/src/main.ts @@ -0,0 +1,11 @@ +import './assets/main.css' + +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' + +const app = createApp(App) + +app.use(router) + +app.mount('#app') diff --git a/racksdb/web/ui/src/router/index.ts b/racksdb/web/ui/src/router/index.ts new file mode 100644 index 00000000..a49ae507 --- /dev/null +++ b/racksdb/web/ui/src/router/index.ts @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '../views/HomeView.vue' + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + path: '/about', + name: 'about', + // route level code-splitting + // this generates a separate chunk (About.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import('../views/AboutView.vue') + } + ] +}) + +export default router diff --git a/racksdb/web/ui/src/views/AboutView.vue b/racksdb/web/ui/src/views/AboutView.vue new file mode 100644 index 00000000..756ad2a1 --- /dev/null +++ b/racksdb/web/ui/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/racksdb/web/ui/src/views/HomeView.vue b/racksdb/web/ui/src/views/HomeView.vue new file mode 100644 index 00000000..d5c0217e --- /dev/null +++ b/racksdb/web/ui/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/racksdb/web/ui/tsconfig.app.json b/racksdb/web/ui/tsconfig.app.json new file mode 100644 index 00000000..3e5b621e --- /dev/null +++ b/racksdb/web/ui/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/racksdb/web/ui/tsconfig.json b/racksdb/web/ui/tsconfig.json new file mode 100644 index 00000000..100cf6a8 --- /dev/null +++ b/racksdb/web/ui/tsconfig.json @@ -0,0 +1,14 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.vitest.json" + } + ] +} diff --git a/racksdb/web/ui/tsconfig.node.json b/racksdb/web/ui/tsconfig.node.json new file mode 100644 index 00000000..dee96bed --- /dev/null +++ b/racksdb/web/ui/tsconfig.node.json @@ -0,0 +1,16 @@ +{ + "extends": "@tsconfig/node18/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/racksdb/web/ui/tsconfig.vitest.json b/racksdb/web/ui/tsconfig.vitest.json new file mode 100644 index 00000000..d080d611 --- /dev/null +++ b/racksdb/web/ui/tsconfig.vitest.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.app.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/racksdb/web/ui/vite.config.ts b/racksdb/web/ui/vite.config.ts new file mode 100644 index 00000000..5c45e1d9 --- /dev/null +++ b/racksdb/web/ui/vite.config.ts @@ -0,0 +1,16 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/racksdb/web/ui/vitest.config.ts b/racksdb/web/ui/vitest.config.ts new file mode 100644 index 00000000..10067d57 --- /dev/null +++ b/racksdb/web/ui/vitest.config.ts @@ -0,0 +1,14 @@ +import { fileURLToPath } from 'node:url' +import { mergeConfig, defineConfig, configDefaults } from 'vitest/config' +import viteConfig from './vite.config' + +export default mergeConfig( + viteConfig, + defineConfig({ + test: { + environment: 'jsdom', + exclude: [...configDefaults.exclude, 'e2e/*'], + root: fileURLToPath(new URL('./', import.meta.url)) + } + }) +) From cc0a3725f9e65ed74dd98ec06c54032bb993f71b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 4 Oct 2023 08:58:23 +0200 Subject: [PATCH 002/150] feat: creation of the routes of the application --- racksdb/web/ui/src/router/index.ts | 46 +++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/racksdb/web/ui/src/router/index.ts b/racksdb/web/ui/src/router/index.ts index a49ae507..8b435d9a 100644 --- a/racksdb/web/ui/src/router/index.ts +++ b/racksdb/web/ui/src/router/index.ts @@ -1,5 +1,10 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' +import DatacentersView from '../views/DatacentersView.vue' +import DatacenterDetailsView from '../views/DatacenterDetailsView.vue' +import DatacenterRoomView from '../views/DatacenterRoomView.vue' +import InfrastructuresView from '../views/InfrastructuresView.vue' +import InfrastructureDetailsView from '../views/InfrastructureDetailsView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -9,14 +14,41 @@ const router = createRouter({ name: 'home', component: HomeView }, + { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } + path: '/datacenters', + name: 'datacenters', + component: DatacentersView + }, + + { + path: '/datacenters/:datacenterName', + name: 'datacenterdetails', + component: DatacenterDetailsView, + props: true, + }, + + { + path: '/datacenters/:datacenterName/:datacenterRoom', + name: 'datacenterroom', + component: DatacenterRoomView, + props: true, + }, + + { + path: '/infrastructures', + name: 'infrastructures', + component: InfrastructuresView, + }, + + { + path: '/infrastructures/:infrastructureName', + name: 'infrastructuresdetails', + component: InfrastructureDetailsView, + props: true, + }, + + ] }) From 6d096d08309c2a7d24873783c8fa7ccc321780cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 4 Oct 2023 08:59:00 +0200 Subject: [PATCH 003/150] feat: creation of all the views of the app --- racksdb/web/ui/src/views/AboutView.vue | 15 --------------- .../web/ui/src/views/DatacenterDetailsView.vue | 7 +++++++ racksdb/web/ui/src/views/DatacenterRoomView.vue | 7 +++++++ racksdb/web/ui/src/views/DatacentersView.vue | 7 +++++++ .../ui/src/views/InfrastructureDetailsView.vue | 7 +++++++ racksdb/web/ui/src/views/InfrastructuresView.vue | 7 +++++++ 6 files changed, 35 insertions(+), 15 deletions(-) delete mode 100644 racksdb/web/ui/src/views/AboutView.vue create mode 100644 racksdb/web/ui/src/views/DatacenterDetailsView.vue create mode 100644 racksdb/web/ui/src/views/DatacenterRoomView.vue create mode 100644 racksdb/web/ui/src/views/DatacentersView.vue create mode 100644 racksdb/web/ui/src/views/InfrastructureDetailsView.vue create mode 100644 racksdb/web/ui/src/views/InfrastructuresView.vue diff --git a/racksdb/web/ui/src/views/AboutView.vue b/racksdb/web/ui/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/racksdb/web/ui/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/racksdb/web/ui/src/views/DatacenterDetailsView.vue b/racksdb/web/ui/src/views/DatacenterDetailsView.vue new file mode 100644 index 00000000..2ce39755 --- /dev/null +++ b/racksdb/web/ui/src/views/DatacenterDetailsView.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/racksdb/web/ui/src/views/DatacenterRoomView.vue b/racksdb/web/ui/src/views/DatacenterRoomView.vue new file mode 100644 index 00000000..a11097fc --- /dev/null +++ b/racksdb/web/ui/src/views/DatacenterRoomView.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/racksdb/web/ui/src/views/DatacentersView.vue b/racksdb/web/ui/src/views/DatacentersView.vue new file mode 100644 index 00000000..8093b533 --- /dev/null +++ b/racksdb/web/ui/src/views/DatacentersView.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/racksdb/web/ui/src/views/InfrastructureDetailsView.vue b/racksdb/web/ui/src/views/InfrastructureDetailsView.vue new file mode 100644 index 00000000..4575c568 --- /dev/null +++ b/racksdb/web/ui/src/views/InfrastructureDetailsView.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/racksdb/web/ui/src/views/InfrastructuresView.vue b/racksdb/web/ui/src/views/InfrastructuresView.vue new file mode 100644 index 00000000..2ea28a47 --- /dev/null +++ b/racksdb/web/ui/src/views/InfrastructuresView.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file From cf54942e55bd7ce3fd37f18032dd6b272b265c39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 4 Oct 2023 09:33:06 +0200 Subject: [PATCH 004/150] fix: deleting all the useless files --- racksdb/web/ui/src/assets/base.css | 86 ------------------ racksdb/web/ui/src/assets/logo.svg | 1 - racksdb/web/ui/src/assets/main.css | 35 -------- racksdb/web/ui/src/components/HelloWorld.vue | 41 --------- racksdb/web/ui/src/components/TheWelcome.vue | 88 ------------------- racksdb/web/ui/src/components/WelcomeItem.vue | 87 ------------------ .../ui/src/components/icons/IconCommunity.vue | 7 -- .../components/icons/IconDocumentation.vue | 7 -- .../ui/src/components/icons/IconEcosystem.vue | 7 -- .../ui/src/components/icons/IconSupport.vue | 7 -- .../ui/src/components/icons/IconTooling.vue | 19 ---- 11 files changed, 385 deletions(-) delete mode 100644 racksdb/web/ui/src/assets/base.css delete mode 100644 racksdb/web/ui/src/assets/logo.svg delete mode 100644 racksdb/web/ui/src/assets/main.css delete mode 100644 racksdb/web/ui/src/components/HelloWorld.vue delete mode 100644 racksdb/web/ui/src/components/TheWelcome.vue delete mode 100644 racksdb/web/ui/src/components/WelcomeItem.vue delete mode 100644 racksdb/web/ui/src/components/icons/IconCommunity.vue delete mode 100644 racksdb/web/ui/src/components/icons/IconDocumentation.vue delete mode 100644 racksdb/web/ui/src/components/icons/IconEcosystem.vue delete mode 100644 racksdb/web/ui/src/components/icons/IconSupport.vue delete mode 100644 racksdb/web/ui/src/components/icons/IconTooling.vue diff --git a/racksdb/web/ui/src/assets/base.css b/racksdb/web/ui/src/assets/base.css deleted file mode 100644 index 8816868a..00000000 --- a/racksdb/web/ui/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/racksdb/web/ui/src/assets/logo.svg b/racksdb/web/ui/src/assets/logo.svg deleted file mode 100644 index 75656603..00000000 --- a/racksdb/web/ui/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/racksdb/web/ui/src/assets/main.css b/racksdb/web/ui/src/assets/main.css deleted file mode 100644 index e8667cd4..00000000 --- a/racksdb/web/ui/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/racksdb/web/ui/src/components/HelloWorld.vue b/racksdb/web/ui/src/components/HelloWorld.vue deleted file mode 100644 index 38d821ef..00000000 --- a/racksdb/web/ui/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/racksdb/web/ui/src/components/TheWelcome.vue b/racksdb/web/ui/src/components/TheWelcome.vue deleted file mode 100644 index 49d8f735..00000000 --- a/racksdb/web/ui/src/components/TheWelcome.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - diff --git a/racksdb/web/ui/src/components/WelcomeItem.vue b/racksdb/web/ui/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086ae..00000000 --- a/racksdb/web/ui/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/racksdb/web/ui/src/components/icons/IconCommunity.vue b/racksdb/web/ui/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055..00000000 --- a/racksdb/web/ui/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/racksdb/web/ui/src/components/icons/IconDocumentation.vue b/racksdb/web/ui/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cf..00000000 --- a/racksdb/web/ui/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/racksdb/web/ui/src/components/icons/IconEcosystem.vue b/racksdb/web/ui/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078..00000000 --- a/racksdb/web/ui/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/racksdb/web/ui/src/components/icons/IconSupport.vue b/racksdb/web/ui/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d..00000000 --- a/racksdb/web/ui/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/racksdb/web/ui/src/components/icons/IconTooling.vue b/racksdb/web/ui/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/racksdb/web/ui/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - From d8c3402291547cd603eae08bcc7d189c22f34944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 4 Oct 2023 10:09:07 +0200 Subject: [PATCH 005/150] feat: creation of the header --- racksdb/web/ui/public/assets/racksdb_logo.svg | 868 ++++++++++++++++++ racksdb/web/ui/src/App.vue | 9 +- racksdb/web/ui/src/components/HeaderPage.vue | 63 ++ 3 files changed, 938 insertions(+), 2 deletions(-) create mode 100644 racksdb/web/ui/public/assets/racksdb_logo.svg create mode 100644 racksdb/web/ui/src/components/HeaderPage.vue diff --git a/racksdb/web/ui/public/assets/racksdb_logo.svg b/racksdb/web/ui/public/assets/racksdb_logo.svg new file mode 100644 index 00000000..c2f4fba4 --- /dev/null +++ b/racksdb/web/ui/public/assets/racksdb_logo.svg @@ -0,0 +1,868 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + DB + Racks + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/racksdb/web/ui/src/App.vue b/racksdb/web/ui/src/App.vue index 7905b051..e4d7b199 100644 --- a/racksdb/web/ui/src/App.vue +++ b/racksdb/web/ui/src/App.vue @@ -1,9 +1,13 @@ From 5648ac2c7d7a70140b9dce6a19c6db3b4b0c7397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Thu, 12 Oct 2023 07:37:02 +0200 Subject: [PATCH 022/150] feat: create a Banner component for the HomePage --- racksdb/web/ui/src/components/BannerHomeView.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 racksdb/web/ui/src/components/BannerHomeView.vue diff --git a/racksdb/web/ui/src/components/BannerHomeView.vue b/racksdb/web/ui/src/components/BannerHomeView.vue new file mode 100644 index 00000000..a40e0a00 --- /dev/null +++ b/racksdb/web/ui/src/components/BannerHomeView.vue @@ -0,0 +1,14 @@ + + + From 849594cb0dca118a4ee5a5c16878a0eb83d7ddc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Thu, 12 Oct 2023 07:38:44 +0200 Subject: [PATCH 023/150] feat: import the component banner into this view --- racksdb/web/ui/src/views/HomeView.vue | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/racksdb/web/ui/src/views/HomeView.vue b/racksdb/web/ui/src/views/HomeView.vue index f1d2f8c8..23b18bc5 100644 --- a/racksdb/web/ui/src/views/HomeView.vue +++ b/racksdb/web/ui/src/views/HomeView.vue @@ -2,6 +2,7 @@ import { useHttp } from '@/plugins/http'; import { ref, onMounted} from 'vue' import type { Ref } from 'vue' +import BannerHomeView from '../components/BannerHomeView.vue'; const http = useHttp() @@ -39,8 +40,6 @@ onMounted(() => { getInfrastructures() }) - - export interface Datacenter { name: string tags: any @@ -55,12 +54,7 @@ export interface Infrastructure { \ No newline at end of file From 680ecf7bd3f5ace79389cf8e8f3ceccc90b01104 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Fri, 13 Oct 2023 12:12:18 +0200 Subject: [PATCH 025/150] feat: deleted the function "getDatacenterDetailsRoute" And use props instead --- racksdb/web/ui/src/views/DatacentersView.vue | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/racksdb/web/ui/src/views/DatacentersView.vue b/racksdb/web/ui/src/views/DatacentersView.vue index f4a12a5f..0c20c392 100644 --- a/racksdb/web/ui/src/views/DatacentersView.vue +++ b/racksdb/web/ui/src/views/DatacentersView.vue @@ -17,13 +17,8 @@ async function getDatacenters(){ } } -function getDatacenterDetailsRoute(datacenterName: string) { - return `/datacenters/${encodeURIComponent(datacenterName)}` -} - function searchDatacenter() { const filter = input.value.toUpperCase(); - const ul = document.getElementById('myUL') const li = document.getElementsByTagName('li') for (var i = 0; i < li.length; i++) { @@ -71,7 +66,7 @@ export interface Datacenter {
    - +
  • {{datacenter.name}}
    •
From 6ca6ffb6761b8b96ec2591ec2d00e51fd4f563cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Fri, 13 Oct 2023 12:13:35 +0200 Subject: [PATCH 026/150] feat: add the searchbar and add defineProps --- .../ui/src/views/DatacenterDetailsView.vue | 78 ++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/racksdb/web/ui/src/views/DatacenterDetailsView.vue b/racksdb/web/ui/src/views/DatacenterDetailsView.vue index 45217018..e998c74e 100644 --- a/racksdb/web/ui/src/views/DatacenterDetailsView.vue +++ b/racksdb/web/ui/src/views/DatacenterDetailsView.vue @@ -1,9 +1,85 @@ \ No newline at end of file From 4ae155635b9115968770fc403daf54aceecc8a75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Fri, 13 Oct 2023 14:58:22 +0200 Subject: [PATCH 027/150] feat: creation of the data table of a datacenter --- .../ui/src/views/DatacenterDetailsView.vue | 117 +++++++++++++++++- 1 file changed, 115 insertions(+), 2 deletions(-) diff --git a/racksdb/web/ui/src/views/DatacenterDetailsView.vue b/racksdb/web/ui/src/views/DatacenterDetailsView.vue index e998c74e..81f03f30 100644 --- a/racksdb/web/ui/src/views/DatacenterDetailsView.vue +++ b/racksdb/web/ui/src/views/DatacenterDetailsView.vue @@ -5,14 +5,39 @@ import type { Ref } from 'vue' const http = useHttp() const datacenters: Ref> = ref([]) +const racks: Ref> = ref([]) +const infrastructures: Ref> = ref([]) var showList = ref(true) const input = ref('') +var selectedRack: Ref = ref(undefined) +var selectedinfrastucture: Ref = ref(undefined) + const props = defineProps({ datacenterName: String }) +async function getInfrastructures(){ + try{ + const resp = await http.get('infrastructures') + infrastructures.value = resp.data as Infrastructure[] + selectedinfrastucture.value = infrastructures.value.find(infrastructure => infrastructure.rack === selectedRack.value?.name); + } catch (error) { + console.error('erreur', error) + } +} + +async function getRacks(){ + try{ + const resp = await http.get('racks') + racks.value = resp.data as Rack[] + selectedRack.value = racks.value.find(rack => rack.datacenter === props.datacenterName); + } catch (error) { + console.error('erreur', error) + } +} + async function getDatacenters(){ try { const resp = await http.get('datacenters') @@ -47,6 +72,8 @@ function searchDatacenter() { onMounted(() => { getDatacenters() + getRacks() + getInfrastructures() }) export interface Datacenter { @@ -55,12 +82,27 @@ export interface Datacenter { show: boolean } +export interface Infrastructure { + rack: string +} + +export interface Rack { + name: string + datacenter: string + room: string + type : { + width: number + depth: number + } + row: string +} + \ No newline at end of file From ed7aebdee8bcfbf87041b181ce8147c08cb7677c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 16 Oct 2023 16:54:56 +0200 Subject: [PATCH 028/150] fix: changed the path of datacenterdetails/room and infrastructuredetails --- racksdb/web/ui/src/router/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/racksdb/web/ui/src/router/index.ts b/racksdb/web/ui/src/router/index.ts index 8b435d9a..45186952 100644 --- a/racksdb/web/ui/src/router/index.ts +++ b/racksdb/web/ui/src/router/index.ts @@ -22,14 +22,14 @@ const router = createRouter({ }, { - path: '/datacenters/:datacenterName', + path: '/datacenters/:name', name: 'datacenterdetails', component: DatacenterDetailsView, props: true, }, { - path: '/datacenters/:datacenterName/:datacenterRoom', + path: '/datacenters/:name/:datacenterRoom', name: 'datacenterroom', component: DatacenterRoomView, props: true, @@ -42,8 +42,8 @@ const router = createRouter({ }, { - path: '/infrastructures/:infrastructureName', - name: 'infrastructuresdetails', + path: '/infrastructures/:name', + name: 'infrastructuredetails', component: InfrastructureDetailsView, props: true, }, From c61df379980750d184418cae785a4d9fcc1687df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 16 Oct 2023 16:56:11 +0200 Subject: [PATCH 029/150] feat: Creation of a component to generate cards for the homeview --- .../web/ui/src/components/CardsHomeView.vue | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 racksdb/web/ui/src/components/CardsHomeView.vue diff --git a/racksdb/web/ui/src/components/CardsHomeView.vue b/racksdb/web/ui/src/components/CardsHomeView.vue new file mode 100644 index 00000000..f1fd9660 --- /dev/null +++ b/racksdb/web/ui/src/components/CardsHomeView.vue @@ -0,0 +1,53 @@ + + + \ No newline at end of file From 8c3d6a4783490213a676637d02c780ab424986f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 16 Oct 2023 16:58:25 +0200 Subject: [PATCH 030/150] fix: deleted the functions getDatacenterDetailsRoute and getInfrastructureDetailsRoute feat: adding CardsHomeView component in the template to create the cards --- racksdb/web/ui/src/views/HomeView.vue | 61 +++++++++------------------ 1 file changed, 21 insertions(+), 40 deletions(-) diff --git a/racksdb/web/ui/src/views/HomeView.vue b/racksdb/web/ui/src/views/HomeView.vue index 23b18bc5..b017c5e4 100644 --- a/racksdb/web/ui/src/views/HomeView.vue +++ b/racksdb/web/ui/src/views/HomeView.vue @@ -3,7 +3,7 @@ import { useHttp } from '@/plugins/http'; import { ref, onMounted} from 'vue' import type { Ref } from 'vue' import BannerHomeView from '../components/BannerHomeView.vue'; - +import CardsHomeView from '@/components/CardsHomeView.vue'; const http = useHttp() const datacenters: Ref> = ref([]) @@ -27,13 +27,7 @@ async function getInfrastructures(){ } } -function getDatacenterDetailsRoute(datacenterName: string){ - return `/datacenters/${encodeURIComponent(datacenterName)}` -} -function getInfrastructureDetailsRoute(infrastructureName: string){ - return `/infrastructures/${encodeURIComponent(infrastructureName)}` -} onMounted(() => { getDatacenters() @@ -56,41 +50,28 @@ export interface Infrastructure { -
-
- -

{{ datacenters.length }} Datacenter - s -

- -
    -
  • - - {{ datacenter.name }}, - - {{ datacenter.tags.join(' ') }} -
    • -
-
- -
- -

{{ infrastructures.length }} Infrastructure - s -

- - -
    -
  • - - {{ infrastructure.name }}, - - {{ infrastructure.description }} -
    • -
-
+
+ + +
From 94199c06b99aa7d6e460420ab2c2a5947c888154 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Tue, 17 Oct 2023 13:32:58 +0200 Subject: [PATCH 031/150] feat: New component for the searchbar --- .../web/ui/src/components/SearchBarView.vue | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 racksdb/web/ui/src/components/SearchBarView.vue diff --git a/racksdb/web/ui/src/components/SearchBarView.vue b/racksdb/web/ui/src/components/SearchBarView.vue new file mode 100644 index 00000000..5dd0d60a --- /dev/null +++ b/racksdb/web/ui/src/components/SearchBarView.vue @@ -0,0 +1,59 @@ + + + \ No newline at end of file From 24ff231354f7bbcd594edeaa9a0d6aa8664a029b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Tue, 17 Oct 2023 15:25:34 +0200 Subject: [PATCH 032/150] feat: creation of the searchbar using the component SearchBar --- .../web/ui/src/views/InfrastructuresView.vue | 46 ++++++++++++------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/racksdb/web/ui/src/views/InfrastructuresView.vue b/racksdb/web/ui/src/views/InfrastructuresView.vue index 42865fb2..9c6d2666 100644 --- a/racksdb/web/ui/src/views/InfrastructuresView.vue +++ b/racksdb/web/ui/src/views/InfrastructuresView.vue @@ -1,23 +1,35 @@ \ No newline at end of file From a4fcb2c558db596532240e00fd1243602a986d6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Thu, 19 Oct 2023 20:21:42 +0200 Subject: [PATCH 033/150] fix: update the router-link --- racksdb/web/ui/src/components/SearchBarView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/racksdb/web/ui/src/components/SearchBarView.vue b/racksdb/web/ui/src/components/SearchBarView.vue index 5dd0d60a..9cb621ca 100644 --- a/racksdb/web/ui/src/components/SearchBarView.vue +++ b/racksdb/web/ui/src/components/SearchBarView.vue @@ -52,7 +52,7 @@ function search() {
    - +
  • {{item.name}}
    •
From 4d5d7daa0f554809e3f68574c17d39c8496e9c4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Thu, 19 Oct 2023 20:23:30 +0200 Subject: [PATCH 034/150] fix: Add the component SearchBar in DatacenterRoom and DatacentersView --- .../web/ui/src/views/DatacenterRoomView.vue | 35 +++++++++++-- racksdb/web/ui/src/views/DatacentersView.vue | 52 +++---------------- 2 files changed, 40 insertions(+), 47 deletions(-) diff --git a/racksdb/web/ui/src/views/DatacenterRoomView.vue b/racksdb/web/ui/src/views/DatacenterRoomView.vue index f31d3abe..47721056 100644 --- a/racksdb/web/ui/src/views/DatacenterRoomView.vue +++ b/racksdb/web/ui/src/views/DatacenterRoomView.vue @@ -1,9 +1,38 @@ \ No newline at end of file diff --git a/racksdb/web/ui/src/views/DatacentersView.vue b/racksdb/web/ui/src/views/DatacentersView.vue index 0c20c392..5173888f 100644 --- a/racksdb/web/ui/src/views/DatacentersView.vue +++ b/racksdb/web/ui/src/views/DatacentersView.vue @@ -2,11 +2,10 @@ import { useHttp } from '@/plugins/http'; import { ref, onMounted } from 'vue' import type { Ref } from 'vue' +import SearchBarView from '@/components/SearchBarView.vue'; +var datacenters: Ref> = ref([]) const http = useHttp() -const datacenters: Ref> = ref([]) -var showList = ref(true) -const input = ref('') async function getDatacenters(){ try { @@ -17,59 +16,24 @@ async function getDatacenters(){ } } -function searchDatacenter() { - const filter = input.value.toUpperCase(); - const li = document.getElementsByTagName('li') - - for (var i = 0; i < li.length; i++) { - var txtValue = li[i].textContent || li[i].innerText; - console.log(txtValue) - console.log('.........') - - if (txtValue.toUpperCase().indexOf(filter) > -1) { - li[i].style.display = ""; - } else { - li[i].style.display = "none"; - } - } - showList.value = input.value.trim() !==''; -}; - - onMounted(() => { getDatacenters() }) export interface Datacenter { name: string - tags: any - show: boolean } \ No newline at end of file From 74a19bdf8385a1025a16ec390d4febee3e5f228c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Thu, 19 Oct 2023 20:26:34 +0200 Subject: [PATCH 035/150] feat: configuration of the requirement for top-leve await --- racksdb/web/ui/vite.config.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/racksdb/web/ui/vite.config.ts b/racksdb/web/ui/vite.config.ts index 5c45e1d9..95143a82 100644 --- a/racksdb/web/ui/vite.config.ts +++ b/racksdb/web/ui/vite.config.ts @@ -12,5 +12,8 @@ export default defineConfig({ alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } + }, + build: { + target: 'esnext' // required for top-level await used by runtimeConfiguration plugin } }) From 5a3cba5e158bb754734d962ec3635b72e47eb71e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Fri, 20 Oct 2023 12:12:40 +0200 Subject: [PATCH 036/150] feat: new component to generate the cards of the infrastructure --- .../ui/src/components/InfrastructureCards.vue | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 racksdb/web/ui/src/components/InfrastructureCards.vue diff --git a/racksdb/web/ui/src/components/InfrastructureCards.vue b/racksdb/web/ui/src/components/InfrastructureCards.vue new file mode 100644 index 00000000..432e9dcb --- /dev/null +++ b/racksdb/web/ui/src/components/InfrastructureCards.vue @@ -0,0 +1,173 @@ + + + \ No newline at end of file From 417076786e8d34cb9d70b9f6d623f7f3bfd7b575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Fri, 20 Oct 2023 12:13:31 +0200 Subject: [PATCH 037/150] feat: Adding in the template the component InfrastructureCards --- .../src/views/InfrastructureDetailsView.vue | 123 +++++++++++++++++- 1 file changed, 120 insertions(+), 3 deletions(-) diff --git a/racksdb/web/ui/src/views/InfrastructureDetailsView.vue b/racksdb/web/ui/src/views/InfrastructureDetailsView.vue index 3087e2d6..a888f258 100644 --- a/racksdb/web/ui/src/views/InfrastructureDetailsView.vue +++ b/racksdb/web/ui/src/views/InfrastructureDetailsView.vue @@ -1,9 +1,126 @@ \ No newline at end of file From 24a52be7f4a8dbbd255daa89c7ae5e1c87b20a96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 23 Oct 2023 13:56:51 +0200 Subject: [PATCH 038/150] feat: creation of a function who returns the number of racks + adding the route to the view DatacenterRoom --- .../ui/src/views/DatacenterDetailsView.vue | 212 +++++------------- 1 file changed, 62 insertions(+), 150 deletions(-) diff --git a/racksdb/web/ui/src/views/DatacenterDetailsView.vue b/racksdb/web/ui/src/views/DatacenterDetailsView.vue index 81f03f30..8761b03d 100644 --- a/racksdb/web/ui/src/views/DatacenterDetailsView.vue +++ b/racksdb/web/ui/src/views/DatacenterDetailsView.vue @@ -2,131 +2,65 @@ import { useHttp } from '@/plugins/http'; import { ref, onMounted } from 'vue' import type { Ref } from 'vue' +import SearchBarView from '@/components/SearchBarView.vue'; -const http = useHttp() -const datacenters: Ref> = ref([]) -const racks: Ref> = ref([]) -const infrastructures: Ref> = ref([]) -var showList = ref(true) -const input = ref('') -var selectedRack: Ref = ref(undefined) -var selectedinfrastucture: Ref = ref(undefined) - - -const props = defineProps({ - datacenterName: String -}) - - -async function getInfrastructures(){ - try{ - const resp = await http.get('infrastructures') - infrastructures.value = resp.data as Infrastructure[] - selectedinfrastucture.value = infrastructures.value.find(infrastructure => infrastructure.rack === selectedRack.value?.name); - } catch (error) { - console.error('erreur', error) - } -} -async function getRacks(){ - try{ - const resp = await http.get('racks') - racks.value = resp.data as Rack[] - selectedRack.value = racks.value.find(rack => rack.datacenter === props.datacenterName); - } catch (error) { - console.error('erreur', error) - } -} +const http = useHttp() +var datacenters: Ref> = ref([]) +var datacenterDetails: Ref> = ref([]) + + async function getDatacenters(){ + try { + const resp = await http.get('datacenters') + datacenters.value = resp.data as Datacenter[] + datacenterDetails.value = datacenters.value.filter((datacenter) => datacenter.name === props.name) as Datacenter[] + } catch (error) { + console.error('Erreur lors de la récupératuon des données des datacenters', error) + } + } + + onMounted(() => { + getDatacenters() + }) -async function getDatacenters(){ - try { - const resp = await http.get('datacenters') - datacenters.value = resp.data as Datacenter[] - } catch (error) { - console.error('Erreur lors de la récupératuon des données des datacenters', error) + function roomNbRacks(room: DatacenterRoom) { + return room.rows.reduce((result, row) => result + row.nbracks, 0) } -} - -function getDatacenterDetailsRoute(datacenterName: string) { - return `/datacenters/${encodeURIComponent(datacenterName)}` -} - -function searchDatacenter() { - const filter = input.value.toUpperCase(); - const li = document.getElementsByTagName('li') - - for (var i = 0; i < li.length; i++) { - var txtValue = li[i].textContent || li[i].innerText; - console.log(txtValue) - console.log('.........') - - if (txtValue.toUpperCase().indexOf(filter) > -1) { - li[i].style.display = ""; - } else { - li[i].style.display = "none"; - } + + interface Datacenter { + name: string, + rooms: Array } - showList.value = input.value.trim() !==''; -}; - - -onMounted(() => { - getDatacenters() - getRacks() - getInfrastructures() -}) - -export interface Datacenter { - name: string - tags: any - show: boolean -} -export interface Infrastructure { - rack: string -} - -export interface Rack { - name: string - datacenter: string - room: string - type : { - width: number - depth: number + interface DatacenterRoom { + name: string + dimensions: { + width: number + depth: number + } + rows: [{ + nbracks: number + }] } - row: string -} - + + const props = defineProps({ + name: String, + + }) diff --git a/racksdb/web/ui/src/views/InfrastructuresView.vue b/racksdb/web/ui/src/views/InfrastructuresView.vue index 3f845cc9..71ac9932 100644 --- a/racksdb/web/ui/src/views/InfrastructuresView.vue +++ b/racksdb/web/ui/src/views/InfrastructuresView.vue @@ -7,106 +7,115 @@ import type { Ref } from 'vue' const infrastructures: Ref> = ref([]) const http = useHttp() -async function getInfrastructure(){ - try { - const resp = await http.get('infrastructures') - infrastructures.value = resp.data as Infrastructure[] - } catch (error) { - console.error('Error during infrastructure data recovery', error) - } +async function getInfrastructure() { + try { + const resp = await http.get('infrastructures') + infrastructures.value = resp.data as Infrastructure[] + } catch (error) { + console.error('Error during infrastructure data recovery', error) + } } onMounted(() => { - getInfrastructure() + getInfrastructure() }) export interface Infrastructure { - name: string - description: string - layout: [{ - rack: string - nodes: [NodeEquipment] - network: [NetworkEquipment] - storage: [StorageEquipment] - }] + name: string + description: string + layout: [ + { + rack: string + nodes: [NodeEquipment] + network: [NetworkEquipment] + storage: [StorageEquipment] + } + ] } -export interface NodeEquipment{ - type: { - id: string - model: string - height: number - width: number - specs: string - cpu: { - sockets: number - model: string - specs: string - cores: number - } - ram: { - dimm: number - size: number - } - storage: [{ - type: string - model: string - size: number - }] - netifs: [{ - type: string - bandwidth: number - }] - } - rack: string - name: string - slot: number +export interface NodeEquipment { + type: { + id: string + model: string + height: number + width: number + specs: string + cpu: { + sockets: number + model: string + specs: string + cores: number + } + ram: { + dimm: number + size: number + } + storage: [ + { + type: string + model: string + size: number + } + ] + netifs: [ + { + type: string + bandwidth: number + } + ] + } + rack: string + name: string + slot: number } -export interface NetworkEquipment{ - type: { - id: string - model: string - height: number - width: number - netifs:[{ - type: string - bandwidth: number - number: number - - }] - } - tags: [] - rack: string - name: string - slot: number +export interface NetworkEquipment { + type: { + id: string + model: string + height: number + width: number + netifs: [ + { + type: string + bandwidth: number + number: number + } + ] + } + tags: [] + rack: string + name: string + slot: number } -export interface StorageEquipment{ - type: { - id: string - model: string - height: number - width: number - disks: [{ - type: string - size: number - model: string - number: number - }] - } - tags: [] - rack: string - name: string - slot: number +export interface StorageEquipment { + type: { + id: string + model: string + height: number + width: number + disks: [ + { + type: string + size: number + model: string + number: number + } + ] + } + tags: [] + rack: string + name: string + slot: number } \ No newline at end of file + + From f861eb942839d439610a6426e3e1f269d50f694d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 13 Nov 2023 16:24:01 +0100 Subject: [PATCH 070/150] fix: delete .gitignore from ui and put in .gitignore of racksdb - node_modules - dist --- .gitignore | 1 + racksdb/web/ui/.gitignore | 28 ---------------------------- 2 files changed, 1 insertion(+), 28 deletions(-) delete mode 100644 racksdb/web/ui/.gitignore diff --git a/.gitignore b/.gitignore index e4d7889e..50ec97df 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ build/ dist/ /docs/man/*.1 /generated-doc +node_modules/ diff --git a/racksdb/web/ui/.gitignore b/racksdb/web/ui/.gitignore deleted file mode 100644 index 38adffa6..00000000 --- a/racksdb/web/ui/.gitignore +++ /dev/null @@ -1,28 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -.DS_Store -dist -dist-ssr -coverage -*.local - -/cypress/videos/ -/cypress/screenshots/ - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? From a79d891259d7a32d3f70bc522fd267d3faed2d85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 13 Nov 2023 16:25:40 +0100 Subject: [PATCH 071/150] fix: add eslint hint in nodejs files --- racksdb/web/ui/postcss.config.js | 1 + racksdb/web/ui/tailwind.config.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/racksdb/web/ui/postcss.config.js b/racksdb/web/ui/postcss.config.js index 33ad091d..4edfd193 100644 --- a/racksdb/web/ui/postcss.config.js +++ b/racksdb/web/ui/postcss.config.js @@ -1,3 +1,4 @@ +/* eslint-env node */ module.exports = { plugins: { tailwindcss: {}, diff --git a/racksdb/web/ui/tailwind.config.js b/racksdb/web/ui/tailwind.config.js index 04404ddd..6885ac95 100644 --- a/racksdb/web/ui/tailwind.config.js +++ b/racksdb/web/ui/tailwind.config.js @@ -1,4 +1,5 @@ /** @type {import('tailwindcss').Config} */ +/* eslint-env node */ module.exports = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { @@ -10,4 +11,3 @@ module.exports = { }, plugins: [], } - From 98ff2f9bdbcc487dca8d7271f39a5b8f7fbfcf57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 13 Nov 2023 16:49:35 +0100 Subject: [PATCH 072/150] fix: changed the type of equipment --- racksdb/web/ui/src/components/InfrastructureContentCard.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/racksdb/web/ui/src/components/InfrastructureContentCard.vue b/racksdb/web/ui/src/components/InfrastructureContentCard.vue index 1aca7dfb..fca4b808 100644 --- a/racksdb/web/ui/src/components/InfrastructureContentCard.vue +++ b/racksdb/web/ui/src/components/InfrastructureContentCard.vue @@ -10,11 +10,12 @@ import type { var showPopUp = ref(false) var popUpContent: Ref = ref() +type equipmentType = 'nodes' | 'storage' | 'network' const props = defineProps({ rack: String, equipment: { - type: String, + type: String as PropType, required: true }, name: { @@ -28,7 +29,7 @@ const props = defineProps({ } }) -function popUp(name: string, equipment: 'nodes' | 'storage' | 'network') { +function popUp(name: string, equipment: equipmentType) { if (showPopUp.value) { showPopUp.value = !showPopUp.value } else { From 538ac5c204726d4e111f06a678cf4924b2632c7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Mon, 13 Nov 2023 17:06:10 +0100 Subject: [PATCH 073/150] fix: add copright and license in the header of the all the files --- racksdb/web/ui/src/components/HeaderPage.vue | 6 ++++++ racksdb/web/ui/src/components/HomeViewCards.vue | 6 ++++++ racksdb/web/ui/src/components/InfrastructureCards.vue | 6 ++++++ racksdb/web/ui/src/components/InfrastructureContentCard.vue | 6 ++++++ racksdb/web/ui/src/components/SearchBar.vue | 6 ++++++ racksdb/web/ui/src/plugins/http.ts | 6 ++++++ racksdb/web/ui/src/plugins/runtimeConfiguration.ts | 6 ++++++ racksdb/web/ui/src/router/index.ts | 6 ++++++ racksdb/web/ui/src/views/DatacenterDetailsView.vue | 6 ++++++ racksdb/web/ui/src/views/DatacenterRoomView.vue | 6 ++++++ racksdb/web/ui/src/views/DatacentersView.vue | 6 ++++++ racksdb/web/ui/src/views/HomeView.vue | 6 ++++++ racksdb/web/ui/src/views/InfrastructureDetailsView.vue | 6 ++++++ racksdb/web/ui/src/views/InfrastructuresView.vue | 6 ++++++ 14 files changed, 84 insertions(+) diff --git a/racksdb/web/ui/src/components/HeaderPage.vue b/racksdb/web/ui/src/components/HeaderPage.vue index 0cb29ffd..10ab19b3 100644 --- a/racksdb/web/ui/src/components/HeaderPage.vue +++ b/racksdb/web/ui/src/components/HeaderPage.vue @@ -1,3 +1,9 @@ + + diff --git a/racksdb/web/ui/src/views/HomeView.vue b/racksdb/web/ui/src/views/HomeView.vue index 2608c685..ca253858 100644 --- a/racksdb/web/ui/src/views/HomeView.vue +++ b/racksdb/web/ui/src/views/HomeView.vue @@ -49,23 +49,17 @@ onMounted(() => {
From d17e5078d6d1456370a07ec2e21765d8728c1cd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 09:38:58 +0100 Subject: [PATCH 097/150] feat: creation of a new component to display the infrastructure in table format --- .../ui/src/components/InfrastructureTable.vue | 149 ++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 racksdb/web/ui/src/components/InfrastructureTable.vue diff --git a/racksdb/web/ui/src/components/InfrastructureTable.vue b/racksdb/web/ui/src/components/InfrastructureTable.vue new file mode 100644 index 00000000..ae9ebadb --- /dev/null +++ b/racksdb/web/ui/src/components/InfrastructureTable.vue @@ -0,0 +1,149 @@ + + + From 075f4136861c0a608b17706748c511ae3aebfbbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 09:43:12 +0100 Subject: [PATCH 098/150] fix: use icons from heroicons + delete the code to display the data in table form use instead the component InfrastructureTable --- .../src/views/InfrastructureDetailsView.vue | 156 ++---------------- 1 file changed, 17 insertions(+), 139 deletions(-) diff --git a/racksdb/web/ui/src/views/InfrastructureDetailsView.vue b/racksdb/web/ui/src/views/InfrastructureDetailsView.vue index 404d1cdd..c94d042e 100644 --- a/racksdb/web/ui/src/views/InfrastructureDetailsView.vue +++ b/racksdb/web/ui/src/views/InfrastructureDetailsView.vue @@ -9,41 +9,27 @@ import { useHttp } from '@/plugins/http' import { ref, onMounted, inject } from 'vue' import SearchBar from '@/components/SearchBar.vue' import InfrastructureCards from '@/components/InfrastructureCards.vue' +import InfrastructureTable from '@/components/InfrastructureTable.vue' import { injectionKey } from '@/plugins/runtimeConfiguration' import type { Ref } from 'vue' import type { Infrastructure } from '@/views/InfrastructuresView.vue' -import { - Squares2X2Icon, - TableCellsIcon -} from '@heroicons/vue/24/outline' +import { Squares2X2Icon, TableCellsIcon } from '@heroicons/vue/24/outline' const http = useHttp() const infrastructures: Ref> = ref([]) const infrastructureDetails: Ref = ref() const showFullImg = ref(false) -const rack = ref() const cardsView = ref(true) -const showRack = ref(false) -const showInfrastructureRacks = ref(true) -function changeView(){ - cardsView.value = false +// this function changes the display by assigning the opposite value to cardsView +function changeView() { + cardsView.value = !cardsView.value } -function openImg() { +function toggleImageModal() { showFullImg.value = !showFullImg.value } -function rackDetails(rackName: string) { - showRack.value = true - showInfrastructureRacks.value = false - var layout = infrastructureDetails.value?.layout - - for (let index = 0; index < layout!.length; index++) { - rack.value = layout!.filter((rack) => rack.rack === rackName) - } -} - async function getInfrastructure() { try { const resp = await http.get('infrastructures') @@ -80,7 +66,7 @@ const props = defineProps({ @@ -91,20 +77,20 @@ const props = defineProps({
- - + +
- - + +
@@ -127,118 +113,10 @@ const props = defineProps({
-
-
- -
-
- -
- - - - - - - - - - -
NameEquipmentID
-
- -
- - - - - - - - - - -
NameEquipmentID
-
+
From c3b9fd9cbbea5349714615f8366e6900c502649a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 09:45:27 +0100 Subject: [PATCH 099/150] fix: code formatting --- .vscode/settings.json | 1 + racksdb/web/ui/src/App.vue | 1 - .../web/ui/src/components/HomeViewCard.vue | 6 +- .../ui/src/components/InfrastructureTable.vue | 239 +++++++++--------- racksdb/web/ui/src/components/SearchBar.vue | 7 +- 5 files changed, 123 insertions(+), 131 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/racksdb/web/ui/src/App.vue b/racksdb/web/ui/src/App.vue index 77e2e693..830dfd83 100644 --- a/racksdb/web/ui/src/App.vue +++ b/racksdb/web/ui/src/App.vue @@ -1,7 +1,6 @@ diff --git a/racksdb/web/ui/src/components/InfrastructureTable.vue b/racksdb/web/ui/src/components/InfrastructureTable.vue index ae9ebadb..3b1ec3b0 100644 --- a/racksdb/web/ui/src/components/InfrastructureTable.vue +++ b/racksdb/web/ui/src/components/InfrastructureTable.vue @@ -1,5 +1,11 @@ + + diff --git a/racksdb/web/ui/src/components/SearchBar.vue b/racksdb/web/ui/src/components/SearchBar.vue index 1c98dc91..0fdfb98a 100644 --- a/racksdb/web/ui/src/components/SearchBar.vue +++ b/racksdb/web/ui/src/components/SearchBar.vue @@ -80,12 +80,7 @@ const props = defineProps({ -
    +
    • {{ item.name }}
      •  From 74f740391d8081a32c03cd3116a05844718d786b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 09:47:01 +0100 Subject: [PATCH 100/150] fix: changed the name to the function who displays the picture of the room --- racksdb/web/ui/src/views/DatacenterRoomView.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/racksdb/web/ui/src/views/DatacenterRoomView.vue b/racksdb/web/ui/src/views/DatacenterRoomView.vue index 6138465a..9b99fb1b 100644 --- a/racksdb/web/ui/src/views/DatacenterRoomView.vue +++ b/racksdb/web/ui/src/views/DatacenterRoomView.vue @@ -19,7 +19,7 @@ const rackDetails: Ref> = ref([]) const showFullImg = ref(false) const http = useHttp() -function openImg() { +function toggleImageModal() { showFullImg.value = !showFullImg.value } @@ -85,7 +85,7 @@ interface Rack { @@ -96,7 +96,7 @@ interface Rack { From c913532375e46a16976e543060c51be36109d65e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 09:50:42 +0100 Subject: [PATCH 101/150] fix: added an if condition to ensure that the table is displaying only if datacenterDetails isn't undefined --- .../ui/src/views/DatacenterDetailsView.vue | 102 ++++++++++-------- 1 file changed, 56 insertions(+), 46 deletions(-) diff --git a/racksdb/web/ui/src/views/DatacenterDetailsView.vue b/racksdb/web/ui/src/views/DatacenterDetailsView.vue index da71e87e..a00deda8 100644 --- a/racksdb/web/ui/src/views/DatacenterDetailsView.vue +++ b/racksdb/web/ui/src/views/DatacenterDetailsView.vue @@ -49,54 +49,64 @@ const props = defineProps({ :items="datacenters" /> -
      -

      {{ name }} Datacenter

      - - - - - - - - - +
      +
      +

      + {{ name }} Datacenter +

      +
      NameArea (m²)Number of racksAccess to the room
      + + + + + + + + - - - - - - + + + + - - -
      NameArea (m²)Number of racksAccess to the room
      - {{ room.name }} - - {{ (room.dimensions.width * room.dimensions.depth) / 10 ** 6 }}m²
      -
      - width: {{ room.dimensions.width / 10 ** 3 }}m
      - depth: {{ room.dimensions.depth / 10 ** 3 }}m -
      -       		- {{ roomNbRacks(room) }} - - +
      - + {{ (room.dimensions.width * room.dimensions.depth) / 10 ** 6 }}m²
      +
      + width: {{ room.dimensions.width / 10 ** 3 }}m
      + depth: {{ room.dimensions.depth / 10 ** 3 }}m +
      +       		+ {{ roomNbRacks(room) }} + + - Access to the room - - -
      + + + + + + +
      + + +
      +

      No data availaible for this datacenter

      From e9e51084c3bf3f147887ab7302b7632bcb10ece3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 10:03:12 +0100 Subject: [PATCH 102/150] feat: add a comment to explain the function rackDetails --- racksdb/web/ui/src/components/InfrastructureTable.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/racksdb/web/ui/src/components/InfrastructureTable.vue b/racksdb/web/ui/src/components/InfrastructureTable.vue index 3b1ec3b0..cf0c7a39 100644 --- a/racksdb/web/ui/src/components/InfrastructureTable.vue +++ b/racksdb/web/ui/src/components/InfrastructureTable.vue @@ -13,6 +13,7 @@ const rack = ref() const showRack = ref(false) const showInfrastructureRacks = ref(true) +// This function changes the display and filter the infrastructure to only get the data from a rack function rackDetails(rackName: string) { showRack.value = true showInfrastructureRacks.value = false From 54ae7176dea5e1cba437e421a6e9ac267145a201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Wed, 29 Nov 2023 13:36:50 +0100 Subject: [PATCH 103/150] fix: Improving cards placement --- racksdb/web/ui/src/components/InfrastructureCards.vue | 2 +- racksdb/web/ui/src/views/InfrastructureDetailsView.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/racksdb/web/ui/src/components/InfrastructureCards.vue b/racksdb/web/ui/src/components/InfrastructureCards.vue index 489bbba7..dfc7d044 100644 --- a/racksdb/web/ui/src/components/InfrastructureCards.vue +++ b/racksdb/web/ui/src/components/InfrastructureCards.vue @@ -45,7 +45,7 @@ const props = defineProps({ -
      +
      -
      +
      Date: Wed, 29 Nov 2023 13:39:33 +0100 Subject: [PATCH 104/150] fix: resolution of the problem where all the infrastructure racks appeared --- .../ui/src/components/InfrastructureTable.vue | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/racksdb/web/ui/src/components/InfrastructureTable.vue b/racksdb/web/ui/src/components/InfrastructureTable.vue index cf0c7a39..2ac2e5db 100644 --- a/racksdb/web/ui/src/components/InfrastructureTable.vue +++ b/racksdb/web/ui/src/components/InfrastructureTable.vue @@ -40,18 +40,20 @@ const props = defineProps({ @@ -120,7 +122,7 @@ const props = defineProps({ > {{ node.name }} - Node {{ node.rack }} + {{ node.rack }} {{ node.type.id }} @@ -131,7 +133,7 @@ const props = defineProps({ > {{ storage.name }} - Storage {{ storage.rack }} + {{ storage.rack }} {{ storage.type.id }} @@ -142,7 +144,7 @@ const props = defineProps({ > {{ network.name }} - Network {{ network.rack }} + {{ network.rack }} {{ network.type.id }} From d437236d6a66e593d357bd7a769553055199ff05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Lesp=C3=A9rant?= Date: Thu, 30 Nov 2023 11:05:58 +0100 Subject: [PATCH 105/150] feat: creation of a composable and implementation of interfaces + change all project links that use interfaces to the composable --- .../web/ui/src/components/HomeViewCard.vue | 4 +- .../ui/src/components/InfrastructureCards.vue | 2 +- .../components/InfrastructureContentCard.vue | 2 +- .../ui/src/components/InfrastructureTable.vue | 2 +- racksdb/web/ui/src/composables/RacksDBAPI.ts | 126 ++++++++++++++++++ .../ui/src/views/DatacenterDetailsView.vue | 2 +- .../web/ui/src/views/DatacenterRoomView.vue | 12 +- racksdb/web/ui/src/views/DatacentersView.vue | 25 +--- racksdb/web/ui/src/views/HomeView.vue | 4 +- .../src/views/InfrastructureDetailsView.vue | 2 +- .../web/ui/src/views/InfrastructuresView.vue | 90 +------------ 11 files changed, 139 insertions(+), 132 deletions(-) create mode 100644 racksdb/web/ui/src/composables/RacksDBAPI.ts diff --git a/racksdb/web/ui/src/components/HomeViewCard.vue b/racksdb/web/ui/src/components/HomeViewCard.vue index 9a1efef6..f6db0116 100644 --- a/racksdb/web/ui/src/components/HomeViewCard.vue +++ b/racksdb/web/ui/src/components/HomeViewCard.vue @@ -5,8 +5,8 @@ This file is part of RacksDB. SPDX-License-Identifier: GPL-3.0-or-later -->