Skip to content

Commit

Permalink
Merge pull request #68 from overture-stack/rc/0.6.0
Browse files Browse the repository at this point in the history 
🔖 Rc/0.6.0
  • Loading branch information
@anncatton
anncatton authored Mar 4, 2021
2 parents 2e7eb31 + 303fa7f commit 0758b27
Show file tree
Hide file tree
Showing 9 changed files with 403 additions and 33 deletions.
53 changes: 53 additions & 0 deletions components/ErrorContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { css } from '@emotion/core';
import { Error } from './theme/icons';

const ErrorContainer = ({ children, title }: { children: React.ReactNode; title: string }) => (
<div
css={css`
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
`}
>
<div
css={(theme) =>
css`
padding: 1rem 2rem;
border: 1px solid ${theme.colors.error_2};
border-radius: 5px;
${theme.shadow.default};
${theme.typography.subheading};
font-weight: normal;
line-height: 26px;
max-width: 600px;
background-color: ${theme.colors.error_1};
color: ${theme.colors.accent_dark};
`
}
>
<h2
css={css`
display: flex;
align-items: center;
margin: 0.5rem 0 1rem;
font-size: 24px;
line-height: 38px;
`}
>
<Error
height={27}
width={26}
style={css`
padding-right: 15px;
`}
/>{' '}
{title}
</h2>
{children}
</div>
</div>
);

export default ErrorContainer;
202 changes: 202 additions & 0 deletions components/pages/repository/getConfigError.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
import { ReactNode } from 'react';
import { css } from '@emotion/core';

import { Checkmark, Warning } from '../../theme/icons';
import theme from '../../theme/';
import StyledLink from '../../Link';

import { getConfig } from '../../../global/config';
import { Project } from './';

const ArrangerAdminUILink = () => {
const { NEXT_PUBLIC_ARRANGER_API } = getConfig();
const splitApi: string[] = NEXT_PUBLIC_ARRANGER_API.split('//');
const adminUiUrl: string = [splitApi[0], '//ui.', splitApi[1]].join('');
return (
<StyledLink href={adminUiUrl} target="_blank">
Arranger Admin UI
</StyledLink>
);
};

const ListItem = ({
Icon,
value,
fieldName,
}: {
Icon?: ReactNode;
value: string;
fieldName: string;
}) => (
<li
css={(theme) =>
css`
display: flex;
align-items: center;
${value === 'Missing' &&
css`
color: ${theme.colors.error_dark};
`}
`
}
>
{Icon || <Checkmark height={16} width={16} fill={theme.colors.primary} />}
<span
css={css`
padding-left: 6px;
`}
>
{fieldName}:{' '}
<span
css={css`
font-weight: bold;
`}
>
{value}
</span>
</span>
</li>
);

const WarningListItem = ({ fieldName }: { fieldName: string }) => (
<ListItem Icon={<Warning height={16} width={16} />} fieldName={fieldName} value={'Missing'} />
);

const getConfigError = ({
availableProjects,
projectId,
index,
graphqlField,
}: {
availableProjects: Project[];
projectId: string;
index: string;
graphqlField: string;
}) => {
if (!(projectId && index && graphqlField)) {
return (
<span>
One or more of the following values required by the DMS portal do not exist. Please make
sure the values are specified in the DMS{' '}
<span
css={css`
font-weight: bold;
`}
>
config.yaml
</span>{' '}
file during installation and have been used to create your project in the{' '}
<ArrangerAdminUILink />.
<ul
css={css`
list-style-type: none;
padding-left: 0px;
`}
>
{[
{ field: 'Project ID', value: projectId },
{ field: 'Alias name', value: graphqlField },
{ field: 'Elasticsearch index', value: index },
].map(({ field, value }) => {
return value ? (
<ListItem key={`${field}-${value}`} fieldName={field} value={value} />
) : (
<WarningListItem key={`${field}-${value}`} fieldName={field} />
);
})}
</ul>
</span>
);
}

if (!availableProjects.filter((project) => project.active).length) {
return (
<span>
No active projects for the DMS portal exist. Please make sure the project specified in the
DMS{' '}
<span
css={css`
font-weight: bold;
`}
>
config.yaml
</span>{' '}
file during installation has been created in the <ArrangerAdminUILink />.
</span>
);
}

const foundProject =
availableProjects.length && availableProjects.find((project) => project.id === projectId);

if (!foundProject) {
return (
<span>
The project ID:{' '}
<span
css={css`
font-weight: bold;
`}
>
"{projectId}"
</span>{' '}
configured for the DMS portal does not match any existing project. Please make sure the
project ID specified in the DMS{' '}
<span
css={css`
font-weight: bold;
`}
>
config.yaml
</span>{' '}
file during installation has been created in the <ArrangerAdminUILink />.
</span>
);
}

const aliasFromList = foundProject.indices.find((i) => i.id.match(projectId))?.graphqlField;
const matchesConfiguredAlias = graphqlField === aliasFromList;

if (!matchesConfiguredAlias) {
return (
<div>
The Elasticsearch alias name (graphQL field):{' '}
<span
css={css`
font-weight: bold;
`}
>
"{aliasFromList}"
</span>{' '}
required by the DMS portal for project ID:{' '}
<span
css={css`
font-weight: bold;
`}
>
"{projectId}"
</span>{' '}
does not match your configured alias name:{' '}
<span
css={css`
font-weight: bold;
`}
>
"{graphqlField}"
</span>
. Please make sure the value specified in the DMS{' '}
<span
css={css`
font-weight: bold;
`}
>
config.yaml
</span>{' '}
file during installation has been used to create your project in the <ArrangerAdminUILink />
.
</div>
);
}
};

export default getConfigError;
89 changes: 58 additions & 31 deletions components/pages/repository/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import dynamic from 'next/dynamic';
import urlJoin from 'url-join';

import PageContent from './PageContent';
import PageLayout from '../../PageLayout';

import { RepoFiltersType } from './sqonTypes';
import { getConfig } from '../../../global/config';
import { css } from '@emotion/core';
import createArrangerFetcher from '../../utils/arrangerFetcher';
import { useEffect, useState } from 'react';
import ErrorContainer from '../../ErrorContainer';
import getConfigError from './getConfigError';

const Arranger = dynamic(
() => import('@arranger/components/dist/Arranger').then((comp) => comp.Arranger),
Expand Down Expand Up @@ -34,47 +37,71 @@ export interface PageContentProps {
fetchData?: (projectId: string) => Promise<any>;
}

export type Project = {
id: string;
active: boolean;
indices: [{ id: string; esIndex: string; graphqlField: string }];
};

const arrangerFetcher = createArrangerFetcher({});

const projectsQuery = `
query {
projects {
id
active
indices {
id
esIndex
graphqlField
}
}
}
`;

const RepositoryPage = () => {
const {
NEXT_PUBLIC_ARRANGER_PROJECT_ID,
NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD,
NEXT_PUBLIC_ARRANGER_INDEX,
} = getConfig();

const [availableProjects, setAvailableProjects] = useState<Project[]>([]);
useEffect(() => {
const { NEXT_PUBLIC_ARRANGER_API } = getConfig();
fetch(urlJoin(NEXT_PUBLIC_ARRANGER_API, 'admin/graphql'), {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
variables: {},
query: projectsQuery,
}),
})
.then((res) => {
if (res.status !== 200) {
throw new Error('Could not retrieve available projects from Arranger server!');
}
return res.json();
})
.then(({ data: { projects } }: { data: { projects: Project[] } }) => {
setAvailableProjects(projects);
})
.catch((err) => {
console.warn(err);
});
}, []);

const ConfigError = getConfigError({
availableProjects,
projectId: NEXT_PUBLIC_ARRANGER_PROJECT_ID,
index: NEXT_PUBLIC_ARRANGER_INDEX,
graphqlField: NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD,
});

return (
<PageLayout>
{/* TODO: arranger config error handling tbd */}
{!(
NEXT_PUBLIC_ARRANGER_PROJECT_ID &&
NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD &&
NEXT_PUBLIC_ARRANGER_INDEX
) ? (
<div
css={css`
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
`}
>
<div
css={(theme) =>
css`
${theme.typography.subheading}
`
}
>
Arranger is missing configuration values. Please check your ".env" file.
<ul>
<li>Project ID: {NEXT_PUBLIC_ARRANGER_PROJECT_ID || 'missing'}</li>
<li>GraphQL Field: {NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD || 'missing'}</li>
<li>Index: {NEXT_PUBLIC_ARRANGER_INDEX || 'missing'}</li>
</ul>
</div>
</div>
{ConfigError ? (
<ErrorContainer title={'DMS Configuration Error'}>{ConfigError}</ErrorContainer>
) : (
<Arranger
api={arrangerFetcher}
Expand Down
2 changes: 2 additions & 0 deletions components/theme/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ const accent3 = {
const error = {
error: '#c86370',
error_dark: '#ad404e',
error_1: '#f9eff0',
error_2: '#e9c1c6',
};

const warning = {
Expand Down
Loading

0 comments on commit 0758b27

Please sign in to comment.