diff --git a/packages/cli/config/eslint.backend.js b/packages/cli/config/eslint.backend.js index 67f0a49b9f..dee79d0ddd 100644 --- a/packages/cli/config/eslint.backend.js +++ b/packages/cli/config/eslint.backend.js @@ -34,12 +34,12 @@ module.exports = { parserOptions: { ecmaVersion: 2018, sourceType: 'module', + lib: ['DOM', 'DOM.Iterable', 'ScriptHost', 'ES2020', 'ESNext.Promise'], }, ignorePatterns: ['.eslintrc.js', '**/dist/**', '**/dist-types/**'], rules: { - // TODO(Rugvip): We need to bump @typescript-eslint to v4 to enable these - '@typescript-eslint/no-shadow': 0, - '@typescript-eslint/no-redeclare': 0, + '@typescript-eslint/no-shadow': 'off', + '@typescript-eslint/no-redeclare': 'off', 'no-console': 0, // Permitted in console programs 'new-cap': ['error', { capIsNew: false }], // Because Express constructs things e.g. like 'const r = express.Router()' @@ -79,6 +79,13 @@ module.exports = { ], }, overrides: [ + { + files: ['**/*.ts?(x)'], + rules: { + '@typescript-eslint/no-unused-vars': 'off', + 'no-undef': 'off', + }, + }, { files: ['*.test.*', 'src/setupTests.*', 'dev/**'], rules: { diff --git a/packages/cli/config/eslint.js b/packages/cli/config/eslint.js index e2a807e42e..94e9dbb199 100644 --- a/packages/cli/config/eslint.js +++ b/packages/cli/config/eslint.js @@ -26,13 +26,17 @@ module.exports = { 'plugin:monorepo/recommended', ], parser: '@typescript-eslint/parser', - plugins: ['import'], + plugins: ['import', 'react'], env: { jest: true, }, parserOptions: { ecmaVersion: 2018, + ecmaFeatures: { + jsx: true, + }, sourceType: 'module', + lib: ['DOM', 'DOM.Iterable', 'ScriptHost', 'ES2020', 'ESNext.Promise'], }, settings: { react: { @@ -41,10 +45,9 @@ module.exports = { }, ignorePatterns: ['.eslintrc.js', '**/dist/**', '**/dist-types/**'], rules: { - // TODO(Rugvip): We need to bump @typescript-eslint to v4 to enable these - '@typescript-eslint/no-shadow': 0, - '@typescript-eslint/no-redeclare': 0, - + '@typescript-eslint/no-shadow': 'off', + '@typescript-eslint/no-redeclare': 'off', + 'no-undef': 'off', 'import/newline-after-import': 'error', 'import/no-duplicates': 'warn', 'import/no-extraneous-dependencies': [ @@ -90,6 +93,8 @@ module.exports = { rules: { // Default to not enforcing prop-types in typescript 'react/prop-types': 0, + '@typescript-eslint/no-unused-vars': 'off', + 'no-undef': 'off', }, }, { diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx index 4868af54bd..916259042c 100644 --- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx +++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx @@ -40,6 +40,21 @@ const nestedListStyle = (theme: Theme) => }, }); +interface StyleProps extends WithStyles { + children?: React.ReactNode; +} +// Sub Components +const StyledList = withStyles( + listStyle, +)(({ classes, children }: StyleProps) => ( + {children} +)); +const StyledNestedList = withStyles( + nestedListStyle, +)(({ classes, children }: StyleProps) => ( + {children} +)); + function renderList(list: Array, nested?: boolean) { const values = list.map((item: any, index: number) => ( {toValue(item)} @@ -100,30 +115,10 @@ function toValue( return {value}; } - -function mapToItems(info: { [key: string]: string }, options: any) { - return Object.keys(info).map(key => ( - - )); -} - -interface StyleProps extends WithStyles { - children?: React.ReactNode; -} -// Sub Components -const StyledList = withStyles( - listStyle, -)(({ classes, children }: StyleProps) => ( - {children} -)); -const StyledNestedList = withStyles( - nestedListStyle, -)(({ classes, children }: StyleProps) => ( - {children} -)); const ItemValue = ({ value, options }: { value: any; options: any }) => ( {toValue(value, options)} ); + const TableItem = ({ title, value, @@ -146,6 +141,12 @@ const TableItem = ({ ); }; +function mapToItems(info: { [key: string]: string }, options: any) { + return Object.keys(info).map(key => ( + + )); +} + type Props = { metadata: { [key: string]: any }; dense?: boolean; diff --git a/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx b/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx index 17900ad8e3..88784dc8b0 100644 --- a/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx @@ -26,6 +26,21 @@ type State = { errorInfo?: ErrorInfo; }; +type EProps = { + error?: Error; + slackChannel?: string; + children?: React.ReactNode; +}; + +const Error = ({ slackChannel }: EProps) => { + return ( +
+ Something went wrong here.{' '} + {slackChannel && <>Please contact {slackChannel} for help.} +
+ ); +}; + export const ErrorBoundary: ComponentClass< Props, State @@ -56,18 +71,3 @@ export const ErrorBoundary: ComponentClass< return ; } }; - -type EProps = { - error?: Error; - slackChannel?: string; - children?: React.ReactNode; -}; - -const Error = ({ slackChannel }: EProps) => { - return ( -
- Something went wrong here.{' '} - {slackChannel && <>Please contact {slackChannel} for help.} -
- ); -}; diff --git a/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx index 18ae5a2d04..32b82eb206 100644 --- a/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx +++ b/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx @@ -99,18 +99,6 @@ const pickClassName = ( return classes.neutral; }; -const BuildsList = ({ build }: { build?: BuildWithSteps }) => ( - - {build && - build.steps && - build.steps.map( - ({ name, actions }: { name: string; actions: BuildStepAction[] }) => ( - - ), - )} - -); - const ActionsList = ({ actions, }: { @@ -132,6 +120,18 @@ const ActionsList = ({ ); }; +const BuildsList = ({ build }: { build?: BuildWithSteps }) => ( + + {build && + build.steps && + build.steps.map( + ({ name, actions }: { name: string; actions: BuildStepAction[] }) => ( + + ), + )} + +); + export const BuildWithStepsPage = () => { const { buildId = '' } = useParams(); const classes = useStyles(); diff --git a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx index 5e6de017d1..b3c5be94ba 100644 --- a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx +++ b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx @@ -31,16 +31,6 @@ type CostInsightsHeaderProps = { alerts: number; }; -export const CostInsightsHeader = (props: CostInsightsHeaderProps) => { - if (!props.hasCostData) { - return ; - } - if (props.alerts) { - return ; - } - return ; -}; - const CostInsightsHeaderNoData = ({ owner, groups, @@ -132,3 +122,13 @@ export const CostInsightsHeaderNoGroups = () => { ); }; + +export const CostInsightsHeader = (props: CostInsightsHeaderProps) => { + if (!props.hasCostData) { + return ; + } + if (props.alerts) { + return ; + } + return ; +}; diff --git a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx index a30b6c5a90..5a25216909 100644 --- a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx +++ b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx @@ -39,6 +39,24 @@ type CostInsightsNavigationProps = { products: Maybe; }; +const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => { + const classes = useStyles(); + const { scrollIntoView } = useScroll(navigation); + return ( + + {icon} + {title}} + /> + + ); +}; + export const CostInsightsNavigation = React.memo( ({ alerts, products }: CostInsightsNavigationProps) => { const classes = useStyles(); @@ -102,21 +120,3 @@ export const CostInsightsNavigation = React.memo( ); }, ); - -const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => { - const classes = useStyles(); - const { scrollIntoView } = useScroll(navigation); - return ( - - {icon} - {title}} - /> - - ); -}; diff --git a/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx b/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx index 8503210c5e..7bcdb1f9bc 100644 --- a/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx +++ b/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx @@ -72,26 +72,6 @@ const useStyles = makeStyles(theme => ({ }, })); -const JobsList = ({ jobs, entity }: { jobs?: Jobs; entity: Entity }) => { - const classes = useStyles(); - return ( - - {jobs && - jobs.total_count > 0 && - jobs.jobs.map(job => ( - - ))} - - ); -}; - const getElapsedTime = (start: string, end: string) => { const diff = moment(moment(end || moment()).diff(moment(start))); const timeElapsed = diff.format('m [minutes] s [seconds]'); @@ -159,6 +139,26 @@ const JobListItem = ({ ); }; +const JobsList = ({ jobs, entity }: { jobs?: Jobs; entity: Entity }) => { + const classes = useStyles(); + return ( + + {jobs && + jobs.total_count > 0 && + jobs.jobs.map(job => ( + + ))} + + ); +}; + export const WorkflowRunDetails = ({ entity }: { entity: Entity }) => { const config = useApi(configApiRef); const projectName = useProjectName(entity); diff --git a/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx index 637cd40d6d..d8f728bb27 100644 --- a/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx +++ b/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx @@ -47,12 +47,6 @@ const useStyles = makeStyles(theme => ({ }, })); -const Page = () => ( - - - -); - const BuildWithStepsView = () => { const { owner, repo } = useProjectSlugFromEntity(); const { branch, buildNumber } = useParams(); @@ -129,6 +123,11 @@ const BuildWithStepsView = () => { ); }; +const Page = () => ( + + + +); export default Page; export { BuildWithStepsView as BuildWithSteps }; diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx index c2bda7a895..e03a749185 100644 --- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx +++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx @@ -43,67 +43,6 @@ type DeploymentsAccordionsProps = { children?: React.ReactNode; }; -export const DeploymentsAccordions = ({ - deploymentResources, - clusterPodNamesWithErrors, -}: DeploymentsAccordionsProps) => { - const isOwnedBy = ( - ownerReferences: V1OwnerReference[], - obj: V1Pod | V1ReplicaSet | V1Deployment, - ): boolean => { - return ownerReferences?.some(or => or.name === obj.metadata?.name); - }; - - return ( - - {deploymentResources.deployments.map((deployment, i) => ( - - {deploymentResources.replicaSets - // Filter out replica sets with no replicas - .filter(rs => rs.status && rs.status.replicas > 0) - // Find the replica sets this deployment owns - .filter(rs => - isOwnedBy(rs.metadata?.ownerReferences ?? [], deployment), - ) - .map((rs, j) => { - // Find the pods this replica set owns and render them in the table - const ownedPods = deploymentResources.pods.filter(pod => - isOwnedBy(pod.metadata?.ownerReferences ?? [], rs), - ); - - const matchingHpa = deploymentResources.horizontalPodAutoscalers.find( - (hpa: V1HorizontalPodAutoscaler) => { - return ( - (hpa.spec?.scaleTargetRef?.kind ?? '').toLowerCase() === - 'deployment' && - (hpa.spec?.scaleTargetRef?.name ?? '') === - (deployment.metadata?.name ?? 'unknown-deployment') - ); - }, - ); - - return ( - - - - ); - })} - - ))} - - ); -}; - type DeploymentAccordionProps = { deployment: V1Deployment; ownedPods: V1Pod[]; @@ -112,33 +51,6 @@ type DeploymentAccordionProps = { children?: React.ReactNode; }; -const DeploymentAccordion = ({ - deployment, - ownedPods, - matchingHpa, - clusterPodNamesWithErrors, -}: DeploymentAccordionProps) => { - const podsWithErrors = ownedPods.filter(p => - clusterPodNamesWithErrors.has(p.metadata?.name ?? ''), - ); - - return ( - - }> - - - - - - - ); -}; - type DeploymentSummaryProps = { deployment: V1Deployment; numberOfCurrentPods: number; @@ -219,3 +131,91 @@ const DeploymentSummary = ({ ); }; + +const DeploymentAccordion = ({ + deployment, + ownedPods, + matchingHpa, + clusterPodNamesWithErrors, +}: DeploymentAccordionProps) => { + const podsWithErrors = ownedPods.filter(p => + clusterPodNamesWithErrors.has(p.metadata?.name ?? ''), + ); + + return ( + + }> + + + + + + + ); +}; + +export const DeploymentsAccordions = ({ + deploymentResources, + clusterPodNamesWithErrors, +}: DeploymentsAccordionsProps) => { + const isOwnedBy = ( + ownerReferences: V1OwnerReference[], + obj: V1Pod | V1ReplicaSet | V1Deployment, + ): boolean => { + return ownerReferences?.some(or => or.name === obj.metadata?.name); + }; + + return ( + + {deploymentResources.deployments.map((deployment, i) => ( + + {deploymentResources.replicaSets + // Filter out replica sets with no replicas + .filter(rs => rs.status && rs.status.replicas > 0) + // Find the replica sets this deployment owns + .filter(rs => + isOwnedBy(rs.metadata?.ownerReferences ?? [], deployment), + ) + .map((rs, j) => { + // Find the pods this replica set owns and render them in the table + const ownedPods = deploymentResources.pods.filter(pod => + isOwnedBy(pod.metadata?.ownerReferences ?? [], rs), + ); + + const matchingHpa = deploymentResources.horizontalPodAutoscalers.find( + (hpa: V1HorizontalPodAutoscaler) => { + return ( + (hpa.spec?.scaleTargetRef?.kind ?? '').toLowerCase() === + 'deployment' && + (hpa.spec?.scaleTargetRef?.name ?? '') === + (deployment.metadata?.name ?? 'unknown-deployment') + ); + }, + ); + + return ( + + + + ); + })} + + ))} + + ); +}; diff --git a/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx b/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx index 21f66f28c0..e33ded1fac 100644 --- a/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx +++ b/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx @@ -86,29 +86,6 @@ const sortBySeverity = (a: DetectedError, b: DetectedError) => { return 0; }; -export const ErrorReporting = ({ detectedErrors }: ErrorReportingProps) => { - const errors = Array.from(detectedErrors.values()) - .flat() - .sort(sortBySeverity); - - return ( - <> - {errors.length === 0 ? ( - - - - ) : ( - - )} - - ); -}; - export const ErrorEmptyState = () => { return ( { ); }; + +export const ErrorReporting = ({ detectedErrors }: ErrorReportingProps) => { + const errors = Array.from(detectedErrors.values()) + .flat() + .sort(sortBySeverity); + + return ( + <> + {errors.length === 0 ? ( + + + + ) : ( +
+ )} + + ); +}; diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx index a49f966ffd..6ecfa63e23 100644 --- a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx +++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx @@ -32,42 +32,10 @@ type IngressesAccordionsProps = { deploymentResources: GroupedResponses; }; -export const IngressesAccordions = ({ - deploymentResources, -}: IngressesAccordionsProps) => { - return ( - - {deploymentResources.ingresses.map((ingress, i) => ( - - - - ))} - - ); -}; - type IngressAccordionProps = { ingress: ExtensionsV1beta1Ingress; }; -const IngressAccordion = ({ ingress }: IngressAccordionProps) => { - return ( - - }> - - - - - - - ); -}; - type IngressSummaryProps = { ingress: ExtensionsV1beta1Ingress; }; @@ -99,3 +67,34 @@ const IngressCard = ({ ingress }: IngressCardProps) => { /> ); }; + +const IngressAccordion = ({ ingress }: IngressAccordionProps) => { + return ( + + }> + + + + + + + ); +}; +export const IngressesAccordions = ({ + deploymentResources, +}: IngressesAccordionsProps) => { + return ( + + {deploymentResources.ingresses.map((ingress, i) => ( + + + + ))} + + ); +}; diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx index 092ada0724..18351c7455 100644 --- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx @@ -50,6 +50,115 @@ import { DetectedError, detectErrors } from '../../error-detection'; import { IngressesAccordions } from '../IngressesAccordions'; import { ServicesAccordions } from '../ServicesAccordions'; +type ClusterSummaryProps = { + clusterName: string; + totalNumberOfPods: number; + numberOfPodsWithErrors: number; + children?: React.ReactNode; +}; + +const ClusterSummary = ({ + clusterName, + totalNumberOfPods, + numberOfPodsWithErrors, +}: ClusterSummaryProps) => { + return ( + + + + {clusterName} + + Cluster + + + + + + + + + {totalNumberOfPods} pods + + + {numberOfPodsWithErrors > 0 ? ( + {numberOfPodsWithErrors} pods with errors + ) : ( + No pods with errors + )} + + + + ); +}; + +type ClusterProps = { + clusterObjects: ClusterObjects; + detectedErrors?: DetectedError[]; + children?: React.ReactNode; +}; + +const Cluster = ({ clusterObjects, detectedErrors }: ClusterProps) => { + const groupedResponses = groupResponses(clusterObjects.resources); + + const podsWithErrors = new Set( + detectedErrors + ?.filter(de => de.kind === 'Pod') + .map(de => de.names) + .flat() ?? [], + ); + + return ( + <> + + }> + + + + + + + + + + + + + + + + + + + + ); +}; + type KubernetesContentProps = { entity: Entity; children?: React.ReactNode }; export const KubernetesContent = ({ entity }: KubernetesContentProps) => { @@ -161,112 +270,3 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => { ); }; - -type ClusterProps = { - clusterObjects: ClusterObjects; - detectedErrors?: DetectedError[]; - children?: React.ReactNode; -}; - -const Cluster = ({ clusterObjects, detectedErrors }: ClusterProps) => { - const groupedResponses = groupResponses(clusterObjects.resources); - - const podsWithErrors = new Set( - detectedErrors - ?.filter(de => de.kind === 'Pod') - .map(de => de.names) - .flat() ?? [], - ); - - return ( - <> - - }> - - - - - - - - - - - - - - - - - - - - ); -}; - -type ClusterSummaryProps = { - clusterName: string; - totalNumberOfPods: number; - numberOfPodsWithErrors: number; - children?: React.ReactNode; -}; - -const ClusterSummary = ({ - clusterName, - totalNumberOfPods, - numberOfPodsWithErrors, -}: ClusterSummaryProps) => { - return ( - - - - {clusterName} - - Cluster - - - - - - - - - {totalNumberOfPods} pods - - - {numberOfPodsWithErrors > 0 ? ( - {numberOfPodsWithErrors} pods with errors - ) : ( - No pods with errors - )} - - - - ); -}; diff --git a/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx b/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx index 8deb49bf07..ee4de96177 100644 --- a/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx +++ b/plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx @@ -77,65 +77,6 @@ interface KubernetesDrawerable { metadata?: V1ObjectMeta; } -interface KubernetesDrawerProps { - object: T; - renderObject: (obj: T) => object; - buttonVariant?: 'h5' | 'subtitle2'; - kind: string; - expanded?: boolean; - children?: React.ReactNode; -} - -export const KubernetesDrawer = ({ - object, - renderObject, - kind, - buttonVariant = 'subtitle2', - expanded = false, - children, -}: KubernetesDrawerProps) => { - const [isOpen, setIsOpen] = useState(expanded); - const classes = useDrawerStyles(); - - const toggleDrawer = (e: ChangeEvent<{}>, newValue: boolean) => { - e.stopPropagation(); - setIsOpen(newValue); - }; - - return ( - <> - toggleDrawer(e, true)} - onFocus={event => event.stopPropagation()} - > - {children === undefined ? ( - - {object.metadata?.name ?? 'unknown object'} - - ) : ( - children - )} - - toggleDrawer(e, false)} - onClick={event => event.stopPropagation()} - > - - - - ); -}; - interface KubernetesDrawerContentProps { toggleDrawer: (e: ChangeEvent<{}>, isOpen: boolean) => void; object: T; @@ -203,3 +144,61 @@ const KubernetesDrawerContent = ({ ); }; +interface KubernetesDrawerProps { + object: T; + renderObject: (obj: T) => object; + buttonVariant?: 'h5' | 'subtitle2'; + kind: string; + expanded?: boolean; + children?: React.ReactNode; +} + +export const KubernetesDrawer = ({ + object, + renderObject, + kind, + buttonVariant = 'subtitle2', + expanded = false, + children, +}: KubernetesDrawerProps) => { + const [isOpen, setIsOpen] = useState(expanded); + const classes = useDrawerStyles(); + + const toggleDrawer = (e: ChangeEvent<{}>, newValue: boolean) => { + e.stopPropagation(); + setIsOpen(newValue); + }; + + return ( + <> + toggleDrawer(e, true)} + onFocus={event => event.stopPropagation()} + > + {children === undefined ? ( + + {object.metadata?.name ?? 'unknown object'} + + ) : ( + children + )} + + toggleDrawer(e, false)} + onClick={event => event.stopPropagation()} + > + + + + ); +}; diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx index 6484f2211d..c378f02658 100644 --- a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx +++ b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx @@ -29,46 +29,6 @@ import { V1Service } from '@kubernetes/client-node'; import { StructuredMetadataTable } from '@backstage/core'; import { ServiceDrawer } from './ServiceDrawer'; -type ServicesAccordionsProps = { - deploymentResources: GroupedResponses; -}; - -export const ServicesAccordions = ({ - deploymentResources, -}: ServicesAccordionsProps) => { - return ( - - {deploymentResources.services.map((service, i) => ( - - - - ))} - - ); -}; - -type ServiceAccordionProps = { - service: V1Service; -}; - -const ServiceAccordion = ({ service }: ServiceAccordionProps) => { - return ( - - }> - - - - - - - ); -}; - type ServiceSummaryProps = { service: V1Service; }; @@ -121,3 +81,43 @@ const ServiceCard = ({ service }: ServiceCardProps) => { /> ); }; + +type ServicesAccordionsProps = { + deploymentResources: GroupedResponses; +}; + +type ServiceAccordionProps = { + service: V1Service; +}; + +const ServiceAccordion = ({ service }: ServiceAccordionProps) => { + return ( + + }> + + + + + + + ); +}; + +export const ServicesAccordions = ({ + deploymentResources, +}: ServicesAccordionsProps) => { + return ( + + {deploymentResources.services.map((service, i) => ( + + + + ))} + + ); +};