Skip to content

Commit

Permalink
Add Helm Chart Detail Page (#1700)
Browse files Browse the repository at this point in the history
* initial page setup

* it does not work

* page complete

* not sure how chartRes got deleted but I put it back in

* cluster = default

* add last updated at values where blank

* timestamp import
  • Loading branch information
joshri authored and Robin Sonefors committed Mar 16, 2022
1 parent 38b4b75 commit 5e10185
Show file tree
Hide file tree
Showing 9 changed files with 71 additions and 17 deletions.
6 changes: 6 additions & 0 deletions ui/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import Automations from "./pages/v2/Automations";
import BucketDetail from "./pages/v2/BucketDetail";
import FluxRuntime from "./pages/v2/FluxRuntime";
import GitRepositoryDetail from "./pages/v2/GitRepositoryDetail";
import HelmChartDetail from "./pages/v2/HelmChartDetail";
import HelmReleaseDetail from "./pages/v2/HelmReleaseDetail";
import HelmRepositoryDetail from "./pages/v2/HelmRepositoryDetail";
import KustomizationDetail from "./pages/v2/KustomizationDetail";
Expand Down Expand Up @@ -73,6 +74,11 @@ const App = () => (
path={V2Routes.HelmRelease}
component={withName(HelmReleaseDetail)}
/>
<Route
exact
path={V2Routes.HelmChart}
component={withName(HelmChartDetail)}
/>
<Redirect exact from="/" to={V2Routes.Automations} />
<Route exact path="*" component={Error} />
</Switch>
Expand Down
8 changes: 1 addition & 7 deletions ui/components/SourceDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function SourceDetail({ className, name, info, type }: Props) {
return <LoadingPage />;
}

const s = _.find(sources, { name });
const s = _.find(sources, { name, type });

if (!s) {
return (
Expand Down Expand Up @@ -70,12 +70,6 @@ function SourceDetail({ className, name, info, type }: Props) {
{error && (
<Alert severity="error" title="Error" message={error.message} />
)}
<div>
<Heading level={2}>{s.type}</Heading>
</div>
<div>
<InfoList items={items} />
</div>
<HashRouterTabs history={createHashHistory()} defaultPath="/automations">
<HashRouterTab name="Related Automations" path="/automations">
<AutomationsTable automations={relevantAutomations} />
Expand Down
9 changes: 8 additions & 1 deletion ui/hooks/sources.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { AppContext } from "../contexts/AppContext";
import {
ListBucketsResponse,
ListGitRepositoriesResponse,
ListHelmChartsResponse,
ListHelmRepositoriesResponse,
} from "../lib/api/core/core.pb";
import { SourceRefSourceKind } from "../lib/api/core/types.pb";
Expand All @@ -23,13 +24,15 @@ export function useListSources(
api.ListGitRepositories({ namespace }),
api.ListHelmRepositories({ namespace }),
api.ListBuckets({ namespace }),
api.ListHelmCharts({ namespace }),
];
return Promise.all<any>(p).then((result) => {
const [repoRes, helmReleases, bucketsRes] = result;
const [repoRes, helmReleases, bucketsRes, chartRes] = result;
const repos = (repoRes as ListGitRepositoriesResponse).gitRepositories;
const hrs = (helmReleases as ListHelmRepositoriesResponse)
.helmRepositories;
const buckets = (bucketsRes as ListBucketsResponse).buckets;
const charts = (chartRes as ListHelmChartsResponse).helmCharts;

return [
..._.map(repos, (r) => ({
Expand All @@ -44,6 +47,10 @@ export function useListSources(
...b,
type: SourceRefSourceKind.Bucket,
})),
..._.map(charts, (ch) => ({
...ch,
type: SourceRefSourceKind.HelmChart,
})),
];
});
},
Expand Down
5 changes: 3 additions & 2 deletions ui/pages/v2/BucketDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from "styled-components";
import Interval from "../../components/Interval";
import Page, { Content, TitleBar } from "../../components/Page";
import SourceDetail from "../../components/SourceDetail";
import Timestamp from "../../components/Timestamp";
import { Bucket, SourceRefSourceKind } from "../../lib/api/core/types.pb";

type Props = {
Expand All @@ -22,9 +23,9 @@ function BucketDetail({ className, name, namespace }: Props) {
info={(b: Bucket = {}) => [
["Endpoint", b.endpoint],
["Bucket Name", b.name],
["Last Updated", ""],
["Last Updated", <Timestamp time={b.lastUpdatedAt} />],
["Interval", <Interval interval={b.interval} />],
["Cluster", ""],
["Cluster", "Default"],
["Namespace", b.namespace],
]}
/>
Expand Down
5 changes: 3 additions & 2 deletions ui/pages/v2/GitRepositoryDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from "react";
import styled from "styled-components";
import Page, { Content, TitleBar } from "../../components/Page";
import SourceDetail from "../../components/SourceDetail";
import Timestamp from "../../components/Timestamp";
import {
GitRepository,
SourceRefSourceKind,
Expand All @@ -23,8 +24,8 @@ function GitRepositoryDetail({ className, name, namespace }: Props) {
info={(s: GitRepository) => [
["URL", s.url],
["Ref", s.reference.branch],
["Last Updated", ""],
["Cluster", ""],
["Last Updated", <Timestamp time={s.lastUpdatedAt} />],
["Cluster", "Default"],
["Namespace", s.namespace],
]}
/>
Expand Down
44 changes: 44 additions & 0 deletions ui/pages/v2/HelmChartDetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from "react";
import styled from "styled-components";
import Interval from "../../components/Interval";
import Page, { Content, TitleBar } from "../../components/Page";
import SourceDetail from "../../components/SourceDetail";
import Timestamp from "../../components/Timestamp";
import { HelmChart, SourceRefSourceKind } from "../../lib/api/core/types.pb";

type Props = {
className?: string;
name: string;
namespace: string;
};

function HelmChartDetail({ className, name, namespace }: Props) {
return (
<Page error={null} className={className}>
<SourceDetail
name={name}
namespace={namespace}
type={SourceRefSourceKind.HelmChart}
info={(ch: HelmChart) => [
["Chart", ch?.chart],
["Ref", ch?.sourceRef?.name],
["Last Updated", <Timestamp time={ch?.lastUpdatedAt} />],
["Interval", <Interval interval={ch?.interval} />],
["Namespace", ch?.namespace],
]}
/>
</Page>
);
}

export default styled(HelmChartDetail).attrs({
className: HelmChartDetail.name,
})`
${TitleBar} {
margin-bottom: 0;
}
${Content} {
padding-top: 0;
}
`;
2 changes: 1 addition & 1 deletion ui/pages/v2/HelmReleaseDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function HelmReleaseDetail({ className, name }: Props) {
<SourceLink
sourceRef={{
kind: SourceRefSourceKind.HelmChart,
name: helmRelease.helmChart.chart,
name: helmRelease?.helmChart.chart,
}}
/>,
],
Expand Down
7 changes: 4 additions & 3 deletions ui/pages/v2/HelmRepositoryDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from "styled-components";
import Interval from "../../components/Interval";
import Page, { Content, TitleBar } from "../../components/Page";
import SourceDetail from "../../components/SourceDetail";
import Timestamp from "../../components/Timestamp";
import {
HelmRepository,
SourceRefSourceKind,
Expand All @@ -21,12 +22,12 @@ function HelmRepositoryDetail({ className, name, namespace }: Props) {
name={name}
namespace={namespace}
type={SourceRefSourceKind.HelmRepository}
// Guard against an undefined bucket with a default empty object
// Guard against an undefined repo with a default empty object
info={(hr: HelmRepository = {}) => [
["URL", hr.url],
["Last Updated", ""],
["Last Updated", <Timestamp time={hr.lastUpdatedAt} />],
["Interval", <Interval interval={hr.interval} />],
["Cluster", ""],
["Cluster", "Default"],
["Namespace", hr.namespace],
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion ui/pages/v2/KustomizationDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function KustomizationDetail({ className, name }: Props) {
items={[
["Source", <SourceLink sourceRef={kustomization?.sourceRef} />],
["Applied Revision", kustomization?.lastAppliedRevision],
["Cluster", ""],
["Cluster", "Default"],
["Path", kustomization?.path],
["Interval", <Interval interval={kustomization?.interval} />],
["Last Updated At", kustomization?.lastHandledReconciledAt],
Expand Down

0 comments on commit 5e10185

Please sign in to comment.