Adjust model

Signed-off-by: Max Wolfs <[email protected]>
SovereignCloudStack · Jan 18, 2024 · 1710bed · 1710bed
1 parent 4547b29
commit 1710bed
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 61 deletions.
diff --git a/src/components/ArchitecturalModel.tsx b/src/components/ArchitecturalModel.tsx
@@ -63,29 +63,20 @@ const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = (
 
   return (
     <div className={`${styles.gradient} ${styles.border} row`}>
-      <div
-        style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}
-        className={`${styles.bottom} col col--3`}>
-        {data.ops.map((layer) => (
-          <ContentCard
-            small={!topLayers}
-            style={topLayers && { height: '100%' }}
-            title={layer.title}
-            body={topLayers && layer.body}
-            buttonText={topLayers && layer.buttonText}
-            url={layer.url}
-            components={!topLayers && layer.components}
-          />
-        ))}
-      </div>
-      <div
-        className="col col--6"
-        style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
-        {data.container.map((layer) => (
-          <div
-            style={{
-              marginBottom: layer === data.container[0] ? '8px' : '0'
-            }}>
+      {!topLayers && (
+        <div
+          style={{
+            display: 'flex',
+            margin: ' 10px 0 4px 12px'
+          }}>
+          <h5 style={{ marginBottom: 0 }}>SCS Component Map</h5>
+        </div>
+      )}
+      <div style={{ display: 'flex' }}>
+        <div
+          style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}
+          className={`${styles.bottom} col col--3`}>
+          {data.ops.map((layer) => (
             <ContentCard
               small={!topLayers}
               style={topLayers && { height: '100%' }}
@@ -95,10 +86,45 @@ const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = (
               url={layer.url}
               components={!topLayers && layer.components}
             />
-          </div>
-        ))}
-        {data.iaas.map((layer) => (
-          <div>
+          ))}
+        </div>
+        <div
+          className="col col--6"
+          style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
+          {data.container.map((layer) => (
+            <div
+              style={{
+                marginBottom: layer === data.container[0] ? '8px' : '0'
+              }}>
+              <ContentCard
+                small={!topLayers}
+                style={topLayers && { height: '100%' }}
+                title={layer.title}
+                body={topLayers && layer.body}
+                buttonText={topLayers && layer.buttonText}
+                url={layer.url}
+                components={!topLayers && layer.components}
+              />
+            </div>
+          ))}
+          {data.iaas.map((layer) => (
+            <div>
+              <ContentCard
+                small={!topLayers}
+                style={topLayers && { height: '100%' }}
+                title={layer.title}
+                body={topLayers && layer.body}
+                buttonText={topLayers && layer.buttonText}
+                url={layer.url}
+                components={!topLayers && layer.components}
+              />
+            </div>
+          ))}
+        </div>
+        <div
+          className="col col--3"
+          style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
+          {data.iam.map((layer) => (
             <ContentCard
               small={!topLayers}
               style={topLayers && { height: '100%' }}
@@ -108,23 +134,8 @@ const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = (
               url={layer.url}
               components={!topLayers && layer.components}
             />
-          </div>
-        ))}
-      </div>
-      <div
-        className="col col--3"
-        style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
-        {data.iam.map((layer) => (
-          <ContentCard
-            small={!topLayers}
-            style={topLayers && { height: '100%' }}
-            title={layer.title}
-            body={topLayers && layer.body}
-            buttonText={topLayers && layer.buttonText}
-            url={layer.url}
-            components={!topLayers && layer.components}
-          />
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -6,6 +6,8 @@ import { useLocation } from '@docusaurus/router'
 interface LayerComponent {
   title: string
   url: string
+  mandatory: string
+  stable: string
 }
 
 interface ContentCardProps {
@@ -40,13 +42,22 @@ const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => {
                 style={
                   location.pathname == component.url
                     ? {
-                        background: 'rgba(0, 97, 255, 0.5)',
-                        color: '#FFF'
+                        color: 'blue',
+                        backgroundColor: '#0066ff44'
                       }
                     : {}
                 }
-                className={styles.layerComponent}>
+                className={
+                  component.stable == 'true'
+                    ? styles.layerComponent
+                    : styles.layerComponentWip
+                }>
                 {component.title}
+                {component.mandatory == 'true' ? (
+                  <div className={styles.chipMandatory}>mandatory</div>
+                ) : (
+                  <div className={styles.chipOptional}>optional</div>
+                )}
               </div>
             </Link>
           ))}

diff --git a/src/components/architecturalmodel.module.css b/src/components/architecturalmodel.module.css
@@ -7,6 +7,7 @@
   );
   border-radius: 16px;
   margin: 4px;
+  display: block;
 }
 
 .border {

diff --git a/src/components/contentcard.module.css b/src/components/contentcard.module.css
@@ -32,17 +32,64 @@
 }
 
 .layerComponent {
+  border: solid 2px rgba(70, 72, 213, 0.539);
   border-radius: 4px;
-  background: #eee;
-  width: 80px;
-  height: 80px;
+  background: #43d8b24f;
+  width: 96px;
+  height: 96px;
   margin: 0 0 16px 16px;
   padding: 8px;
+  font-weight: 600;
   font-size: 10px;
   text-decoration: none;
   color: black;
-  &&:hover {
-    color: blue;
-    text-decoration: none;
-  }
+}
+
+.layerComponentWip {
+  border: dashed 2px rgba(70, 72, 213, 0.539);
+  border-radius: 4px;
+  width: 96px;
+  height: 96px;
+  margin: 0 0 16px 16px;
+  padding: 8px;
+  font-size: 10px;
+  text-decoration: none;
+  color: black;
+  background-image: repeating-linear-gradient(
+    45deg,
+    white 0%,
+    white 2%,
+    #43d8b24f 2%,
+    #43d8b24f 4%,
+    white 4%
+  );
+}
+
+.layerComponentWip:hover,
+.layerComponent:hover {
+  color: blue;
+  text-decoration: none !important;
+  background-color: #43d8b22f;
+}
+
+.chipOptional {
+  font-size: 8px;
+  border-radius: 8px;
+  padding: 2px 4px 2px 4px;
+  background-color: #892be27b;
+  text-align: center;
+  max-width: fit-content;
+  margin: 2px 2px 0 0;
+  color: #000;
+}
+
+.chipMandatory {
+  font-size: 8px;
+  border-radius: 8px;
+  padding: 2px 4px 2px 4px;
+  background-color: #e2a82b94;
+  text-align: center;
+  max-width: fit-content;
+  margin: 2px 2px 0 0;
+  color: #000;
 }
diff --git a/static/data/architecturalOverviewData.json b/static/data/architecturalOverviewData.json
@@ -7,8 +7,10 @@
       "buttonText": "Learn More",
       "components": [
         {
-          "title": "Status Page API",
-          "url": "/docs/operating-scs/components/status-page/docs/overview"
+          "title": "Status Page",
+          "url": "/docs/operating-scs/components/status-page/docs/overview",
+          "mandatory": "true",
+          "stable": "true"
         }
       ]
     }
@@ -22,7 +24,15 @@
       "components": [
         {
           "title": "k8s Cluster API Provider",
-          "url": "/docs/category/k8s-cluster-api-provider"
+          "url": "/docs/category/k8s-cluster-api-provider",
+          "mandatory": "false",
+          "stable": "true"
+        },
+        {
+          "title": "Cluster Stacks",
+          "url": "/docs/category/cluster-stacks",
+          "mandatory": "false",
+          "stable": "false"
         }
       ]
     }
@@ -36,11 +46,15 @@
       "components": [
         {
           "title": "Image Manager",
-          "url": "/docs/iaas/components/image-manager"
+          "url": "/docs/iaas/components/image-manager",
+          "mandatory": "true",
+          "stable": "true"
         },
         {
           "title": "Flavor Manager",
-          "url": "/docs/iaas/components/flavor-manager"
+          "url": "/docs/iaas/components/flavor-manager",
+          "mandatory": "true",
+          "stable": "true"
         }
       ]
     }
@@ -53,8 +67,10 @@
       "buttonText": "Learn More",
       "components": [
         {
-          "title": "Status Page API",
-          "url": "/docs/category/status-page-api"
+          "title": "Keycloak",
+          "url": "/docs/category/status-page-api",
+          "mandatory": "false",
+          "stable": "true"
         }
       ]
     }