From b4e8a798b6284c9f5ced09fa0c516de789d9472e Mon Sep 17 00:00:00 2001 From: Nikita Nek Dudnik Date: Thu, 23 Jul 2020 10:15:14 +0200 Subject: [PATCH] fix: PR comments --- app-config.yaml | 4 +- .../WorkflowRunDetailsPage.tsx | 211 +++++++++++------- .../WorkflowRunStatusIcon.tsx | 36 +++ .../index.ts | 2 +- .../WorkflowRunStatusIndicator.tsx | 79 ------- .../WorkflowRunsTable/WorkflowRunsTable.tsx | 33 +-- 6 files changed, 173 insertions(+), 192 deletions(-) create mode 100644 plugins/github-actions/src/components/WorkflowRunStatusIcon/WorkflowRunStatusIcon.tsx rename plugins/github-actions/src/components/{WorkflowRunStatusIndicator => WorkflowRunStatusIcon}/index.ts (88%) delete mode 100644 plugins/github-actions/src/components/WorkflowRunStatusIndicator/WorkflowRunStatusIndicator.tsx diff --git a/app-config.yaml b/app-config.yaml index 7dacdc56ac..9440c57854 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -21,8 +21,8 @@ organization: name: Spotify github-actions: - owner: CircleCITest3 - repo: try-ssr + owner: spotify + repo: backstage techdocs: storageUrl: https://techdocs-mock-sites.storage.googleapis.com diff --git a/plugins/github-actions/src/components/WorkflowRunDetailsPage/WorkflowRunDetailsPage.tsx b/plugins/github-actions/src/components/WorkflowRunDetailsPage/WorkflowRunDetailsPage.tsx index 0bf72c77fd..6bda0f50b8 100644 --- a/plugins/github-actions/src/components/WorkflowRunDetailsPage/WorkflowRunDetailsPage.tsx +++ b/plugins/github-actions/src/components/WorkflowRunDetailsPage/WorkflowRunDetailsPage.tsx @@ -30,20 +30,30 @@ import { ExpansionPanelDetails, ExpansionPanel, ExpansionPanelSummary, - ListItem, - List, ListItemText, CircularProgress, + Grid, } from '@material-ui/core'; import moment from 'moment'; import React from 'react'; -import { Link, useApi, configApiRef } from '@backstage/core'; +import { + Link, + useApi, + configApiRef, + Page, + Header, + HeaderLabel, + Content, + ContentHeader, + SupportButton, + pageTheme, +} from '@backstage/core'; import { Job, Step, Jobs } from '../types'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { WorkflowRunStatusIndicator } from '../WorkflowRunStatusIndicator'; import { useWorkflowRunsDetails } from './useWorkflowRunsDetails'; import { useWorkflowRunJobs } from './useWorkflowRunJobs'; +import { WorkflowRunStatusIcon } from '../WorkflowRunStatusIcon/WorkflowRunStatusIcon'; const useStyles = makeStyles(theme => ({ root: { @@ -92,12 +102,18 @@ const getElapsedTime = (start: string, end: string) => { const StepView = ({ step }: { step: Step }) => { return ( - - - + + + + + + + {step.status} + + ); }; @@ -121,11 +137,13 @@ const JobListItem = ({ job, className }: { job: Job; className: string }) => { - - {job.steps.map((step: Step) => ( - - ))} - + + + {job.steps.map((step: Step) => ( + + ))} +
+ ); @@ -154,75 +172,98 @@ export const WorkflowRunDetailsPage = () => { } return ( -
- - - - < - - - Workflow Run Details - - - - - - - Branch - - {details.value?.head_branch} - - - - Message - - {details.value?.head_commit.message} - - - - Commit ID - - {details.value?.head_commit.id} - - - - Status - - - - - - - - Author - - {`${details.value?.head_commit.author.name} (${details.value?.head_commit.author.email})`} - - - - Links - - - {details.value?.html_url && ( - - )} - - - - - Jobs - {jobs.loading ? ( - - ) : ( - - )} - - - -
- -
+ +
+ + +
+ + + + This plugin allows you to view and interact with your builds within + the GitHub Actions environment. + + + + +
+ + + + < Back + + + + + + + + + Branch + + {details.value?.head_branch} + + + + Message + + + {details.value?.head_commit.message} + + + + + Commit ID + + {details.value?.head_commit.id} + + + + Status + + + {' '} + {details.value?.status.toUpperCase()} + + + + + Author + + {`${details.value?.head_commit.author.name} (${details.value?.head_commit.author.email})`} + + + + Links + + + {details.value?.html_url && ( + + )} + + + + + Jobs + {jobs.loading ? ( + + ) : ( + + )} + + + +
+ +
+ + + + ); }; diff --git a/plugins/github-actions/src/components/WorkflowRunStatusIcon/WorkflowRunStatusIcon.tsx b/plugins/github-actions/src/components/WorkflowRunStatusIcon/WorkflowRunStatusIcon.tsx new file mode 100644 index 0000000000..645224ad24 --- /dev/null +++ b/plugins/github-actions/src/components/WorkflowRunStatusIcon/WorkflowRunStatusIcon.tsx @@ -0,0 +1,36 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { StatusPending, StatusRunning, StatusOK } from '@backstage/core'; +import React from 'react'; + +export const WorkflowRunStatusIcon = ({ + status, +}: { + status: string | undefined; +}) => { + if (status === undefined) return null; + switch (status.toLowerCase()) { + case 'queued': + return ; + case 'in_progress': + return ; + case 'completed': + return ; + default: + return ; + } +}; diff --git a/plugins/github-actions/src/components/WorkflowRunStatusIndicator/index.ts b/plugins/github-actions/src/components/WorkflowRunStatusIcon/index.ts similarity index 88% rename from plugins/github-actions/src/components/WorkflowRunStatusIndicator/index.ts rename to plugins/github-actions/src/components/WorkflowRunStatusIcon/index.ts index 463970a30c..05fff3f46d 100644 --- a/plugins/github-actions/src/components/WorkflowRunStatusIndicator/index.ts +++ b/plugins/github-actions/src/components/WorkflowRunStatusIcon/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { WorkflowRunStatusIndicator } from './WorkflowRunStatusIndicator'; +export { WorkflowRunStatusIcon } from './WorkflowRunStatusIcon'; diff --git a/plugins/github-actions/src/components/WorkflowRunStatusIndicator/WorkflowRunStatusIndicator.tsx b/plugins/github-actions/src/components/WorkflowRunStatusIndicator/WorkflowRunStatusIndicator.tsx deleted file mode 100644 index a22c60cdcb..0000000000 --- a/plugins/github-actions/src/components/WorkflowRunStatusIndicator/WorkflowRunStatusIndicator.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { IconComponent } from '@backstage/core'; -import { makeStyles, Theme, Typography } from '@material-ui/core'; -import ProgressIcon from '@material-ui/icons/Autorenew'; -import SuccessIcon from '@material-ui/icons/CheckCircle'; -import UnknownIcon from '@material-ui/icons/Help'; -import React from 'react'; - -type Props = { - status?: string; -}; - -type StatusStyle = { - icon: IconComponent; - color: string; -}; - -const styles: { [key: string]: StatusStyle } = { - unknown: { - icon: UnknownIcon, - color: '#f49b20', - }, - completed: { - icon: SuccessIcon, - color: '#1db855', - }, - queued: { - icon: UnknownIcon, - color: '#5BC0DE', - }, - in_progress: { - icon: ProgressIcon, - color: '#BEBEBE', - }, -}; - -const getIconStyle = (status?: string): StatusStyle => { - return styles[status ?? 'unknown'] ?? styles.unknown; -}; - -const useStyles = makeStyles({ - icon: style => ({ - color: style.color, - }), -}); - -export const WorkflowRunStatusIndicator = ({ status }: Props) => { - const style = getIconStyle(status); - const classes = useStyles(style); - const Icon = style.icon; - - return ( - -  {`${status}`} - - ); -}; diff --git a/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx b/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx index a76f0002f9..4c54d12121 100644 --- a/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx +++ b/plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx @@ -18,14 +18,9 @@ import { Link, Typography, Box, IconButton } from '@material-ui/core'; import RetryIcon from '@material-ui/icons/Replay'; import GitHubIcon from '@material-ui/icons/GitHub'; import { Link as RouterLink } from 'react-router-dom'; -import { - StatusOK, - StatusPending, - StatusRunning, - Table, - TableColumn, -} from '@backstage/core'; +import { Table, TableColumn } from '@backstage/core'; import { useWorkflowRuns } from './useWorkflowRuns'; +import { WorkflowRunStatusIcon } from '../WorkflowRunStatusIcon'; export type WorkflowRun = { id: string; @@ -42,20 +37,6 @@ export type WorkflowRun = { onReRunClick: () => void; }; -// retried, canceled, infrastructure_fail, timedout, not_run, running, failed, queued, scheduled, not_running, no_tests, fixed, success -const getStatusComponent = (status: string | undefined = '') => { - switch (status.toLowerCase()) { - case 'queued': - return ; - case 'in_progress': - return ; - case 'completed': - return ; - default: - return ; - } -}; - const generatedColumns: TableColumn[] = [ { title: 'ID', @@ -79,19 +60,21 @@ const generatedColumns: TableColumn[] = [ { title: 'Source', render: (row: Partial) => ( - <> +

{row.source?.branchName}

{row.source?.commit.hash}

- + ), }, { title: 'Status', render: (row: Partial) => ( - {getStatusComponent(row.status)} + - {row.status} + + {row.status} + ), },