Merge pull request #1553 from weaveworks/1526-source-pages

Add source pages

api/core/core.swagger.json

@@ -500,6 +500,9 @@
           "items": {
             "$ref": "#/definitions/v1Condition"
           }
+        },
+        "bucketName": {
+          "type": "string"
         }
       }
     },

api/core/types.proto

@@ -111,6 +111,7 @@ message Bucket {
     string   secretRefName        = 8;
     int32    timeout              = 9;
     repeated Condition conditions = 10;
+    string   bucket_name          = 11;
 }
 
 message Deployment {

core/server/sources.go

@@ -87,8 +87,8 @@ func (as *coreServer) ListBuckets(ctx context.Context, msg *pb.ListBucketRequest
 	}
 
 	var results []*pb.Bucket
-	for _, repository := range l.Items {
-		results = append(results, types.BucketToProto(&repository))
+	for _, bucket := range l.Items {
+		results = append(results, types.BucketToProto(&bucket))
 	}
 
 	return &pb.ListBucketsResponse{

core/server/types/bucket.go

@@ -52,7 +52,7 @@ func BucketToProto(bucket *v1beta1.Bucket) *pb.Bucket {
 		provider = pb.Bucket_GCP
 	}
 
-	hr := &pb.Bucket{
+	bkt := &pb.Bucket{
 		Name:      bucket.Name,
 		Namespace: bucket.Namespace,
 		Endpoint:  bucket.Spec.Endpoint,
@@ -62,9 +62,14 @@ func BucketToProto(bucket *v1beta1.Bucket) *pb.Bucket {
 		Interval: &pb.Interval{
 			Minutes: 1,
 		},
-		SecretRefName: bucket.Spec.SecretRef.Name,
-		Conditions:    mapConditions(bucket.Status.Conditions),
+		// SecretRefName: bucket.Spec.SecretRef.Name,
+		Conditions: mapConditions(bucket.Status.Conditions),
+		BucketName: bucket.Spec.BucketName,
 	}
 
-	return hr
+	if bucket.Spec.SecretRef != nil {
+		bkt.SecretRefName = bucket.Spec.SecretRef.Name
+	}
+
+	return bkt
 }

core/server/types/helmrepository.go

@@ -36,5 +36,6 @@ func HelmRepositoryToProto(helmRepository *v1beta1.HelmRepository) *pb.HelmRepos
 		Interval: &pb.Interval{
 			Minutes: 1,
 		},
+		Conditions: mapConditions(helmRepository.Status.Conditions),
 	}
 }

ui/components/DataTable.tsx

@@ -32,6 +32,7 @@ type Field = {
   value: string | ((k: any) => string | JSX.Element);
   sortType?: SortType;
   sortValue?: Sorter;
+  width?: number;
 };
 
 /** DataTable Properties  */
@@ -108,7 +109,6 @@ function UnstyledDataTable({
   fields,
   rows,
   defaultSort = 0,
-  widths,
   children,
 }: Props) {
   const [sort, setSort] = React.useState(fields[defaultSort]);
@@ -154,8 +154,8 @@ function UnstyledDataTable({
 
   const r = _.map(sorted, (r, i) => (
     <TableRow key={i}>
-      {_.map(fields, (f, i) => (
-        <TableCell style={widths && { width: widths[i] }} key={f.label}>
+      {_.map(fields, (f) => (
+        <TableCell style={f.width && { maxWidth: f.width }} key={f.label}>
           <Text>{typeof f.value === "function" ? f.value(r) : r[f.value]}</Text>
         </TableCell>
       ))}
@@ -168,8 +168,11 @@ function UnstyledDataTable({
         <Table aria-label="simple table">
           <TableHead>
             <TableRow>
-              {_.map(fields, (f, i) => (
-                <TableCell style={widths && { width: widths[i] }} key={f.label}>
+              {_.map(fields, (f) => (
+                <TableCell
+                  style={f.width && { maxWidth: f.width }}
+                  key={f.label}
+                >
                   {f.sortType ? (
                     <SortableLabel field={f} />
                   ) : (
@@ -224,6 +227,16 @@ export const DataTable = styled(UnstyledDataTable)`
   ${Link} ${Text} {
     font-size: 14px;
   }
+
+  td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  table {
+    width: 100%;
+  }
 `;
 
 export default DataTable;

ui/components/Heading.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  className?: string;
+  level: 1 | 2 | 3 | 4 | 5;
+  children: any;
+};
+
+function Heading({ className, children, level }: Props) {
+  return React.createElement(
+    `h${level}`,
+    { className: `${className} h${level}` },
+    children
+  );
+}
+
+export default styled(Heading).attrs({ className: Heading.name })`
+  &.h1 {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  &.h2 {
+    font-size: 20px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 24px;
+    font-weight: 400;
+    color: #737373;
+  }
+
+  &.h3 {
+    font-size: 14px;
+    line-height: 17px;
+  }
+`;

ui/components/InfoList.tsx

@@ -3,18 +3,14 @@ import * as React from "react";
 import styled from "styled-components";
 import Text from "./Text";
 
+export type InfoField = [string, any];
+
 const InfoList = styled(
-  ({
-    items,
-    className,
-  }: {
-    className?: string;
-    items: { [key: string]: any };
-  }) => {
+  ({ items, className }: { className?: string; items: InfoField[] }) => {
     return (
       <table className={className}>
         <tbody>
-          {_.map(items, (v, k) => (
+          {_.map(items, ([k, v]) => (
             <tr key={k}>
               <td>
                 <Text capitalize bold>

ui/components/Layout.tsx

@@ -151,7 +151,7 @@ function Layout({ className, children }: Props) {
                 orientation="vertical"
                 value={getParentNavValue(currentPage)}
               >
-                {_.map(navItems, (n, i) => (
+                {_.map(navItems, (n) => (
                   <StyleLinkTab
                     key={n.value}
                     label={n.label}

ui/components/SourceDetail.tsx

@@ -7,8 +7,9 @@ import { SourceRefSourceKind } from "../lib/api/core/types.pb";
 import Alert from "./Alert";
 import AutomationsTable from "./AutomationsTable";
 import Flex from "./Flex";
+import Heading from "./Heading";
 import Icon, { IconType } from "./Icon";
-import InfoList from "./InfoList";
+import InfoList, { InfoField } from "./InfoList";
 import { computeMessage, computeReady } from "./KubeStatusIndicator";
 import LoadingPage from "./LoadingPage";
 import Text from "./Text";
@@ -19,7 +20,7 @@ type Props = {
   name: string;
   namespace: string;
   children?: JSX.Element;
-  info: <T>(s: T) => { [key: string]: any };
+  info: <T>(s: T) => InfoField[];
 };
 
 function SourceDetail({ className, name, info }: Props) {
@@ -52,9 +53,7 @@ function SourceDetail({ className, name, info }: Props) {
   return (
     <div className={className}>
       <Flex align wide between>
-        <div>
-          <h2>{s.name}</h2>
-        </div>
+        <Heading level={1}>{s.name}</Heading>
         <div className="page-status">
           {ok ? (
             <Icon
@@ -77,7 +76,7 @@ function SourceDetail({ className, name, info }: Props) {
         <Alert severity="error" title="Error" message={error.message} />
       )}
       <div>
-        <h3>{s.type}</h3>
+        <Heading level={2}>{s.type}</Heading>
       </div>
       <div>
         <InfoList items={items} />
@@ -90,8 +89,9 @@ function SourceDetail({ className, name, info }: Props) {
 }
 
 export default styled(SourceDetail).attrs({ className: SourceDetail.name })`
-  h3 {
-    margin-bottom: 24px;
+  h2 {
+    font-size: 20px;
+    margin-bottom: 12px;
   }
 
   ${InfoList} {