Add job-archive-demo.tar to .gitignore and ignore .idea directory in migrations/mysql***

***Update config-demo.json with new database connection details*** ***Add console.log statement in Systems.root.svelte*** ***Add "Partitions" menu item in Header.svelte*** ***Add partitions related files and routes*** ***Add partitions.entrypoint.js*** ***Update Makefile to use pnpm instead of npm*** ***Comment out wget commands in startDemo.sh*** ***Update rollup.config.mjs to include partitions.entrypoint.js*** ***Add PartitionSetting.svelte and Dashboard.svelte
2025-04-03 18:55:55 +02:00 · 2024-02-15 17:05:01 +05:30 · 2024-02-15 17:05:01 +05:30 · f58a0217f8
commit f58a0217f8
parent f534ad66e1
15 changed files with 990 additions and 7 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,3 +17,5 @@ var/job.db-wal

 dist/
 *.db
+job-archive-demo.tar
+internal/repository/migrations/mysql/.idea/*
--- a/4
+++ b/4
@ -38,7 +38,7 @@ $(TARGET): $(VAR) $(CFG) $(SVELTE_TARGETS)

 frontend:
 	$(info ===>  BUILD frontend)
-	cd web/frontend && npm install && npm run build
+	cd web/frontend && pnpm install && pnpm run build

 clean:
 	$(info ===>  CLEAN)
@ -75,7 +75,7 @@ config.json:

 $(SVELTE_TARGETS): $(SVELTE_SRC)
 	$(info ===>  BUILD frontend)
-	cd web/frontend && npm install && npm run build
+	cd web/frontend && pnpm install && pnpm run build

 install: $(TARGET)
 	@WORKSPACE=$(PREFIX)
--- a/configs/config-demo.json
+++ b/configs/config-demo.json
@ -1,5 +1,7 @@
 {
    "addr": "127.0.0.1:8080",
+    "db-driver": "mysql",
+    "db" : "root:my-secret-pw@(127.0.0.1:3306)/cockpit",
    "archive": {
        "kind": "file",
        "path": "./var/job-archive"
--- a/internal/routerConfig/routes.go
+++ b/internal/routerConfig/routes.go
@ -45,6 +45,8 @@ var routes []Route = []Route{
 	{"/monitoring/node/{cluster}/{hostname}", "monitoring/node.tmpl", "Node <ID> - ClusterCockpit", false, setupNodeRoute},
 	{"/monitoring/analysis/{cluster}", "monitoring/analysis.tmpl", "Analysis - ClusterCockpit", true, setupAnalysisRoute},
 	{"/monitoring/status/{cluster}", "monitoring/status.tmpl", "Status of <ID> - ClusterCockpit", false, setupClusterRoute},
+	{"/partitions/systems/{cluster}", "partitions/systems.tmpl", "Cluster <ID> - ClusterCockpit", false, setupClusterRoute},
+
 }

 func setupHomeRoute(i InfoType, r *http.Request) InfoType {
@ -97,6 +99,8 @@ func setupClusterRoute(i InfoType, r *http.Request) InfoType {
 	i["id"] = vars["cluster"]
 	i["cluster"] = vars["cluster"]
 	from, to := r.URL.Query().Get("from"), r.URL.Query().Get("to")
+	fmt.Println(i["cluster"], i["hostname"] , i["id"], from, to)
+	fmt.Println(i)
 	if from != "" || to != "" {
 		i["from"] = from
 		i["to"] = to
--- a/startDemo.sh
+++ b/startDemo.sh
@ -5,9 +5,9 @@ if [ -d './var' ]; then
    ./cc-backend -server -dev
 else
    make
-    wget https://hpc-mover.rrze.uni-erlangen.de/HPC-Data/0x7b58aefb/eig7ahyo6fo2bais0ephuf2aitohv1ai/job-archive-demo.tar
+    # wget https://hpc-mover.rrze.uni-erlangen.de/HPC-Data/0x7b58aefb/eig7ahyo6fo2bais0ephuf2aitohv1ai/job-archive-demo.tar
    tar xf job-archive-demo.tar
-    rm ./job-archive-demo.tar
+    # rm ./job-archive-demo.tar

    cp ./configs/env-template.txt .env
    cp ./configs/config-demo.json config.json
--- a/web/frontend/pnpm-lock.yaml
+++ b/web/frontend/pnpm-lock.yaml
@ -0,0 +1,588 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  '@rollup/plugin-replace':
+    specifier: ^5.0.2
+    version: 5.0.5(rollup@3.29.4)
+  '@urql/svelte':
+    specifier: ^4.0.1
+    version: 4.0.4(graphql@16.8.1)(svelte@3.59.2)
+  chart.js:
+    specifier: ^4.3.3
+    version: 4.4.1
+  date-fns:
+    specifier: ^2.30.0
+    version: 2.30.0
+  graphql:
+    specifier: ^16.6.0
+    version: 16.8.1
+  mathjs:
+    specifier: ^12.0.0
+    version: 12.3.2
+  svelte-chartjs:
+    specifier: ^3.1.2
+    version: 3.1.5(chart.js@4.4.1)(svelte@3.59.2)
+  sveltestrap:
+    specifier: ^5.11.1
+    version: 5.11.3(svelte@3.59.2)
+  uplot:
+    specifier: ^1.6.24
+    version: 1.6.30
+  wonka:
+    specifier: ^6.3.2
+    version: 6.3.4
+
+devDependencies:
+  '@rollup/plugin-commonjs':
+    specifier: ^24.1.0
+    version: 24.1.0(rollup@3.29.4)
+  '@rollup/plugin-node-resolve':
+    specifier: ^15.0.2
+    version: 15.2.3(rollup@3.29.4)
+  '@rollup/plugin-terser':
+    specifier: ^0.4.1
+    version: 0.4.4(rollup@3.29.4)
+  '@timohausmann/quadtree-js':
+    specifier: ^1.2.5
+    version: 1.2.6
+  rollup:
+    specifier: ^3.21.0
+    version: 3.29.4
+  rollup-plugin-css-only:
+    specifier: ^4.3.0
+    version: 4.5.2(rollup@3.29.4)
+  rollup-plugin-svelte:
+    specifier: ^7.1.4
+    version: 7.1.6(rollup@3.29.4)(svelte@3.59.2)
+  svelte:
+    specifier: ^3.58.0
+    version: 3.59.2
+
+packages:
+
+  /@0no-co/graphql.web@1.0.4(graphql@16.8.1):
+    resolution: {integrity: sha512-W3ezhHGfO0MS1PtGloaTpg0PbaT8aZSmmaerL7idtU5F7oCI+uu25k+MsMS31BVFlp4aMkHSrNRxiD72IlK8TA==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    peerDependenciesMeta:
+      graphql:
+        optional: true
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
+  /@babel/runtime@7.23.9:
+    resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+    dev: false
+
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.22
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.1:
+    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/source-map@0.3.5:
+    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.22
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+
+  /@jridgewell/trace-mapping@0.3.22:
+    resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /@kurkle/color@0.3.2:
+    resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
+    dev: false
+
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
+  /@rollup/plugin-commonjs@24.1.0(rollup@3.29.4):
+    resolution: {integrity: sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 8.1.0
+      is-reference: 1.2.1
+      magic-string: 0.27.0
+      rollup: 3.29.4
+    dev: true
+
+  /@rollup/plugin-node-resolve@15.2.3(rollup@3.29.4):
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-builtin-module: 3.2.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+      rollup: 3.29.4
+    dev: true
+
+  /@rollup/plugin-replace@5.0.5(rollup@3.29.4):
+    resolution: {integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      magic-string: 0.30.7
+      rollup: 3.29.4
+    dev: false
+
+  /@rollup/plugin-terser@0.4.4(rollup@3.29.4):
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      rollup: 3.29.4
+      serialize-javascript: 6.0.2
+      smob: 1.4.1
+      terser: 5.27.0
+    dev: true
+
+  /@rollup/pluginutils@4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /@rollup/pluginutils@5.1.0(rollup@3.29.4):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 3.29.4
+
+  /@timohausmann/quadtree-js@1.2.6:
+    resolution: {integrity: sha512-EoAoLMFV2JfSG8+8XD9xWJQdyvfEB5xNpiQWGD7rTDSbDQQV8IVpkm0uOIxwJZ+1uC9hHKri9GmJ5wBSUO4jfg==}
+    dev: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+
+  /@types/resolve@1.20.2:
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+    dev: true
+
+  /@urql/core@4.2.3(graphql@16.8.1):
+    resolution: {integrity: sha512-DJ9q9+lcs5JL8DcU2J3NqsgeXYJva+1+Qt8HU94kzTPqVOIRRA7ouvy4ksUfPY+B5G2PQ+vLh+JJGyZCNXv0cg==}
+    dependencies:
+      '@0no-co/graphql.web': 1.0.4(graphql@16.8.1)
+      wonka: 6.3.4
+    transitivePeerDependencies:
+      - graphql
+    dev: false
+
+  /@urql/svelte@4.0.4(graphql@16.8.1)(svelte@3.59.2):
+    resolution: {integrity: sha512-HYz9dHdqEcs9d82WWczQ3XG+zuup3TS01H+txaij/QfQ+KHjrlrn0EkOHQQd1S+H8+nFjFU2x9+HE3+3fuwL1A==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0
+    dependencies:
+      '@urql/core': 4.2.3(graphql@16.8.1)
+      svelte: 3.59.2
+      wonka: 6.3.4
+    transitivePeerDependencies:
+      - graphql
+    dev: false
+
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
+
+  /builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /chart.js@4.4.1:
+    resolution: {integrity: sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==}
+    engines: {pnpm: '>=7'}
+    dependencies:
+      '@kurkle/color': 0.3.2
+    dev: false
+
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: true
+
+  /commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
+  /complex.js@2.1.1:
+    resolution: {integrity: sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==}
+    dev: false
+
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.23.9
+    dev: false
+
+  /decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: false
+
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /escape-latex@1.2.0:
+    resolution: {integrity: sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==}
+    dev: false
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /fraction.js@4.3.4:
+    resolution: {integrity: sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==}
+    dev: false
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: true
+
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: true
+
+  /graphql@16.8.1:
+    resolution: {integrity: sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+    dev: false
+
+  /hasown@2.0.1:
+    resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.1
+    dev: true
+
+  /is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
+  /is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
+  /javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: false
+
+  /magic-string@0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /magic-string@0.30.7:
+    resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: false
+
+  /mathjs@12.3.2:
+    resolution: {integrity: sha512-o+HwBVD71MHdYpdScDd6CEcdd6CJOF2eXQJE0kNuIkfTjffPyqoeYdYkzVqimTUr1YgIQkNbL8MakHCZ2Ml7mg==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      complex.js: 2.1.1
+      decimal.js: 10.4.3
+      escape-latex: 1.2.0
+      fraction.js: 4.3.4
+      javascript-natural-sort: 0.7.1
+      seedrandom: 3.0.5
+      tiny-emitter: 2.1.0
+      typed-function: 4.1.1
+    dev: false
+
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  /randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: false
+
+  /resolve.exports@2.0.2:
+    resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /rollup-plugin-css-only@4.5.2(rollup@3.29.4):
+    resolution: {integrity: sha512-7rj9+jB17Pz8LNcPgtMUb16JcgD8lxQMK9HcGfAVhMK3na/WXes3oGIo5QsrQQVqtgAU6q6KnQNXJrYunaUIQQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      rollup: <5
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      rollup: 3.29.4
+    dev: true
+
+  /rollup-plugin-svelte@7.1.6(rollup@3.29.4)(svelte@3.59.2):
+    resolution: {integrity: sha512-nVFRBpGWI2qUY1OcSiEEA/kjCY2+vAjO9BI8SzA7NRrh2GTunLd6w2EYmnMt/atgdg8GvcNjLsmZmbQs/u4SQA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      rollup: '>=2.0.0'
+      svelte: '>=3.5.0'
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      resolve.exports: 2.0.2
+      rollup: 3.29.4
+      svelte: 3.59.2
+    dev: true
+
+  /rollup@3.29.4:
+    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: true
+
+  /seedrandom@3.0.5:
+    resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
+    dev: false
+
+  /serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+    dependencies:
+      randombytes: 2.1.0
+    dev: true
+
+  /smob@1.4.1:
+    resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==}
+    dev: true
+
+  /source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /svelte-chartjs@3.1.5(chart.js@4.4.1)(svelte@3.59.2):
+    resolution: {integrity: sha512-ka2zh7v5FiwfAX1oMflZ0HkNkgjHjFqANgRyC+vNYXfxtx2ku68Zo+2KgbKeBH2nS1ThDqkIACPzGxy4T0UaoA==}
+    peerDependencies:
+      chart.js: ^3.5.0 || ^4.0.0
+      svelte: ^4.0.0
+    dependencies:
+      chart.js: 4.4.1
+      svelte: 3.59.2
+    dev: false
+
+  /svelte@3.59.2:
+    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
+    engines: {node: '>= 8'}
+
+  /sveltestrap@5.11.3(svelte@3.59.2):
+    resolution: {integrity: sha512-R7vIyzqaXT8dKUytZRrU1sPdhinglRXJb43LKfGcR9Tc+71icg3onhniJARbokCkICiGxpgbgKNQRS3gGyQNXw==}
+    peerDependencies:
+      svelte: ^3.53.1
+    dependencies:
+      '@popperjs/core': 2.11.8
+      svelte: 3.59.2
+    dev: false
+
+  /terser@5.27.0:
+    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.11.3
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: true
+
+  /tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+    dev: false
+
+  /typed-function@4.1.1:
+    resolution: {integrity: sha512-Pq1DVubcvibmm8bYcMowjVnnMwPVMeh0DIdA8ad8NZY2sJgapANJmiigSUwlt+EgXxpfIv8MWrQXTIzkfYZLYQ==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /uplot@1.6.30:
+    resolution: {integrity: sha512-48oVVRALM/128ttW19F2a2xobc2WfGdJ0VJFX00099CfqbCTuML7L2OrTKxNzeFP34eo1+yJbqFSoFAp2u28/Q==}
+    dev: false
+
+  /wonka@6.3.4:
+    resolution: {integrity: sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg==}
+    dev: false
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
--- a/web/frontend/rollup.config.mjs
+++ b/web/frontend/rollup.config.mjs
@ -5,8 +5,8 @@ import resolve from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
 import css from 'rollup-plugin-css-only';

-const production = !process.env.ROLLUP_WATCH;
-// const production = false
+// const production = !process.env.ROLLUP_WATCH;
+const production = false

 const plugins = [
    svelte({
@ -67,5 +67,6 @@ export default [
    entrypoint('node', 'src/node.entrypoint.js'),
    entrypoint('analysis', 'src/analysis.entrypoint.js'),
    entrypoint('status', 'src/status.entrypoint.js'),
-    entrypoint('config', 'src/config.entrypoint.js')
+    entrypoint('config', 'src/config.entrypoint.js'),
+    entrypoint('partitions', 'src/partitions.entrypoint.js')
 ];
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@ -96,6 +96,14 @@
            perCluster: true,
            menu: "Stats",
        },
+        {
+            title: "Partitions",
+            requiredRole: roles.admin,
+            href: "partitions/systems/",
+            icon: "device-hdd",
+            perCluster: true,
+            menu: "Stats",
+        },
    ];
 </script>

--- a/web/frontend/src/Partitions.root.svelte
+++ b/web/frontend/src/Partitions.root.svelte
@ -0,0 +1,223 @@
+<script>
+    import { init, checkMetricDisabled } from "./utils.js";
+    import Refresher from "./joblist/Refresher.svelte";
+    import {
+        Row,
+        Col,
+        Input,
+        InputGroup,
+        InputGroupText,
+        Icon,
+        Spinner,
+        Card,
+        CardBody,
+        CardFooter,
+        CardHeader,
+        CardSubtitle,
+        CardText,
+        CardTitle,
+        Accordion,
+        AccordionItem,
+    } from "sveltestrap";
+    import { queryStore, gql, getContextClient } from "@urql/svelte";
+    import TimeSelection from "./filters/TimeSelection.svelte";
+    import PlotTable from "./PlotTable.svelte";
+    import MetricPlot from "./plots/MetricPlot.svelte";
+    import { getContext } from "svelte";
+    import PartitionSetting from "./partition/PartitionSetting.svelte";
+
+    export let cluster;
+    export let from = null;
+    export let to = null;
+
+    const { query: initq } = init();
+
+    if (from == null || to == null) {
+        to = new Date(Date.now());
+        from = new Date(to.getTime());
+        from.setMinutes(from.getMinutes() - 30);
+    }
+
+    const clusters = getContext("clusters");
+    console.log(clusters);
+    const ccconfig = getContext("cc-config");
+    const metricConfig = getContext("metrics");
+
+    let plotHeight = 300;
+    let hostnameFilter = "";
+    let selectedMetric = ccconfig.system_view_selectedMetric;
+
+    const client = getContextClient();
+    $: nodesQuery = queryStore({
+        client: client,
+        query: gql`
+            query (
+                $cluster: String!
+                $metrics: [String!]
+                $from: Time!
+                $to: Time!
+            ) {
+                nodeMetrics(
+                    cluster: $cluster
+                    metrics: $metrics
+                    from: $from
+                    to: $to
+                ) {
+                    host
+                    subCluster
+                    metrics {
+                        name
+                        scope
+                        metric {
+                            timestep
+                            unit {
+                                base
+                                prefix
+                            }
+                            series {
+                                statistics {
+                                    min
+                                    avg
+                                    max
+                                }
+                                data
+                            }
+                        }
+                    }
+                }
+            }
+        `,
+        variables: {
+            cluster: cluster,
+            metrics: [selectedMetric],
+            from: from.toISOString(),
+            to: to.toISOString(),
+        },
+    });
+
+    let metricUnits = {};
+    $: if ($nodesQuery.data) {
+        let thisCluster = clusters.find((c) => c.name == cluster);
+        if (thisCluster) {
+            for (let metric of thisCluster.metricConfig) {
+                if (metric.unit.prefix || metric.unit.base) {
+                    metricUnits[metric.name] =
+                        "(" +
+                        (metric.unit.prefix ? metric.unit.prefix : "") +
+                        (metric.unit.base ? metric.unit.base : "") +
+                        ")";
+                } else {
+                    // If no unit defined: Omit Unit Display
+                    metricUnits[metric.name] = "";
+                }
+            }
+        }
+    }
+
+    let notifications = [
+        {
+            type: "success",
+            message: "This is a success notification!",
+        },
+        {
+            type: "error",
+            message: "An error occurred.",
+        },
+        {
+            type: "info",
+            message: "Just a friendly reminder.",
+        },
+    ];
+</script>
+
+<Row>
+    {#if $initq.error}
+        <Card body color="danger">{$initq.error.message}</Card>
+    {:else if $initq.fetching}
+        <Spinner />
+    {:else}
+        <Col>
+            <Refresher
+                on:reload={() => {
+                    const diff = Date.now() - to;
+                    from = new Date(from.getTime() + diff);
+                    to = new Date(to.getTime() + diff);
+                }}
+            />
+        </Col>
+        <Col>
+            <TimeSelection bind:from bind:to />
+        </Col>
+        <Col>
+            <InputGroup>
+                <InputGroupText><Icon name="graph-up" /></InputGroupText>
+                <InputGroupText>Metric</InputGroupText>
+                <select class="form-select" bind:value={selectedMetric}>
+                    {#each clusters.find((c) => c.name == cluster).metricConfig as metric}
+                        <option value={metric.name}
+                            >{metric.name} {metricUnits[metric.name]}</option
+                        >
+                    {/each}
+                </select>
+            </InputGroup>
+        </Col>
+        <Col>
+            <InputGroup>
+                <InputGroupText><Icon name="hdd" /></InputGroupText>
+                <InputGroupText>Find Node</InputGroupText>
+                <Input
+                    placeholder="hostname..."
+                    type="text"
+                    bind:value={hostnameFilter}
+                />
+            </InputGroup>
+        </Col>
+    {/if}
+</Row>
+<br />
+
+<Card>
+    <CardHeader>
+        <CardTitle>Storage Partition Graph</CardTitle>
+    </CardHeader>
+    <CardBody class="h5">
+        <CardSubtitle>Realtime storage partition comes right here</CardSubtitle>
+        <CardText></CardText>
+    </CardBody>
+</Card>
+<br />
+<!-- notification -->
+<!-- <Accordion open={0}>
+    {#each notifications as notification, i}
+        <AccordionItem key={i}>
+            <div
+                class="d-flex justify-content-between align-items-center"
+                role="button"
+                tabindex={i}
+            >
+                <span class="me-2">
+                    <i class={`bi bi-circle-fill text-${notification.type}`}
+                    ></i>
+                    {notification.type.toUpperCase()}
+                </span>
+                <i class="bi bi-chevron-down" />
+            </div>
+            <div class="collapse show">
+                {notification.message}
+            </div>
+        </AccordionItem>
+    {/each}
+</Accordion> -->
+<!-- <br /> -->
+
+<Card class="mb-1">
+    <CardHeader>
+        <CardTitle>Partition Configuration</CardTitle>
+    </CardHeader>
+    <CardBody class="h5">
+        <CardSubtitle>Create and manage LVM partitions</CardSubtitle>
+        <CardText></CardText>
+        <PartitionSetting />
+    </CardBody>
+</Card>
+<br />
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@ -21,6 +21,7 @@
    }

    const clusters = getContext('clusters')
+    console.log(clusters)
    const ccconfig = getContext('cc-config')
    const metricConfig = getContext('metrics')

--- a/web/frontend/src/partition/Content/Dashboard.svelte
+++ b/web/frontend/src/partition/Content/Dashboard.svelte
@ -0,0 +1,45 @@
+<!-- Dashboard.svelte -->
+<script>
+    let data = {
+        users: 100,
+        revenue: "$10,000",
+        newUsers: 20,
+    };
+</script>
+
+<div class="container">
+    <h2>Dashboard</h2>
+    <div class="card">
+        <div class="card-body">
+            <h5 class="card-title">Total Users</h5>
+            <p class="card-text">{data.users}</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-body">
+            <h5 class="card-title">Total Revenue</h5>
+            <p class="card-text">{data.revenue}</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-body">
+            <h5 class="card-title">New Users Today</h5>
+            <p class="card-text">{data.newUsers}</p>
+        </div>
+    </div>
+</div>
+
+<style>
+    .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+    }
+
+    .card {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 10px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+</style>
--- a/web/frontend/src/partition/PartitionSetting.svelte
+++ b/web/frontend/src/partition/PartitionSetting.svelte
@ -0,0 +1,32 @@
+<script>
+    import SideNav from "./SideNav.svelte";
+    import Dashboard from "./Content/Dashboard.svelte";
+    let activeContent = "Dashboard";
+
+    function handleContentChange(event) {
+        activeContent = event.detail;
+    }
+</script>
+
+<SideNav on:change={handleContentChange} />
+
+<div>
+    {#if activeContent === "Dashboard"}
+        <Dashboard />
+    {:else if activeContent === "Create LV"}
+        <!-- <CreateLV /> -->
+        <Dashboard />
+
+    {:else if activeContent === "Monitor"}
+        <!-- <Monitor /> -->
+        <Dashboard />
+
+        {:else if activeContent === "Auto Storage"}
+        <!-- <AutoStorage /> -->
+        <Dashboard />
+
+        {:else if activeContent === "Settings"}
+        <!-- <Settings /> -->
+        <Dashboard />
+    {/if}
+</div>
--- a/web/frontend/src/partition/SideNav.svelte
+++ b/web/frontend/src/partition/SideNav.svelte
@ -0,0 +1,49 @@
+<script>
+    import { onMount } from "svelte";
+    import { createEventDispatcher } from "svelte";
+    import { Nav, NavItem } from "sveltestrap";
+
+    let activeItem = "Dashboard";
+    const dispatch = createEventDispatcher();
+
+    function handleItemClick(item) {
+        activeItem = item;
+        dispatch("change", activeItem);
+    }
+
+    onMount(() => {
+        dispatch("change", activeItem);
+    });
+</script>
+
+<div class="d-flex flex-column p-3">
+    <Nav vertical>
+        <NavItem on:click={() => handleItemClick("Dashboard")}>
+            <a href="google.com">Dashboard</a>
+        </NavItem>
+        <NavItem on:click={() => handleItemClick("Create LV")}>
+            <a href="google.com">Create LV</a>
+        </NavItem>
+        <NavItem on:click={() => handleItemClick("Monitor")}>
+            <a href="google.com">Monitor</a>
+        </NavItem>
+        <NavItem on:click={() => handleItemClick("Auto Storage")}>
+            <a href="google.com">Auto Storage</a>
+        </NavItem>
+        <NavItem on:click={() => handleItemClick("Settings")}>
+            <a href="google.com">Settings</a>
+        </NavItem>
+    </Nav>
+</div>
+
+{#if activeItem === "Dashboard"}
+    <div>Dashboard Content</div>
+{:else if activeItem === "Create LV"}
+    <div>Create LV Content</div>
+{:else if activeItem === "Monitor"}
+    <div>Monitor Content</div>
+{:else if activeItem === "Auto Storage"}
+    <div>Auto Storage Content</div>
+{:else if activeItem === "Settings"}
+    <div>Settings Content</div>
+{/if}
--- a/web/frontend/src/partitions.entrypoint.js
+++ b/web/frontend/src/partitions.entrypoint.js
@ -0,0 +1,14 @@
+import {} from './header.entrypoint.js'
+import Partitions from './Partitions.root.svelte'
+
+new Partitions({
+    target: document.getElementById('svelte-app'),
+    props: {
+        cluster: infos.cluster,
+        from: infos.from,
+        to: infos.to
+    },
+    context: new Map([
+            ['cc-config', clusterCockpitConfig]
+    ])
+})
--- a/web/templates/partitions/systems.tmpl
+++ b/web/templates/partitions/systems.tmpl
@ -0,0 +1,14 @@
+{{define "content"}}
+    <div id="svelte-app"></div>
+{{end}}
+
+{{define "stylesheets"}}
+    <link rel='stylesheet' href='/build/partitions.css'>
+{{end}}
+{{define "javascript"}}
+    <script>
+        const infos = {{ .Infos }};
+        const clusterCockpitConfig = {{ .Config }};
+    </script>
+    <script src='/build/partitions.js'></script>
+{{end}}