mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
Fix image zoom bug, remove Figure component (#9242)
This commit is contained in:
Melinda Fekete
GitHub
parent
e689e2e3d2
commit
de03de152b
@ -3,8 +3,6 @@ title: How to add SSO with SAML 2.0 and Microsoft Entra ID
|
||||
description: 'Configure Microsoft Entra ID SSO with SAML 2.0 for your Unleash instance.'
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
**Plan**: [Enterprise](https://www.getunleash.io/pricing)
|
||||
@ -49,8 +47,7 @@ To configure attributes and claims for the new application, do the following:
|
||||
|
||||
To populate the first and last names of users in Unleash, configure two additional claims with attributes `user.givenname` and `user.surname` with no namespace.
|
||||
|
||||
<Figure caption="Edit the SAML configuration in Microsoft Entra admin center." img="/img/microsoft-entra-claims.png" />
|
||||
|
||||
|
||||
|
||||
### Save SAML certificate, identifier, and login URL
|
||||
|
||||
@ -62,7 +59,7 @@ Save the following information from the single sign-on settings of your applicat
|
||||
#### SAML certificate
|
||||
To save the SAML certificate, go to the single sign-on settings of your application. In **SAML Certificates > Federation Metadata XML**, click **Download**. Open the file and copy the contents between the `X509Certificate` tag.
|
||||
|
||||
<Figure caption="Save the X509 Certificate from the SAML certificate XML file. The example has been redacted." img="/img/x509cert.png" />
|
||||
|
||||
|
||||
#### Login URL
|
||||
To find your login URL, go to the single sign-on settings of your application. In the **Set up `<your-application-name>`** section, copy and save **Login URL**. For example: `https://login.microsoftonline.com/<your_identifier>/saml2`.
|
||||
@ -83,7 +80,7 @@ To finalize the configuration, do the following:
|
||||
5. Optional: To automatically create users for first-time sign-ins, select **Auto-create users**. Select a default root role new users should have, and configure the list of valid email domains.
|
||||
6. Click **Save**.
|
||||
|
||||
<Figure caption="Configure SAML 2.0 in Unleash." img="/img/saml2.0.png" />
|
||||
|
||||
|
||||
## Test your configuration
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@ title: Environment Import & Export
|
||||
|
||||
|
||||
import VideoContent from '@site/src/components/VideoContent.jsx'
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
@ -47,7 +46,7 @@ Importantly, while references to [segments](/reference/segments) are exported, t
|
||||
|
||||
You can export features either from a project search or the global feature search. Use the search functionality to narrow the results to the list of features you want to export and use the export button to select environment. All features included in your search results will be included in the export.
|
||||
|
||||
<Figure caption='Feature flag lists can be filtered using the search bar. Once filtered, you can use the "export current selection" button to export the configuration for those features.' img="/img/export.png"/>
|
||||
|
||||
|
||||
## Import
|
||||
|
||||
|
||||
@ -3,8 +3,6 @@ title: Applications
|
||||
pagination_next: reference/service-accounts
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
**Version**: `5.11+`
|
||||
@ -28,16 +26,16 @@ For detected issues, there are three different possible issues:
|
||||
|
||||
The application is also illustrated as a diagram, showing the application node, where the environment count and feature flag count are displayed. Under the application, it is possible to see which environments the application is using. Under each environment, data about the application is shown, including how many instances are connected, which SDKs the application is using, and when the application was last seen in that environment.
|
||||
|
||||
<Figure caption="The application overview currently shows that 1 SDK is outdated, and the application, auth-app, has 2 environments in use: development and production." img="/img/application-overview.png"/>
|
||||
|
||||
|
||||
## Connected instances
|
||||
|
||||
Connected instances display a list of instances that the application has in a selected environment. It shows the instance name, SDK version, last seen, and the IP address from which the instance connected.
|
||||
|
||||
<Figure caption="Connected instances currently show that in the development environment, there is one connected instance that was last seen 19 hours ago." img="/img/application-connected-instances.png"/>
|
||||
|
||||
|
||||
## Project applications
|
||||
|
||||
In the project view, there is a tab named "Applications." In this view, it is possible to see all the applications that are consuming the project's features. The applications are displayed in a list, showing the application name, environments the application is consuming in the current project, instances, and SDKs.
|
||||
|
||||
<Figure caption="Currently, there is one application connected named auth-app, with 2 environments and 28 instances." img="/img/project-applications.png"/>
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
title: Insights
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
**Plan**: [Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) | **Version**: `6.0+`
|
||||
@ -27,34 +25,34 @@ In total, there are 6 different charts available that show information over time
|
||||
|
||||
The Total users chart provides information about the total number of current users in your Unleash instance. This chart helps you understand how the user base is growing or changing over time. Additionally, it shows the number of users in selected projects and how the user distribution varies among them.
|
||||
|
||||
<Figure img="/img/insights-total-users.png" caption="Total users chart showing the growth of users over time."/>
|
||||
|
||||
|
||||
### Flags
|
||||
|
||||
The flags chart displays the total number of active (not archived) feature flags across all projects. It provides insights into how the number of flags has changed over time, helping you track the growth and usage of feature flags. You can also view the data for specific projects.
|
||||
|
||||
<Figure img="/img/insights-total-flags.png" caption="Total flags chart illustrating the active feature flags and their trends over time."/>
|
||||
|
||||
|
||||
### Health
|
||||
|
||||
The health chart represents the percentage of flags in the selected projects that are not stale or potentially stale. This chart helps you monitor the overall health of your feature flags, ensuring that they are actively maintained and relevant. The chart also shows how the overall health changes over time, allowing you to identify potential issues early and take corrective actions.
|
||||
|
||||
<Figure img="/img/insights-health.png" caption="Health chart displaying the percentage of non-stale flags and their changes over time."/>
|
||||
|
||||
|
||||
### Median time to production
|
||||
|
||||
The median time to production chart measures the average time from when a feature flag is created until it is enabled in a "production" type environment. This metric is calculated only for feature flags of the type "release" and is the median across the selected projects. Understanding this metric helps in assessing the efficiency of your development and deployment processes. It also highlights areas where you can improve to reduce time to market for new features.
|
||||
|
||||
<Figure img="/img/insights-production.png" caption="Median time to production chart showing the average time taken for feature flags to go live."/>
|
||||
|
||||
|
||||
### Flag evaluation metrics
|
||||
|
||||
The flag evaluation metrics chart provides a summary of all flag evaluations reported by SDKs across all projects. This chart helps you understand how often feature flags are being evaluated and used within your applications. It can indicate the performance impact and the effectiveness of your feature flag implementations. By analyzing these metrics per project, you can gain deeper insights into the usage patterns and optimize accordingly.
|
||||
|
||||
<Figure img="/img/insights-evaluation.png" caption="Flag evaluation metrics chart summarizing the evaluations and usage patterns of feature flags."/>
|
||||
|
||||
|
||||
### Updates per environment type
|
||||
|
||||
The updates per environment type chart summarizes all feature configuration updates per environment type. This chart is crucial for understanding how configuration changes propagate across different environments, such as development, testing, and production. It helps in tracking the frequency and impact of updates, ensuring that changes are consistently and safely deployed. Monitoring updates per environment type can also help identify potential bottlenecks or issues in the deployment pipeline.
|
||||
|
||||
<Figure img="/img/insights-updates.png" caption="Updates per environment type chart showing the summary of configuration updates across different environments."/>
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Jira Cloud Integration - Installation
|
||||
---
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
title: Jira Cloud Integration - Usage
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
With the Unleash Jira Cloud Plugin you can create, view and manage Unleash feature flags directly from a Jira issue.
|
||||
|
||||
The plugin also shows you current status of connected flags.
|
||||
@ -12,11 +10,11 @@ The plugin also shows you current status of connected flags.
|
||||
|
||||
To use the plugin, you'll need to create an issue or use an existing one. Once the issue is saved and you open up the issue panel, you'll be greeted with a button to activate the Unleash plugin for that issue.
|
||||
|
||||
<Figure caption="The Unleash Feature Flags button gets added to the top-level actions of new issues. Use that button to activate the Unleash plugin for that issue." img="/img/jira-cloud-activate-unleash-panel-button.png" />
|
||||
|
||||
|
||||
### Connecting a flag to an issue
|
||||
|
||||
<Figure caption="Once active, the Unleash plugin adds a button labeled 'connect toggle' to the issue." img="/img/jira-cloud-issue-button.png" />
|
||||
|
||||
|
||||
|
||||
Use the issue's "connect toggle" button to open a dialog.
|
||||
@ -30,9 +28,9 @@ There are a few steps to connect a flag:
|
||||
|
||||
2. Use the "create new toggle" option to choose whether you want to add an existing flag or create a new one.
|
||||
|
||||
<Figure caption="When you add an existing flag, use the flag name select list to choose from existing flags in the selected Unleash project." img="/img/jira-cloud-add-existing-toggle.png" />
|
||||
|
||||
|
||||
<Figure caption="When you add a new flag, you must give it a name and can choose to give it a description." img="/img/jira-cloud-add-new-toggle.png" />
|
||||
|
||||
|
||||
### Flag status as part of Issue view
|
||||
|
||||
@ -40,7 +38,7 @@ Once you've connected at least one flag to an issue, the Unleash plugin will lis
|
||||
that flag. If the current user is allowed to edit the issue, they can also enable or disable environments directly
|
||||
from Jira.
|
||||
|
||||
<Figure caption="A Jira Cloud issue with a connected flag. The Unleash feature flags section now shows the connected flags along with the flag's environments. There are controls to enable or disable the flag in the development and production environments" img="/img/jira-cloud-toggle-status.png" />
|
||||
|
||||
|
||||
### Change Requests
|
||||
|
||||
@ -51,7 +49,7 @@ If you already have an active change request for that project and that environme
|
||||
|
||||
If you confirm that you would like to open a change request, then the plugin will create one for you and present a confirmation dialog.
|
||||
|
||||
<Figure caption="A dialog appears when the plugin creates a change request for you. The dialog contains a link directly to the newly created change request." img="/img/jira-cloud-change-request-confirmation.png" />
|
||||
|
||||
|
||||
When the Change Request has been reviewed and applied in Unleash, the flag will show the requested state after the next refresh
|
||||
of the issue and flag status page.
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
title: Slack App
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
**Version**: `5.5+`
|
||||
@ -97,4 +95,4 @@ Besides the configured channels, you can choose to notify other channels by tagg
|
||||
|
||||
To exclusively use tags for determining notification channels, you can leave the "channels" field blank in the integration configuration. Since you can have multiple configurations for the integration, you're free to mix and match settings to meet your precise needs. Before posting a message, all channels for that event, both configured and tagged, are combined and duplicates are removed.
|
||||
|
||||
<Figure caption="We have defined two Slack tags for the "new-payment-system" flag. In this example Unleash will post updates to the #notifications and #random channels, along with any channels defined in the integration configuration." img="/img/slack-addon-tags.png"/>
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
title: Network View
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
**Plan**: [Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) | **Version**: `4.21+`
|
||||
@ -38,7 +36,7 @@ Each application shown on the diagram has:
|
||||
- An application name
|
||||
- the average number of requests per second (_req/s_) that we have registered over the last five minutes.
|
||||
|
||||
<Figure caption="The network overview shows applications that have recently made requests to Unleash. In this figure, it's showing three different instances of the Unleash proxy connected to Unleash. Each instance has an average of 20 req/s." img="/img/network-overview.png"/>
|
||||
|
||||
|
||||
## Network traffic
|
||||
|
||||
@ -50,7 +48,7 @@ Unleash aggregates requests by **client** (using application name) and **base UR
|
||||
2. Within each of these groups, group all requests by their next URL path segment. For instance: `/client/features` and `/client/features/feature-a` are grouped together, while `/client/register` and `/admin/features` are separate groups.
|
||||
|
||||
|
||||
<Figure caption="The network traffic chart plots req/s on the Y axis and time on the X axis. Requests are bundled per endpoint per application." img="/img/network-traffic.png"/>
|
||||
|
||||
|
||||
## Data source
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Playground
|
||||
---
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
import VideoContent from '@site/src/components/VideoContent.jsx'
|
||||
|
||||
:::note Availability
|
||||
@ -66,11 +65,11 @@ The playground's response contains a list of all the feature flags that have bee
|
||||
|
||||
In the UI, the playground displays the features in a table. Each row of the table corresponds to a single feature. The table has a separate column for each of the environments that you selected for your query.
|
||||
|
||||
<Figure caption='Each row contains a feature and columns for the selected environments. In this screenshot, the "development" and "production" environments have been selected.' img="/img/playground-results-row.png"/>
|
||||
|
||||
|
||||
Because you can add multiple values for each context field, each feature-environment cell contains the number of combinations that evaluated to `true` and `false` for the feature in the given environment. This can be expanded into a more detailed overview over what combinations of context fields evaluated to `true` and `false` along with any [variants](../reference/feature-toggle-variants).
|
||||
|
||||
<Figure caption='A small table showing the detailed evaluation for a feature in the "development" environment. The provided context contained three values for the "userId" property, so the table contains three rows, showing all different combinations of the context.' img="/img/playground-results-development.png"/>
|
||||
|
||||
|
||||
As with all of Unleash's client SDKs, the playground respects [stickiness](../reference/stickiness). The [stickiness algorithm](../reference/stickiness#calculation) guarantees that you'll always get the same variants and the same gradual rollout results if you provide the same context, as long as you provide the context field used for calculating stickiness.
|
||||
|
||||
@ -78,7 +77,7 @@ As with all of Unleash's client SDKs, the playground respects [stickiness](../re
|
||||
|
||||
You can compare how a feature evaluates in different environments. If you select more than one environment for your playground query, the table will have an additional "Diff" column in each row. Using the "preview diff" button, you can open a table that gives an overview over how the feature evaluated for each context combination in each environment.
|
||||
|
||||
<Figure caption='A table with three rows. Each row contains a context combination and results in the form of `true` and `false` each environment. In this case, it shows that when the "userId" context field is "2", then the feature is enabled in development, but not in production.' img="/img/playground-results-diff.png"/>
|
||||
|
||||
|
||||
|
||||
### Detailed evaluation results
|
||||
|
||||
@ -94,8 +94,6 @@ To move a feature flag between projects:
|
||||
|
||||
## Project default strategy
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
**Version**: `5.2+`.
|
||||
@ -113,7 +111,7 @@ To change the default strategy for an environment in a project:
|
||||
3. Configure the strategy values, such as the rollout percentage, stickiness, segments, constraints, and variants.
|
||||
4. Click **Save strategy**.
|
||||
|
||||
<Figure caption="You can configure each environment's default strategy with the corresponding edit button." img="/img/edit-default-strategy-development.png" />
|
||||
|
||||
|
||||
## View project insights
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Resource Limits
|
||||
---
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::note Availability
|
||||
|
||||
@ -9,7 +8,7 @@ import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
:::
|
||||
|
||||
<Figure caption="When you're close to reaching the limit for a resource, you'll see a warning in the Unleash UI. The warning will tell you what the limit is, how close you are to reaching it, and how you can increase the limit." img="/img/project-limit-warning.png" />
|
||||
|
||||
|
||||
To ensure that Unleash operates smoothly, it includes resource limits for some of the key resources that you can create. The limit for each resource can vary between the different Unleash plans.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ slug: /what-is-a-feature-flag
|
||||
description: Feature flags let you control software features in real time, enabling safer deployments, better testing, and faster innovation.
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
Feature flags allow you to release, test, and manage features and functionality across your application without changing the source code. Organizations use added control and flexibility to deliver more and higher quality features with reduced cost, time, and risk.
|
||||
|
||||
In this guide, we’ll introduce you to the basics of feature flags and why so many development teams choose them.
|
||||
@ -87,7 +85,7 @@ However, feature flags can still provide significant benefits even if your organ
|
||||
|
||||
Feature flags enable development teams to manage features in a dynamic, flexible, and controlled manner. Like any tool, you need to use them the right way—you don’t want to build a spaceship out of bricks.
|
||||
|
||||
<Figure caption="Source: https://imgs.xkcd.com/comics/the_wrong_stuff.png" img="/img/xkcd-comic-spaceship.png"/>
|
||||
|
||||
|
||||
|
||||
Feature flags are integrated into the software development lifecycle, allowing developers to introduce code conditionality. This conditionality determines whether specific code blocks execute, enabling or disabling features without requiring code deployments.
|
||||
@ -104,7 +102,7 @@ Let’s take a look at the different types of feature flags, including their pur
|
||||
- [Operational flags](#operational-flags)
|
||||
- [Permission flags](#permission-flags)
|
||||
|
||||
<Figure caption="Inspired and extended from Pete Hodgson’s taxonomy of feature flag types https://martinfowler.com/articles/feature-toggles.html" img="/img/feature-flag-lifecycle-chart.png"/>
|
||||
|
||||
|
||||
### Release flags
|
||||
|
||||
|
||||
@ -3,8 +3,6 @@ title: 'Feature flag management: Best practices for using feature flags at scale
|
||||
description: 'A feature flag is just an if statement, you say. When your organization has thousands of developers, those if statements can quickly become complex.'
|
||||
---
|
||||
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
|
||||
“A feature flag is just an if statement,” you say. This is true in a way, but when your organization has thousands of developers, each managing dozens or hundreds of flags with complex targeting rules and audit trails across dozens of microservices-based applications, those if statements can quickly become complex. This is especially true if you don’t set up your system correctly in the first place.
|
||||
|
||||
This guide to using feature flag systems at scale is based on lessons learned working with some of the largest feature flag deployments in the world through the [Unleash Open-Source](https://github.com/Unleash/unleash) and [Enterprise Feature Management platform](https://www.getunleash.io/enterprise-feature-management-platform). However, the principles outlined do not apply only to Unleash. They apply to any large-scale feature flag system, including one you build yourself or another commercial solution. For tips on how to stand up and run a feature flag system, see our [principles for building and scaling feature flags](./feature-flag-best-practices).
|
||||
@ -45,7 +43,7 @@ Before you add your first feature flag, you need to think about how organization
|
||||
|
||||
– Melvin Conway
|
||||
|
||||
<Figure img="/img/feature-flag-organization-methods.svg" caption="In situtations where predefined teams own a feature from start to finish, it makes sense to create a project for each team. In situtations where you have dynamic teams that form around feature work, you might instead want to create smaller projects for each feature, only giving access to the people who work on that feature."/>
|
||||
|
||||
|
||||
There is no getting around [Conway’s law](https://martinfowler.com/bliki/ConwaysLaw.html). Applications tend to resemble the organizations that create them, and your feature flag system is no exception. Rather than fighting this law, acknowledge and embrace it, and pick a way to organize your feature flags that reflects your organization.
|
||||
|
||||
@ -131,7 +129,7 @@ Users who are added or removed from your main SSO directory should be added or r
|
||||
|
||||
### 6. Implement flag approval workflows early.
|
||||
|
||||
<Figure img="/img/change-request-flow.png" caption="Some changes require approval processes. Those processes will tend to let a reviewer approve or reject the proposed changes before someone with the required permissons can apply the changes."/>
|
||||
|
||||
|
||||
Depending on the industry and legal framework you’re operating in, you’ll need varying approvals for a feature flag change to go into production. You may be able to just roll something out on a whim, or you might need to get it approved by specific stakeholders before releasing it. Your feature flag tool should help you do this, regardless of how much oversight you need.
|
||||
|
||||
@ -157,7 +155,7 @@ Flags live in code, and hundreds of small choices go into instrumenting flags in
|
||||
|
||||
### 7. Define flags in your code at the highest level of abstraction.
|
||||
|
||||
<Figure img="/img/evaluate-flags-at-the-edge.svg" caption="Instead of evaluating a flag in a back-end service and then dynamically changing the behavior in that service (either by calling out to other services or changing how the service works), consider evaluating the flag as far out in the stack as you can and deciding which service to call based on the flag value."/>
|
||||
|
||||
|
||||
Defining your flag at the highest level in your code is important for both user-facing and backend changes.
|
||||
|
||||
@ -188,7 +186,7 @@ Here are a few examples of functionality managed by feature flags and where you
|
||||
|
||||
### 8. Evaluate a feature flag only once.
|
||||
|
||||
<Figure img="/img/evaluate-flags-only-once.svg" caption="You should evaluate flags only once in a chain of services and pass the result on to the next service in the chain if it needs the value. If you evaluate the flag in each service, you risk the flag value changing between each service, causing unexpected results."/>
|
||||
|
||||
|
||||
When building new (often complex) features for users, systems require changes across multiple parts – modules within an application or services in a microservices architecture. While it's tempting to use a single feature flag to control all these changes and evaluate it locally in each module, we recommend against it for a few reasons:
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
title: The Anatomy of Unleash
|
||||
---
|
||||
|
||||
import Figure from "@site/src/components/Figure/Figure.tsx";
|
||||
|
||||
This guide's purpose is to give you a conceptual overview of how Unleash works. It covers the various components that exist within our system and how they interact with each other and with external applications. The diagrams help you understand the fundamental building blocks, such as [projects](../reference/projects), [environments](../reference/environments), [variants](../reference/strategy-variants) and of course, [feature flags](../reference/feature-toggles).
|
||||
|
||||
The end of this guide presents a [short use case, explaining how you might configure Unleash](#use-case) to start working with feature flags.
|
||||
@ -28,18 +26,11 @@ All Unleash instances must have at least one project at any given time. New inst
|
||||
|
||||
[Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) customers can create, rename, and delete projects. [Open Source](https://www.getunleash.io/pricing) users have a single project called 'Default'.
|
||||
|
||||
<Figure
|
||||
caption="Unleash projects contain one or more environments."
|
||||
alt="A square labeled 'project' containing another square, labeled 'environment'."
|
||||
img="/img/anatomy-of-unleash-environment.png"
|
||||
/>
|
||||
|
||||
|
||||
## Environments and project environments
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-customer-tiers.png"
|
||||
caption="Feature flags can be activated or deactivated independently in different environments. For instance, a feature flag can be active in the development environment, and deactivated in the production environment. Even if their configuration is otherwise identical, deactivated feature flags will never be considered enabled."
|
||||
/>
|
||||
|
||||
|
||||
[**Environments**](../reference/environments) in Unleash let you change how a feature flag works in your application’s different environments. For instance, while you are developing a feature, it’s likely that you’ll want it to be available in your development environment, but not in your production environment: environments let you do that. You might also want to enable a feature for only some users in your development environment, but no users in your production environment: environments let you do that.
|
||||
|
||||
@ -51,10 +42,7 @@ Each project must always have **at least one** active environment.
|
||||
|
||||
Environments are adjacent to [feature flags](../reference/feature-toggles) in Unleash: neither one contains the other, but they come together to let you define activation strategies.
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-new-feature-rollout.png"
|
||||
caption="You can use different activation strategies and constraints in different environments. For instance, you can show a feature only to select user IDs in development, but roll it out to 25% of your user base in production."
|
||||
/>
|
||||
|
||||
|
||||
:::info Environments and API keys
|
||||
|
||||
@ -68,19 +56,11 @@ When connecting an SDK to Unleash, it's the **API key that decides which environ
|
||||
|
||||
When creating a feature flag, you must assign a unique (across your Unleash instance) name, a [feature flag type](../reference/feature-toggles#feature-flag-types), a [project](../reference/projects) it belongs to, and an optional description. Everything except for the name can be changed later.
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-features.png"
|
||||
caption="Feature flag states are evaluated independently in each environment."
|
||||
alt="A hierarchy showing a project containing an environment containing a feature flag configuration."
|
||||
/>
|
||||
|
||||
|
||||
## Activation strategies
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-strategy.png"
|
||||
caption="Activation strategies are applied to feature flags on a per-environment basis and decide whether a feature is enabled or not."
|
||||
alt="A hierarchy displaying an environment containing a feature flag configuration with an activation strategy."
|
||||
/>
|
||||
|
||||
|
||||
[**Activation strategies**](../reference/activation-strategies) (or just **strategies** for short) are the part of feature flags that tell Unleash **who should get a feature**. An activation strategy is assigned to **one **feature flag in **one **environment.
|
||||
|
||||
@ -93,15 +73,9 @@ Activation strategies tie feature flags and [environments](../reference/environm
|
||||
|
||||
Unleash comes with a number of [built-in strategies](../reference/activation-strategies). All strategies can be further augmented by [**strategy constraints**](../reference/activation-strategies#constraints).
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-environments-strategies.png"
|
||||
caption="Feature flags exist across environments and can have different activation strategies in each environment."
|
||||
/>
|
||||
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-environments-strategies2.png"
|
||||
caption="Feature flag activation strategies can be copied between environments. You can also create new strategies in each environment."
|
||||
/>
|
||||
|
||||
|
||||
## Strategy constraints
|
||||
|
||||
@ -130,11 +104,7 @@ You can define constraints on whatever properties you want in your [Unleash cont
|
||||
|
||||
Constraints are applied to individual strategies and do not stay in sync with each other. When you need to have the same constraints applied to multiple strategies and need those constraints to stay in sync, use [**segments**](../reference/segments).
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-constraint.png"
|
||||
caption="Constraints can be applied to strategies, allowing you to narrow a feature's audience."
|
||||
alt="A hierarchy drawing showing a constraint applied to an activation strategy."
|
||||
/>
|
||||
|
||||
|
||||
## Segments
|
||||
|
||||
@ -146,10 +116,7 @@ You can apply multiple segments to a strategy. Much like with constraints, **eve
|
||||
|
||||
Segments are only available to [Pro](/availability#plans) and [Enterprise](https://www.getunleash.io/pricing) users.
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-segments.png"
|
||||
caption="Segments are reusable lists of constraints that can be applied to a strategy instead of or in addition to constraints."
|
||||
/>
|
||||
|
||||
|
||||
## Variants and feature flag payloads
|
||||
|
||||
@ -167,17 +134,11 @@ A feature flag can have as many variants as you want.
|
||||
|
||||
Prior to 4.21, variants were independent of [environments](../reference/environments). In other words: if you're on 4.19 or lower, you’ll always have the exact same variants with the exact same weightings and the exact same payloads in all environments.
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-variants.png"
|
||||
caption="Before Unleash 4.21, feature flag variants were the same for all environments."
|
||||
/>
|
||||
|
||||
|
||||
As of version 4.21, a feature can have different variants in different environments. For instance, a development environment might have no variants, while a production environment has 2 variants. Payloads, weightings, and anything else can also differ between environments.
|
||||
|
||||
<Figure
|
||||
img="/img/anatomy-of-unleash-variants-environment.png"
|
||||
caption="From Unleash 4.21 on, a feature flag can have different variants in each environment."
|
||||
/>
|
||||
|
||||
|
||||
## Use case: changing website colors {#use-case}
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@ title: Unleash Academy
|
||||
---
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import Figure from '@site/src/components/Figure/Figure.tsx'
|
||||
import LearningLinks from '@site/src/components/unleash-academy/Links.jsx'
|
||||
import Banner from '@site/src/components/unleash-academy/Banner.jsx'
|
||||
|
||||
@ -83,9 +82,8 @@ Select the tab that corresponds to your persona. A course list is shown - plan t
|
||||
:::info
|
||||
See also the following visualization of the learning paths
|
||||
:::
|
||||
<Figure caption="Learning Paths organized by Persona" alt="Course order for Developer, DevOps, Product and Leader personas" img="/img/academy-learning-paths.svg"/>
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### Directory by Course
|
||||
|
||||
@ -43,17 +43,22 @@ const addDocsRoutePrefix = ({ from, ...rest }) => {
|
||||
};
|
||||
|
||||
const getUnleashRepoStars = async () => {
|
||||
const response = await fetch(
|
||||
`https://api.github.com/repos/unleash/unleash`,
|
||||
);
|
||||
const data = await response.json();
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://api.github.com/repos/unleash/unleash`,
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
const unleashRepoStars = data.stargazers_count;
|
||||
const formattedStars =
|
||||
unleashRepoStars >= 1000
|
||||
? `${(unleashRepoStars / 1000).toFixed(1)}k`
|
||||
: unleashRepoStars?.toString() || '';
|
||||
return formattedStars;
|
||||
const unleashRepoStars = data.stargazers_count;
|
||||
const formattedStars =
|
||||
unleashRepoStars >= 1000
|
||||
? `${(unleashRepoStars / 1000).toFixed(1)}k`
|
||||
: unleashRepoStars?.toString() || '';
|
||||
return formattedStars;
|
||||
} catch (e) {
|
||||
console.error('Error fetching Unleash repo stars', e);
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
export default async function createConfigAsync(): Promise<Config> {
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
/**
|
||||
This component displays a figure with an accompanying figure caption. Use it
|
||||
to display diagrams, charts, and other images that have an explanatory
|
||||
caption that should be visible to everyone.
|
||||
|
||||
For some info regarding alt text vs fig captions, see this stack overflow
|
||||
response from a blind user (available at
|
||||
https://stackoverflow.com/questions/58447538/accessibility-difference-between-img-alt-and-figcaption):
|
||||
|
||||
I'm a blind user. I would say that there are two big categories of images on the web:
|
||||
|
||||
1. Functional images
|
||||
2. Illustrative images a.k.a. figures
|
||||
|
||||
AS the name says, figcaption is a caption for a figure. The caption is
|
||||
always visible by everybody, not only blind people. Figures are images that
|
||||
can be found in a book, an article, or whatever more or less long paragraphs
|
||||
of text. Most of the time, figures are purely illustrative.
|
||||
|
||||
When you use figcaption, the alt attribute should probably be empty:
|
||||
|
||||
- Copying the text of the figcaption into the alt attribute, or any
|
||||
shortened version, is almost always useless: the screen reader will read
|
||||
twice the same or almost the same information, and it's worth absolutely
|
||||
nothing
|
||||
|
||||
- You may think that the alt attribute could be useful for a longer
|
||||
description of the image, that wouldn't fit in the figcaption; for example
|
||||
a detailed description of a chart or a diagram. But in fact, this kind of
|
||||
description is better below the image or in another page (then available
|
||||
for everybody), rather than in the alt attribute. The alt attribute should
|
||||
normally remain short.
|
||||
|
||||
- You may think that the figcaption is useless and only set the alt
|
||||
attribute to something. Example: "Photo with Alice on the left, Bob on the
|
||||
right". But in fact sighted people could as well find this information
|
||||
useful, if they don't know Alice and Bob for example. So it could be
|
||||
interesting to move this description to the figcaption, so that everybody
|
||||
benefits from it and not only blind people.
|
||||
|
||||
Now, the biggest case when you won't use figure/figcaption is when images
|
||||
are functional: a button taht can be clicked, an icon with a precise
|
||||
meaning, etc. The basic rules for alt texts of functional images are:
|
||||
|
||||
- If you can interact with the image to perform actions (click, etc.), or if
|
||||
the icon conveys an information, then you must set a non-empty alt. It
|
||||
must be a function description, not a objective description of the image.
|
||||
|
||||
Example 1: "Go back" is good, while "Blue left arrow" is bad.
|
||||
Example 2: "Unread message" is good, while "Closed enveloppe" is bad
|
||||
|
||||
- Otherwise, if the image provide no interaction and if it doesn't convey
|
||||
any information, then it is illustrative; the alt should be empty in that
|
||||
case.
|
||||
|
||||
------
|
||||
|
||||
However, even when using fig captions, there **may** be times when also
|
||||
using an alt is appropriate, which is why it's an optional attribute on
|
||||
this component. However, if you do use it, make sure it conveys
|
||||
**separate** information to what the fig caption does.
|
||||
|
||||
|
||||
**/
|
||||
|
||||
// biome-ignore lint/style/useImportType: <explanation>
|
||||
import React from 'react';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
type Props = {
|
||||
// An optional alt text, if the caption does not already convey all relevant
|
||||
// information.
|
||||
alt?: string;
|
||||
// The figure caption, visible to everyone
|
||||
caption: string;
|
||||
// the path to the image, starting with `/img/`. Example: /img/image.png
|
||||
img: string;
|
||||
};
|
||||
|
||||
const Component: React.FC<Props> = ({ img, alt, caption }) => {
|
||||
return (
|
||||
<figure className={styles.figure}>
|
||||
<img alt={alt} src={useBaseUrl(img)} />
|
||||
<figcaption>{caption}</figcaption>
|
||||
</figure>
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
@ -1,23 +0,0 @@
|
||||
/* Figures (with captions) */
|
||||
.figure {
|
||||
box-shadow: var(--ifm-global-shadow-lw);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
|
||||
padding: var(--ifm-pre-padding);
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.figure img {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.figure * + * {
|
||||
margin-block-start: var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.figure figcaption {
|
||||
font-size: var(--unleash-font-size-smaller);
|
||||
padding-inline: var(--ifm-pre-padding);
|
||||
border-inline-start: 5px solid var(--ifm-color-primary);
|
||||
}
|
||||
@ -270,6 +270,11 @@ main img {
|
||||
box-shadow: var(--ifm-global-shadow-lw);
|
||||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
/* ensure images appear on top when zoomed in */
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
main
|
||||
p
|
||||
> img:not(
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 408 KiB |
Loading…
Reference in New Issue
Block a user