-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
104 lines (76 loc) · 3.99 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
104
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>ADO Epic Visualizer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
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="script.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="view-main">
<h1 class="display-4" id="adovis-title">ADO Epic Visualizer</h1>
<p id="chart"></p>
<div class="form-group row">
<div class="col-sm-3">
<input id="input-epicId" class="form-control" placeholder="Epic ID" />
</div>
<div class="col-sm-6">
<button id="button-visualize" class="btn btn-primary">Visualize epic</button>
<input id="checkbox-show-closed" type="checkbox" style="margin-left: 30px" /> <label for="checkbox-show-closed">Show closed</label>
<input id="checkbox-show-2nd-level-children" type="checkbox" style="margin-left: 30px" /> <label for="checkbox-show-2nd-level-children">Show 2<sup><small>nd</small></sup> level children</label>
</div>
</div>
<p>Visualization requires the following:</p>
<ol>
<li>The epic exists and you have access it.</li>
<li>All tasks that need to be visualized within the epic are set as immediate children of the epic.</li>
<li>Dependencies between child tasks are defined using successor-predecessor relationship.</li>
</ol>
<p>
<button id="button-logout" class="btn btn-secondary">Log out</button>
</p>
</div>
<div id="view-login">
<h1 class="display-4">ADO Epic Visualizer</h1>
<p>ADO epic visualizer allows to visualize dependencies between child tasks in a given epic. To start, please log in:</p>
<ol>
<li>Go to <a href="https://dev.azure.com/skype/_usersSettings/tokens" target="_blank">ADO / Personal Access Tokens</a>.</li>
<li>Create a new PAT token with the following parameters:</li>
<ul>
<li><b>Name:</b> ADO RM epic visualizer</li>
<li><b>Organization:</b> skype</li>
<li><b>Expiration:</b> decide for yourself</li>
<li><b>Scopes:</b> custom defined, Work Items (Read)</li>
</ul>
<li>Copy the token to the input field below. Note:</li>
<ul>
<li>You might also want to save the token in some secure place in case you need to login again (e. g. on another machine) while it's still active.</li>
<li>This page will store the token in the local storage of your browser and it will also send the token with requests to ADO to retrieve the data about the tasks. The page will not use the token in any other ways.</li>
</ul>
<li>Click the <b>Log in</b> button.</li>
</ol>
<div class="form-group row">
<div class="col-sm-3">
<input id="input-pat" placeholder="PAT" class="form-control" />
</div>
<div class="col-sm-2">
<button id="button-login" class="btn btn-primary">Log in</button>
</div>
</div>
</div>
</div>
</body>
</html>