Merge pull request #7845 from jeremyguarini/gcp-plugin-ui-updates
UI updates to GCP-projects plugin
This commit is contained in:
Patrik Oldsberg
@@ -28,6 +28,10 @@ import {
|
||||
StructuredMetadataTable,
|
||||
SupportButton,
|
||||
} from '@backstage/core-components';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
|
||||
import { useRouteRef } from '@backstage/core-plugin-api';
|
||||
import { rootRouteRef } from '../../routes';
|
||||
|
||||
export const Project = () => {
|
||||
const [projectName, setProjectName] = useState('');
|
||||
@@ -79,18 +83,20 @@ export const Project = () => {
|
||||
</SimpleStepperStep>
|
||||
</SimpleStepper>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
variant="text"
|
||||
data-testid="cancel-button"
|
||||
color="primary"
|
||||
href="/gcp-projects"
|
||||
to="/gcp-projects"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
component={RouterLink}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={disabled}
|
||||
href={`newProject?projectName=${encodeURIComponent(
|
||||
to={`newProject?projectName=${encodeURIComponent(
|
||||
projectName,
|
||||
)},projectId=${encodeURIComponent(projectId)}`}
|
||||
>
|
||||
@@ -110,18 +116,21 @@ const labels = (
|
||||
</>
|
||||
);
|
||||
|
||||
export const NewProjectPage = () => (
|
||||
<Page themeId="service">
|
||||
<Header title="New GCP Project" type="tool">
|
||||
{labels}
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="">
|
||||
<SupportButton>
|
||||
This plugin allows you to view and interact with your gcp projects.
|
||||
</SupportButton>
|
||||
</ContentHeader>
|
||||
<Project />
|
||||
</Content>
|
||||
</Page>
|
||||
);
|
||||
export const NewProjectPage = () => {
|
||||
const docsRootLink = useRouteRef(rootRouteRef)();
|
||||
return (
|
||||
<Page themeId="tool">
|
||||
<Header title="New GCP Project" type="GCP" typeLink={docsRootLink}>
|
||||
{labels}
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="">
|
||||
<SupportButton>
|
||||
This plugin allows you to view and interact with your gcp projects.
|
||||
</SupportButton>
|
||||
</ContentHeader>
|
||||
<Project />
|
||||
</Content>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -40,7 +40,8 @@ import {
|
||||
WarningPanel,
|
||||
} from '@backstage/core-components';
|
||||
|
||||
import { useApi } from '@backstage/core-plugin-api';
|
||||
import { useApi, useRouteRef } from '@backstage/core-plugin-api';
|
||||
import { rootRouteRef } from '../../routes';
|
||||
|
||||
const useStyles = makeStyles<Theme>(theme => ({
|
||||
root: {
|
||||
@@ -81,6 +82,8 @@ const DetailsPage = () => {
|
||||
);
|
||||
}
|
||||
|
||||
const cloud_home_url = 'https://console.cloud.google.com';
|
||||
|
||||
return (
|
||||
<Table component={Paper} className={classes.table}>
|
||||
<Table>
|
||||
@@ -127,12 +130,24 @@ const DetailsPage = () => {
|
||||
>
|
||||
{details?.name && (
|
||||
<Button>
|
||||
<a href={details.name}>GCP</a>
|
||||
<a
|
||||
href={`${cloud_home_url}/home/dashboard?project=${details.name}&supportedpurview=project`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
GCP
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
{details?.name && (
|
||||
<Button>
|
||||
<a href={details.name}>Logs</a>
|
||||
<a
|
||||
href={`${cloud_home_url}/logs/query?project=${details.name}&supportedpurview=project`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Logs
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
@@ -151,16 +166,20 @@ const labels = (
|
||||
</>
|
||||
);
|
||||
|
||||
export const ProjectDetailsPage = () => (
|
||||
<Page themeId="service">
|
||||
<Header title="GCP Project Details" type="other">
|
||||
{labels}
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="">
|
||||
<SupportButton>Support Button</SupportButton>
|
||||
</ContentHeader>
|
||||
<DetailsPage />
|
||||
</Content>
|
||||
</Page>
|
||||
);
|
||||
export const ProjectDetailsPage = () => {
|
||||
const docsRootLink = useRouteRef(rootRouteRef)();
|
||||
|
||||
return (
|
||||
<Page themeId="service">
|
||||
<Header title="GCP Project Details" type="GCP" typeLink={docsRootLink}>
|
||||
{labels}
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="">
|
||||
<SupportButton>Support Button</SupportButton>
|
||||
</ContentHeader>
|
||||
<DetailsPage />
|
||||
</Content>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -15,19 +15,9 @@
|
||||
*/
|
||||
|
||||
// NEEDS WORK
|
||||
import {
|
||||
Button,
|
||||
LinearProgress,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
import { Button, LinearProgress, Tooltip, Typography } from '@material-ui/core';
|
||||
import React from 'react';
|
||||
|
||||
import { useAsync } from 'react-use';
|
||||
import { gcpApiRef, Project } from '../../api';
|
||||
|
||||
@@ -38,12 +28,15 @@ import {
|
||||
HeaderLabel,
|
||||
Link,
|
||||
Page,
|
||||
Table,
|
||||
SupportButton,
|
||||
WarningPanel,
|
||||
} from '@backstage/core-components';
|
||||
|
||||
import { useApi } from '@backstage/core-plugin-api';
|
||||
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
|
||||
const LongText = ({ text, max }: { text: string; max: number }) => {
|
||||
if (text.length < max) {
|
||||
return <span>{text}</span>;
|
||||
@@ -77,60 +70,59 @@ const PageContents = () => {
|
||||
);
|
||||
}
|
||||
|
||||
function renderLink(id: string) {
|
||||
return (
|
||||
<Link to={`project?projectId=${encodeURIComponent(id)}`}>
|
||||
<Typography color="primary">
|
||||
<LongText text={id} max={60} />
|
||||
</Typography>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Table component={Paper}>
|
||||
<Table aria-label="GCP Projects table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Project Number</TableCell>
|
||||
<TableCell>Project ID</TableCell>
|
||||
<TableCell>State</TableCell>
|
||||
<TableCell>Creation Time</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{value?.map((project: Project) => (
|
||||
<TableRow key={project.projectId}>
|
||||
<TableCell>
|
||||
<Typography>
|
||||
<LongText text={project.name} max={30} />
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography>
|
||||
<LongText text={project?.projectNumber || 'Error'} max={30} />
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
to={`project?projectId=${encodeURIComponent(
|
||||
project.projectId,
|
||||
)}`}
|
||||
>
|
||||
<Typography color="primary">
|
||||
<LongText text={project.projectId} max={60} />
|
||||
</Typography>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography>
|
||||
<LongText
|
||||
text={project?.lifecycleState || 'Error'}
|
||||
max={30}
|
||||
/>
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography>
|
||||
<LongText text={project?.createTime || 'Error'} max={30} />
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Table>
|
||||
<div style={{ height: '95%', width: '100%' }}>
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
field: 'name',
|
||||
title: 'Name',
|
||||
defaultSort: 'asc',
|
||||
},
|
||||
{
|
||||
field: 'projectNumber',
|
||||
title: 'Project Number',
|
||||
},
|
||||
{
|
||||
field: 'projectID',
|
||||
title: 'Project ID',
|
||||
render: (rowData: { id: string }) => renderLink(rowData.id),
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
title: 'State',
|
||||
},
|
||||
{
|
||||
field: 'creationTime',
|
||||
title: 'Creation Time',
|
||||
},
|
||||
]}
|
||||
data={
|
||||
value?.map((project: Project) => ({
|
||||
id: project.projectId,
|
||||
name: project.name,
|
||||
projectNumber: project?.projectNumber || 'Error',
|
||||
projectID: project.projectId,
|
||||
state: project?.lifecycleState || 'Error',
|
||||
creationTime: project?.createTime || 'Error',
|
||||
})) || []
|
||||
}
|
||||
options={{
|
||||
pageSize: 5,
|
||||
pageSizeOptions: [5, 10, 25, 50, 100],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -141,7 +133,12 @@ export const ProjectListPage = () => (
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentHeader title="">
|
||||
<Button variant="contained" color="primary" href="/gcp-projects/new">
|
||||
<Button
|
||||
component={RouterLink}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
to="new"
|
||||
>
|
||||
New Project
|
||||
</Button>
|
||||
<SupportButton>All your software catalog entities</SupportButton>
|
||||
|
||||
Reference in New Issue
Block a user