Skip to content

Commit 42ae967

Browse files
zhouzhuojiezhouzhuojie
authored
Merge pull request #162 from checkr/zz/flags-ui
Improve UI
2 parents 93f4a06 + e81b6e1 commit 42ae967

File tree

15 files changed

+231
-348
lines changed

15 files changed

+231
-348
lines changed

‎browser/flagr-ui/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,11 @@
1414
},
1515
"dependencies": {
1616
"diff": "^3.4.0",
17-
"element-theme-chalk": "^2.0.0",
18-
"element-ui": "^2.0.0",
17+
"element-ui": "^2.4.6",
1918
"lodash.clone": "^4.5.0",
19+
"axios": "^0.18.0",
2020
"vue": "^2.5.0",
2121
"vue-json-editor": "^1.2.0",
22-
"vue-resource": "^1.3.4",
2322
"vue-router": "^2.7.0",
2423
"vuedraggable": "^2.14.1",
2524
"vuex": "^2.4.1"

‎browser/flagr-ui/src/components/DebugConsole.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
</template>
5353

5454
<script>
55+
import Axios from 'axios'
5556
import vueJsonEditor from 'vue-json-editor'
57+
5658
import constants from '@/constants'
5759
5860
const {
@@ -102,20 +104,16 @@ export default {
102104
},
103105
methods: {
104106
postEvaluation (evalContext) {
105-
this.$http.post(`${API_URL}/evaluation`, evalContext).then((response) => {
107+
Axios.post(`${API_URL}/evaluation`, evalContext).then((response) => {
106108
this.$message.success(`evaluation success`)
107-
this.evalResult = response.body
108-
}, () => {
109-
this.$message.error(`evaluation error`)
110-
})
109+
this.evalResult = response.data
110+
}, () => { this.$message.error(`evaluation error`) })
111111
},
112112
postEvaluationBatch (batchEvalContext) {
113-
this.$http.post(`${API_URL}/evaluation/batch`, batchEvalContext).then((response) => {
113+
Axios.post(`${API_URL}/evaluation/batch`, batchEvalContext).then((response) => {
114114
this.$message.success(`evaluation success`)
115-
this.batchEvalResult = response.body
116-
}, () => {
117-
this.$message.error(`evaluation error`)
118-
})
115+
this.batchEvalResult = response.data
116+
}, () => { this.$message.error(`evaluation error`) })
119117
}
120118
},
121119
components: {

‎browser/flagr-ui/src/components/Flag.vue‎

Lines changed: 68 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,7 @@
416416
<script>
417417
import clone from 'lodash.clone'
418418
import draggable from 'vuedraggable'
419+
import Axios from 'axios'
419420
420421
import constants from '@/constants'
421422
import helpers from '@/helpers/helpers'
@@ -431,7 +432,8 @@ const OPERATOR_VALUE_TO_LABEL_MAP = operators.reduce((acc, el) => {
431432
432433
const {
433434
sum,
434-
pluck
435+
pluck,
436+
handleErr
435437
} = helpers
436438
437439
const {
@@ -482,8 +484,17 @@ export default {
482484
dialogDeleteFlagVisible: false,
483485
dialogEditDistributionOpen: false,
484486
dialogCreateSegmentOpen: false,
485-
flag: {},
486-
flagId: this.$route.params.id,
487+
flag: {
488+
createdBy: '',
489+
dataRecordsEnabled: false,
490+
description: '',
491+
enabled: false,
492+
id: 0,
493+
key: '',
494+
segments: [],
495+
updatedAt: '',
496+
variants: []
497+
},
487498
newSegment: clone(DEFAULT_SEGMENT),
488499
newVariant: clone(DEFAULT_VARIANT),
489500
selectedSegment: null,
@@ -499,42 +510,37 @@ export default {
499510
newDistributionIsValid () {
500511
const percentageSum = sum(pluck(Object.values(this.newDistributions), 'percent'))
501512
return percentageSum === 100
513+
},
514+
flagId () {
515+
return this.$route.params.flagId
502516
}
503517
},
504518
methods: {
505519
deleteFlag () {
506-
const {flagId} = this.$route.params
507-
this.$http.delete(`${API_URL}/flags/${flagId}`)
508-
.then(() => {
509-
this.$router.replace({name: 'home'})
510-
this.$message.success(`You deleted flag ${flagId}`)
511-
}, err => {
512-
this.$message.error(err.body.message)
513-
})
520+
Axios.delete(
521+
`${API_URL}/flags/${this.flagId}`
522+
).then(() => {
523+
this.$router.replace({name: 'home'})
524+
this.$message.success(`You deleted flag ${this.flagId}`)
525+
}, handleErr.bind(this))
514526
},
515527
putFlag (flag) {
516-
const flagId = this.$route.params.flagId
517-
this.$http.put(`${API_URL}/flags/${flagId}`, {
528+
Axios.put(`${API_URL}/flags/${this.flagId}`, {
518529
description: flag.description,
519530
dataRecordsEnabled: flag.dataRecordsEnabled,
520531
key: flag.key || ''
521532
}).then(() => {
522533
this.$message.success(`You've updated flag`)
523-
}, err => {
524-
this.$message.error(err.body.message)
525-
})
534+
}, handleErr.bind(this))
526535
},
527536
setFlagEnabled (checked) {
528-
const flagId = this.$route.params.flagId
529-
this.$http.put(
530-
`${API_URL}/flags/${flagId}/enabled`,
537+
Axios.put(
538+
`${API_URL}/flags/${this.flagId}/enabled`,
531539
{enabled: checked}
532540
).then(() => {
533541
const checkedStr = checked ? 'on' : 'off'
534542
this.$message.success(`You turned ${checkedStr} this feature flag`)
535-
}, err => {
536-
this.$message.error(err.body.message)
537-
})
543+
}, handleErr.bind(this))
538544
},
539545
selectVariant ($event, variant) {
540546
const checked = $event
@@ -560,39 +566,30 @@ export default {
560566
this.dialogEditDistributionOpen = true
561567
},
562568
saveDistribution (segment) {
563-
const flagId = this.$route.params.flagId
564-
565569
const distributions = Object.values(this.newDistributions).filter(distribution => distribution.percent !== 0)
566570
567-
this.$http.put(
568-
`${API_URL}/flags/${flagId}/segments/${segment.id}/distributions`,
571+
Axios.put(
572+
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/distributions`,
569573
{distributions}
570574
).then(response => {
571-
let distributions = response.body
575+
let distributions = response.data
572576
this.selectedSegment.distributions = distributions
573577
this.dialogEditDistributionOpen = false
574578
this.$message.success('distributions updated')
575-
}, err => {
576-
this.$message.error(err.body.message)
577-
})
579+
}, handleErr.bind(this))
578580
},
579581
createVariant () {
580-
const flagId = this.$route.params.flagId
581-
this.$http.post(
582-
`${API_URL}/flags/${flagId}/variants`,
582+
Axios.post(
583+
`${API_URL}/flags/${this.flagId}/variants`,
583584
this.newVariant
584585
).then(response => {
585-
let variant = response.body
586+
let variant = response.data
586587
this.newVariant = clone(DEFAULT_VARIANT)
587588
this.flag.variants.push(variant)
588589
this.$message.success('new variant created')
589-
}, err => {
590-
this.$message.error(err.body.message)
591-
})
590+
}, handleErr.bind(this))
592591
},
593592
deleteVariant (variant) {
594-
const {flagId} = this.$route.params
595-
596593
const isVariantInUse = this.flag.segments.some(segment => (
597594
segment.distributions.some(distribution => distribution.variantID === variant.id)
598595
))
@@ -606,140 +603,108 @@ export default {
606603
return
607604
}
608605
609-
this.$http.delete(
610-
`${API_URL}/flags/${flagId}/variants/${variant.id}`
606+
Axios.delete(
607+
`${API_URL}/flags/${this.flagId}/variants/${variant.id}`
611608
).then(() => {
612609
this.$message.success('variant deleted')
613610
this.fetchFlag()
614-
}, err => {
615-
this.$message.error(err.body.message)
616-
})
611+
}, handleErr.bind(this))
617612
},
618613
putVariant (variant) {
619-
const flagId = this.$route.params.flagId
620614
variant.attachment = JSON.parse(variant.attachmentStr)
621-
this.$http.put(
622-
`${API_URL}/flags/${flagId}/variants/${variant.id}`,
615+
Axios.put(
616+
`${API_URL}/flags/${this.flagId}/variants/${variant.id}`,
623617
variant
624618
).then(() => {
625619
this.$message.success('variant updated')
626-
}, err => {
627-
this.$message.error(err.body.message)
628-
})
620+
}, handleErr.bind(this))
629621
},
630622
createConstraint (segment) {
631-
const {flagId} = this.$route.params
632-
this.$http.post(
633-
`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints`,
623+
Axios.post(
624+
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/constraints`,
634625
segment.newConstraint
635626
).then(response => {
636-
let constraint = response.body
627+
let constraint = response.data
637628
segment.constraints.push(constraint)
638629
segment.newConstraint = clone(DEFAULT_CONSTRAINT)
639630
this.$message.success('new constraint created')
640-
}, err => {
641-
this.$message.error(err.body.message)
642-
})
631+
}, handleErr.bind(this))
643632
},
644633
putConstraint (segment, constraint) {
645-
const {flagId} = this.$route.params
646-
647-
this.$http.put(
648-
`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints/${constraint.id}`,
634+
Axios.put(
635+
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/constraints/${constraint.id}`,
649636
constraint
650637
).then(() => {
651638
this.$message.success('constraint updated')
652-
}, err => {
653-
this.$message.error(err.body.message)
654-
})
639+
}, handleErr.bind(this))
655640
},
656641
deleteConstraint (segment, constraint) {
657-
const {flagId} = this.$route.params
658-
659642
if (!confirm('Are you sure you want to delete this constraint?')) {
660643
return
661644
}
662645
663-
this.$http.delete(
664-
`${API_URL}/flags/${flagId}/segments/${segment.id}/constraints/${constraint.id}`
646+
Axios.delete(
647+
`${API_URL}/flags/${this.flagId}/segments/${segment.id}/constraints/${constraint.id}`
665648
).then(() => {
666649
const index = segment.constraints.findIndex(constraint => constraint.id === constraint.id)
667650
segment.constraints.splice(index, 1)
668651
this.$message.success('constraint deleted')
669-
}, err => {
670-
this.$message.error(err.body.message)
671-
})
652+
}, handleErr.bind(this))
672653
},
673654
putSegment (segment) {
674-
const flagId = this.$route.params.flagId
675-
this.$http.put(
676-
`${API_URL}/flags/${flagId}/segments/${segment.id}`,
655+
Axios.put(
656+
`${API_URL}/flags/${this.flagId}/segments/${segment.id}`,
677657
{
678658
description: segment.description,
679659
rolloutPercent: parseInt(segment.rolloutPercent, 10)
680660
}
681661
).then(() => {
682662
this.$message.success('segment updated')
683-
}, err => {
684-
this.$message.error(err.body.message)
685-
})
663+
}, handleErr.bind(this))
686664
},
687665
putSegmentsReorder (segments) {
688-
const flagId = this.$route.params.flagId
689-
this.$http.put(
690-
`${API_URL}/flags/${flagId}/segments/reorder`,
666+
Axios.put(
667+
`${API_URL}/flags/${this.flagId}/segments/reorder`,
691668
{ segmentIDs: pluck(segments, 'id') }
692669
).then(() => {
693670
this.$message.success('segment reordered')
694-
}, err => {
695-
this.$message.error(err.body.message)
696-
})
671+
}, handleErr.bind(this))
697672
},
698673
deleteSegment (segment) {
699-
const {flagId} = this.$route.params
700-
701674
if (!confirm('Are you sure you want to delete this segment?')) {
702675
return
703676
}
704677
705-
this.$http.delete(
706-
`${API_URL}/flags/${flagId}/segments/${segment.id}`
678+
Axios.delete(
679+
`${API_URL}/flags/${this.flagId}/segments/${segment.id}`
707680
).then(() => {
708681
const index = this.flag.segments.findIndex(el => el.id === segment.id)
709682
this.flag.segments.splice(index, 1)
710683
this.$message.success('segment deleted')
711-
}, err => {
712-
this.$message.error(err.body.message)
713-
})
684+
}, handleErr.bind(this))
714685
},
715686
createSegment () {
716-
const flagId = this.$route.params.flagId
717-
this.$http.post(
718-
`${API_URL}/flags/${flagId}/segments`,
687+
Axios.post(
688+
`${API_URL}/flags/${this.flagId}/segments`,
719689
this.newSegment
720690
).then(response => {
721-
let segment = response.body
691+
let segment = response.data
722692
processSegment(segment)
723693
segment.constraints = []
724694
this.newSegment = clone(DEFAULT_SEGMENT)
725695
this.flag.segments.push(segment)
726696
this.$message.success('new segment created')
727697
this.dialogCreateSegmentOpen = false
728-
}, err => {
729-
this.$message.error(err.body.message)
730-
})
698+
}, handleErr.bind(this))
731699
},
732700
fetchFlag () {
733-
const flagId = this.$route.params.flagId
734-
this.$http.get(`${API_URL}/flags/${flagId}`).then(response => {
735-
let flag = response.body
701+
Axios.get(`${API_URL}/flags/${this.flagId}`).then(response => {
702+
let flag = response.data
736703
flag.segments.forEach(segment => processSegment(segment))
737704
flag.variants.forEach(variant => processVariant(variant))
738705
this.flag = flag
739706
this.loaded = true
740-
}, err => {
741-
this.$message.error(err.body.message)
742-
})
707+
}, handleErr.bind(this))
743708
}
744709
},
745710
mounted () {

‎browser/flagr-ui/src/components/FlagHistory.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,11 @@
2626
</template>
2727

2828
<script>
29-
import constants from '@/constants'
29+
import Axios from 'axios'
3030
import {diffJson, convertChangesToXML} from 'diff'
3131
32+
import constants from '@/constants'
33+
3234
const {
3335
API_URL
3436
} = constants
@@ -60,11 +62,9 @@ export default {
6062
},
6163
methods: {
6264
getFlagSnapshots () {
63-
this.$http.get(`${API_URL}/flags/${this.$props.flagId}/snapshots`).then((response) => {
64-
this.flagSnapshots = response.body
65-
}, () => {
66-
this.$message.error(`failed to get flag snapshots`)
67-
})
65+
Axios.get(`${API_URL}/flags/${this.$props.flagId}/snapshots`).then((response) => {
66+
this.flagSnapshots = response.data
67+
}, () => { this.$message.error(`failed to get flag snapshots`) })
6868
},
6969
getDiff (newFlag, oldFlag) {
7070
const o = JSON.parse(JSON.stringify(oldFlag))

0 commit comments

Comments
 (0)