/* * Copyright 2022 The Backstage Authors * * 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 { useState } from 'react'; import { Content, ContentHeader, Progress, ItemCardHeader, } from '@backstage/core-components'; import { useRouteRef, useApi } from '@backstage/core-plugin-api'; import Alert from '@material-ui/lab/Alert'; import useAsync from 'react-use/esm/useAsync'; import { Link as RouterLink } from 'react-router-dom'; import { rootRouteRef } from '../../routes'; import { codesceneApiRef } from '../../api/api'; import { Project, Analysis } from '../../api/types'; import Grid from '@material-ui/core/Grid'; import Card from '@material-ui/core/Card'; import CardActionArea from '@material-ui/core/CardActionArea'; import Input from '@material-ui/core/Input'; import CardContent from '@material-ui/core/CardContent'; import Chip from '@material-ui/core/Chip'; import CardActions from '@material-ui/core/CardActions'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(() => ({ overflowXScroll: { overflowX: 'scroll', }, })); function matchFilter(filter?: string): (entry: Project) => boolean { const terms = filter ?.toLocaleLowerCase('en-US') .split(/\s/) .map(e => e.trim()) .filter(Boolean); if (!terms?.length) { return () => true; } return entry => { const text = `${entry.name} ${entry.description || ''}`.toLocaleLowerCase( 'en-US', ); return terms.every(term => text.includes(term)); }; } function topLanguages(analysis: Analysis, coerceAtMost: number): string[] { return analysis.file_summary .sort((a, b) => b.code - a.code) .map(fileSummary => fileSummary.language) .slice(0, coerceAtMost); } type ProjectAndAnalysis = { project: Project; analysis?: Analysis; }; export const ProjectsComponent = () => { const routeRef = useRouteRef(rootRouteRef); const codesceneApi = useApi(codesceneApiRef); const classes = useStyles(); const [searchText, setSearchText] = useState(''); const { value: projectsWithAnalyses, loading, error, } = useAsync(async (): Promise> => { const projects = (await codesceneApi.fetchProjects()).projects; const promises = projects.map(project => codesceneApi.fetchLatestAnalysis(project.id), ); // analyses associates project IDs with their latests analysis const analyses: Record = await Promise.allSettled( promises, ).then(results => { return results .filter(result => result.status === 'fulfilled') .map(result => result as PromiseFulfilledResult) .map(result => result.value) .reduce( (acc, analysis) => ({ ...acc, [analysis.project_id]: analysis }), {}, ); }); return projects.reduce( (acc, project) => ({ ...acc, [project.id]: { project: project, analysis: analyses[project.id], }, }), {}, ); }, []); if (loading) { return ; } else if (error) { return {error.message}; } else if ( !projectsWithAnalyses || Object.keys(projectsWithAnalyses).length === 0 ) { return No projects found!; } const projects = Object.values(projectsWithAnalyses) .map(p => p.project) .sort((a, b) => a.name.localeCompare(b.name)); const cards = projects.filter(matchFilter(searchText)).map(project => { const analysis = projectsWithAnalyses[project.id].analysis; const subtitle = analysis ? `Last analysis: ${analysis.readable_analysis_time} · Score: ${analysis.high_level_metrics.current_score} · Active authors: ${analysis.high_level_metrics.active_developers}` : undefined; const chips = analysis ? topLanguages(analysis, 3).map(lang => ( )) : undefined; return ( {subtitle} {chips} ); }); return ( setSearchText(e.target.value)} /> {cards} ); };