use cardgrid in AppList

vmware-archive · Feb 20, 2018 · a313f08 · a313f08
1 parent dd58aa3
commit a313f08
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/src/components/AppList/AppList.tsx b/src/components/AppList/AppList.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 
 import { IAppState } from "../../shared/types";
+import { CardGrid } from "../Card";
 import AppListItem from "./AppListItem";
 
 interface IAppListProps {
@@ -20,17 +21,24 @@ class AppList extends React.Component<IAppListProps> {
     return (
       <section className="AppList">
         <header className="AppList__header">
-          <h1>Applications</h1>
+          <div className="row padding-t-big">
+            <div className="col-8">
+              <h1 className="margin-v-reset">Applications</h1>
+            </div>
+            <div className="col-4 text-r">
+              <Link to={`/charts`}>
+                <button className="button button-accent margin-t-normal">Deploy New App</button>
+              </Link>
+            </div>
+          </div>
           <hr />
         </header>
-        <main className="text-c">
-          {isFetching ? <div>Loading</div> : this.chartListItems(items)}
-        </main>
+        <main>{isFetching ? <div>Loading</div> : this.appListItems(items)}</main>
       </section>
     );
   }
 
-  public chartListItems(items: IAppState["items"]) {
+  public appListItems(items: IAppState["items"]) {
     if (items.length === 0) {
       return (
         <div>
@@ -44,18 +52,11 @@ class AppList extends React.Component<IAppListProps> {
       );
     } else {
       return (
-        <div>
-          <div className="padding-normal">
-            <Link className="button button-primary" to="/charts">
-              deploy another one
-            </Link>
-          </div>
-          <div>
-            {items.map(r => {
-              return <AppListItem key={r.data.name} app={r} />;
-            })}
-          </div>
-        </div>
+        <CardGrid>
+          {items.map(r => {
+            return <AppListItem key={r.data.name} app={r} />;
+          })}
+        </CardGrid>
       );
     }
   }

diff --git a/src/components/AppList/AppListItem.css b/src/components/AppList/AppListItem.css
diff --git a/src/components/AppList/AppListItem.tsx b/src/components/AppList/AppListItem.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 
-import { hapi } from "../../shared/hapi/release";
+import placeholder from "../../placeholder.png";
 import { IApp } from "../../shared/types";
-
-import ChartIcon from "../ChartIcon";
-import "./AppListItem.css";
+import Card, { CardContent, CardIcon } from "../Card";
+import "../ChartList/ChartListItem.css";
 
 interface IAppListItemProps {
   app: IApp;
@@ -14,22 +13,33 @@ interface IAppListItemProps {
 class AppListItem extends React.Component<IAppListItemProps> {
   public render() {
     const { app } = this.props;
-    let release: hapi.release.Release | undefined;
-    release = app.data;
-    let nameSpace: string | undefined;
-    if (release && release.chart && release.chart.metadata) {
-      nameSpace = `${release.namespace}`;
-    }
+    const release = app.data;
+    const icon = app.chart && app.chart.attributes.icon;
+    const iconSrc = icon ? `/api/chartsvc/${icon}` : placeholder;
+    const metadata = release.chart && release.chart.metadata;
 
     return (
-      <div className="AppListItem padding-normal margin-big elevation-5">
-        <Link to={`/apps/` + nameSpace + `/` + release.name}>
-          <div className="AppListList__details">
-            <ChartIcon icon={app.chart && app.chart.attributes.icon} />
-            <h6>{release.name}</h6>
-          </div>
+      <Card key={release.name} responsive={true} className="AppListItem">
+        <Link to={`/apps/${release.namespace}/${release.name}`}>
+          <CardIcon icon={iconSrc} />
+          <CardContent>
+            <div className="ChartListItem__content">
+              <h3 className="ChartListItem__content__title">{release.name}</h3>
+              <div className="ChartListItem__content__info text-r">
+                <p className="margin-reset type-color-light-blue">
+                  {(metadata && metadata.appVersion) || "-"}
+                </p>
+                <span
+                  className={`ChartListItem__content__repo padding-tiny
+                  padding-h-normal type-small margin-t-small`}
+                >
+                  {release.namespace}
+                </span>
+              </div>
+            </div>
+          </CardContent>
         </Link>
-      </div>
+      </Card>
     );
   }
 }