From a9d460dd1cd3e1006dc4b9e06e3016e61b5774bf Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Fri, 8 Oct 2021 08:20:49 -0500 Subject: [PATCH] Further refactoring based on feedback Signed-off-by: Andre Wanlin --- plugins/azure-devops/README.md | 6 +++--- plugins/azure-devops/package.json | 2 +- plugins/azure-devops/src/api/AzureDevOpsClient.ts | 8 ++++---- .../src/components/BuildTable/BuildTable.tsx | 9 ++++++--- .../EntityPageAzurePipelines.tsx} | 2 +- .../index.ts | 2 +- plugins/azure-devops/src/components/Router.tsx | 4 ++-- plugins/azure-devops/src/plugin.ts | 2 +- 8 files changed, 19 insertions(+), 16 deletions(-) rename plugins/azure-devops/src/components/{EntityPageAzureDevOps/EntityPageAzureDevOps.tsx => EntityPageAzurePipelines/EntityPageAzurePipelines.tsx} (94%) rename plugins/azure-devops/src/components/{EntityPageAzureDevOps => EntityPageAzurePipelines}/index.ts (89%) diff --git a/plugins/azure-devops/README.md b/plugins/azure-devops/README.md index 97a415d8d0..55d5ea5f91 100644 --- a/plugins/azure-devops/README.md +++ b/plugins/azure-devops/README.md @@ -81,12 +81,12 @@ To get the frontend working you'll need to do the following two steps: yarn add @backstage/plugin-azure-devops ``` -2. Second we need to add the `EntityAzureDevOpsContent` extension to the entity page in your app: +2. Second we need to add the `EntityAzurePipelinesContent` extension to the entity page in your app: ```tsx // In packages/app/src/components/catalog/EntityPage.tsx import { - EntityAzureDevOpsContent, + EntityAzurePipelinesContent, isAzureDevOpsAvailable, } from '@backstage/plugin-azure-devops'; @@ -95,7 +95,7 @@ const cicdContent = ( // ... - + // ... diff --git a/plugins/azure-devops/package.json b/plugins/azure-devops/package.json index 16e8f35991..16008090b7 100644 --- a/plugins/azure-devops/package.json +++ b/plugins/azure-devops/package.json @@ -35,7 +35,7 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "azure-devops-node-api": "^11.0.1", - "moment": "^2.29.1", + "luxon": "^2.0.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router": "6.0.0-beta.0", diff --git a/plugins/azure-devops/src/api/AzureDevOpsClient.ts b/plugins/azure-devops/src/api/AzureDevOpsClient.ts index 32a563f429..d82dfbe09e 100644 --- a/plugins/azure-devops/src/api/AzureDevOpsClient.ts +++ b/plugins/azure-devops/src/api/AzureDevOpsClient.ts @@ -36,15 +36,15 @@ export class AzureDevOpsClient implements AzureDevOpsApi { repoName: string, top: number, ): Promise { - return await this.get(`/repo-builds/${projectName}/${repoName}?top=${top}`); + return await this.get(`repo-builds/${projectName}/${repoName}?top=${top}`); } private async get(path: string): Promise { - const baseUrl = await this.discoveryApi.getBaseUrl('azure-devops'); - const url = `${baseUrl}/${path}`; + const baseUrl = `${await this.discoveryApi.getBaseUrl('azure-devops')}/`; + const url = new URL(path, baseUrl); const idToken = await this.identityApi.getIdToken(); - const response = await fetch(url, { + const response = await fetch(url.toString(), { headers: idToken ? { Authorization: `Bearer ${idToken}` } : {}, }); diff --git a/plugins/azure-devops/src/components/BuildTable/BuildTable.tsx b/plugins/azure-devops/src/components/BuildTable/BuildTable.tsx index e853662fbf..7c3e09c66c 100644 --- a/plugins/azure-devops/src/components/BuildTable/BuildTable.tsx +++ b/plugins/azure-devops/src/components/BuildTable/BuildTable.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import moment from 'moment'; +import { DateTime } from 'luxon'; import { Table, TableColumn, @@ -56,7 +56,7 @@ const columns: TableColumn[] = [ title: 'ID', field: 'id', highlight: false, - width: '80px', + width: '100px', }, { title: 'Build', @@ -99,7 +99,10 @@ const columns: TableColumn[] = [ { title: 'Date', field: 'queueTime', - render: (row: Partial) => moment(row.queueTime).fromNow(), + render: (row: Partial) => + DateTime.fromISO( + row.queueTime ? row.queueTime.toString() : new Date().toString(), + ).toRelative(), }, ]; diff --git a/plugins/azure-devops/src/components/EntityPageAzureDevOps/EntityPageAzureDevOps.tsx b/plugins/azure-devops/src/components/EntityPageAzurePipelines/EntityPageAzurePipelines.tsx similarity index 94% rename from plugins/azure-devops/src/components/EntityPageAzureDevOps/EntityPageAzureDevOps.tsx rename to plugins/azure-devops/src/components/EntityPageAzurePipelines/EntityPageAzurePipelines.tsx index 8e102e647d..5d53df928c 100644 --- a/plugins/azure-devops/src/components/EntityPageAzureDevOps/EntityPageAzureDevOps.tsx +++ b/plugins/azure-devops/src/components/EntityPageAzurePipelines/EntityPageAzurePipelines.tsx @@ -25,7 +25,7 @@ type Props = { entity?: Entity; }; -export const EntityPageAzureDevOps = (_props: Props) => { +export const EntityPageAzurePipelines = (_props: Props) => { const { entity } = useEntity(); const { items, loading, error } = useRepoBuilds(entity); diff --git a/plugins/azure-devops/src/components/EntityPageAzureDevOps/index.ts b/plugins/azure-devops/src/components/EntityPageAzurePipelines/index.ts similarity index 89% rename from plugins/azure-devops/src/components/EntityPageAzureDevOps/index.ts rename to plugins/azure-devops/src/components/EntityPageAzurePipelines/index.ts index 89ee4f199b..c907c61b2c 100644 --- a/plugins/azure-devops/src/components/EntityPageAzureDevOps/index.ts +++ b/plugins/azure-devops/src/components/EntityPageAzurePipelines/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { EntityPageAzureDevOps } from './EntityPageAzureDevOps'; +export { EntityPageAzurePipelines } from './EntityPageAzurePipelines'; diff --git a/plugins/azure-devops/src/components/Router.tsx b/plugins/azure-devops/src/components/Router.tsx index 74cf0439f8..81b6d89a25 100644 --- a/plugins/azure-devops/src/components/Router.tsx +++ b/plugins/azure-devops/src/components/Router.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { Routes, Route } from 'react-router'; import { azureDevOpsRouteRef } from '../routes'; -import { EntityPageAzureDevOps } from './EntityPageAzureDevOps'; +import { EntityPageAzurePipelines } from './EntityPageAzurePipelines'; import { AZURE_DEVOPS_ANNOTATION } from '../constants'; import { Entity } from '@backstage/catalog-model'; import { useEntity } from '@backstage/plugin-catalog-react'; @@ -41,7 +41,7 @@ export const Router = (_props: Props) => { } + element={} /> ); diff --git a/plugins/azure-devops/src/plugin.ts b/plugins/azure-devops/src/plugin.ts index 9ec5ebbb09..1cf6e680d0 100644 --- a/plugins/azure-devops/src/plugin.ts +++ b/plugins/azure-devops/src/plugin.ts @@ -42,7 +42,7 @@ export const azureDevOpsPlugin = createPlugin({ export const EntityAzurePipelinesContent = azureDevOpsPlugin.provide( createRoutableExtension({ - name: 'EntityAzureDevOpsContent', + name: 'EntityAzurePipelinesContent', component: () => import('./components/Router').then(m => m.Router), mountPoint: azureDevOpsRouteRef, }),