Skip to content

Commit

Permalink
Use gitops-backend and remove mock-data
Browse files Browse the repository at this point in the history
  • Loading branch information
@divyanshiGupta
divyanshiGupta committed Aug 19, 2020
1 parent 0e7b47f commit d19c74c
Show file tree
Hide file tree
Showing 13 changed files with 211 additions and 166 deletions.
15 changes: 12 additions & 3 deletions frontend/packages/dev-console/src/components/gitops/GitOpsDetailsPage.tsx
View file
Expand Up @@ -5,7 +5,6 @@ import * as _ from 'lodash';
import { BreadCrumbs, ResourceIcon, LoadingBox } from '@console/internal/components/utils';
import { Split, SplitItem, Label } from '@patternfly/react-core';
import { GitOpsAppGroupData, GitOpsEnvironment } from './utils/gitops-types';
import GitOpsDetailsController from './details/GitOpsDetailsController';
import { routeDecoratorIcon } from '../import/render-utils';
import {
fetchAppGroups,
Expand All @@ -14,12 +13,14 @@ import {
getApplicationsBaseURI,
} from './utils/gitops-utils';
import useDefaultSecret from './utils/useDefaultSecret';
import GitOpsDetails from './details/GitOpsDetails';

type GitOpsDetailsPageProps = RouteComponentProps<{ appName?: string }>;

const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }) => {
const [envs, setEnvs] = React.useState<string[]>(null);
const [envsData, setEnvsData] = React.useState<GitOpsEnvironment[]>(null);
const [emptyStateMsg, setEmptyStateMsg] = React.useState(null);
const [secretNS, secretName] = useDefaultSecret();
const { appName } = match.params;
const searchParams = new URLSearchParams(location.search);
Expand All @@ -45,13 +46,17 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
const getEnvs = async () => {
if (!pipelinesBaseURI) return;
let appGroups: GitOpsAppGroupData[];
let emptyMsg = null;
try {
appGroups = await fetchAppGroups(pipelinesBaseURI, manifestURL);
} catch {} // eslint-disable-line no-empty
if (ignore) return;
const app = _.find(appGroups, (appObj) => appName === appObj?.name);
if (!app?.environments) {
emptyMsg = 'Environment(s) details not found';
}
setEmptyStateMsg(emptyMsg);
setEnvs(app?.environments);
setEnvs(['dev', 'test', 'qa', 'stage', 'prod']); // will remove this once backend is ready
};

getEnvs();
Expand Down Expand Up @@ -112,7 +117,11 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
</SplitItem>
</Split>
</div>
{envsData ? <GitOpsDetailsController envsData={envsData} /> : <LoadingBox />}
{!envsData && !emptyStateMsg ? (
<LoadingBox />
) : (
<GitOpsDetails envsData={envsData} emptyStateMsg={emptyStateMsg} />
)}
</>
);
};
Expand Down
9 changes: 9 additions & 0 deletions frontend/packages/dev-console/src/components/gitops/GitOpsEmptyState.scss
View file
@@ -0,0 +1,9 @@
.odc-gitops-empty-state {
&__msg {
font-size: var(--pf-global--FontSize--lg);
}
&__icon {
height: var(--pf-c-empty-state__icon--FontSize);
max-width: 100%;
}
}
21 changes: 21 additions & 0 deletions frontend/packages/dev-console/src/components/gitops/GitOpsEmptyState.tsx
View file
@@ -0,0 +1,21 @@
import * as React from 'react';
import { EmptyState, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core';
import * as gitopsIcon from '../../images/gitops.svg';
import './GitOpsEmptyState.scss';

interface GitOpsEmptyStateProps {
emptyStateMsg: string;
}

const gitopsImage = () => (
<img className="odc-gitops-empty-state__icon" src={gitopsIcon} alt="GitOps" />
);

const GitOpsEmptyState: React.FC<GitOpsEmptyStateProps> = ({ emptyStateMsg }) => (
<EmptyState variant={EmptyStateVariant.full}>
<p className="odc-gitops-empty-state__msg">{emptyStateMsg}</p>
<EmptyStateIcon variant="container" component={gitopsImage} />
</EmptyState>
);

export default GitOpsEmptyState;
10 changes: 5 additions & 5 deletions frontend/packages/dev-console/src/components/gitops/GitOpsListPage.tsx
View file
Expand Up @@ -37,17 +37,17 @@ const GitOpsListPage: React.FC = () => {
};
}, [baseURL, namespaces, nsError, nsLoaded]);

if (!appGroups && !emptyStateMsg) {
return <LoadingBox />;
}

return (
<>
<Helmet>
<title>GitOps</title>
</Helmet>
<PageHeading title="GitOps" />
<GitOpsList appGroups={appGroups} emptyStateMsg={emptyStateMsg} />
{!appGroups && !emptyStateMsg ? (
<LoadingBox />
) : (
<GitOpsList appGroups={appGroups} emptyStateMsg={emptyStateMsg} />
)}
</>
);
};
Expand Down
5 changes: 2 additions & 3 deletions frontend/packages/dev-console/src/components/gitops/details/CommitDetails.tsx
View file
Expand Up @@ -21,7 +21,7 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
kind: 'ImageStreamImport',
apiVersion: 'image.openshift.io/v1',
metadata: {
name: 'gitops-app',
name: `gitops-app`,
namespace,
},
spec: {
Expand Down Expand Up @@ -50,7 +50,7 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
} catch {} // eslint-disable-line no-empty
if (ignore) return;
const status = imageStreamImport?.status?.images?.[0]?.status;
if (status.status === 'Success') {
if (status?.status === 'Success') {
const imageLabels =
imageStreamImport?.status?.images?.[0]?.image?.dockerImageMetadata?.Config?.Labels;
lastCommitData = {
Expand All @@ -67,7 +67,6 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
return () => {
ignore = true;
};

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Expand Down
4 changes: 4 additions & 0 deletions frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.scss
View file
Expand Up @@ -23,6 +23,10 @@
display: inline-flex;
align-items: center;
}
&__url-empty-state {
font-size: 12px;
color: var(--pf-global--palette--black-600);
}
article {
border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
}
Expand Down
99 changes: 59 additions & 40 deletions frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.tsx
View file
Expand Up @@ -4,52 +4,71 @@ import { Stack, StackItem, Card, CardTitle, SplitItem, Split, Label } from '@pat
import { ResourceLink, ExternalLink } from '@console/internal/components/utils';
import GitOpsServiceDetailsSection from './GitOpsServiceDetailsSection';
import { GitOpsEnvironment } from '../utils/gitops-types';
import useTransformedEnvsData from '../utils/useTransformedEnvsData';
import GitOpsEmptyState from '../GitOpsEmptyState';
import './GitOpsDetails.scss';

interface GitOpsDetailsProps {
envs: GitOpsEnvironment[];
envsData: GitOpsEnvironment[];
emptyStateMsg: string;
}

const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
return (
const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envsData, emptyStateMsg }) => {
const envs = useTransformedEnvsData(envsData);
return emptyStateMsg ? (
<GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
) : (
<div className="odc-gitops-details">
{_.map(envs, (env) => (
<Stack className="odc-gitops-details__env-section" key={env.environment}>
<StackItem>
<Card>
<CardTitle className="odc-gitops-details__env-section__header">
<Stack hasGutter>
<StackItem>
<Split style={{ alignItems: 'center' }}>
<SplitItem className="odc-gitops-details__env-section__title" isFilled>
{env.environment}
</SplitItem>
<SplitItem>
<Label className="odc-gitops-details__env-section__timestamp" color="grey">
<span style={{ color: 'var(--pf-global--palette--black-600)' }}>
{env?.timestamp}
</span>
</Label>
</SplitItem>
</Split>
</StackItem>
<StackItem className="co-truncate co-nowrap">
<ExternalLink
additionalClassName="odc-gitops-details__env-section__url"
href={env?.cluster}
text={env?.cluster}
/>
</StackItem>
<StackItem>
<ResourceLink kind="Project" name={env.environment} />
</StackItem>
</Stack>
</CardTitle>
</Card>
</StackItem>
<GitOpsServiceDetailsSection services={env?.services} />
</Stack>
))}
{_.map(
envs,
(env) =>
env && (
<Stack className="odc-gitops-details__env-section" key={env.environment}>
<StackItem>
<Card>
<CardTitle className="odc-gitops-details__env-section__header">
<Stack hasGutter>
<StackItem>
<Split style={{ alignItems: 'center' }}>
<SplitItem className="odc-gitops-details__env-section__title" isFilled>
{env.environment}
</SplitItem>
<SplitItem>
<Label
className="odc-gitops-details__env-section__timestamp"
color="grey"
>
<span style={{ color: 'var(--pf-global--palette--black-600)' }}>
{env.timestamp}
</span>
</Label>
</SplitItem>
</Split>
</StackItem>
<StackItem className="co-truncate co-nowrap">
{env.cluster ? (
<ExternalLink
additionalClassName="odc-gitops-details__env-section__url"
href={env.cluster}
text={env.cluster}
/>
) : (
<div className="odc-gitops-details__env-section__url-empty-state">
Cluster URL not available
</div>
)}
</StackItem>
<StackItem>
<ResourceLink kind="Project" name={env.environment} />
</StackItem>
</Stack>
</CardTitle>
</Card>
</StackItem>
<GitOpsServiceDetailsSection services={env.services} />
</Stack>
),
)}
</div>
);
};
Expand Down
50 changes: 0 additions & 50 deletions frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsController.tsx
View file

This file was deleted.

82 changes: 46 additions & 36 deletions frontend/packages/dev-console/src/components/gitops/details/GitOpsServiceDetailsSection.tsx
View file
Expand Up @@ -20,42 +20,52 @@ interface GitOpsServiceDetailsSectionProps {
const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> = ({ services }) => {
return (
<>
{_.map(services, (service) => (
<StackItem className="odc-gitops-service" key={service.name}>
<Card>
<CardTitle className="odc-gitops-service__title co-nowrap">
{service?.workloadKind ? (
<ResourceLink kind={service?.workloadKind} name={service.name} linkTo={false} />
) : (
<span className="co-resource-item__resource-name">{service.name}</span>
)}
</CardTitle>
<CardBody>
<Label className="co-nowrap" style={{ fontSize: '12px' }} color="cyan">
{service?.image}
</Label>
<Split className="odc-gitops-service__details">
<SplitItem>
<div className="odc-gitops-service__pod">{service?.podRing}</div>
</SplitItem>
<SplitItem className="odc-gitops-service__pr" isFilled>
{service?.commitDetails}
</SplitItem>
</Split>
<ExternalLink
additionalClassName="odc-gitops-service__url co-truncate co-nowrap"
href={service?.source?.url}
text={
<>
{service?.source?.icon}&nbsp;
{service?.source?.url}
</>
}
/>
</CardBody>
</Card>
</StackItem>
))}
{_.map(
services,
(service) =>
service && (
<StackItem className="odc-gitops-service" key={service.name}>
<Card>
<CardTitle className="odc-gitops-service__title co-nowrap">
{service.workloadKind ? (
<ResourceLink kind={service.workloadKind} name={service.name} linkTo={false} />
) : (
<span className="co-resource-item__resource-name">{service.name}</span>
)}
</CardTitle>
<CardBody>
<Label className="co-nowrap" style={{ fontSize: '12px' }} color="cyan">
{service.image || <div>Image not available</div>}
</Label>
<Split className="odc-gitops-service__details">
<SplitItem>
<div className="odc-gitops-service__pod">{service.podRing}</div>
</SplitItem>
<SplitItem className="odc-gitops-service__pr" isFilled>
{service.commitDetails}
</SplitItem>
</Split>
{service.source?.url ? (
<ExternalLink
additionalClassName="odc-gitops-service__url co-truncate co-nowrap"
href={service.source?.url}
text={
<>
{service.source?.icon}&nbsp;
{service.source?.url}
</>
}
/>
) : (
<div className="odc-gitops-service__details">
Service source URL not available
</div>
)}
</CardBody>
</Card>
</StackItem>
),
)}
</>
);
};
Expand Down

0 comments on commit d19c74c

Please sign in to comment.