add card
rename components
This commit is contained in:
parent
95f0a4660c
commit
06c025ab15
7 changed files with 71 additions and 46 deletions
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -1 +1,4 @@
|
|||
export { OverviewComponent } from "./Overview";
|
||||
export {
|
||||
ArgoWorkflowsOverviewPage,
|
||||
ArgoWorkflowsOverviewCard,
|
||||
} from "./Overview";
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -1 +1,5 @@
|
|||
export { argoWorkflowsPlugin, ArgoWorkflowsPage } from "./plugin";
|
||||
export {
|
||||
argoWorkflowsPlugin,
|
||||
ArgoWorkflowsPage,
|
||||
EntityArgoWorkflowsOverviewCard,
|
||||
} from "./plugin";
|
||||
|
|
|
@ -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]);
|
||||
|
|
Loading…
Reference in a new issue