use variable from app-config.yaml in iframe plugin

[jkleinlercher]

Feature Suggestion

I would like to define a variable in app-config.yaml which is then used as an URL in the iframe and eventually also get some part of the URL via an entity annotation.

define an app-config.yaml variable and a entity annotation and build the URL like out of these two variables

Context

I like to use the iframe plugin to integrate my akuity kargo pipeline view. However, the URL to this view depends on the environment (I have a kargo installation in each cluster) and the application specific project.

[jkleinlercher]

Or do you know if I can read app-config.yaml variables and entity annotations by myself in the EntityPage.xsx and use them when setting

const iframeProps = {
  iframe:
    {
      src: "https://example.com"
    }
  ,
  title: "super cool title"
}

[jkleinlercher]

I also try to get this information in https://discordapp.com/channels/687207715902193673/1227876381929766974/1227876381929766974

[iain-b]

Or do you know if I can read app-config.yaml variables and entity annotations by myself in the EntityPage.xsx and use them when setting

Yes, you can absolutely do that. We do support setting the src attribute via an annotation value in the IFrameCard which also has examples of reading config & annotations (remember you'll need to add any new config to the schema). That said I would recommend trying out the srcFromAnnotation prop before going down the config route.

[jkleinlercher]

@iain-b thanks for your speedy answer. I already recognized srcFromAnnotation but as you said thats only for IFrameCard for the Overviewpage, isn't it? I was looking for a solution for the EntityIFrameContent to embed an iframe in a specifiy route ... can I do that also with IFrameCard?

[jkleinlercher]

Ah or did you mean IFrameCard is just an example for me how to read properties then in the EntityPage.tsx?

[jkleinlercher]

If I understood it right it should probably work like that in the EntityPage.tsx:

const configApi = useApi(configApiRef);
const { entity } = useEntity();
const kargoHostname = configApi.getOptionalStringArray('kargo.hostname');
const kargoProject = entity.metadata.annotations?.["kargo/project"];

const iframeProps = {
  iframe:
    {
      src: "https://${kargoHostname}/project/${kargoProject}"
    }
  ,
  title: "super cool title"
}

[jkleinlercher]

Unfortunately it doesn‘t work like that .. the useApi Hook must be in a function and when I put it in a function it complains that iframeprops has no iframe attribute … hm maybe someone with more typescript and backstage know how can give me an example and in parallel I will try IFrameCard

[jkleinlercher]

@iain-b I tried it with IFrameCard. It worked basically, however the height of the iframe is somehow not 100%. Any idea why it is limited to 291.65px ?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.