Skip to content

Commit

Permalink
Show segment overrides in compare view
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg committed Mar 6, 2024
1 parent de37684 commit 118e764
Show file tree
Hide file tree
Showing 7 changed files with 252 additions and 203 deletions.
6 changes: 5 additions & 1 deletion frontend/common/services/useProjectFlag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Req } from 'common/types/requests'
import { service } from 'common/service'
import data from 'common/data/base/_data'
import { BaseQueryFn } from '@reduxjs/toolkit/query'
import Utils from 'common/utils/utils'

function recursivePageGet(
url: string,
Expand Down Expand Up @@ -47,7 +48,10 @@ export const projectFlagService = service
],
queryFn: async (args, _, _2, baseQuery) => {
return await recursivePageGet(
`projects/${args.project}/features/?page_size=999`,
`projects/${args.project}/features/?${Utils.toParam({
...args,
page_size: 999,
})}`,
null,
baseQuery,
)
Expand Down
2 changes: 1 addition & 1 deletion frontend/common/types/requests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export type Req = {
environment: string
user: string
}
getProjectFlags: { project: string }
getProjectFlags: { project: string; environmentId?: string }
getProjectFlag: { project: string; id: string }
getRolesPermissionUsers: { organisation_id: string; role_id: string }
deleteRolesPermissionUsers: {
Expand Down
158 changes: 94 additions & 64 deletions frontend/web/components/CompareEnvironments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import FeatureListStore from 'common/stores/feature-list-store'
import ConfigProvider from 'common/providers/ConfigProvider'
import Permission from 'common/providers/Permission'
import Tag from './tags/Tag'
import { getProjectFlags } from 'common/services/useProjectFlag'
import { getStore } from 'common/store'
import Icon from './Icon'
import Constants from 'common/constants'
import Button from './base/forms/Button'
Expand All @@ -32,7 +30,8 @@ class CompareEnvironments extends Component {
environmentLeft: props.environmentId,
environmentRight: '',
isLoading: true,
projectFlags: null,
projectFlagsLeft: null,
projectFlagsRight: null,
showArchived: false,
}
}
Expand All @@ -49,59 +48,90 @@ class CompareEnvironments extends Component {
fetch = () => {
this.setState({ isLoading: true })
return Promise.all([
this.state.projectFlags
? Promise.resolve({ results: this.state.projectFlags })
: getProjectFlags(getStore(), { project: this.props.projectId }).then(
(res) => res.data,
),
data.get(
`${Project.api}projects/${
this.props.projectId
}/features/?page_size=999&environment=${ProjectStore.getEnvironmentIdFromKey(
this.state.environmentLeft,
)}`,
),
data.get(
`${Project.api}projects/${
this.props.projectId
}/features/?page_size=999&environment=${ProjectStore.getEnvironmentIdFromKey(
this.state.environmentRight,
)}`,
),
data.get(
`${Project.api}environments/${this.state.environmentLeft}/featurestates/?page_size=999`,
),
data.get(
`${Project.api}environments/${this.state.environmentRight}/featurestates/?page_size=999`,
),
]).then(([projectFlags, environmentLeftFlags, environmentRightFlags]) => {
const changes = []
const same = []
_.each(
_.sortBy(projectFlags.results, (p) => p.name),
(projectFlag) => {
const leftSide = environmentLeftFlags.results.find(
(v) => v.feature === projectFlag.id,
)
const rightSide = environmentRightFlags.results.find(
(v) => v.feature === projectFlag.id,
)
const change = {
leftEnabled: leftSide.enabled,
leftEnvironmentFlag: leftSide,
leftValue: leftSide.feature_state_value,
projectFlag,
rightEnabled: rightSide.enabled,
rightEnvironmentFlag: rightSide,
rightValue: rightSide.feature_state_value,
}
change.enabledChanged = change.rightEnabled !== change.leftEnabled
change.valueChanged = change.rightValue !== change.leftValue
if (change.enabledChanged || change.valueChanged) {
changes.push(change)
} else {
same.push(change)
}
},
)
this.setState({
changes,
environmentLeftFlags: _.keyBy(environmentLeftFlags.results, 'feature'),
environmentRightFlags: _.keyBy(
environmentRightFlags.results,
'feature',
),
isLoading: false,
projectFlags: projectFlags.results,
same,
})
})
]).then(
([
environmentLeftProjectFlags,
environmentRightProjectFlags,
environmentLeftFlags,
environmentRightFlags,
]) => {
const changes = []
const same = []
_.each(
_.sortBy(environmentLeftProjectFlags.results, (p) => p.name),
(projectFlagLeft) => {
const projectFlagRight = environmentRightProjectFlags.results?.find(
(projectFlagRight) => projectFlagRight.id === projectFlagLeft.id,
)
const leftSide = environmentLeftFlags.results.find(
(v) => v.feature === projectFlagLeft.id,
)
const rightSide = environmentRightFlags.results.find(
(v) => v.feature === projectFlagLeft.id,
)
const change = {
leftEnabled: leftSide.enabled,
leftEnvironmentFlag: leftSide,
leftValue: leftSide.feature_state_value,
projectFlagLeft,
projectFlagRight,
rightEnabled: rightSide.enabled,
rightEnvironmentFlag: rightSide,
rightValue: rightSide.feature_state_value,
}
change.enabledChanged = change.rightEnabled !== change.leftEnabled
change.valueChanged = change.rightValue !== change.leftValue
if (
change.enabledChanged ||
change.valueChanged ||
projectFlagLeft.num_identity_overrides ||
projectFlagLeft.num_segment_overrides ||
projectFlagRight.num_identity_overrides ||
projectFlagRight.num_segment_overrides
) {
changes.push(change)
} else {
same.push(change)
}
},
)
this.setState({
changes,
environmentLeftFlags: _.keyBy(
environmentLeftFlags.results,
'feature',
),
environmentRightFlags: _.keyBy(
environmentRightFlags.results,
'feature',
),
isLoading: false,
projectFlagsLeft: environmentLeftProjectFlags.results,
projectFlagsRight: environmentLeftProjectFlags.results,
same,
})
},
)
}

onSave = () => this.fetch()
Expand All @@ -113,7 +143,7 @@ class CompareEnvironments extends Component {
if (this.state.showArchived) {
return true
}
return !v.projectFlag.is_archived
return !v.projectFlagLeft.is_archived
})
}

Expand Down Expand Up @@ -193,11 +223,11 @@ class CompareEnvironments extends Component {
style={{ wordWrap: 'break-word' }}
className='font-weight-medium'
>
{p.projectFlag.name}
{p.projectFlagLeft.name}
</div>
<Button
onClick={() => {
Utils.copyFeatureName(p.projectFlag.name)
Utils.copyFeatureName(p.projectFlagLeft.name)
}}
theme='icon'
className='ms-2 me-2'
Expand All @@ -207,7 +237,7 @@ class CompareEnvironments extends Component {
</Row>
}
>
{p.projectFlag.description}
{p.projectFlagLeft.description}
</Tooltip>
</div>
<Permission
Expand All @@ -226,15 +256,15 @@ class CompareEnvironments extends Component {
fadeEnabled={fadeEnabled}
fadeValue={fadeValue}
environmentFlags={this.state.environmentLeftFlags}
projectFlags={this.state.projectFlags}
projectFlags={this.state.projectFlagsLeft}
permission={permission}
environmentId={this.state.environmentLeft}
projectId={this.props.projectId}
index={i}
canDelete={permission}
toggleFlag={toggleFlag}
removeFlag={removeFlag}
projectFlag={p.projectFlag}
projectFlag={p.projectFlagLeft}
/>
)}
</Permission>
Expand All @@ -254,15 +284,15 @@ class CompareEnvironments extends Component {
fadeEnabled={fadeEnabled}
fadeValue={fadeValue}
environmentFlags={this.state.environmentRightFlags}
projectFlags={this.state.projectFlags}
projectFlags={this.state.projectFlagsRight}
permission={permission}
environmentId={this.state.environmentRight}
projectId={this.props.projectId}
index={i}
canDelete={permission}
toggleFlag={toggleFlag}
removeFlag={removeFlag}
projectFlag={p.projectFlag}
projectFlag={p.projectFlagRight}
/>
)}
</Permission>
Expand Down Expand Up @@ -314,28 +344,28 @@ class CompareEnvironments extends Component {
<Flex className='flex-row'>
<div
className='table-column'
style={{ width: '120px' }}
style={{ width: '80px' }}
>
{
ProjectStore.getEnvironment(
this.state.environmentLeft,
).name
}
</div>
<Flex className='table-column'>Value</Flex>
<Flex className='table-column'></Flex>
</Flex>
<Flex className='flex-row'>
<div
className='table-column'
style={{ width: '120px' }}
style={{ width: '80px' }}
>
{
ProjectStore.getEnvironment(
this.state.environmentRight,
).name
}
</div>
<Flex className='table-column'>Value</Flex>
<Flex className='table-column'></Flex>
</Flex>
</Row>
}
Expand Down Expand Up @@ -365,7 +395,7 @@ class CompareEnvironments extends Component {
<Flex className='flex-row'>
<div
className='table-column'
style={{ width: '120px' }}
style={{ width: '80px' }}
>
{
ProjectStore.getEnvironment(
Expand All @@ -378,7 +408,7 @@ class CompareEnvironments extends Component {
<Flex className='flex-row'>
<div
className='table-column'
style={{ width: '120px' }}
style={{ width: '80px' }}
>
{
ProjectStore.getEnvironment(
Expand Down
42 changes: 26 additions & 16 deletions frontend/web/components/CompareIdentities.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ import FeatureValue from './FeatureValue'
import { sortBy } from 'lodash'
import { useHasPermission } from 'common/providers/Permission'
import Constants from 'common/constants'
import Button from './base/forms/Button'
import ProjectStore from 'common/stores/project-store'
import SegmentOverridesIcon from './SegmentOverridesIcon'
import IdentityOverridesIcon from './IdentityOverridesIcon'

type CompareIdentitiesType = {
projectId: string
Expand Down Expand Up @@ -49,7 +53,10 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
}) => {
const [leftId, setLeftId] = useState<IdentitySelectType['value']>()
const [rightId, setRightId] = useState<IdentitySelectType['value']>()
const { data: projectFlags } = useGetProjectFlagsQuery({ project: projectId })
const { data: projectFlags } = useGetProjectFlagsQuery({
environment: ProjectStore.getEnvironmentIdFromKey(_environmentId),
project: projectId,
})
const [environmentId, setEnvironmentId] = useState(_environmentId)
const [showArchived, setShowArchived] = useState(false)

Expand Down Expand Up @@ -211,23 +218,26 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
!enabledDifferent && !valueDifferent && 'faded'
}`}
>
<span className='font-weight-medium'>
{description ? (
<Tooltip
title={
<span>
{name}
<span className={'ms-1'}></span>
<Icon name='info-outlined' />
</span>
}
>
<Row>
<span className='font-weight-medium'>
<Tooltip title={<span>{name}</span>}>
{description}
</Tooltip>
) : (
name
)}
</span>
</span>
<Button
onClick={() => Utils.copyFeatureName(name)}
theme='icon'
className='ms-2 me-2'
>
<Icon name='copy' />
</Button>
<SegmentOverridesIcon
count={data.num_segment_overrides}
/>
<IdentityOverridesIcon
count={data.num_identity_overrides}
/>
</Row>
</div>
<div
onClick={goUserLeft}
Expand Down
Loading

0 comments on commit 118e764

Please sign in to comment.