Merge branch 'DEV-170' of https://github.com/SpareCores/sc-www into D…

…EV-170

# Conflicts:
#	src/app/pages/server-compare/server-compare.component.ts
#	src/app/pages/server-details/server-details.component.ts

src/app/pages/server-compare/server-compare.component.html

@@ -135,18 +135,15 @@ <h1 class="text-white font-bold text-3xl">Server Comparison</h1>
                 </div>
               </td>
             </tr>
-            <tr *ngIf="!item.collapsed" >
-              <td></td>
-              <ng-container *ngFor="let scoreList of item.scores">
-                <td>
-                  <div class="flex flex-col">
-                    <div *ngFor="let scoreItem of scoreList">
-                      {{scoreItem.score}} {{serializeConfig(scoreItem.config)}}
-                    </div>
-                  </div>
+            <ng-container *ngIf="!item.collapsed" >
+              <tr *ngFor="let config of item.configs">
+                <td >
+                  <div class="ml-2" [innerHTML]="serializeConfig(config.config)" ></div></td>
+                <td *ngFor="let value of config.values" [style]="isBestStyle(value, config.values, item)">
+                      {{numberWithCommas(value)}}
                 </td>
-              </ng-container>
-            </tr>
+              </tr>
+            </ng-container>
           </ng-container>
           <tr>
             <td>View Server</td>

src/app/pages/server-compare/server-compare.component.scss

@@ -45,3 +45,7 @@
     }
   }
 }
+
+.number_line {
+  text-align: right !important;
+}

src/app/pages/server-compare/server-compare.component.ts

@@ -107,8 +107,6 @@ export class ServerCompareComponent implements OnInit {
               }
             });
 
-
-            /*
             this.benchmarkMeta = data[1].body
               ?.filter((benchmark: any) => {
                 let found = false;
@@ -123,18 +121,42 @@ export class ServerCompareComponent implements OnInit {
               return {
                 ...b,
                 collapsed: true,
-                scores: this.servers.map((s: any) => {
-                  return s.benchmark_scores?.filter((score: any) => score.benchmark_id === b.benchmark_id).sort((a: any, b: any) => {
-                    if(a.config && b.config) {
-                      return JSON.stringify(a).localeCompare(JSON.stringify(b));
+                configs: []
+              }
+            });
+
+            this.benchmarkMeta.forEach((benchmark: any) => {
+              this.servers.forEach((server: any) => {
+                const scores = server.benchmark_scores?.filter((s: any) => s.benchmark_id === benchmark.benchmark_id);
+                if(scores) {
+                  scores.forEach((score: any) => {
+                    const config = benchmark.configs.find((c: any) => {
+                      return JSON.stringify(c.config) === JSON.stringify(score.config);
+                    });
+                    if(!config) {
+                      benchmark.configs.push({
+                        config: score.config,
+                        values: []
+                      });
                     }
-                    return 0;
                   });
-                })
-              }
+                }
+              });
             });
-            */
 
+            console.log(this.benchmarkMeta);
+
+            this.benchmarkMeta.forEach((benchmark: any) => {
+              benchmark.configs.forEach((config: any) => {
+                this.servers.forEach((server: any) => {
+                  const score = server.benchmark_scores
+                    ?.find((s: any) => s.benchmark_id === benchmark.benchmark_id && JSON.stringify(s.config) === JSON.stringify(config.config));
+                    config.values.push(
+                      score ? (Math.floor(score.score * 100) / 100) : '-'
+                    );
+                });
+              });
+            });
 
             this.isLoading = false;
           }).catch((err) => {
@@ -286,6 +308,22 @@ export class ServerCompareComponent implements OnInit {
     return isBest ? this.bestCellStyle : '';
   }
 
+  isBestStyle(value: any, values: any[], benchmark: any) {
+    if(value === '-' || value === 0) return '';
+    let isBest = true;
+    values.forEach((v) => {
+      if(!isNaN(v)) {
+        if(benchmark.higher_is_better === false && v < value) {
+          isBest = false;
+        } else if(v > value) {
+          isBest = false;
+        }
+      }
+    });
+
+    return isBest ? this.bestCellStyle : '';
+  }
+
   viewServer(server: ServerPKsWithPrices) {
     window.open(`/server/${server.vendor_id}/${server.api_reference}`, '_blank');
   }
@@ -339,19 +377,18 @@ export class ServerCompareComponent implements OnInit {
   }
 
   serializeConfig(config: any) {
-    let result = '';
+    let result = '<ul>';
     Object.keys(config).forEach((key) => {
-      if(result.length > 0) {
-        result += ', ';
-      } else {
-        result += ' (';
-      }
-      result += `${key.replace('_', ' ')}: ${config[key]} `;
+      result += `<li>${key.replace('_', ' ')}: ${config[key]} </li>`;
     });
-    if(result.length > 0) {
-      result += ')';
-    }
+
+    result += '</ul>';
+
     return result;
   }
 
+  public numberWithCommas(x: number) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+
 }

src/app/pages/server-details/server-details.component.ts

@@ -231,7 +231,6 @@ export class ServerDetailsComponent implements OnInit {
               question: `What is ${this.serverDetails.display_name}?`,
               answer: this.description
             },
-
             {
               question: `What are the specs of the ${this.serverDetails.display_name} server?`,
               answer: `The ${this.serverDetails.display_name} server is equipped with ${this.serverDetails.vcpus || this.serverDetails.cpu_cores} vCPU(s), ${this.getMemory()} of memory, ${this.getStorage()} of storage, and ${this.serverDetails.gpu_count} GPU(s). Additional block storage can be attached as needed.`

src/app/pages/server-listing/server-listing.component.html

@@ -210,11 +210,11 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                       </div>
                     </td>
                     <td *ngIf="column.type === 'processor'">
-                      <div class="text-sm text-white">{{item.cpu_cores || item.vcpus}}x {{item.cpu_architecture}}</div>
+                      <div class="text-sm text-white">{{item.vcpus}} vCPUs ({{item.cpu_architecture}})</div>
                       <div
-                        *ngIf="item.vcpus && item.cpu_speed"
+                        *ngIf="item.cpu_cores && item.cpu_speed"
                         class="text-xs text-white flex gap-1">
-                        <span>{{item.vcpus}} VCPUs &#64;{{item.cpu_speed}}GHz</span>
+                        <span>{{item.cpu_cores}} cores &#64; {{item.cpu_speed}} GHz</span>
                       </div>
                     </td>
                     <td *ngIf="column.type === 'memory'">

src/app/pages/talks/talks.component.html

@@ -2,8 +2,11 @@
   <div class="content pt-16 pb-16">
     <app-breadcrumbs [segments]="breadcrumbs"></app-breadcrumbs>
 
-    <div class="flex flex-col mt-4 text-white">
+    <div class="flex flex-col mt-8 text-white">
       <h1 class="font-semibold text-3xl mb-4"> Spare Cores Conference Talks </h1>
+      <div class="text-white text-xl pr-16 mb-4">
+        Find below the past and planned talks on Spare Cores, including the slides and video recordings as well where available:
+      </div>
       <div class="w-full flex flex-col gap-4 px-6 py-4">
         <table class="items_table">
           <thead>
@@ -20,7 +23,7 @@ <h1 class="font-semibold text-3xl mb-4"> Spare Cores Conference Talks </h1>
               <td>{{ item.date | timeToShortDate }}</td>
               <td>
                 <div class="flex flex-col">
-                  <a [href]="item.conference_url" target="_blank" rel="noindex nofollow">{{ item.conference }}</a>
+                  <a [href]="item.conference_url" target="_blank" rel="noopener">{{ item.conference }}</a>
                   <div class="text-sm text-gray-200" >{{ item.location }}</div>
                 </div>
               </td>
@@ -36,14 +39,14 @@ <h1 class="font-semibold text-3xl mb-4"> Spare Cores Conference Talks </h1>
                   <div>{{ item.author }}</div>
                 </div>
               </td>
-              <td> <a [href]="item.conference_talk_url" target="_blank" rel="noindex nofollow">{{ item.title }}</a></td>
+              <td> <a [href]="item.conference_talk_url" target="_blank" rel="noopener">{{ item.title }}</a></td>
               <td>
                 <div class="flex gap-2">
-                  <a class="text-emerald-400" routerLink="/assets/slides/{{item.filename}}.html" target="_blank">
+                  <a *ngIf="item.conference_talk_slides" title="Slides" [href]="item.conference_talk_slides" target="_blank">
                     <lucide-icon name="scroll-text">
                     </lucide-icon>
                   </a>
-                  <a *ngIf="item.conference_talk_video" class="text-emerald-400" [href]="item.conference_talk_video" target="_blank" rel="noindex nofollow">
+                  <a *ngIf="item.conference_talk_video" title="Video recording" [href]="item.conference_talk_video" target="_blank" rel="noopener">
                     <lucide-icon name="youtube">
 
                     </lucide-icon>

src/app/pages/talks/talks.component.scss

@@ -24,7 +24,6 @@
     }
 
     tr {
-      @apply hover:border hover:border-emerald-400 hover:border-solid cursor-pointer;
       td {
         @apply px-5 py-3 text-left text-sm;
         a {
@@ -34,3 +33,7 @@
     }
   }
 }
+
+a:hover {
+  @apply hover:text-gray-500;
+}

src/app/services/articles.service.ts

@@ -21,6 +21,7 @@ export type SlidesMeta = {
   conference_url: string,
   conference_talk_url: string,
   conference_talk_video?: string,
+  conference_talk_slides?: string,
   location: string;
 
   filename: string;

src/assets/slides/berlin-buzzwords-2024.Rmd

@@ -5,6 +5,8 @@ date: "2024-06-12"
 conference: "Berlin Buzzwords 2024"
 conference_url: "https://2024.berlinbuzzwords.de/"
 conference_talk_url: "https://program.berlinbuzzwords.de/bbuzz24/talk/ZDLK3M/"
+conference_talk_video: "https://www.youtube.com/watch?v=dasElRVS3FI"
+conference_talk_slides: "/assets/slides/berlin-buzzwords-2024.html#/coverslide"
 location: "Berlin, Germany"
 output:
   revealjs::revealjs_presentation:
@@ -59,10 +61,14 @@ document.getElementById("coverslide").remove();
   Spare Cores Team
 </h3>
 
-<h3 class="author" style="color:#eee;padding-top:25px;font-size:1.1em;text-align: center !important; padding-top: 10px;font-weight: normal; ">
-  Slides: <a href="https://sparecores/assets/slides/berlin-buzzwords-2024.html#/coverslide" target="_blank">sparecores.com/talks</a>
+<h3 class="author onlineMode" style="color:#eee;padding-top:25px;font-size:1.1em;text-align: center !important; padding-top: 10px;font-weight: normal; ">
+  Slides: <a href="https://sparecores.com/talks" target="_blank">sparecores.com/talks</a>
 </h3>
 
+<p class="author offlineMode" style="color:#eee;font-size:0.75em;text-align: right !important; padding-top: 10px;font-weight: normal;margin-top:30px; ">
+  Press Space or click the green arrow icons to navigate the slides ->
+</p>
+
 <div class="notes">
 focus: how to utilize cloud compute resources in the most cost-efficient way
 </div>
@@ -185,7 +191,7 @@ and bin packing ...
 <div class="notes">
 AWS bin packing smaller jobs to already running larger nodes (started for heavy jobs), which resulted in keeping the expensive nodes running for a longer time.
 
-so instead, we decided to roll our own solution after all .. building on the fact that the price of the cloud resources is not discounted by its size .. so running two containers on a larger now VS running on separate nodes make no difference
+so instead, we decided to roll our own solution after all .. building on the fact that the price of the cloud resources is not discounted by its size .. so running two containers on a larger node VS running on separate nodes make no difference from a pricing perspective
 </div>
 
 ## >>> from sparecores import why
@@ -1399,8 +1405,15 @@ $ curl https://keeper.sparecores.net/server/aws/g4dn.xlarge | jq
 ```
 
 <aside class="notes">
-python sdk to search the database and also to make that available as a public restful api?
-TODO
+python sdk to search the database and also to make that available as a public HTTP API
+
+- note size
+- relationships loaded
+- even pricing and benchmarks
+
+,,,
+
+SCROLL DOWN FOR ChatGPT integration!
 </aside>
 
 ## >>> import sc_keeper
@@ -1558,8 +1571,30 @@ TODO
 <img src="images/bye-3.png" style="background: none;" class="mt--60 w-75" />
 :::
 
+<p class="author offlineMode" style="color:#eee;font-size:0.75em;text-align: center !important; margin-top:-40px; padding-top:0px;">
+  Slides: <a href="https://sparecores.com/talks" target="_blank">sparecores.com/talks</a>
+</p>
+
 <aside class="notes">
 TODO
 </aside>
 
 </section>
+
+<!--toggle visibility of items in live mode-->
+<script>
+var url = document.location.href;
+if (url.match("/?live")) {
+  const elements = document.getElementsByClassName('offlineMode');
+  for (let i = 0; i < elements.length; i++) {
+    element = elements.item(i);
+    element.style.display = 'none';
+  }
+} else {
+  const elements = document.getElementsByClassName('onlineMode');
+  for (let i = 0; i < elements.length; i++) {
+    element = elements.item(i);
+    element.style.display = 'none';
+  }
+}
+</script>

src/assets/slides/berlin-buzzwords-2024.html

@@ -551,10 +551,13 @@ <h2 class="author" style="color:#eee;padding-top:15px;font-size:1.25em;text-alig
 <h3 class="author" style="color:#eee;font-size:1.1em;text-align: center !important; font-weight: normal;">
 Spare Cores Team
 </h3>
-<h3 class="author" style="color:#eee;padding-top:25px;font-size:1.1em;text-align: center !important; padding-top: 10px;font-weight: normal; ">
+<h3 class="author onlineMode" style="color:#eee;padding-top:25px;font-size:1.1em;text-align: center !important; padding-top: 10px;font-weight: normal; ">
 Slides:
-<a href="https://sparecores/assets/slides/berlin-buzzwords-2024.html#/coverslide" target="_blank">sparecores.com/talks</a>
+<a href="https://sparecores.com/talks" target="_blank">sparecores.com/talks</a>
 </h3>
+<p class="author offlineMode" style="color:#eee;font-size:0.75em;text-align: right !important; padding-top: 10px;font-weight: normal;margin-top:30px; ">
+Press Space or click the green arrow icons to navigate the slides -&gt;
+</p>
 <aside class="notes">
 <p>focus: how to utilize cloud compute resources in the most
 cost-efficient way</p>
@@ -709,8 +712,8 @@ <h2>&gt;&gt;&gt; from sparecores import why</h2>
 for a longer time.</p>
 <p>so instead, we decided to roll our own solution after all .. building
 on the fact that the price of the cloud resources is not discounted by
-its size .. so running two containers on a larger now VS running on
-separate nodes make no difference</p>
+its size .. so running two containers on a larger node VS running on
+separate nodes make no difference from a pricing perspective</p>
 </aside>
 </section>
 <section id="from-sparecores-import-why-5" class="slide level2">
@@ -2033,8 +2036,15 @@ <h2>
 <span id="cb9-213"><a href="#cb9-213" aria-hidden="true" tabindex="-1"></a>  <span class="ot">]</span></span>
 <span id="cb9-214"><a href="#cb9-214" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
 <aside class="notes">
-python sdk to search the database and also to make that available as a
-public restful api? TODO
+<p>python sdk to search the database and also to make that available as
+a public HTTP API</p>
+<ul>
+<li>note size</li>
+<li>relationships loaded</li>
+<li>even pricing and benchmarks</li>
+</ul>
+<p>,,,</p>
+SCROLL DOWN FOR ChatGPT integration!
 </aside>
 </section>
 <section id="import-sc_keeper" class="slide level2">
@@ -2209,10 +2219,31 @@ <h2>&gt;&gt;&gt; from sparecores import support</h2>
 <div class="centered">
 <p><img src="images/bye-3.png" style="background: none;" class="mt--60 w-75" /></p>
 </div>
+<p class="author offlineMode" style="color:#eee;font-size:0.75em;text-align: center !important; margin-top:-40px; padding-top:0px;">
+Slides:
+<a href="https://sparecores.com/talks" target="_blank">sparecores.com/talks</a>
+</p>
 <aside class="notes">
 TODO
 </aside>
 </section>
+<!--toggle visibility of items in live mode-->
+<script>
+var url = document.location.href;
+if (url.match("/?live")) {
+  const elements = document.getElementsByClassName('offlineMode');
+  for (let i = 0; i < elements.length; i++) {
+    element = elements.item(i);
+    element.style.display = 'none';
+  }
+} else {
+  const elements = document.getElementsByClassName('onlineMode');
+  for (let i = 0; i < elements.length; i++) {
+    element = elements.item(i);
+    element.style.display = 'none';
+  }
+}
+</script>
 </section>
     </div>
   </div>