Design rehaul (#308)

* Reorganize deployment list

* Add ChartIcon to deployment

* Add filters + Search input

* Fix link + default namespace

* Deployment details layout update

* ChartIcon in release extended

* Add chart icon color theming

* Fix list alignments

* Prevent chart icon not showing up

* Update Swagger spec for chartIcon

* Deployment subtitle style clean

* Cleanup headerbar

* Add deployment to small menu

* Improve small navbar style/animation

* Colorful card style chart-item

* Reorganize charts list

* Chart Details profile style

* Charts list overall ui fixes

* Allow search in repo

* Use custom module for color picking

* Fix too long chart/deployment name #16

* Add search icon on charts/deployments search field

* Fix UI Tests

* Fix chart list alignment + no charts result

* Improve search bars

* Remove chart-search route

* Fix empty charts list state

* Clean sass selector alignment

* Css variable cleanup + Fix most review comments

* Use colors from theme.scss everywhere

* Optimize search svg

* Refactor List Item

* Refactor list filters for chart & deployments

* Relayout header-bar + maxwidth layout on main page

* Fix test and compile script

* Back to previous chart layout + large max layout width

* Add xlarge breakpoint

* Fix url-join and marked imports

* Update swagger spec

.gitignore

@@ -3,4 +3,5 @@ repo-data/
 coverage.txt
 *.log
 src/api/.glide
-.vscode
+**/.DS_Store
+.vscode

src/api/handlers/releases/releases.go

@@ -125,6 +125,7 @@ func makeReleaseResource(release *hapi_release5.Release) *models.Resource {
 	ret.Attributes = &models.Release{
 		ChartName:    &release.Chart.Metadata.Name,
 		ChartVersion: &release.Chart.Metadata.Version,
+		ChartIcon:    &release.Chart.Metadata.Icon,
 		Updated:      helpers.StrToPtr(timeconv.String(release.Info.LastDeployed)),
 		Name:         &release.Name,
 		Namespace:    &release.Namespace,
@@ -143,6 +144,7 @@ func makeReleaseExtendedResource(release *hapi_release5.Release) *models.Resourc
 	ret.Attributes = &models.ReleaseExtended{
 		ChartName:    &release.Chart.Metadata.Name,
 		ChartVersion: &release.Chart.Metadata.Version,
+		ChartIcon:    &release.Chart.Metadata.Icon,
 		Updated:      helpers.StrToPtr(timeconv.String(release.Info.LastDeployed)),
 		Name:         &release.Name,
 		Namespace:    &release.Namespace,

src/api/handlers/releases/releases_test.go

@@ -192,6 +192,7 @@ func TestMakeReleaseResource(t *testing.T) {
 	assert.Equal(t, *res.Attributes.(*models.Release).Namespace, "my-namespace", "namespace")
 	assert.Equal(t, *res.Attributes.(*models.Release).ChartVersion, "1.2.3", "version")
 	assert.Equal(t, *res.Attributes.(*models.Release).ChartName, "my-chart", "chart name")
+	assert.Equal(t, *res.Attributes.(*models.Release).ChartIcon, "chart-icon", "chart icon")
 	assert.Equal(t, *res.Attributes.(*models.Release).Status, "200", "Status")
 	assert.NotNil(t, res.Attributes.(*models.Release).Updated, "Has updated at timestamp")
 
@@ -207,6 +208,7 @@ func TestMakeReleaseExtendedResource(t *testing.T) {
 	assert.Equal(t, *res.Attributes.(*models.ReleaseExtended).Namespace, "my-namespace", "namespace")
 	assert.Equal(t, *res.Attributes.(*models.ReleaseExtended).ChartVersion, "1.2.3", "version")
 	assert.Equal(t, *res.Attributes.(*models.ReleaseExtended).ChartName, "my-chart", "chart name")
+	assert.Equal(t, *res.Attributes.(*models.ReleaseExtended).ChartIcon, "chart-icon", "chart icon")
 	assert.Equal(t, *res.Attributes.(*models.ReleaseExtended).Status, "200", "Status")
 	assert.NotNil(t, res.Attributes.(*models.ReleaseExtended).Updated, "Has updated at timestamp")
 	assert.Equal(t, *res.Attributes.(*models.ReleaseExtended).Notes, "my-notes", "Notes")

src/api/mocks/client.go

@@ -22,6 +22,7 @@ var Resource = helm_releases.Release{
 		Metadata: &chart.Metadata{
 			Name:    "my-chart",
 			Version: "1.2.3",
+			Icon: "chart-icon",
 		},
 	},
 	Info: &helm_releases.Info{

src/api/swagger.yml

@@ -531,6 +531,7 @@ definitions:
       - updated
       - chartName
       - chartVersion
+      - chartIcon
       - namespace
     properties:
       name:
@@ -543,6 +544,8 @@ definitions:
         type: string
       chartVersion:
         type: string
+      chartIcon:
+        type: string
       namespace:
         type: string
   releaseExtended:
@@ -553,6 +556,7 @@ definitions:
       - updated
       - chartName
       - chartVersion
+      - chartIcon
       - namespace
       - resources
       - notes
@@ -567,6 +571,8 @@ definitions:
         type: string
       chartVersion:
         type: string
+      chartIcon:
+        type: string
       namespace:
         type: string
       resources:

src/api/swagger/models/release.go

@@ -16,6 +16,12 @@ swagger:model release
 */
 type Release struct {
 
+	/* chart icon
+
+	Required: true
+	*/
+	ChartIcon *string `json:"chartIcon"`
+
 	/* chart name
 
 	Required: true
@@ -57,6 +63,11 @@ type Release struct {
 func (m *Release) Validate(formats strfmt.Registry) error {
 	var res []error
 
+	if err := m.validateChartIcon(formats); err != nil {
+		// prop
+		res = append(res, err)
+	}
+
 	if err := m.validateChartName(formats); err != nil {
 		// prop
 		res = append(res, err)
@@ -93,6 +104,15 @@ func (m *Release) Validate(formats strfmt.Registry) error {
 	return nil
 }
 
+func (m *Release) validateChartIcon(formats strfmt.Registry) error {
+
+	if err := validate.Required("chartIcon", "body", m.ChartIcon); err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func (m *Release) validateChartName(formats strfmt.Registry) error {
 
 	if err := validate.Required("chartName", "body", m.ChartName); err != nil {

src/api/swagger/models/release_extended.go

@@ -16,6 +16,12 @@ swagger:model releaseExtended
 */
 type ReleaseExtended struct {
 
+	/* chart icon
+
+	Required: true
+	*/
+	ChartIcon *string `json:"chartIcon"`
+
 	/* chart name
 
 	Required: true
@@ -69,6 +75,11 @@ type ReleaseExtended struct {
 func (m *ReleaseExtended) Validate(formats strfmt.Registry) error {
 	var res []error
 
+	if err := m.validateChartIcon(formats); err != nil {
+		// prop
+		res = append(res, err)
+	}
+
 	if err := m.validateChartName(formats); err != nil {
 		// prop
 		res = append(res, err)
@@ -115,6 +126,15 @@ func (m *ReleaseExtended) Validate(formats strfmt.Registry) error {
 	return nil
 }
 
+func (m *ReleaseExtended) validateChartIcon(formats strfmt.Registry) error {
+
+	if err := validate.Required("chartIcon", "body", m.ChartIcon); err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func (m *ReleaseExtended) validateChartName(formats strfmt.Registry) error {
 
 	if err := validate.Required("chartName", "body", m.ChartName); err != nil {

src/ui/package.json

@@ -46,6 +46,8 @@
   },
   "devDependencies": {
     "@types/jasmine": "^2.2.30",
+    "@types/marked": "0.0.28",
+    "@types/url-join": "^0.8.2",
     "angular-cli": "1.0.0-beta.24",
     "bootstrap-sass": "^3.3.7",
     "codelyzer": "~0.0.26",
@@ -57,6 +59,7 @@
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-remap-istanbul": "^0.2.1",
+    "mappy-breakpoints": "^0.2.3",
     "node-sass": "^3.9.3",
     "protractor": "4.0.5",
     "resolve-url-loader": "^1.6.0",
@@ -66,7 +69,6 @@
     "tslint": "3.13.0",
     "typescript": "^2.0.0",
     "url-loader": "^0.5.7",
-    "mappy-breakpoints": "^0.2.3",
     "webpack": "2.2.0-rc.3"
   }
 }

src/ui/src/app/app.component.html

@@ -3,10 +3,15 @@
   <nav class="App__Menu">
     <ul>
       <li>
-        <a routerLink="/charts" routerLinkActive="active">
+        <a class="reverse" routerLink="/charts" routerLinkActive="active">
           Charts
         </a>
       </li>
+      <li *ngIf="config.releasesEnabled">
+        <a class="reverse" routerLink="/deployments" routerLinkActive="active">
+          Deployments
+        </a>
+      </li>
       <li>
         <a href="https://github.com/kubernetes-helm/monocular/blob/master/docs/about.md" target="_blank">
           About

src/ui/src/app/app.component.scss

@@ -3,9 +3,12 @@
 // Import your custom theme
 @import '../theme.scss';
 
+$menu-height: 120px;
+
 .App {
 
   &__Wrap {
+    background: $background-white;
     display: flex;
     min-height: 100vh;
     flex-direction: column;
@@ -14,40 +17,43 @@
 
     .App__Content {
       flex: 1;
+      padding-top: 70px;
     }
   }
 
   &__Menu {
     position: absolute;
+    background-color: $layout-base;
     top: 0;
-    visibility: hidden;
-    transition: transform .3s ease-out;
-    will-change: transform;
+    height: 0;
+    width: 100%;
+    transition: height .3s ease-out;
+    will-change: height;
 
     ul {
       list-style: none;
     }
 
     li {
-      font-weight: bold;
+      font-weight: normal;
       margin-bottom: .5em;
       font-size: 1.2em;
       color: md-color($monocular-app-primary);
+      a.active {
+        font-weight: bold;
+        color: $text-white;
+      }
     }
   }
 
   &--openMenu {
 
     .App__Wrap {
-      display: block;
-      position: relative;
-      transform: translateY(120px);
-      box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
+      transform: translateY($menu-height);
     }
 
     .App__Menu {
-      visibility: visible;
-      transform: translateY(1em);
+      height: $menu-height;
     }
   }
 }

src/ui/src/app/app.component.spec.ts

@@ -9,6 +9,7 @@ import { FooterComponent } from './footer/footer.component';
 import { FooterListComponent } from './footer-list/footer-list.component';
 
 import { Angulartics2GoogleAnalytics } from 'angulartics2';
+import { ConfigService } from './shared/services/config.service';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -21,7 +22,8 @@ describe('AppComponent', () => {
         RouterTestingModule
       ],
       providers: [
-        { provide: Angulartics2GoogleAnalytics }
+        { provide: Angulartics2GoogleAnalytics },
+        { provide: ConfigService, useValue: { appName: 'appName' } }
       ]
     })
     .compileComponents();

src/ui/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuService } from './shared/services/menu.service';
 import { ChartsService } from './shared/services/charts.service';
+import { ConfigService } from './shared/services/config.service';
 
 @Component({
   selector: 'app-root',
@@ -13,9 +14,12 @@ import { ChartsService } from './shared/services/charts.service';
 export class AppComponent {
   // Show the global menu
   public showMenu: boolean = false;
+  // Config
+  public config;
 
   constructor(
     angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
+    config: ConfigService,
     private menuService: MenuService,
     private router: Router
   ) {
@@ -27,5 +31,6 @@ export class AppComponent {
     router.events.subscribe(() => {
       menuService.hideMenu();
     });
+    this.config = config;
   }
 }

src/ui/src/app/app.module.ts

@@ -29,7 +29,6 @@ import { ChartListComponent } from './chart-list/chart-list.component';
 import { ChartItemComponent } from './chart-item/chart-item.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { ChartDetailsComponent } from './chart-details/chart-details.component';
-import { ChartSearchComponent } from './chart-search/chart-search.component';
 import { HeaderBarComponent } from './header-bar/header-bar.component';
 import { ChartDetailsUsageComponent } from './chart-details/chart-details-usage/chart-details-usage.component';
 import { ChartDetailsReadmeComponent } from './chart-details/chart-details-readme/chart-details-readme.component';
@@ -41,14 +40,16 @@ import { ChartDetailsInfoComponent } from './chart-details/chart-details-info/ch
 import { ChartDetailsVersionsComponent } from './chart-details/chart-details-versions/chart-details-versions.component';
 import { ChartsComponent } from './charts/charts.component';
 import { DeploymentsComponent } from './deployments/deployments.component';
+import { DeploymentItemComponent } from './deployment-item/deployment-item.component';
 import { DeploymentComponent } from './deployment/deployment.component';
 import { DeploymentControlsComponent } from './deployment-controls/deployment-controls.component';
-import { ChartsFiltersComponent } from './charts-filters/charts-filters.component';
 import { LoaderComponent } from './loader/loader.component';
 import { ConfirmDialog }   from './confirm-dialog/confirm-dialog.component';
 import { DeploymentResourceComponent } from './deployment/deployment-resource/deployment-resource.component';
+import { ListItemComponent } from './list-item/list-item.component';
+import { ListFiltersComponent } from './list-filters/list-filters.component';
 
-require('hammerjs');
+import 'hammerjs';
 
 const metaConfig: MetaConfig = {
   //Append a title suffix such as a site name to all titles
@@ -66,7 +67,6 @@ const metaConfig: MetaConfig = {
     ChartItemComponent,
     PageNotFoundComponent,
     ChartDetailsComponent,
-    ChartSearchComponent,
     HeaderBarComponent,
     ChartDetailsUsageComponent,
     ChartDetailsVersionsComponent,
@@ -78,13 +78,15 @@ const metaConfig: MetaConfig = {
     FooterListComponent,
     ChartDetailsInfoComponent,
     ChartsComponent,
-    ChartsFiltersComponent,
     LoaderComponent,
     DeploymentControlsComponent,
     DeploymentsComponent,
+    DeploymentItemComponent,
     DeploymentComponent,
     ConfirmDialog,
-    DeploymentResourceComponent
+    DeploymentResourceComponent,
+    ListItemComponent,
+    ListFiltersComponent
   ],
   imports: [
     MaterialModule.forRoot(),

src/ui/src/app/app.routing.ts

@@ -4,7 +4,6 @@ import { ModuleWithProviders }  from '@angular/core';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { ChartIndexComponent } from './chart-index/chart-index.component';
 import { ChartDetailsComponent } from './chart-details/chart-details.component';
-import { ChartSearchComponent } from './chart-search/chart-search.component';
 import { ChartsComponent } from './charts/charts.component';
 import { DeploymentsComponent } from './deployments/deployments.component';
 import { DeploymentComponent } from './deployment/deployment.component';
@@ -36,10 +35,6 @@ const appRoutes: Routes = [
     path: 'charts',
     component: ChartsComponent
   },
-  {
-    path: 'charts/search',
-    component: ChartSearchComponent
-  },
   {
     path: 'charts/:repo',
     component: ChartsComponent

src/ui/src/app/chart-details/chart-details-info/chart-details-info.component.html

@@ -1,8 +1,4 @@
 <div class="chartInfo">
-  <div class="chartInfo__chart">
-    <app-chart-item [chart]=chart [showVersion]=false [showDescription]=true>
-    </app-chart-item>
-  </div>
 
   <app-chart-details-usage [chart]=chart *ngIf="currentVersion" [currentVersion]=currentVersion.attributes.version></app-chart-details-usage>