DevFW-CICD/backstage-edp
16
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

add card

Browse source 
rename components
This commit is contained in:
Manabu Mccloskey 2023-06-29 11:24:50 -07:00
parent 95f0a4660c
commit 06c025ab15
7 changed files with 71 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
plugins/argo-workflows/package.json
View file

@ -23,6 +23,7 @@
"postpack": "backstage-cli package postpack"
},
"dependencies": {
"@backstage/catalog-model": "^1.4.0",
"@backstage/core-components": "^0.13.1",
"@backstage/core-plugin-api": "^1.5.1",
"@backstage/plugin-catalog-react": "^1.7.0",

20
plugins/argo-workflows/src/components/Overview/Overview.tsx
View file

@ -6,11 +6,14 @@ import {
Content,
ContentHeader,
SupportButton,
InfoCard,
} from "@backstage/core-components";
import { Grid } from "@material-ui/core";
import { WorkflowOverviewComponent } from "../WorkflowOverview/WorkflowOverview";
import { OverviewTable } from "../WorkflowOverview/WorkflowOverview";
import { useEntity } from "@backstage/plugin-catalog-react";
import { isArgoWorkflowsAvailable } from "../../plugin";
export const OverviewComponent = () => (
export const ArgoWorkflowsOverviewPage = () => (
<Page themeId="tool">
<Header title="Argo Workflows">
<HeaderLabel label="Lifecycle" value="Alpha" />
@ -20,8 +23,19 @@ export const OverviewComponent = () => (
<SupportButton>Overview of your Argo Workflows</SupportButton>
</ContentHeader>
<Grid item>
<WorkflowOverviewComponent />
<OverviewTable />
</Grid>
</Content>
</Page>
);
export const ArgoWorkflowsOverviewCard = () => {
if (isArgoWorkflowsAvailable(useEntity().entity)) {
return (
<InfoCard>
<OverviewTable />
</InfoCard>
);
}
return null;
};

5
plugins/argo-workflows/src/components/Overview/index.ts
View file

@ -1 +1,4 @@
export { OverviewComponent } from "./Overview";
export {
ArgoWorkflowsOverviewPage,
ArgoWorkflowsOverviewCard,
} from "./Overview";

28
plugins/argo-workflows/src/components/WorkflowOverview/WorkflowOverview.test.tsx
View file

@ -15,8 +15,8 @@ import {
import { ArgoWorkflowsApi, argoWorkflowsApiRef } from "../../api";
import { KubernetesApi, kubernetesApiRef } from "@backstage/plugin-kubernetes";
import { EntityProvider } from "@backstage/plugin-catalog-react";
import { WorkflowOverviewComponent } from "./WorkflowOverview";
import { empty, inProgress, mixResponse } from "../../test-data/testResponse";
import { OverviewTable } from "./WorkflowOverview";
import { inProgress, mixResponse } from "../../test-data/testResponse";
import { IoArgoprojWorkflowV1alpha1WorkflowList } from "../../api/generated";
const BASE_URL = "https://backstage.io";
@ -84,7 +84,7 @@ describe("WorkflowOverviewComponent", () => {
const r = await renderInTestApp(
<TestApiProvider apis={apis}>
<EntityProvider entity={entity}>
<WorkflowOverviewComponent />
<OverviewTable />
</EntityProvider>
</TestApiProvider>
);
@ -113,7 +113,7 @@ describe("WorkflowOverviewComponent", () => {
const r = await renderInTestApp(
<TestApiProvider apis={apis}>
<EntityProvider entity={entity}>
<WorkflowOverviewComponent data-testid="test" />
<OverviewTable data-testid="test" />
</EntityProvider>
</TestApiProvider>
);
@ -125,24 +125,4 @@ describe("WorkflowOverviewComponent", () => {
`${BASE_URL}/workflows/default/${mixResponse.items[0].metadata.name}`
);
});
it("should not display anything", async () => {
jest
.spyOn(mockArgoWorkflows, "getWorkflows")
.mockImplementation(
(_n, _ns, _l): Promise<IoArgoprojWorkflowV1alpha1WorkflowList> => {
return Promise.resolve(
empty as unknown as IoArgoprojWorkflowV1alpha1WorkflowList
);
}
);
const r = await renderInTestApp(
<TestApiProvider apis={apis}>
<EntityProvider entity={entity}>
<WorkflowOverviewComponent />
</EntityProvider>
</TestApiProvider>
);
expect(r.queryByRole("table")).toBeNull();
});
});

34
plugins/argo-workflows/src/components/WorkflowOverview/WorkflowOverview.tsx
View file

@ -6,6 +6,12 @@ import React from "react";
import Alert from "@material-ui/lab/Alert";
import { useEntity } from "@backstage/plugin-catalog-react";
import { IoArgoprojWorkflowV1alpha1WorkflowList } from "../../api/generated";
import {
ARGO_WORKFLOWS_LABEL_SELECTOR_ANNOTATION,
CLUSTER_NAME_ANNOTATION,
K8S_LABEL_SELECTOR_ANNOTATION,
K8S_NAMESPACE_ANNOTATION,
} from "../../plugin";
type TableData = {
name: string;
@ -16,10 +22,7 @@ type TableData = {
finishedAt?: string;
};
const CLUSTER_NAME_ANNOTATION = "argo-workflows/cluster-name";
const K8S_LABEL_SELECTOR_ANNOTATION = "backstage.io/kubernetes-label-selector";
const K8S_NAMESPACE_ANNOTATION = "backstage.io/kubernetes-namespace";
export const WorkflowOverviewComponent = () => {
export const OverviewTable = () => {
const { entity } = useEntity();
const apiClient = useApi(argoWorkflowsApiRef);
const configApi = useApi(configApiRef);
@ -36,18 +39,11 @@ export const WorkflowOverviewComponent = () => {
const ln = entity.metadata.annotations?.[K8S_NAMESPACE_ANNOTATION];
const ns = ln !== undefined ? ln : "default";
const clusterName = entity.metadata.annotations?.[CLUSTER_NAME_ANNOTATION];
const k8sLabelSelector =
entity.metadata.annotations?.[K8S_LABEL_SELECTOR_ANNOTATION];
const { value, loading, error } = useAsync(
async (): Promise<IoArgoprojWorkflowV1alpha1WorkflowList> => {
return await apiClient.getWorkflows(clusterName, ns, k8sLabelSelector);
}
);
if (!k8sLabelSelector) {
return null;
}
const labelSelector =
entity.metadata?.annotations?.[ARGO_WORKFLOWS_LABEL_SELECTOR_ANNOTATION] !==
undefined
? entity.metadata?.annotations?.[ARGO_WORKFLOWS_LABEL_SELECTOR_ANNOTATION]
: entity.metadata.annotations?.[K8S_LABEL_SELECTOR_ANNOTATION];
const columns: TableColumn[] = [
{
@ -94,6 +90,12 @@ export const WorkflowOverviewComponent = () => {
{ title: "Namespace", field: "namespace", type: "string" },
];
const { value, loading, error } = useAsync(
async (): Promise<IoArgoprojWorkflowV1alpha1WorkflowList> => {
return await apiClient.getWorkflows(clusterName, ns, labelSelector);
}
);
if (loading) {
return <Progress />;
} else if (error) {

6
plugins/argo-workflows/src/index.ts
View file

@ -1 +1,5 @@
export { argoWorkflowsPlugin, ArgoWorkflowsPage } from "./plugin";
export {
argoWorkflowsPlugin,
ArgoWorkflowsPage,
EntityArgoWorkflowsOverviewCard,
} from "./plugin";

23
plugins/argo-workflows/src/plugin.ts
View file

@ -5,11 +5,18 @@ import {
discoveryApiRef,
fetchApiRef,
} from "@backstage/core-plugin-api";
import { Entity } from "@backstage/catalog-model";
import { rootRouteRef } from "./routes";
import { ArgoWorkflows, argoWorkflowsApiRef } from "./api";
import { kubernetesApiRef } from "@backstage/plugin-kubernetes";
export const CLUSTER_NAME_ANNOTATION = "argo-workflows/cluster-name";
export const K8S_LABEL_SELECTOR_ANNOTATION =
"backstage.io/kubernetes-label-selector";
export const K8S_NAMESPACE_ANNOTATION = "backstage.io/kubernetes-namespace";
export const ARGO_WORKFLOWS_LABEL_SELECTOR_ANNOTATION =
"argo-workflows/label-selector";
export const argoWorkflowsPlugin = createPlugin({
id: "argo-workflows",
routes: {
@ -33,7 +40,21 @@ export const ArgoWorkflowsPage = argoWorkflowsPlugin.provide(
createRoutableExtension({
name: "ArgoWorkflowsPage",
component: () =>
import("./components/Overview").then((m) => m.OverviewComponent),
import("./components/Overview").then((m) => m.ArgoWorkflowsOverviewPage),
mountPoint: rootRouteRef,
})
);
export const EntityArgoWorkflowsOverviewCard = argoWorkflowsPlugin.provide(
createRoutableExtension({
name: "ArgoWorkflowsOverviewCard",
component: () =>
import("./components/Overview").then((m) => m.ArgoWorkflowsOverviewCard),
mountPoint: rootRouteRef,
})
);
export const isArgoWorkflowsAvailable = (entity: Entity) =>
Boolean(
entity?.metadata.annotations?.[ARGO_WORKFLOWS_LABEL_SELECTOR_ANNOTATION]
) || Boolean(entity?.metadata.annotations?.[K8S_LABEL_SELECTOR_ANNOTATION]);