Merge pull request #707 from anvithks/soda-experience

Updated the grid view css. Fixed alignments. Added como project

package.json

@@ -15,6 +15,7 @@
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",
+    "@angular/flex-layout": "^14.0.0-beta.41",
     "@angular/forms": "^14.0.0",
     "@angular/material": "^13.0.0",
     "@angular/platform-browser": "^14.0.0",
@@ -37,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
-}
+}

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { ProjectDetailsComponent } from './project-details/project-details.compo
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { FlexLayoutModule } from "@angular/flex-layout";
 
 @NgModule({
   declarations: [
@@ -36,7 +37,8 @@ import { MatListModule } from '@angular/material/list';
     MatButtonModule,
     MatToolbarModule,
     MatIconModule,
-    MatListModule
+    MatListModule,
+    FlexLayoutModule
   ],
   providers: [
     { 

src/app/project-intro/project-intro.component.html

@@ -1,24 +1,28 @@
-<mat-grid-list cols="2" rowHeight="3:1">
-    <mat-grid-tile *ngFor="let project of projects;">
-        <mat-card class="project-list">
+<div class="content" fxLayout="row wrap" fxLayoutGap="16px grid">
+    <div 
+        [fxFlex]="(100/gridColumns) + '%'"
+        fxFlex.xs="100%" 
+        fxFlex.sm="33%" 
+        *ngFor="let project of projects; let i = index" 
+    >  
+        <mat-card class="mat-elevation-z4 project-list">
             <mat-card-header>
-              <mat-card-title>
-                <img width="100%" src="{{project.logo}}">
-              </mat-card-title>
-              <mat-card-subtitle></mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                <div class="inline-text">
-                    {{project.shortDescription}}
-                </div>
-                <div class="inline-text">
+                <mat-card-title-group>
+                    <mat-card-title>{{project.name}}</mat-card-title>
+                    <mat-card-subtitle>{{project.shortDescription}}</mat-card-subtitle>
+                    <img class="project-logo" mat-card-lg-image src="{{project.logo}}" />        
+                </mat-card-title-group>
+            </mat-card-header>            
+            <mat-card-content>                
+                <p>
                     {{project.description}}
-                </div>
+                </p>
             </mat-card-content>
             <mat-card-actions>
                 <button style="float:right;" mat-raised-button color="primary" (click)="navigateTo(project.name)">Architecture and Demo</button>
-                <button style="float:right;" mat-raised-button color="primary">Install {{project.name}}</button>
+                <button disabled title="Install {{project.name}}" style="float:right;" mat-raised-button color="primary"><mat-icon aria-hidden="false" aria-label="Install Project" >install_desktop</mat-icon></button>
+                <button title="View {{project.name}} Dashboard" style="float:right;" mat-raised-button color="primary"><mat-icon aria-hidden="false" aria-label="View Dashboard" >open_in_new</mat-icon></button>
             </mat-card-actions>
         </mat-card>
-    </mat-grid-tile>
-</mat-grid-list>
+    </div>
+</div>

src/app/project-intro/project-intro.component.scss

@@ -0,0 +1,24 @@
+.content {
+    padding: 16px;
+  }
+
+  .content > mat-card {
+    margin-bottom: 16px;
+  }
+
+  .content > mat-card {
+    width: 200px;
+    min-height: 250px;
+  }
+
+  .mat-card.project-list {
+    min-height: 250px;
+  }
+
+  .mat-card.project-list > mat-card-content{
+    min-height: 40px;
+  }
+
+  .mat-card.project-list .mat-card-title-group{
+    width: 100%;
+  }

src/app/project-intro/project-intro.component.ts

@@ -11,6 +11,7 @@ export class ProjectIntroComponent implements OnInit {
   projects: any;
   col: string = '2';
   row: string = '1';
+  gridColumns = 3;
 
   constructor(
     private api: HttpService,
@@ -28,6 +29,10 @@ export class ProjectIntroComponent implements OnInit {
     });
   }
 
+  toggleGridColumns() {
+    this.gridColumns = this.gridColumns === 3 ? 4 : 3;
+  }
+
   navigateTo(project: any){
     this.route.navigateByUrl('/project-details/' + project);
   }

src/assets/como/comoDetails.json

@@ -0,0 +1,39 @@
+{
+    "name": "COMO",
+    "slackLink": "",
+    "github": "https://github.com/soda-lake/como",
+    "useCases": [
+        "Cloud Backup: replicate snapshots to multiple clouds for high availability backup",
+        "Cloud Switching: easily move data from one cloud to another",
+        "Multicloud Content Distribution: distribute content from data center across different clouds"
+    ],
+    "features":[
+        "Provides a cloud vendor agnostic data management for hybrid cloud, intercloud, or intracloud.",
+        "Unified interface for file and object services across multiple cloud vendors.",
+        "S3 compatible APIs for object data management on cloud or on premise",
+        "Deploy on-premise or in the cloud"
+    ],
+    "architectureImages": [
+        {
+            "imgUrl": "assets/como/arch1.jpeg",
+            "description": "Some description about the above image"
+        }
+    ],
+    "demo": [
+        {
+            "demoUrl": "assets/como/demo.avi",
+            "description": "Some description about the above video"
+        }
+    ],
+    "guides" : [
+        {
+            "title" : "Title of the docs",
+            "url" : "https://docs.sodafoundation.io"
+        },
+        {
+            "title" : "Title of the docs",
+            "url" : "https://docs.sodafoundation.io"
+        }
+    ]
+
+}

src/assets/projectList.json

@@ -1,26 +1,32 @@
 [
     {
         "name": "DELFIN",
-        "logo": "assets/delfin/delfin-title.svg",
-        "shortDescription": "Delfin: Heterogeneous Storage Monitoring",
+        "logo": "assets/delfin/delfin.png",
+        "shortDescription": "Heterogeneous Storage Monitoring",
         "description": "Delfin is an open source storage monitoring and alerting toolkit."
     },
     {
         "name": "STRATO",
-        "logo": "assets/strato/strato-title.svg",
-        "shortDescription": "Strato - Multicloud Data Management",
+        "logo": "assets/strato/strato.png",
+        "shortDescription": "Multicloud Data Management",
         "description": "Strato is an open source tool to control data in multicloud IT environments."        
     },
     {
         "name": "KAHU",
-        "logo": "assets/kahu/kahu-title.svg",
-        "shortDescription": "Kahu: Container Data Protection",
+        "logo": "assets/kahu/kahu.png",
+        "shortDescription": "Container Data Protection",
         "description": "Kahu is a cloud native tool to backup and restore, perform disaster recovery, and migrate Kubernetes cluster resources and persistent volumes."
     },
     {
         "name": "TERRA",
-        "logo": "assets/terra/terra-title.svg",
-        "shortDescription": "Terra - SDS Controller",
+        "logo": "assets/terra/terra.png",
+        "shortDescription": "SDS Controller",
         "description": "Terra is an open source storage management and automation project."
+    },
+    {
+        "name": "COMO",
+        "logo": "assets/como/como.png",
+        "shortDescription": "Multicloud Data Management for Data Lake Solutions",
+        "description": "SODA COMO is a new SODA Framework project for Multicloud Data Management for Data Lake Solutions."        
     }
 ]

src/assets/siteBasics.json

@@ -1,4 +1,4 @@
 {
-    "release": "Navaron",
+    "release": "Navarino (v1.8.0)",
     "footerText": "SODA Expereince Dashboard. Explore SODA framework projects"
-}
+}

src/index.html

@@ -5,7 +5,7 @@
   <title>SODA Experience</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="assets/favicon/soda-favicon.png">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">