Skip to content

Commit

Permalink
Merge pull request #162 from checkr/zz/flags-ui
Browse files Browse the repository at this point in the history 
Improve UI
  • Loading branch information
@zhouzhuojie
zhouzhuojie authored Sep 13, 2018
2 parents 93f4a06 + e81b6e1 commit 42ae967
Show file tree
Hide file tree
Showing 15 changed files with 231 additions and 348 deletions.
5 changes: 2 additions & 3 deletions browser/flagr-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,11 @@
},
"dependencies": {
"diff": "^3.4.0",
"element-theme-chalk": "^2.0.0",
"element-ui": "^2.0.0",
"element-ui": "^2.4.6",
"lodash.clone": "^4.5.0",
"axios": "^0.18.0",
"vue": "^2.5.0",
"vue-json-editor": "^1.2.0",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0",
"vuedraggable": "^2.14.1",
"vuex": "^2.4.1"
Expand Down
18 changes: 8 additions & 10 deletions browser/flagr-ui/src/components/DebugConsole.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@
</template>

<script>
import Axios from 'axios'
import vueJsonEditor from 'vue-json-editor'
import constants from '@/constants'
const {
Expand Down Expand Up @@ -102,20 +104,16 @@ export default {
},
methods: {
postEvaluation (evalContext) {
this.$http.post(`${API_URL}/evaluation`, evalContext).then((response) => {
Axios.post(`${API_URL}/evaluation`, evalContext).then((response) => {
this.$message.success(`evaluation success`)
this.evalResult = response.body
}, () => {
this.$message.error(`evaluation error`)
})
this.evalResult = response.data
}, () => { this.$message.error(`evaluation error`) })
},
postEvaluationBatch (batchEvalContext) {
this.$http.post(`${API_URL}/evaluation/batch`, batchEvalContext).then((response) => {
Axios.post(`${API_URL}/evaluation/batch`, batchEvalContext).then((response) => {
this.$message.success(`evaluation success`)
this.batchEvalResult = response.body
}, () => {
this.$message.error(`evaluation error`)
})
this.batchEvalResult = response.data
}, () => { this.$message.error(`evaluation error`) })
}
},
components: {
Expand Down
171 changes: 68 additions & 103 deletions browser/flagr-ui/src/components/Flag.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,7 @@
<script>
import clone from 'lodash.clone'
import draggable from 'vuedraggable'
import Axios from 'axios'
import constants from '@/constants'
import helpers from '@/helpers/helpers'
Expand All @@ -431,7 +432,8 @@ const OPERATOR_VALUE_TO_LABEL_MAP = operators.reduce((acc, el) => {
const {
sum,
pluck
pluck,
handleErr
} = helpers
const {
Expand Down Expand Up @@ -482,8 +484,17 @@ export default {
dialogDeleteFlagVisible: false,
dialogEditDistributionOpen: false,
dialogCreateSegmentOpen: false,
flag: {},
flagId: this.$route.params.id,
flag: {
createdBy: '',
dataRecordsEnabled: false,
description: '',
enabled: false,
id: 0,
key: '',
segments: [],
updatedAt: '',
variants: []
},
newSegment: clone(DEFAULT_SEGMENT),
newVariant: clone(DEFAULT_VARIANT),
selectedSegment: null,
Expand All @@ -499,42 +510,37 @@ export default {
newDistributionIsValid () {
const percentageSum = sum(pluck(Object.values(this.newDistributions), 'percent'))
return percentageSum === 100
},
flagId () {
return this.$route.params.flagId
}
},
methods: {
deleteFlag () {
const {flagId} = this.$route.params
this.$http.delete(`${API_URL}/flags/${flagId}`)
.then(() => {
this.$router.replace({name: 'home'})
this.$message.success(`You deleted flag ${flagId}`)
}, err => {
this.$message.error(err.body.message)
})
Axios.delete(
`${API_URL}/flags/${this.flagId}`
).then(() => {
this.$router.replace({name: 'home'})
this.$message.success(`You deleted flag ${this.flagId}`)
}, handleErr.bind(this))
},
putFlag (flag) {
const flagId = this.$route.params.flagId
this.$http.put(`${API_URL}/flags/${flagId}`, {
Axios.put(`${API_URL}/flags/${this.flagId}`, {
description: flag.description,
dataRecordsEnabled: flag.dataRecordsEnabled,
key: flag.key || ''
}).then(() => {
this.$message.success(`You've updated flag`)
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
setFlagEnabled (checked) {
const flagId = this.$route.params.flagId
this.$http.put(
`${API_URL}/flags/${flagId}/enabled`,
Axios.put(
`${API_URL}/flags/${this.flagId}/enabled`,
{enabled: checked}
).then(() => {
const checkedStr = checked ? 'on' : 'off'
this.$message.success(`You turned ${checkedStr} this feature flag`)
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
selectVariant ($event, variant) {
const checked = $event
Expand All @@ -560,39 +566,30 @@ export default {
this.dialogEditDistributionOpen = true
},
saveDistribution (segment) {
const flagId = this.$route.params.flagId
const distributions = Object.values(this.newDistributions).filter(distribution => distribution.percent !== 0)
this.$http.put(
`${API_URL}/flags/${flagId}/segments/${segment.id}/distributions`,
Axios.put(
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/distributions`,
{distributions}
).then(response => {
let distributions = response.body
let distributions = response.data
this.selectedSegment.distributions = distributions
this.dialogEditDistributionOpen = false
this.$message.success('distributions updated')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
createVariant () {
const flagId = this.$route.params.flagId
this.$http.post(
`${API_URL}/flags/${flagId}/variants`,
Axios.post(
`${API_URL}/flags/${this.flagId}/variants`,
this.newVariant
).then(response => {
let variant = response.body
let variant = response.data
this.newVariant = clone(DEFAULT_VARIANT)
this.flag.variants.push(variant)
this.$message.success('new variant created')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
deleteVariant (variant) {
const {flagId} = this.$route.params
const isVariantInUse = this.flag.segments.some(segment => (
segment.distributions.some(distribution => distribution.variantID === variant.id)
))
Expand All @@ -606,140 +603,108 @@ export default {
return
}
this.$http.delete(
`${API_URL}/flags/${flagId}/variants/${variant.id}`
Axios.delete(
`${API_URL}/flags/${this.flagId}/variants/${variant.id}`
).then(() => {
this.$message.success('variant deleted')
this.fetchFlag()
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
putVariant (variant) {
const flagId = this.$route.params.flagId
variant.attachment = JSON.parse(variant.attachmentStr)
this.$http.put(
`${API_URL}/flags/${flagId}/variants/${variant.id}`,
Axios.put(
`${API_URL}/flags/${this.flagId}/variants/${variant.id}`,
variant
).then(() => {
this.$message.success('variant updated')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
createConstraint (segment) {
const {flagId} = this.$route.params
this.$http.post(
`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints`,
Axios.post(
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/constraints`,
segment.newConstraint
).then(response => {
let constraint = response.body
let constraint = response.data
segment.constraints.push(constraint)
segment.newConstraint = clone(DEFAULT_CONSTRAINT)
this.$message.success('new constraint created')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
putConstraint (segment, constraint) {
const {flagId} = this.$route.params
this.$http.put(
`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints/${constraint.id}`,
Axios.put(
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/constraints/${constraint.id}`,
constraint
).then(() => {
this.$message.success('constraint updated')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
deleteConstraint (segment, constraint) {
const {flagId} = this.$route.params
if (!confirm('Are you sure you want to delete this constraint?')) {
return
}
this.$http.delete(
`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints/${constraint.id}`
Axios.delete(
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/constraints/${constraint.id}`
).then(() => {
const index = segment.constraints.findIndex(constraint => constraint.id === constraint.id)
segment.constraints.splice(index, 1)
this.$message.success('constraint deleted')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
putSegment (segment) {
const flagId = this.$route.params.flagId
this.$http.put(
`${API_URL}/flags/${flagId}/segments/${segment.id}`,
Axios.put(
`${API_URL}/flags/${this.flagId}/segments/${segment.id}`,
{
description: segment.description,
rolloutPercent: parseInt(segment.rolloutPercent, 10)
}
).then(() => {
this.$message.success('segment updated')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
putSegmentsReorder (segments) {
const flagId = this.$route.params.flagId
this.$http.put(
`${API_URL}/flags/${flagId}/segments/reorder`,
Axios.put(
`${API_URL}/flags/${this.flagId}/segments/reorder`,
{ segmentIDs: pluck(segments, 'id') }
).then(() => {
this.$message.success('segment reordered')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
deleteSegment (segment) {
const {flagId} = this.$route.params
if (!confirm('Are you sure you want to delete this segment?')) {
return
}
this.$http.delete(
`${API_URL}/flags/${flagId}/segments/${segment.id}`
Axios.delete(
`${API_URL}/flags/${this.flagId}/segments/${segment.id}`
).then(() => {
const index = this.flag.segments.findIndex(el => el.id === segment.id)
this.flag.segments.splice(index, 1)
this.$message.success('segment deleted')
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
createSegment () {
const flagId = this.$route.params.flagId
this.$http.post(
`${API_URL}/flags/${flagId}/segments`,
Axios.post(
`${API_URL}/flags/${this.flagId}/segments`,
this.newSegment
).then(response => {
let segment = response.body
let segment = response.data
processSegment(segment)
segment.constraints = []
this.newSegment = clone(DEFAULT_SEGMENT)
this.flag.segments.push(segment)
this.$message.success('new segment created')
this.dialogCreateSegmentOpen = false
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
},
fetchFlag () {
const flagId = this.$route.params.flagId
this.$http.get(`${API_URL}/flags/${flagId}`).then(response => {
let flag = response.body
Axios.get(`${API_URL}/flags/${this.flagId}`).then(response => {
let flag = response.data
flag.segments.forEach(segment => processSegment(segment))
flag.variants.forEach(variant => processVariant(variant))
this.flag = flag
this.loaded = true
}, err => {
this.$message.error(err.body.message)
})
}, handleErr.bind(this))
}
},
mounted () {
Expand Down
12 changes: 6 additions & 6 deletions browser/flagr-ui/src/components/FlagHistory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,11 @@
</template>

<script>
import constants from '@/constants'
import Axios from 'axios'
import {diffJson, convertChangesToXML} from 'diff'
import constants from '@/constants'
const {
API_URL
} = constants
Expand Down Expand Up @@ -60,11 +62,9 @@ export default {
},
methods: {
getFlagSnapshots () {
this.$http.get(`${API_URL}/flags/${this.$props.flagId}/snapshots`).then((response) => {
this.flagSnapshots = response.body
}, () => {
this.$message.error(`failed to get flag snapshots`)
})
Axios.get(`${API_URL}/flags/${this.$props.flagId}/snapshots`).then((response) => {
this.flagSnapshots = response.data
}, () => { this.$message.error(`failed to get flag snapshots`) })
},
getDiff (newFlag, oldFlag) {
const o = JSON.parse(JSON.stringify(oldFlag))
Expand Down
Loading

0 comments on commit 42ae967

Please sign in to comment.