forked from contentstack/extensions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (96 loc) · 15.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Optimizely Experiment</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://assets.contentstack.io/v3/assets/blte08a9a0af1c1320b/bltf24633929b28f9db/5b69788896ee083e4a2ce449/ui-extensions-sdk.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/1.1.0/ui-extension-sdk.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<style media="all">
body{line-height:1}.container{display:none}.container,.row{margin-top:10px}.delete-container,.edit-container,.experiment-container,.new-experiment-container{display:none}.new-experiment{padding-right:5px;padding-top:5px}.details,.edit,.key,.keyName,.result,.weight{color:#748590;font-size:14px}.details:hover{cursor:pointer}.labell{padding:10px 15px 0 15px;color:#474747;font-size:20px}.table-responsive{margin-top:10px;border-left:none!important;border-right:none!important}thead tr th{color:#4f6471;font-size:15px;font-weight:100;vertical-align:middle!important}.table>tbody>tr>td{vertical-align:middle}.table>tbody>tr>td>p{margin-bottom:0!important}.fa:hover{opacity:1!important;background:#f5fbfc!important}.experiment-data tr:hover,.experiment-list tr:hover{background:#f5fbfc!important}.action,.cpbtn,.result-icon{border:1px solid #d1dfe2;background:#fff;text-decoration:none;color:#748590 background-color: #fff;padding:10px;font-weight:400;line-height:1px}.action:hover{border-color:#c6d4d7}.fa{color:#748590!important;background-color:#fff!important;font-size:14px!important;opacity:.7}.disabled{opacity:.5}.goBack{float:left;margin-left:-15px;padding-right:8px}.add,.goBack{background-color:#fff;cursor:pointer}.add:hover,.goBack:hover{background-color:#fff;cursor:pointer}.key{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:70%}.refresh{font-size:17px!important}.plus{font-size:16px!important}.refresh-btn{float:right;padding-top:5px}.details{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.audiences,.experiment-key,.variations{margin:30px 0}.audienceLabel,.keyLabel,.variationLabel{margin:10px 0;color:#4f6471;font-size:15px}.audienceLabel{margin:10px 0 15px 0}.keyLabel{font-size:20px}.keyName{margin:10px 0}.table-striped>tbody>tr:nth-child(odd){background-color:#fff}.experiment-key{display:inline}#loader{display:none;margin-left:45%;margin-top:50%}.back{font-size:25px!important;margin-right:0}.keyLabel{margin-top:0;padding-top:10px}.audienceLabel a{text-decoration:none!important;color:#4f6471}.user{float:left;border:none;background:#fff;padding:0 2px 0 0;line-height:1px}.link{border:none;background:#fff;padding:0 2px 0 4px;line-height:1px}
</style>
</head>
<body>
<div id="loader" class="reference-loading">
<div class="loading-flash">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="labell">List of Experiments</div>
<div class="new-experiment"><a href target="_blank"><button data-toggle="tooltip" title="Add/Edit Expeiment" type="button" class="btn add"><i class="plus fa fa-pencil" aria-hidden="true"></i></button></a></div>
<div class="refresh-btn"><button data-toggle="tooltip" title="Refresh" type="button" class="btn add"><i class="refresh fa fa-refresh"></i></button></div>
<div class="col-md-12">
<div class="table-responsive list">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Expeiment Name</th>
<th>Action</th>
<th>Result</th>
</thead>
<tbody class="experiment-list">
</tbody>
</table>
</div>
</div>
</div>
<div class="experiment-container" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="experiment-details">
<div class="experiment-key">
</div>
<div class="variations">
<div class="variationLabel">Variations & Traffic Distribution</div>
<div class="table-responsive detail">
<table class="table table-bordred table-striped">
<thead>
<th>Key</th>
<th></th>
<th>Traffic <br> Distribution</th>
</thead>
<tbody class="experiment-data">
</tbody>
</table>
</div>
</div>
<div class="audiences">
</div>
</div>
</div>
</div>
<script>
let extensionField,audiences,clipboardJS=new ClipboardJS(".cpbtn"),optimizely;class Optimizely{constructor({access_token:t,project_id:e}){this.ProjectId=e,this.AccessToken=t}getAllExperiments(){let n=this,s;return new Promise((e,a)=>{var t={Authorization:`Bearer ${n.AccessToken}`},i=`https://api.optimizely.com/v2/experiments?project_id=${n.ProjectId}`;fetch(i,{method:"GET",headers:t}).then(t=>(s=t.status,t.json())).then(t=>{throw 200===s&&e(t),Error("Failed to fetch resource")}).catch(t=>{a(t)})})}getExperimentDetail(i){let n=this,s;return new Promise((e,a)=>{var t={Authorization:`Bearer ${n.AccessToken}`};fetch(`https://api.optimizely.com/v2/experiments/${i}`,{method:"GET",headers:t}).then(t=>(s=t.status,t.json())).then(t=>{throw 200===s&&e(t),Error("Failed to fetch resource")}).catch(t=>{a(t)})})}getAudiences(){let n=this,s;return new Promise((e,a)=>{var t={Authorization:`Bearer ${n.AccessToken}`},i=`https://api.optimizely.com/v2/audiences?project_id=${n.ProjectId}`;fetch(i,{method:"GET",headers:t}).then(t=>(s=t.status,t.json())).then(t=>{throw 200===s&&e(t),Error("Failed to fetch resource")}).catch(t=>{a(t)})})}experimentStartOrStop(i,n){let s=this,r;return new Promise((e,a)=>{var t={Authorization:`Bearer ${s.AccessToken}`,"Content-Type":"application/json"};fetch(`https://api.optimizely.com/v2/experiments/${i}?action=${n}`,{method:"PATCH",headers:t,body:JSON.stringify({project_id:s.ProjectId})}).then(t=>(r=t.status,t.json())).then(t=>{throw 200===r&&e(t),Error("Failed to fetch resource")}).catch(t=>{a(t)})})}}function renderToShowExperimentDetails(e){if($(".experiment-data, .experiment-key, .audiences").empty(),$(".experiment-key").append(`<div class="btn-container"><button class="btn goBack" data-toggle="tooltip" title="Go Back" type="button"><i class="back fa fa-angle-left"></i></button> <div class="keyLabel">${e.key}</div> </div>`),e.variations.forEach(t=>{void 0===t.description?$(".experiment-data").append(`<tr><td id="${t.key}" class="key">${t.key}</td><td data-toggle="tooltip" title="Copy Variation Key"><button class="cpbtn" data-clipboard-target="#${t.key}"><i class="fa fa-copy"></i></button></td><td class="weight"> ${t.weight/100}%</td>`):$(".experiment-data").append(`<tr><td data-toggle="tooltip" title="Description : ${t.description}" id="${t.key}" class="key">${t.key}</td><td data-toggle="tooltip" title="Copy Variation Key"><button class="cpbtn" data-clipboard-target="#${t.key}"><i class="fa fa-copy"></i></button></td><td class="weight"> ${t.weight/100}%</td>`)}),$(".audiences").append('<div data-toggle="tooltip" title="Audiences" class="audienceLabel"><a class="audienceLink" href="" target="_blank"> <div class="audience-btn"></div>Audiences<i class="link fa fa-external-link"></i></a></div>'),"everyone"!==e.audience_conditions){let t=JSON.parse("["+e.audience_conditions+"]");t.forEach(t=>{t.forEach(e=>{"string"!=typeof e&&audiences.forEach(t=>{t.id===e.audience_id&&$(".audiences").append(`<div class="keyName" id="${t.id}">${t.name}</div>`)})})})}else $(".audiences").append('<div class="keyName">Everyone</div>');$("#loader").hide(),$(".experiment-container").show(),domChangeListnerOfExperimentDetailPage()}function renderToListExperiments(t){$(".experiment-list").empty(),t.forEach(t=>{"not_started"===t.status&&(void 0===t.description||t.description.length<=0?$(".experiment-list").append(`<tr><td data-toggle="tooltip" title="Type : ${t.type}" class="details" id="${t.id}">${t.key}</td>
+ <td class="edit"><p data-placement="top" data-toggle="tooltip" title="Run"><button id="start" class="action" data-title="Run"><span><i class="fa fa-play"></i></span></button></p></td>
+ <td class="result"><p data-placement="top" data-toggle="tooltip" title="Result"><a target="_blank" href="" id="${t.campaign_id}" class="result-icon disabled"><i class="fa fa-bar-chart"></i></a></p></td>
+ </tr>`):$(".experiment-list").append(`<tr><td data-toggle="tooltip" title="Type : ${t.type} \n Description : ${t.description}" class="details" id="${t.id}">${t.key}</td>
<td class="edit"><p data-placement="top" data-toggle="tooltip" title="Run"><button id="start" class="action" data-title="Run"><span><i class="fa fa-play"></i></span></button></p></td>
<td class="result"><p data-placement="top" data-toggle="tooltip" title="Result"><a target="_blank" href="" id="${t.campaign_id}" class="result-icon disabled"><i class="fa fa-bar-chart"></i></a></p></td>
</tr>`)),"paused"===t.status&&(void 0===t.description||t.description.length<=0?$(".experiment-list").append(`<tr><td data-toggle="tooltip" title="Type : ${t.type}" class="details" id="${t.id}">${t.key}</td>
<td class="edit"><p data-placement="top" data-toggle="tooltip" title="Run"><button id="start" class="action" data-title="Run"><span><i class="fa fa-play"></i></span></button></p></td>
<td class="result"><p data-placement="top" data-toggle="tooltip" title="Result"><a target="_blank" href="" id="${t.campaign_id}"><button class="result-icon"><span><i class="fa fa-bar-chart"></i></span></button></p></td>
</tr>`):$(".experiment-list").append(`<tr><td data-toggle="tooltip" title="Type : ${t.type} \n Description : ${t.description}" class="details" id="${t.id}">${t.key}</td>
<td class="edit"><p data-placement="top" data-toggle="tooltip" title="Run"><button id="start" class="action" data-title="Run"><span><i class="fa fa-play"></i></span></button></p></td>
<td class="result"><p data-placement="top" data-toggle="tooltip" title="Result"><a target="_blank" href="" id="${t.campaign_id}"><button class="result-icon"><span><i class="fa fa-bar-chart"></i></span></button></p></td>
</tr>`)),"running"===t.status&&(void 0===t.description||t.description.length<=0?$(".experiment-list").append(`<tr><td data-toggle="tooltip" title="Type : ${t.type}" class="details" id="${t.id}">${t.key}</td>
<td class="edit"><p data-placement="top" data-toggle="tooltip" title="Pause"><button id="pause" class="action" data-title="Pause"><span><i class="fa fa-pause"></i></span></button></p></td>
<td class="result"><p data-placement="top" data-toggle="tooltip" title="Result"><a target="_blank" href="" id="${t.campaign_id}"><button class="result-icon"><span><i class="fa fa-bar-chart"></i></span></button></p></td>
</tr>`):$(".experiment-list").append(`<tr><td data-toggle="tooltip" title="Type : ${t.type} \n Description : ${t.description}" class="details" id="${t.id}">${t.key}</td>
<td class="edit"><p data-placement="top" data-toggle="tooltip" title="Pause"><button id="pause" class="action" data-title="Pause"><span><i class="fa fa-pause"></i></span></button></p></td>
<td class="result"><p data-placement="top" data-toggle="tooltip" title="Result"><a target="_blank" href="" id="${t.campaign_id}"><button class="result-icon"><span><i class="fa fa-bar-chart"></i></span></button></a></p></td>
</tr>`))}),$("#loader").hide(),$(".container").show(),domChangeListnerOfExperimentsListPage()}function domChangeListnerOfExperimentDetailPage(){$(".goBack").click(()=>{$(".experiment-data, .experiment-key, .audiences").empty(),$(".labell").css({display:"block"}),$(".new-experiment").css({display:"block"}),$(".table-responsive, .refresh-btn").show(),$(".experiment-container").hide(),$(".new-experiment-container").hide()}),$(".audienceLink").click(t=>{var e=`https://app.optimizely.com/v2/projects/${extensionField.config.project_id}/audiences`;$(t.currentTarget).attr("href",e)})}function domChangeListnerOfExperimentsListPage(){$(".details").click(t=>{t=t.currentTarget.id;optimizely.getExperimentDetail(t).then(t=>{renderToShowExperimentDetails(t)}),$(".delete-container, .list, .edit-container, .new-experiment-container, .refresh-btn").hide(),$(".labell").css({display:"none"}),$(".new-experiment").css({display:"none"}),$("#loader").show()}),$(".result-icon").click(t=>{var e=$(t.currentTarget).parent("a").attr("id"),a=$(t.currentTarget).parent().parent().parent().siblings(".details").attr("id"),a=`https://app.optimizely.com/v2/projects/${extensionField.config.project_id}/results/${e}/experiments/${a}?previousView=EXPERIMENTS`;$(t.currentTarget).parent("a").attr("href",a)}),$(".add").click(t=>{var e=`https://app.optimizely.com/v2/projects/${extensionField.config.project_id}/experiments`;$(t.currentTarget).parent("a").attr("href",e)}),$(".action").click(t=>{let e=t.currentTarget.id;$(t.currentTarget).find("span").html('<i class="fa fa-spinner fa-spin"></i>'),$(t.currentTarget).attr("disabled","disabled");var a=$(t.currentTarget).parent().parent().siblings(".details").attr("id");optimizely.experimentStartOrStop(a,e).then(()=>{$(t.currentTarget).parent().parent().parent().find(".result").find(".result-icon").removeClass("disabled"),"start"===e?($(t.currentTarget).attr("id","pause").attr("data-title","Pause"),$(t.currentTarget).parent().attr("title","Pause"),$(t.currentTarget).find("span").html('<i class="fa fa-pause"></i>')):($(t.currentTarget).attr("id","start").attr("data-title","Run"),$(t.currentTarget).parent().attr("title","Run"),$(t.currentTarget).find("span").html('<i class="fa fa-play">')),$(t.currentTarget).removeAttr("disabled")})}),$(".refresh-btn").click(()=>{$(".container").hide(),$("#loader").show(),optimizely.getAllExperiments().then(t=>{renderToListExperiments(t)})})}$(document).ready(()=>{ContentstackUIExtension.init().then(t=>{extensionField=t,$("#loader").show(),optimizely=new Optimizely(t.config),optimizely.getAllExperiments().then(t=>{renderToListExperiments(t)}),optimizely.getAudiences().then(t=>{audiences=t}),extensionField.window.enableAutoResizing()})});
</script>
</body>
</html>