add first single components to overview component

Signed-off-by: maxwolfs <[email protected]>
SovereignCloudStack · Jan 17, 2024 · f7dd985 · f7dd985
1 parent 1ab591d
commit f7dd985
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 80 deletions.
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -12,7 +12,7 @@ SCS is built, backed, and operated by an active open-source community worldwide.
 
 ## Architectual Overview
 
-<ArchitecturalModel jsonFilePath="data/architecturalLayerData.json" />
+<ArchitecturalModel jsonFilePath="data/architecturalOverviewData.json" />
 
 ## Use Cases and Deployment Examples
 
@@ -63,6 +63,7 @@ While the SCS project tracks the efforts across the released epics and user stor
 - OSISM and others.
 
 All code not pushed upstream can be found in the [SCS Github organization](https://github.com/SovereignCloudStack).
+
 ### Issues and Bugs
 
 If you can identify the affected component, raise the issue against the relevant repository in the SovereignCloudStack or OSISM space. Otherwise, you can use the [issues repository](https://github.com/SovereignCloudStack/issues). We appreciate PRs as well as issues; please don't forget to sign off your contributions see [contributor guide](https://docs.scs.community/community).
@@ -77,4 +78,4 @@ See our Release Notes [here](https://docs.scs.community/docs/category/releases)
 
 ## Standards, Conformity and Certification
 
-How to get compliant? With what am I compliant then? What are the benefits? What does it involve? What to expect in the future? Learn more in the [standards section](https://docs.scs.community/standards).
+How to get compliant? What do I need to be compliant? What are the benefits? What does it involve? What to expect in the future? Learn more in the [standards section](https://docs.scs.community/standards).
diff --git a/src/components/ArchitecturalModel.tsx b/src/components/ArchitecturalModel.tsx
@@ -7,21 +7,25 @@ interface ArchitecturalLayerItem {
   body: string
   url: string
   buttonText: string
+  components?: []
 }
 
 interface ArchitecturalLayerData {
-  left: ArchitecturalLayerItem[]
-  center: ArchitecturalLayerItem[]
-  right: ArchitecturalLayerItem[]
+  ops: ArchitecturalLayerItem[]
+  container: ArchitecturalLayerItem[]
+  iaas: ArchitecturalLayerItem[]
+  iam: ArchitecturalLayerItem[]
 }
 
 interface ArchitecturalModelProps {
   jsonFilePath: string
+  topLayers?: boolean
 }
 
-const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = ({
-  jsonFilePath
-}) => {
+const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = (
+  props
+) => {
+  const { jsonFilePath, topLayers } = props
   const [data, setData] = useState<ArchitecturalLayerData | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -58,41 +62,67 @@ const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = ({
   }
 
   return (
-    <div className={`${styles.gradient} row`}>
-      <div className="col col--3">
-        {data.left.map((item) => (
+    <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
-            maxHeight
-            title={item.title}
-            body={item.body}
-            buttonText={item.buttonText}
-            url={item.url}
+            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">
-        {data.center.map((item) => (
+      <div
+        className="col col--6"
+        style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
+        {data.container.map((layer) => (
           <div
             style={{
-              marginBottom: item === data.center[0] ? '3rem' : '0'
+              marginBottom: layer === data.container[0] ? '8px' : '0'
             }}>
             <ContentCard
-              title={item.title}
-              body={item.body}
-              buttonText={item.buttonText}
-              url={item.url}
+              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">
-        {data.right.map((item) => (
+      <div
+        className="col col--3"
+        style={{ padding: '8px 8px 8px 8px', margin: '0 0 0 0' }}>
+        {data.iam.map((layer) => (
           <ContentCard
-            maxHeight
-            title={item.title}
-            body={item.body}
-            buttonText={item.buttonText}
-            url={item.url}
+            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>

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -1,31 +1,63 @@
 import React, { CSSProperties } from 'react'
 import styles from './contentcard.module.css'
 import Link from '@docusaurus/Link'
+import { useLocation } from '@docusaurus/router'
+
+interface LayerComponent {
+  title: string
+  url: string
+}
 
 interface ContentCardProps {
+  style?: React.CSSProperties
   title: string
   body: string
   url: string
   buttonText: string
-  maxHeight?: boolean
+  small?: boolean
+  components?: LayerComponent[]
 }
 
 const ContentCard: React.FunctionComponent<ContentCardProps> = (props) => {
-  const { title, body, url, buttonText, maxHeight } = props
+  const { title, body, url, buttonText, style, small, components } = props
+
+  const location = useLocation()
+  console.log(location.pathname)
 
   return (
-    <div className={`${maxHeight && styles.card} card`}>
+    <div style={style} className={`${styles.contentCard} card`}>
       <div className="card__header">
-        <h3>{title}</h3>
+        {small ? <h5>{title}</h5> : <h3>{title}</h3>}
       </div>
       <div className="card__body">
         <p>{body}</p>
       </div>
-      <div className="card__footer">
-        <Link className="button button--secondary button--lg" to={url}>
-          {buttonText}
-        </Link>
+      <div style={{ display: 'flex' }}>
+        {components &&
+          components.map((component) => (
+            <Link to={component.url}>
+              <div
+                style={
+                  location.pathname == component.url
+                    ? {
+                        background: 'rgba(0, 97, 255, 0.5)',
+                        color: '#FFF'
+                      }
+                    : {}
+                }
+                className={styles.layerComponent}>
+                {component.title}
+              </div>
+            </Link>
+          ))}
       </div>
+      {buttonText && (
+        <div className="card__footer">
+          <Link className="button button--secondary button--md" to={url}>
+            {buttonText}
+          </Link>
+        </div>
+      )}
     </div>
   )
 }

diff --git a/src/components/architecturalmodel.module.css b/src/components/architecturalmodel.module.css
@@ -1,11 +1,20 @@
 .gradient {
   background: linear-gradient(
     180deg,
-    #0061ff 0%,
-    rgba(80, 195, 165, 0) 50%,
-    #50c3a5 100%
+    rgb(0, 97, 255, 0.2) 20%,
+    rgba(80, 195, 165, 10) 50%,
+    #50c3a5 80%
   );
   border-radius: 16px;
-  margin: 16px;
-  padding: 16px;
+  margin: 4px;
+}
+
+.border {
+  border: rgba(0, 97, 255, 1) solid 4px;
+  border-radius: 16px;
+  margin: 4px;
+}
+
+.bottom {
+  margin-bottom: 16px;
 }
diff --git a/src/components/contentcard.module.css b/src/components/contentcard.module.css
@@ -26,6 +26,23 @@
   }
 }
 
-.card {
-  margin-bottom: 1rem;
+.contentCard {
+  border: solid #666 2px;
+  box-shadow: 2px 2px 4px 4px rgba(10, 10, 10, 0.1);
+}
+
+.layerComponent {
+  border-radius: 4px;
+  background: #eee;
+  width: 80px;
+  height: 80px;
+  margin: 0 0 16px 16px;
+  padding: 8px;
+  font-size: 10px;
+  text-decoration: none;
+  color: black;
+  &&:hover {
+    color: blue;
+    text-decoration: none;
+  }
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -65,7 +65,6 @@ export default function Home(): JSX.Element {
             {featureContent.map((card, index) => (
               <div className="col col--3" key={index}>
                 <ContentCard
-                  maxHeight
                   title={card.title}
                   body={card.body}
                   url={card.url}
@@ -78,7 +77,12 @@ export default function Home(): JSX.Element {
             <div className="col col--12">
               <h1>Architectural Layers</h1>
             </div>
-            <ArchitecturalModel jsonFilePath="data/architecturalLayerData.json" />
+            <div style={{ marginLeft: '16px', marginRight: '16px' }}>
+              <ArchitecturalModel
+                topLayers
+                jsonFilePath="data/architecturalOverviewData.json"
+              />
+            </div>
           </div>
           <div className="row" style={{ marginTop: '3rem' }}>
             <div className="col col--12">
@@ -89,7 +93,6 @@ export default function Home(): JSX.Element {
             {additionalResources.map((card, index) => (
               <div className="col col--3" key={index}>
                 <ContentCard
-                  maxHeight
                   title={card.title}
                   body={card.body}
                   url={card.url}

diff --git a/static/data/architecturalLayerData.json b/static/data/architecturalLayerData.json
diff --git a/static/data/architecturalOverviewData.json b/static/data/architecturalOverviewData.json
@@ -0,0 +1,62 @@
+{
+  "ops": [
+    {
+      "title": "Ops Layer",
+      "body": "Tooling and infrastructure design for easy, efficient and transparent ways to operate an SCS Cloud.",
+      "url": "/docs/category/operating-scs",
+      "buttonText": "Learn More",
+      "components": [
+        {
+          "title": "Status Page API",
+          "url": "/docs/operating-scs/components/status-page/docs/overview"
+        }
+      ]
+    }
+  ],
+  "container": [
+    {
+      "title": "Container Layer",
+      "body": "SCS offers a robust solution for managing container workloads on a Kubernetes infrastructure.",
+      "url": "/docs/container",
+      "buttonText": "Learn More",
+      "components": [
+        {
+          "title": "k8s Cluster API Provider",
+          "url": "/docs/category/k8s-cluster-api-provider"
+        }
+      ]
+    }
+  ],
+  "iaas": [
+    {
+      "title": "IaaS Layer",
+      "body": "SCS offers OpenStack infrastructure solutions based on KVM virutalization to deploy VM workloads and enabling the container layer optionally.",
+      "url": "/docs/faq",
+      "buttonText": "Learn More",
+      "components": [
+        {
+          "title": "Image Manager",
+          "url": "/docs/iaas/components/image-manager"
+        },
+        {
+          "title": "Flavor Manager",
+          "url": "/docs/iaas/components/flavor-manager"
+        }
+      ]
+    }
+  ],
+  "iam": [
+    {
+      "title": "IAM Layer",
+      "body": "Working on Keycloak federated identity provider within our Team IAM.",
+      "url": "/docs/iam",
+      "buttonText": "Learn More",
+      "components": [
+        {
+          "title": "Status Page API",
+          "url": "/docs/category/status-page-api"
+        }
+      ]
+    }
+  ]
+}