SUSE · nwmac · Oct 2, 2020 · Jul 28, 2020 · Aug 7, 2020 · Aug 7, 2020
diff --git a/.../custom/helm/monocular/chart-details/chart-details-info/chart-details-info.component.html b/.../custom/helm/monocular/chart-details/chart-details-info/chart-details-info.component.html
@@ -13,7 +13,7 @@ <h1>Home</h1>
         <a href="{{ chart.attributes.home }}" target="_blank">{{chart.attributes.home}}</a>
       </div>
     </div>
-    <div class="chartInfo__maintainers">
+    <div class="chartInfo__maintainers" *ngIf="maintainers.length">
       <h1>Maintainers</h1>
       <div *ngFor="let maintainer of maintainers">
         <a href="{{ maintainerUrl(maintainer) }}" target="_blank">{{ maintainer.name }}</a>
@@ -22,7 +22,7 @@ <h1>Maintainers</h1>
     <div class="chartInfo__related" *ngIf="sources.length">
       <h1>Related</h1>
       <div *ngFor="let source of sources">
-        <a href="{{ source }}" target="_blank">{{ source }}</a>
+        <a href="{{ source }}" class="chartInfo__related-link" target="_blank">{{ source }}</a>
       </div>
     </div>
   </mat-card>

diff --git a/.../custom/helm/monocular/chart-details/chart-details-info/chart-details-info.component.scss b/.../custom/helm/monocular/chart-details/chart-details-info/chart-details-info.component.scss
@@ -1,5 +1,9 @@
 .chartInfo {
 
+  h1 {
+    font-size: 18px;
+  }
+
   app-panel {
     box-shadow: 1px 1px 10px rgba(black, 0.07);
     border: 0 !important;
@@ -11,6 +15,14 @@
     }
   }
 
+  &__related {
+    max-width: 280px;
+  }
+
+  &__related-link {
+    font-size: 14px;
+  }
+
   &__properties {
     overflow: auto;
     display: block;

diff --git a/...ustom/helm/monocular/chart-details/chart-details-usage/chart-details-usage.component.html b/...ustom/helm/monocular/chart-details/chart-details-usage/chart-details-usage.component.html
@@ -1,35 +1,4 @@
-<mat-card class="chart-details-usage">
-  <h1>Install</h1>
-  <mat-tab-group>
-    <mat-tab label="UI" *ngIf="endpointsService.hasConnectedEndpointType('k8s') | async">
-      <p>You can install this Helm Chart from here.</p>
-      <button class="chart-details-usage__install" color="primary" mat-button mat-raised-button
-        routerLink="/monocular/install/{{chart.id}}/{{currentVersion}}">Install</button>
-    </mat-tab>
-
-    <mat-tab label="Helm CLI">
-      <div *ngIf="showRepoInstructions" class="chart-details-usage__repository chart-details-usage__section">
-        <h2 class="chart-details-usage__label">Add {{ chart.attributes.repo.name }} repository</h2>
-        <mat-form-field>
-          <input matInput floatingPlaceholder=false [value]=repoAddInstructions>
-        </mat-form-field>
-        <button mat-button angulartics2On="click" angularticsEvent="RepositoryCopy">
-          <mat-icon svgIcon="content-copy"></mat-icon>
-        </button>
-      </div>
-      <div class="chart-details-usage__section">
-        <h2 class="chart-details-usage__label">Install chart</h2>
-        <mat-form-field>
-          <input matInput readonly floatingPlaceholder=false [value]=installInstructions>
-        </mat-form-field>
-        <button mat-button ngxClipboard angulartics2On="click">
-          <mat-icon svgIcon="content-copy"></mat-icon>
-        </button>
-      </div>
-      <p class="help-link">
-        <a href="https://github.com/kubernetes/helm/blob/master/docs/quickstart.md" target="_blank"
-          title="How to install Helm">Need Helm?</a>
-      </p>
-    </mat-tab>
-  </mat-tab-group>
-</mat-card>
+<div class="chart-details-usage__install">
+  <button class="chart-details-usage__install-btn" color="primary" mat-button mat-raised-button
+  routerLink="/monocular/install/{{chart.id}}/{{currentVersion}}">Install Chart</button>
+</div>
diff --git a/...ustom/helm/monocular/chart-details/chart-details-usage/chart-details-usage.component.scss b/...ustom/helm/monocular/chart-details/chart-details-usage/chart-details-usage.component.scss
@@ -9,6 +9,7 @@ mat-tab-body {
   margin: 2em 0;
   box-shadow: 1px 1px 10px rgba(black, 0.07);
   h1 {
+    font-size: 18px;
     margin: 0;
   }
 
@@ -26,6 +27,12 @@ mat-tab-body {
     flex-direction: column;
   }
 
+  &__install {
+    display: flex;
+    justify-content: flex-end;
+    margin: 35px 0;
+  }
+
   .mat-input-element {
     .mat-input-wrapper {
       margin: 1em 0 .5em;

diff --git a/...helm/monocular/chart-details/chart-details-versions/chart-details-versions.component.html b/...helm/monocular/chart-details/chart-details-versions/chart-details-versions.component.html
@@ -1,11 +1,15 @@
 <div class="versions">
   <h1>Chart Versions</h1>
-  <div class="version" *ngFor="let version of shownVersions()">
-    <span class='number' [class.selected]="isSelected(version)">
-      <a [href]="goToVersionUrl(version)" [routerLink]="goToVersionUrl(version)">
-        {{ version.attributes.version }}</a>
-    </span> -
-    <span class='creation-date'>{{ version.attributes.created | date: 'MMM d, y' }}</span>
+  <div class="version__table">
+    <div class="version__row" *ngFor="let version of shownVersions()">
+      <div class='version__cell number' [class.selected]="isSelected(version)">
+        <a [href]="goToVersionUrl(version)" [routerLink]="goToVersionUrl(version)">
+          <span *ngIf="version.attributes.version.length>15">{{ version.attributes.version | slice:0:16 }}...</span>
+          <span *ngIf="version.attributes.version.length<16">{{ version.attributes.version }}</span>
+          </a>
+        </div>
+      <div class='version__cell creation-date'>{{ version.attributes.created | date: 'MMM d, y' }}</div>
+    </div>
   </div>
   <div class="more-link" *ngIf="showMoreLink()">
     <a (click)="setShowAllVersions()">show all...</a>

diff --git a/...helm/monocular/chart-details/chart-details-versions/chart-details-versions.component.scss b/...helm/monocular/chart-details/chart-details-versions/chart-details-versions.component.scss
@@ -3,21 +3,40 @@
 .versions {
 
   h1 {
+    font-size: 18px;
     margin-top: 0;
   }
   .more-link {
     margin-top: .5em;
   }
 }
 
-.version {
-  display: block;
+.version__cell {
 
-  .creation-date {
+  &.creation-date {
     color: lighten($layout-base, 20%);
   }
 
-  .number.selected {
+  &.number.selected {
     font-weight: bold;
   }
 }
+
+.version {
+  &__table {
+    display: table;
+    width: 100%;
+  }
+  &__row {
+    display: table-row;
+  }
+  &__cell {
+    display: table-cell;
+  }
+}
+
+.app-version {
+  h1 {
+    font-size: 18px;
+  }
+}
diff --git a/...m/helm/monocular/chart-details/chart-details-versions/chart-details-versions.component.ts b/...m/helm/monocular/chart-details/chart-details-versions/chart-details-versions.component.ts
@@ -32,8 +32,18 @@ export class ChartDetailsVersionsComponent {
 
   shownVersions(): ChartVersion[] {
     if (this.versions) {
-      return this.showAllVersions ? this.versions : this.versions.slice(0, 5);
+      return this.showAllVersions ? this.versions : this.getNonDevelopmentVersion().slice(0, 5);
     }
     return [];
   }
+
+  getNonDevelopmentVersion(): ChartVersion[] {
+    const nonDevel: ChartVersion[] = [];
+    for (const version of this.versions) {
+      if (version.attributes.version.indexOf('-') === -1) {
+        nonDevel.push(version);
+      }
+    }
+    return nonDevel;
+  }
 }
diff --git a/...d/packages/suse-extensions/src/custom/helm/monocular/chart-item/chart-item.component.html b/...d/packages/suse-extensions/src/custom/helm/monocular/chart-item/chart-item.component.html
@@ -1,18 +1,13 @@
-<app-list-item class="chart-item" [detailUrl]="goToDetailUrl()">
+<app-list-item class="chart-item" [detailUrl]="goToDetailUrl()" height="auto">
   <img class="list-item-logo chart-item-logo" alt="{{ chart.attributes.name }}'s logo" src="{{ iconUrl }}" />
   <div class="list-item-info chart-item-info">
     <h2 class="chart-item-info__title">
-      <a [href]="goToDetailUrl()" [routerLink]="goToDetailUrl()">
-        {{ chart.attributes.name }}</a>
+        <a [href]="goToDetailUrl()" [routerLink]="goToDetailUrl()">{{ chart.attributes.repo.name }}/{{ chart.attributes.name }}</a>
     </h2>
     <p>
       <span class="chart-item-info__version"
         *ngIf="showVersion && chart.relationships.latestChartVersion.data.app_version">
         {{ chart.relationships.latestChartVersion.data.app_version }}</span>
-      <span class="chart-item-info__repo repo-{{chart.attributes.repo.name}}">
-        <a [href]="goToRepoUrl()" [routerLink]="goToRepoUrl()">
-          {{ chart.attributes.repo.name }}</a>
-      </span>
     </p>
     <div class="chart-item-info__description" *ngIf="showDescription">
       {{ chart.attributes.description }}

diff --git a/...d/packages/suse-extensions/src/custom/helm/monocular/chart-item/chart-item.component.scss b/...d/packages/suse-extensions/src/custom/helm/monocular/chart-item/chart-item.component.scss
@@ -16,6 +16,7 @@ $chart-item-logo-width: 80px;
     &__title {
       margin: 0;
       font-weight: 500;
+      font-size: 16px;
       cursor: pointer;
       margin-bottom: 4px;
 
@@ -28,6 +29,10 @@ $chart-item-logo-width: 80px;
       margin: 0;
     }
 
+    &__version {
+      font-size: 14px;
+    }
+
     // Remove this when chips are ready:
     // https://github.com/angular/material2/issues/120
     &__repo {

diff --git a/...end/packages/suse-extensions/src/custom/helm/monocular/list-item/list-item.component.html b/...end/packages/suse-extensions/src/custom/helm/monocular/list-item/list-item.component.html
@@ -1,6 +1,6 @@
 <div class="list-item">
   <a [href]="detailUrl" [routerLink]="detailUrl">
-    <div class="list-item-content">
+    <div class="list-item-content" [ngClass]="{'list-item__auto-height': height === 'auto'}">
       <div class="list-item-logo">
         <ng-content select=".list-item-logo"></ng-content>
       </div>

diff --git a/...end/packages/suse-extensions/src/custom/helm/monocular/list-item/list-item.component.scss b/...end/packages/suse-extensions/src/custom/helm/monocular/list-item/list-item.component.scss
@@ -3,6 +3,7 @@
 
 // Vars
 $list-item-content-height: 200px;
+$list-item-content-min-height: 140px;
 
 .list-item {
   border-radius: $border-radius;
@@ -47,4 +48,12 @@ $list-item-content-height: 200px;
     word-wrap: break-word;
     text-align: center;
   }
+
+  &__auto-height {
+    height: auto;
+
+    .list-item-info {
+      padding: 10px 0;
+    }
+  }
 }
diff --git a/...ntend/packages/suse-extensions/src/custom/helm/monocular/list-item/list-item.component.ts b/...ntend/packages/suse-extensions/src/custom/helm/monocular/list-item/list-item.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-list-item',
@@ -8,5 +8,8 @@ import { Component } from '@angular/core';
   inputs: ['detailUrl']
 })
 export class ListItemComponent {
+
+  @Input() height = 'default';
+
   public detailUrl: string;
 }
diff --git a/src/jetstream/plugins/monocular/chartsvc/foundationdb/handler.go b/src/jetstream/plugins/monocular/chartsvc/foundationdb/handler.go
@@ -23,6 +23,7 @@ import (
 	"net/http"
 	"sort"
 	"strconv"
+	"strings"
 
 	"github.com/helm/monocular/chartsvc/foundationdb/datastore"
 	"github.com/helm/monocular/chartsvc/models"
@@ -461,7 +462,11 @@ func SearchCharts(w http.ResponseWriter, req *http.Request, params Params) {
 }
 
 func newChartResponse(c *models.Chart) *utils.ApiResponse {
-	latestCV := c.ChartVersions[0]
+
+	// NWM: This was: latestCV := c.ChartVersions[0] - but this includes development charts
+	// FIX: This ignores development versions
+	latestCV := findFirstNonDevelopmentVersion(c)
+
 	return &utils.ApiResponse{
 		Type:       "chart",
 		ID:         c.ID,
@@ -476,6 +481,15 @@ func newChartResponse(c *models.Chart) *utils.ApiResponse {
 	}
 }
 
+func findFirstNonDevelopmentVersion(c *models.Chart) models.ChartVersion {
+	for _, chartVersion := range c.ChartVersions {
+		if strings.Index(chartVersion.Version, "-") == -1 {
+			return chartVersion
+		}
+	}
+	return c.ChartVersions[0]
+}
+
 func newChartListResponse(charts []*models.Chart) utils.ApiListResponse {
 	cl := utils.ApiListResponse{}
 	for _, c := range charts {