Updated the SODA experience dashboard. Added project details and Bett…

…er Splash screen. Fixed css issues (#706) * Resolved comments on previous PR, changed the version and name for the project * Changed Splash screen, implemented project detaisl --------- Co-authored-by: prostil <[email protected]>
sodafoundation · Mar 24, 2023 · 61fc115 · 61fc115
1 parent 2d22d2e
commit 61fc115
Show file tree

Hide file tree

Showing 17 changed files with 226 additions and 186 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,12 +4,15 @@
 </div>
 <splash-screen></splash-screen>
 <div class="header">
-  <div class="logo">
-    <img src="../assets/soda-foundation-logo-white.svg">
-  </div>
-  <div class="release">
-    Latest Release - {{siteDetails.release}}
-  </div>
+  <mat-toolbar color="primary">
+    <mat-toolbar-row>
+      <div class="logo">
+        <img src="../assets/soda-foundation-logo-white.svg">
+      </div>
+      <span class="example-spacer"></span>
+      Latest Release - {{siteDetails.release}}
+    </mat-toolbar-row>
+  </mat-toolbar>
 </div>
 <div class="main-container">
   <router-outlet></router-outlet>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -10,31 +10,18 @@ $border-bottom-color_1: #1c87c9;
 		transform: translate3d(-50%, -50%, 0) rotate(360deg);
 	}
 }
-.header {
-	width: 100%;
-	height: 40px;
-	background: #1c87c9;
-	padding: 12px;
-	margin-bottom: 12px;
-}
-.logo {
-	padding-left: 12px;
-	float: left;
-}
-.release {
-	float: right;
-	color: $color_1;
-	padding-right: 24px;
-}
-.main-container {
-	padding: 12px;
+
+.example-spacer {
+	flex: 1 1 auto;
 }
+
 .footer {
-	float: left;
+	position: fixed;
+	bottom: 0;
+	left: 0;
 	width: 100%;
 	height: 20px;
-	background: #1c87c9;
-	margin-top: 12px;
+	background: #3f51b5;
 	padding: 8px;
 	color: $color_1;
 	text-align: center;

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -14,7 +14,9 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { ProjectDetailsComponent } from './project-details/project-details.component';
-
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
 
 @NgModule({
   declarations: [
@@ -31,7 +33,10 @@ import { ProjectDetailsComponent } from './project-details/project-details.compo
     HttpClientModule,
     MatGridListModule,
     MatCardModule,
-    MatButtonModule
+    MatButtonModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatListModule
   ],
   providers: [
     { 

diff --git a/src/app/project-details/project-details.component.html b/src/app/project-details/project-details.component.html
@@ -1 +1,24 @@
-<p>project-details works!</p>
+<div class="project-details-container">
+    <div class="details-top">
+        <span class="p-name">{{projectDetails.name}}</span>
+        <button mat-raised-button color="primary" (click)="returnBack()" class="right">
+            <mat-icon>arrow_back</mat-icon>
+        </button>
+    </div>
+    <div class="details-container">
+        <div class="project-details-list">
+            <p>Use Cases</p>
+            <mat-list role="list">
+                <mat-list-item role="listitem" *ngFor="let useCase of projectDetails.useCases">
+                    {{useCase}}
+                </mat-list-item>
+            </mat-list>
+            <p>Features</p>
+            <mat-list role="list">
+                <mat-list-item role="listitem" *ngFor="let feature of projectDetails.features">
+                    {{feature}}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </div>
+</div>
diff --git a/src/app/project-details/project-details.component.scss b/src/app/project-details/project-details.component.scss
@@ -0,0 +1,13 @@
+.project-details-container{
+    padding: 12px;
+    .p-name{
+        font-weight: bold;
+        font-size: 18px;
+    }
+    .right{
+        float: right;
+    }
+    .details-container{
+        clear: both;
+    }
+}
diff --git a/src/app/project-details/project-details.component.ts b/src/app/project-details/project-details.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpService } from '../services/http.service';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-project-details',
@@ -7,9 +10,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProjectDetailsComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private api: HttpService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  projectName: any;
+  projectDetails: any;
 
   ngOnInit(): void {
+    this.projectName = this.route.snapshot.paramMap.get('projectName')?.toLowerCase();
+    this.getProjectDetails();
+  }
+
+  getProjectDetails(){
+    this.api.getProjectDetails(this.projectName).subscribe(resp => {
+      console.log(resp);
+      this.projectDetails = resp;
+    });
+  }
+
+  returnBack(){
+    this.router.navigateByUrl('projects');
   }
 
 }
diff --git a/src/app/project-intro/project-intro.component.html b/src/app/project-intro/project-intro.component.html
@@ -1,36 +1,24 @@
-<mat-card class="project-list" *ngFor="let project of projects; let index=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }">
-    <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">
-            {{project.description}}
-        </div>
-        <div class="inline-text">
-            <p><b>Use Cases</b></p>
-            <ul>
-                <li *ngFor="let useCase of project.useCases">
-                    {{useCase}}
-                </li>
-            </ul>
-        </div>
-        <div class="inline-text">
-            <p><b>Features</b></p>
-            <ul>
-                <li *ngFor="let feature of project.features">
-                    {{feature}}
-                </li>
-            </ul>
-        </div>
-    </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>
-    </mat-card-actions>
-</mat-card>
+<mat-grid-list cols="2" rowHeight="3:1">
+    <mat-grid-tile *ngFor="let project of projects;">
+        <mat-card class="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">
+                    {{project.description}}
+                </div>
+            </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>
+            </mat-card-actions>
+        </mat-card>
+    </mat-grid-tile>
+</mat-grid-list>
diff --git a/src/app/project-intro/project-intro.component.scss b/src/app/project-intro/project-intro.component.scss
@@ -1,24 +0,0 @@
-.project-list{
-    width: 100%;
-    padding: 12px;
-    float:left
-}
-.even{
-    float: left;
-    width: 47%;
-    clear: both;
-    margin-bottom: 30px;
-}
-.odd{
-    float: right;
-    width: 47%;
-    margin-bottom: 30px;
-}
-.inline-text{
-    padding: 12px;
-    font-size: 18px;
-}
-.project-list ul li {
-    list-style: none;
-    padding: 12px 0 0 12px;
-}

diff --git a/src/app/services/http.service.ts b/src/app/services/http.service.ts
@@ -18,4 +18,8 @@ export class HttpService {
     return this.http.get('assets/siteBasics.json');
   }
 
+  getProjectDetails(projectName: any){
+    return this.http.get('assets/'+projectName+'/'+projectName+'Details.json');
+  }
+
 }
diff --git a/src/app/services/loading.service.spec.ts b/src/app/services/loading.service.spec.ts
@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { LoaderInterceptorService } from './loading.service';
+import { LoadingService } from './loading.service';
 
 describe('LoaderInterceptorService', () => {
-  let service: LoaderInterceptorService;
+  let service: LoadingService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(LoaderInterceptorService);
+    service = TestBed.inject(LoadingService);
   });
 
   it('should be created', () => {

diff --git a/src/app/splash-screen/splash-screen.component.html b/src/app/splash-screen/splash-screen.component.html
@@ -5,8 +5,13 @@
 >
 <div class="app-splash-inner">
   <div class="app-logo"></div>
+  <div class="">
+    <mat-spinner></mat-spinner>
+  </div>
   <div class="app-label">
     <p class="animate-charcter">Loading The SODA Experience</p>
   </div>
-  <div class="app-loader"></div>
+  <div class="app-loader">
+
+  </div>
 </div>
diff --git a/src/app/splash-screen/splash-screen.component.scss b/src/app/splash-screen/splash-screen.component.scss
@@ -1,5 +1,5 @@
 .app-splash-screen {
-  background: #557cc3;
+  background: #212327;
   position: fixed;
   top: 0;
   left: 0;
@@ -29,48 +29,11 @@
 }
 
 .app-logo {
-  /*background: url("./../../assets/lighty.svg");*/
+  background: url("../../assets/soda-foundation-logo-white.svg");
   background-repeat: no-repeat;
   max-width: 100%;
   background-position: center;
   background-size: contain;
-  width: 100px;
-  height: 100px;
+  width: 600px;
+  height: 400px;
 }
-
-.app-loader {
-  /*background: url("./../../assets/three-dots.svg");*/
-  background-repeat: no-repeat;
-  max-width: 100%;
-  background-position: center;
-  background-size: contain;
-  width: 80px;
-  height: 80px;
-  margin-top: 80px;
-}
-
-.animate-charcter
-{
-  background-image: linear-gradient(
-    -225deg,
-    #231557 0%,
-    #44107a 29%,
-    #ff1361 67%,
-    #fff800 100%
-  );
-  background-size: auto auto;
-  background-clip: border-box;
-  background-size: 200% auto;
-  color: #fff;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: textclip 2s linear infinite;
-  display: inline-block;
-}
-
-@keyframes textclip {
-  to {
-    background-position: 200% center;
-  }
-}
diff --git a/src/assets/delfin/delfinDetails.json b/src/assets/delfin/delfinDetails.json
@@ -1,7 +1,17 @@
 {
     "name": "Delfin",
     "slackLink": "",
-
+    "useCases": [
+        "Performance-Monitoring : Monitor storage metrics such as IOP's, r/w throughput, latencies",
+        "Predictive-Analytics : Identify anomalies, forecast resource usage, and fix problems using storage automation capabilities",
+        "Automated-Remediation : Speed up the process of problem solving with alerts"
+    ],
+    "features": [
+        "Support performance monitoring and alerting across heterogeneous storage with CM and Host Mapping",
+        "Unified, intelligent and scalable resource management",
+        "Exporter framework to add custom clients from data processing and visualization. Prometheus supported out of the box",
+        "Support monitoring for EMC, IBM, NetApp, PureStorage, Huawei, etc"
+    ],
     "architectureImages": [
         {
             "imgUrl": "assets/delfin/arch1.jpeg",