Loft Product Updates - HashiCorp Vault Integration and Advanced UI Customization

We are excited to share two new features added to Loft v3. With the latest two releases, we have added a new integration for HashiCorp Vault, and have added additional customization options for the Loft UI. Let’s jump right in and take a look at both of the new updates.

Loft v3.1 - HashiCorp Vault Integration

https://loft.sh/docs/secrets/hashicorp-vault

Loft supports syncing secrets from a HashiCorp Vault instance into both project secrets and global secrets. This feature allows you to use secrets from Vault in your projects, vclusters, and global Loft tenant without copying them manually or using third-party tools.

Configuration

Turning on Vault is as easy as enabling it through the admin configuration:

vault:
  enabled: true
  address: http://vault:8200
  auth:
    tokenSecretRef:
      name: vault-token
      key: token
  syncInterval: 15m

Secret Types

Once you have set up the Vault integration, you can sync Vault secrets to Global and Project secrets.

Secrets can be scoped to Global or Project. For a Global secret you will use the kind SharedSecret, while for the Project secret uses the kind ProjectSecret. Each will require annotations to specify where to find the secret using the vault integration.

https://loft.sh/docs/secrets/hashicorp-vault#syncing-vault-secrets

For a video walkthrough of how to use the new HashiCorp Vault Integration, check out:

Loft v3.2 - Advanced UI Customization

In the v3.2 release of Loft we have added additional options for UI customization. Now the LoftVersion can be locked to a specific version, the look and feel can be modified with custom CSS, Javascript can be added to further modify what will show up in the UI, and Navigation bar items can be added to create quick links to documentation or other sites.

https://loft.sh/docs/admin/guides/custom-branding

These new uiSettings options can be configured in the Admin > Config section of Loft.

LoftVersion

LoftVersion holds the current Loft version.

CustomCSS

CustomCSS holds URLs with custom CSS files that should be included when loading the UI.

CustomJavaScript

CustomJavaScript holds URLs with custom js files that should be included when loading the UI.

NavBarButtons

NavBarButtons holds extra nav bar buttons.

UI Customization Example

Let's take a look at this in action. Below we have set values for customCss, customJavaScript, and navBarButtons.

The navBarButtons option had been configured to add Twitter to the UI. We are able to add a link, in this case to Loft's Twitter account, and an icon.

uiSettings:
  customCss:
    - "https://localhost:8080/custom.css"
  customJavaScript:
    - "https://localhost:8080/custom.js"
  navBarButtons:
    - icon: "https://localhost:8080/twitter.svg"
      link: "https://twitter.com/loft_sh"
      text: Twitter
      position: BottomStart

With customCss we were able to set the background of a production virtual cluster to red.

tr.ant-table-row[data-row-key="production"] {
  background-color: #ff7f7f;
}

Using customJavaScript we are able to add documentation in an iframe to our view. This can be useful if you need to show documentation or other information in the UI.

run()

async function run() {
  const wrapper = await findElement(".loft-wrapper_69245")

  const docsEmbedding = document.createElement("iframe")
  docsEmbedding.src = "https://loft.sh/docs/virtual-clusters/isolation"
  docsEmbedding.style.width = "100%"
  docsEmbedding.style.height = "20rem"
  docsEmbedding.style.border = "none"

  wrapper.appendChild(docsEmbedding)
}

async function findElement(selector) {
  return new Promise((resolve) => {
    const observerOptions = {
      childList: true,
      attributes: true,
      subtree: true,
    }

    const observer = new MutationObserver((mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === "childList") {
          const target = document.querySelector(selector)
          if (target !== null) {
            observer.disconnect()
            return resolve(target)
          }
        }
      }
    })

    observer.observe(document.body, observerOptions)
  })
}

After all of the updates, here is an example of how the UI will look with the customizations.

Conclusion

We are excited to bring you these new features for Loft. Keep an eye out for additional features in the near future. If you’re looking for more content on how the HashiCorp Vault Integration works, here is a longer Livestream video that adds on to the demo video provided.