Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-17 01:17:29 +02:00
Code Issues Projects Releases Wiki Activity

Use new strategy execution in playground (#9553)

Browse Source 
Implements playground results for strategies.

Old design:

![image](https://github.com/user-attachments/assets/6c1f1bad-4568-4959-82ee-3ebc6a0aab2d)

New design:

![image](https://github.com/user-attachments/assets/8991fc67-7055-4f6c-b2cb-b2d445057962)


Still left: segments.

I also discovered during this that some of the new hooks (and also some
of the new components) accept deprecated types
(`IFeatureStrategyPayload` in this case). If that should indeed be
deprecated, then we also shouldn't use it in the new hooks / components
if we can avoid it. I'll make a task for it.

---------

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
This commit is contained in:
Thomas Heartman 2025-03-18 11:23:02 +01:00 committed by GitHub
parent 33733b64a7
commit c89cf196e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters.tsx
View File

@ -15,7 +15,10 @@ import type {
import type { IFeatureStrategyPayload } from 'interfaces/strategy';
export const useCustomStrategyParameters = (
strategy: CreateFeatureStrategySchema | IFeatureStrategyPayload,
strategy: Pick<
CreateFeatureStrategySchema | IFeatureStrategyPayload,
'parameters' | 'name'
>,
strategies: StrategySchema[],
) => {
const { parameters } = strategy;

7
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters.tsx
View File

@ -5,7 +5,12 @@ import type { FeatureStrategySchema } from 'openapi';
import { RolloutParameter } from '../RolloutParameter/RolloutParameter';
export const useStrategyParameters = (
strategy: Partial<FeatureStrategySchema>,
strategy: Partial<
Pick<
FeatureStrategySchema,
'name' | 'constraints' | 'variants' | 'parameters'
>
>,
displayGroupId?: boolean,
) => {
const { constraints, variants } = strategy;

31
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
View File

@ -4,35 +4,38 @@ import type {
} from 'openapi';
import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
import { SegmentExecution } from './SegmentExecution/SegmentExecution';
import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecutionParameters/StrategyExecutionParameters';
import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
import { formattedStrategyNames } from 'utils/strategyNames';
import { StyledBoxSummary } from './StrategyExecution.styles';
import { Badge } from 'component/common/Badge/Badge';
import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList';
import { objectId } from 'utils/objectId';
import type { FC } from 'react';
import { useStrategyParameters } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import { useCustomStrategyParameters } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters';
interface IStrategyExecutionProps {
type StrategyExecutionProps = {
strategyResult: PlaygroundStrategySchema;
percentageFill?: string;
input?: PlaygroundRequestSchema;
}
};
export const StrategyExecution: FC<IStrategyExecutionProps> = ({
export const StrategyExecution: FC<StrategyExecutionProps> = ({
strategyResult,
input,
}) => {
const { name, constraints, segments, parameters } = strategyResult;
const params = useStrategyParameters(strategyResult);
const { strategies } = useStrategies();
const { isCustomStrategy, customStrategyParameters: customStrategyItems } =
useCustomStrategyParameters(strategyResult, strategies);
const hasSegments = Boolean(segments && segments.length > 0);
const hasConstraints = Boolean(constraints && constraints?.length > 0);
const hasExecutionParameters =
name !== 'default' &&
Object.keys(formattedStrategyNames).includes(name);
const hasCustomStrategyParameters =
Object.keys(parameters).length > 0 &&
strategyResult.result.evaluationStatus === 'incomplete'; // Use of custom strategy can be more explicit from the API
if (!parameters) {
return null;
@ -49,16 +52,8 @@ export const StrategyExecution: FC<IStrategyExecutionProps> = ({
/>
))
: []),
hasExecutionParameters && (
<PlaygroundResultStrategyExecutionParameters
parameters={parameters}
constraints={constraints}
input={input}
/>
),
hasCustomStrategyParameters && (
<CustomStrategyParams strategyName={name} parameters={parameters} />
),
hasExecutionParameters && params,
isCustomStrategy && customStrategyItems,
name === 'default' && (
<StyledBoxSummary sx={{ width: '100%' }}>
The standard strategy is <Badge color='success'>ON</Badge> for