Feature Flags screenshot refresh [DOCS-15099]

config/_default/menus/main.en.yaml

@@ -6393,6 +6393,11 @@ menu:
       parent: feature_flags_concepts
       identifier: feature_flags_concepts_flag_graphs
       weight: 308
+    - name: Stale Flags
+      url: feature_flags/concepts/stale_flags
+      parent: feature_flags_concepts
+      identifier: feature_flags_concepts_stale_flags
+      weight: 309
     - name: Permissions and Access Control
       url: feature_flags/concepts/permissions
       parent: feature_flags_concepts

content/en/feature_flags/concepts/approvals.md

@@ -35,7 +35,7 @@ After you enable approvals, subsequent changes that impact application behavior
 
 When creating a flag, toggle **Require approval on changes to this flag for all production environments** to enable approvals for that flag in every production environment.
 
-{{< img src="feature_flags/concepts/configure-flag-approvals-on-creation.png" alt="Create feature flag flow showing Approvals and notifications with Require approval on changes to this flag for all production environments enabled." style="width:100%;" >}}
+{{< img src="feature_flags/concepts/configure-flag-approvals-on-creation-2.png" alt="Create feature flag flow showing Approvals and notifications with Require approval on changes to this flag for all production environments enabled." style="width:100%;" >}}
 
 ### Existing flag
 

content/en/feature_flags/concepts/environments.md

@@ -21,7 +21,7 @@ Environments represent different deployment stages or modes in your software del
 
 Manage environments from **Feature Flags > Settings > Environments**:
 
-{{< img src="getting_started/feature_flags/environments-list.png" alt="Environments list in Feature Flags settings." style="width:100%;" >}}
+{{< img src="feature_flags/concepts/environments-list-2.png" alt="Environments list in Feature Flags settings." style="width:100%;" >}}
 
 ### Add an environment
 

content/en/feature_flags/concepts/flag_graphs.md

@@ -21,7 +21,7 @@ Datadog Feature Flags provides graphs at two levels: the flags list page gives a
 
 Each summary row shows a total evaluation count and a mini graph, so you can assess activity across your flag inventory without opening each flag.
 
-{{< img src="feature_flags/flag_graphs/flag_list.png" alt="Feature flags list page showing evaluation counts and sparklines per flag" style="width:100%;" >}}
+{{< img src="feature_flags/flag_graphs/flag_list-2.png" alt="Feature flags list page showing evaluation counts and sparklines per flag" style="width:100%;" >}}
 
 Each row shows:
 
@@ -35,9 +35,9 @@ The flag details page includes observability insights to help you identify how a
 
 ### Targeting rule evaluation counts
 
-This shows the total client and server evaluations that fell through to each targeting rule in the given **Real-time metric overview** time range.
+This shows the total client and server evaluations that fell through to each targeting rule during the time range selected in the top of the page (default is 1 hour).
 
-{{< img src="feature_flags/flag_graphs/targeting_rule_distribution.png" alt="Targeting rule evaluation count" style="width:100%;" >}}
+{{< img src="feature_flags/flag_graphs/targeting_rule_distribution-2.png" alt="Targeting rule evaluation count" style="width:100%;" >}}
 
 Use this count to confirm that targeting rules are working as expected and to see how traffic is distributed across targeting rules in a given environment, including the percentage of total traffic in the time range.
 

content/en/feature_flags/concepts/flag_history.md

@@ -20,10 +20,10 @@ Flag History allows you to track changes and maintain an audit trail of your Dat
 
 When you view an individual feature flag, the {{< ui >}}Version history{{< /ui >}} sidebar section displays all changes made to that specific flag. 
 
-- Select an {{< ui >}}Environment{{< /ui >}} tab to view changes in a particular environment.
+- Select an environment tab to view changes in a particular environment.
 - Select {{< ui >}}View diff{{< /ui >}} to display a diff view of a specific change.
 
-{{< img src="/feature_flags/flag_history.png" alt="History panel for a single feature flag" style="width:100%;" >}}
+{{< img src="/feature_flags/flag_history-2.png" alt="History panel for a single feature flag" style="width:100%;" >}}
 
 ## Global flag history
 
@@ -34,7 +34,7 @@ Navigate to {{< ui >}}Feature Flags{{< /ui >}} > [{{< ui >}}Global Flag History{
 - Use the date range filter to narrow results to a specific time period.
 - Select {{< ui >}}See Changes{{< /ui >}} to display a diff view of a specific change.
 
-{{< img src="/feature_flags/flag_history_global.png" alt="Global flag history view" style="width:100%;" >}}
+{{< img src="/feature_flags/flag_history_global-2.png" alt="Global flag history view" style="width:100%;" >}}
 
 ## Further reading
 

content/en/feature_flags/concepts/permissions.md

@@ -32,7 +32,7 @@ Assign these permissions through [Datadog roles][1].
 
 Restrict edit access on a specific flag by selecting **Settings > Permissions** on the flag details page:
 
-{{< img src="feature_flags/concepts/flag-grace-modal.png" alt="Permissions settings panel on a feature flag showing granular access controls for users, service accounts, roles, and teams." style="width:65%;" >}}
+{{< img src="feature_flags/concepts/flag-grace-modal-2.png" alt="Permissions settings panel on a feature flag showing granular access controls for users, service accounts, roles, and teams." style="width:65%;" >}}
 
 You can limit edit access to:
 

content/en/feature_flags/concepts/saved_filters.md

@@ -41,7 +41,7 @@ Saved filters contain only attribute conditions and cannot be nested or referenc
    - **Saved List**: Provide the attribute and its values. You can enter values directly or import them from a CSV file.
 4. Click **Save**.
 
-{{< img src="feature_flags/saved_filters/create-saved-filter.png" alt="The New Saved Filter modal showing the filter type toggle and rule editor." style="width:100%;" >}}
+{{< img src="feature_flags/saved_filters/create-saved-filter.png" alt="The New Saved Filter modal showing the filter type toggle and rule editor." style="width:60%;" >}}
 
 The saved filter is available to apply to any flag in your organization.
 
@@ -54,7 +54,7 @@ After you create a saved filter, reference it when you configure a flag's target
 3. Add or edit a targeting rule, then click **Add > Add Saved Filter**.
 4. Select the saved filter you want to apply.
 
-{{< img src="feature_flags/saved_filters/add-saved-filter-to-rule.png" alt="The Add menu in a targeting rule, showing the Add Saved Filter option." style="width:100%;" >}}
+{{< img src="feature_flags/saved_filters/add-saved-filter-to-rule-2.png" alt="The Add menu in a targeting rule, showing the Add Saved Filter option." style="width:75%;" >}}
 
 You can combine a saved filter with other conditions in the same rule. For details about how targeting rules are evaluated, see [Targeting Rules and Filters][2].
 
@@ -64,7 +64,7 @@ To edit a saved filter, open it from **Settings > Saved Filters** and update its
 
 When you save changes to a filter's conditions, the update applies to every enabled flag that uses the filter. Those flags begin evaluating against the updated logic immediately. To see which flags are affected, review the **Flags** list in the filter's panel before saving.
 
-{{< img src="feature_flags/saved_filters/saved-filter-panel.png" alt="The saved filter side panel showing its conditions and the list of flags that use it." style="width:100%;" >}}
+{{< img src="feature_flags/saved_filters/saved-filter-panel.png" alt="The saved filter side panel showing its conditions and the list of flags that use it." style="width:85%;" >}}
 
 <div class="alert alert-info">
 A single edit can change targeting behavior across many flags at once.

content/en/feature_flags/concepts/stale_flags.md

@@ -31,7 +31,7 @@ A flag is evaluated for staleness only if it is not archived, not marked as perm
 
 The [Feature Flags list page][1] shows a {{< ui >}}STALE{{< /ui >}} chip next to each flag that Datadog has identified as stale. Hover over the chip to see which signal triggered it.
 
-- Use the {{< ui >}}Staleness{{< /ui >}} filter to narrow the list to stale flags only.
+- Use the {{< ui >}}Stale Flags{{< /ui >}} toggle to narrow the list to stale flags only.
 - Filter by team to see the flag debt your team is responsible for.
 
 {{< img src="feature_flags/stale_flag_chip.png" alt="Feature flag list view showing the STALE chip and staleness filter." style="width:100%;" >}}
@@ -40,7 +40,7 @@ The [Feature Flags list page][1] shows a {{< ui >}}STALE{{< /ui >}} chip next to
 
 When you open a stale flag, a banner at the top of the flag details page explains why the flag is considered stale and recommends actions to resolve it. The banner highlights one **primary suggestion** based on the highest-confidence signal and the lowest-risk action, and provides additional secondary actions.
 
-{{< img src="feature_flags/stale_flag_banner.png" alt="Stale banner on the feature flag details page with recommended actions." style="width:100%;" >}}
+{{< img src="feature_flags/stale_flag_banner-2.png" alt="Stale banner on the feature flag details page with recommended actions." style="width:100%;" >}}
 
 ## Manage stale flags
 
@@ -50,17 +50,17 @@ From the stale banner, select {{< ui >}}Generate Removal PR with Bits{{< /ui >}}
 
 **Note**: Remove the flag from your code and deploy the change before you archive the flag. Archiving a flag that is still referenced in code can cause unexpected behavior in your application.
 
-{{< img src="feature_flags/generate_removal_pr.png" alt="Generate Removal PR with Bits modal." style="width:100%;" >}}
+{{< img src="feature_flags/generate_removal_pr-2.png" alt="Generate Removal PR with Bits modal." style="width:60%;" >}}
 
 ### Archive the flag
 
 Archiving marks the flag as inactive so it is no longer evaluated or editable. Archive a flag after you have removed its references from application code and confirmed it is no longer receiving evaluation traffic. Archiving a flag requires approval and cancels any experiments running on the flag.
 
 ### Mark as permanent
 
-Some flags are intentionally long-lived, such as kill switches or permission gates. Select {{< ui >}}Mark as Permanent{{< /ui >}} on the stale banner to designate a flag as a permanent operational control and exclude it from future stale detection. Permanent flags show a {{< ui >}}PERMANENT{{< /ui >}} indicator in the flag details sidebar.
+Some flags are intentionally long-lived, such as kill switches or permission gates. Select {{< ui >}}Mark as Permanent{{< /ui >}} on the stale banner to designate a flag as a permanent operational control and exclude it from future stale detection. Permanent flags show a {{< ui >}}Permanent{{< /ui >}} indicator in the flag details sidebar.
 
-{{< img src="feature_flags/mark_as_permanent.png" alt="Feature flag marked as PERMANENT on the flag details page." style="width:100%;" >}}
+{{< img src="feature_flags/mark_as_permanent-2.png" alt="Feature flag marked as Permanent on the flag details page." style="width:35%;" >}}
 
 ### Dismiss for 30 days
 

content/en/feature_flags/concepts/targeting_rules.md

@@ -38,7 +38,7 @@ To configure targeting rules for a flag:
 2. Select the environment whose rules you want to modify.
 3. Click **Add Targeting Rule** (or click the targeting rule you want to modify).
 
-{{< img src="getting_started/feature_flags/ff-targeting-rules-and-rollouts.png" alt="Targeting Rules and Rollouts section on a feature flag." style="width:100%;" >}}
+{{< img src="feature_flags/concepts/ff-targeting-rules-and-rollouts-2.png" alt="Targeting Rules and Rollouts section on a feature flag." style="width:100%;" >}}
 
 For each targeting rule, configure the following:
 
@@ -47,7 +47,7 @@ For each targeting rule, configure the following:
 - **Select variants**: Choose which variants to serve to matching subjects. Click **Split Traffic** to randomize across multiple variants (see [Traffic Splitting and Randomization](/feature_flags/concepts/traffic_splitting/)).
 - **Set the traffic exposure** (optional): Serve the variant to a percentage of matching subjects (see [Traffic Splitting and Randomization](/feature_flags/concepts/traffic_splitting/)).
 
-{{< img src="getting_started/feature_flags/configure-targeting-rule.png" alt="Targeting Rule editor side panel on a feature flag." style="width:100%;" >}}
+{{< img src="feature_flags/concepts/configure-targeting-rule-2.png" alt="Targeting Rule editor side panel on a feature flag." style="width:70%;" >}}
 
 After configuring your targeting rules, click **Save Changes**, then enable the flag in the environment so SDKs can evaluate targeting rules.
 

content/en/feature_flags/concepts/traffic_splitting.md

@@ -15,11 +15,11 @@ When you define a targeting rule, you can serve a variant to a percentage of sub
 
 In the **Targeting Rules & Rollouts** section, set the percentage of the audience that should receive each variant. For a **single-variant** targeting rule, assign your desired traffic exposure to one variant. For example, roll out the **Free Shipping** variant of your promo banner to 50% of subjects matching your filter:
 
-{{< img src="getting_started/feature_flags/single-variant-traffic-exposure.png" alt="Targeting rule with a single-variant percentage rollout." style="width:100%;" >}}
+{{< img src="feature_flags/concepts/single-variant-traffic-exposure-2.png" alt="Targeting rule with a single-variant percentage rollout." style="width:75%;" >}}
 
 For a **multi-variant** rollout, assign percentages across multiple variants in the same targeting rule by selecting **Serve > Split Traffic** when editing or creating your targeting rule. The SDK distributes matching subjects across those variants according to the percentages you configure.
 
-{{< img src="getting_started/feature_flags/multi-variant-traffic-split.png" alt="Targeting rule with percentages split across multiple variants." style="width:100%;" >}}
+{{< img src="feature_flags/concepts/multi-variant-traffic-split-2.png" alt="Targeting rule with percentages split across multiple variants." style="width:75%;" >}}
 
 ## How the SDK evaluates percentage rollouts
 

content/en/getting_started/feature_flags/_index.md

@@ -226,7 +226,7 @@ client = api.get_client()
 {{% /tab %}}
 {{< /tabs >}}
 
-### Credentials at a glance
+#### Credentials at a glance
 
 | Credential | Used by | Where it goes | Sensitive? |
 | --- | --- | --- | --- |
@@ -243,14 +243,14 @@ More information about OpenFeature SDK configuration options can be found in its
 Go to [{{< ui >}}Create Feature Flag{{< /ui >}}][2] in Datadog and configure the following:
 
 - **Name and key**: The flag's display name and the key referenced in code
+- **SDK distribution channels**: Control which SDKs receive your flag configuration; see [Distribution Channels][6]
 - **Variant type** and **variant values**: See [Variants and Flag Types][5]
-- **Distribution channels**: See [Distribution Channels][6]
 
 <div class="alert alert-warning">
   {{< ui >}}Flag keys{{< /ui >}}, {{< ui >}}variant keys{{< /ui >}}, and {{< ui >}}variant values{{< /ui >}} should be considered public when sent to client SDKs.
 </div>
 
-{{< img src="getting_started/feature_flags/create-feature-flags.png" alt="Create Feature Flag" style="width:100%;" >}}
+{{< img src="getting_started/feature_flags/create-feature-flags-2.png" alt="Create Feature Flag" style="width:100%;" >}}
 
 ### Step 3: Evaluate the flag and write feature code
 
@@ -366,9 +366,9 @@ For percentage rollouts, see [Traffic Splitting and Randomization][8].
 
 ### Step 5: Monitor your rollout
 
-Monitor the feature rollout from the feature flag details page, which provides real-time exposure tracking and metrics such as {{< ui >}}error rate{{< /ui >}} and {{< ui >}}page load time{{< /ui >}}. As you incrementally release the feature with the flag, view the {{< ui >}}Real-Time Metric Overview{{< /ui >}} panel in the Datadog UI to see how the feature impacts application performance.
+Monitor the feature rollout from the feature flag details page, which provides real-time exposure tracking and metrics such as {{< ui >}}error rate{{< /ui >}} and {{< ui >}}page load time{{< /ui >}}. As you incrementally release the feature with the flag, view the {{< ui >}}Real-time metric overview{{< /ui >}} panel in the Datadog UI to see how the feature impacts application performance.
 
-{{< img src="getting_started/feature_flags/real-time-flag-metrics.png" alt="Real-time flag metrics panel" style="width:100%;" >}}
+{{< img src="getting_started/feature_flags/real-time-flag-metrics-2.png" alt="Real-time flag metrics panel" style="width:100%;" >}}
 
 For server-side applications, you can also enable flag evaluation metrics to track how often each variant is returned and graph the data on dashboards. See [Set Up Server-Side Flag Evaluation Metrics][9].