Creating a resource details view

A specific set of component are available to use for creating a resource details view without having to keep giving the resource label as attributes to all the components in the library.

To setup a resource details view, wrap all the structure you want to be part of the resource details view in a manifold-resource-container component with access to the resource label.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
</manifold-resource-container>
Rename SSO Deprovision

Refetching until the resource is valid

The refetch-until-valid property on the resource-container can be used to force the container to refetch the resource until it has found one and the status of that resource is available. This is useful for reloading the page until the resource has finished resizing or provisioning for example.

The resource credentials

The manifold-credentials component can be used inside the container without any attribute by using the manifold-resource-credentials component.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-credentials></manifold-resource-credentials>
</manifold-resource-container>

The resource deprovision Button

The manifold-data-deprovision-button component can be used inside the container without any attribute by using the manifold-resource-deprovision component. This component is still acting as a data component and can be stylized or be given children.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-deprovision>Deprovision</manifold-resource-deprovision>
</manifold-resource-container>

Events

For validation, error, and success messages, it will emit custom events.

document.addEventListener('manifold-deprovisionButton-click', ({ detail: { resourceLabel } }) =>
  console.info(`⌛ Deprovisioning ${resourceLabel} …`)
);
document.addEventListener(
  'manifold-deprovisionButton-success',
  ({ detail: { resourceLabel } }) =>alert(`${resourceLabel} deprovisioned successfully!`)
);
document.addEventListener('manifold-deprovisionButton-error', ({ detail }) => console.log(detail));
// {message: "bad_request: bad_request: No plan_id provided", resourceid: "1234", resourceLabel: "my-resource"}
Name Returns Description
manifold-deprovisionButton-click resourceLabel Fires immediately when button is clicked. May be used to trigger a loading state, until -success or -error is received.
manifold-deprovisionButton-success message, resourceId, resourceLabel Successful deprovision. Returns a resource ID and resource Label.
manifold-deprovisionButton-error message, resourceId, resourceLabel Erred provision, along with information on what went wrong.

The resource rename Button

The manifold-data-rename-button component can be used inside the container without any attribute by using the manifold-resource-rename component. This component is still acting as a data component and can be stylized or be given children.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-rename>Rename</manifold-resource-rename>
</manifold-resource-container>

Events

For validation, error, and success messages, it will emit custom events.

document.addEventListener('manifold-renameButton-click', ({ detail: { resourceLabel, newLabel } }) =>
  console.info(`⌛ Renaming ${resourceLabel} to ${newLabel} …`)
);
document.addEventListener(
  'manifold-renameButton-success',
  ({ detail: { resourceLabel, newLabel } }) => alert(`${resourceLabel} renamed to ${newLabel} successfully!`)
);
document.addEventListener('manifold-renameButton-error', ({ detail }) => console.log(detail));
// {message: "bad_request: bad_request: No plan_id provided", resourceid: "1234", resourceLabel: "my-resource", newLabel: "new-name"}
document.addEventListener('manifold-renameButton-invalid', ({ detail }) => console.log(detail));
// {message: "bad_request: bad_request: No plan_id provided", resourceid: "1234", resourceLabel: "my-resource", newLabel: "new-name"}
Name Returns Description
manifold-renameButton-click resourceId, resourceLabel, newLabel Fires immediately when button is clicked. May be used to trigger a loading state, until -success or -error is received.
manifold-renameButton-success message, resourceId, resourceLabel, newLabel Successful renaming. Returns a resource ID and resource Label as well as a message and the new name for the resource.
manifold-renameButton-error message, resourceId, resourceLabel, newLabel Erred rename, along with information on what went wrong.
manifold-renameButton-error message, resourceId, resourceLabel, newLabel Invalid renaming, along with information on what went wrong.

The resource sso Button

The manifold-data-sso-button component can be used inside the container without any attribute by using the manifold-resource-sso component. This component is still acting as a data component and can be stylized or be given children.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-sso>SSO into resource</manifold-resource-sso>
</manifold-resource-container>

Events

For validation, error, and success messages, it will emit custom events.

document.addEventListener('manifold-ssoButton-click', ({ detail: { resourceLabel } }) =>
  console.info(`⌛ Sooing into ${resourceLabel} …`)
);
document.addEventListener(
  'manifold-ssoButton-success',
  ({ detail: { resourceLabel, redirectUrl } }) => window.location = redirectUrl
);
document.addEventListener('manifold-ssoButton-error', ({ detail }) => console.log(detail));
// {type: "not_found", message: "no_found: Resource not found", resourceid: "1234", resourceLabel: "my-resource"}
Name Returns Description
manifold-ssoButton-click resourceId, resourceLabel Fires immediately when button is clicked. May be used to trigger a loading state, until -success or -error is received.
manifold-ssoButton-success message, resourceId, resourceLabel, redirectUrl Successful sso. Returns a resource ID, resource Label and the redirect_url for the product's dashboard.
manifold-ssoButton-error message, resourceId, resourceLabel Erred sso, along with information on what went wrong.

The resource product details

The manifold-resource-card component can be used inside the container without any attribute by using the manifold-resource-product component.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-product></manifold-resource-product>
</manifold-resource-container>

The resource plan details

The manifold-plan component can be used inside the container without any attribute by using the manifold-resource-plan component.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-plan></manifold-resource-plan>
</manifold-resource-container>

The resource status

You can display the resource's status like on the resource-card component or the standalone manifold-resource-status-view component inside the container by using the manifold-resource-status component.

<manifold-resource-container resource-label="my-resource">
  <!--- Your structure goes here --->
  <manifold-resource-status></manifold-resource-status>
</manifold-resource-container>