-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (154 loc) · 5.75 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Github Deployment Cleaner 🧹🧼</title>
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
/>
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Required scripts -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
</head>
<body>
<!-- Our application root element -->
<div id="app">
<b-container fluid>
<h1 class="title">
Github deployment cleaner
</h1>
<p>
This tool performs all calls client side, no keys will be saved.
All calls are performed directly on the Github API.
See source code here: <a href="https://github.com/jaap/github-deployment-cleaner">https://github.com/jaap/github-deployment-cleaner</a>
</p>
<p>
Based on <a href="https://stackblitz.com/edit/github-deployment-clearer">https://stackblitz.com/edit/github-deployment-clearer</a>
And <a href="https://stackoverflow.com/questions/53452910/how-to-remove-a-github-environment">https://stackoverflow.com/questions/53452910/how-to-remove-a-github-environment</a>
</p>
<p>
<strong>RECOMMENDED</strong>: Disconnect HEROKU from Github before doing this (though not strictly necessary, I think).
<br>
See <a href="https://stackoverflow.com/a/61272173/6569950">https://stackoverflow.com/a/61272173/6569950</a> for more info.
</p>
<b-form-group
id="user_or_rog"
label="User or organisation name"
label-for="user_or_rog"
>
<b-form-input id="input-1" v-model="userOrOrg" trim></b-form-input>
</b-form-group>
<b-form-group
id="repo"
label="Repository"
label-for="repo"
>
<b-form-input id="input-1" v-model="repo" trim></b-form-input>
</b-form-group>
<b-form-group
id="token"
label="Token"
description="Must be `repo_deployments` authorized"
label-for="token"
>
<b-form-input id="input-1" v-model="token" trim></b-form-input>
</b-form-group>
<b-form-group
>
<b-button @click="getDeployments">Get deployments</b-button> - Gets only 30 at a time. Repeat if needed. I'll accept a PR to do some smarter automation.
</b-form-group>
<table class="table" v-if="deployments.length > 0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Creator</th>
<th scope="col">Created at</th>
<th>
<b-button variant="danger" @click="deleteAll">Delete all</b-button>
</th>
</tr>
</thead>
<tbody name="fade" is="transition-group">
<tr v-for="deployment in deployments" :key="deployment.id" v-if="!deployment.deleted">
<th scope="row">{{ deployment.id }}</th>
<td>{{ deployment.description }}</td>
<td>{{ deployment.creator.login }}</td>
<td>{{ deployment.created_at }}</td>
<td>
<b-button v-if="!deployment.deleting" variant="danger" @click="deleteDeployment(deployment)">Delete</b-button>
<b-spinner variant="danger" v-else></b-spinner>
</td>
</tr>
</tbody>
</table>
</b-container>
</div>
<!-- Start running your app -->
<script>
window.app = new Vue({
el: '#app',
data: {
userOrOrg: '',
repo: '',
token: '',
deployments: []
},
computed: {
url() {
return `https://api.github.com/repos/${this.userOrOrg}/${this.repo}/deployments`
}
},
methods: {
async getDeployments(){
const res = await fetch(this.url, { headers: { authorization: `token ${this.token}` } });
const data = await res.json();
data.forEach(function (element) {
element.deleted = false
element.deleting = false
});
this.deployments = data;
},
async deleteDeployment(deployment){
deployment.deleting = true
fetch(`${this.url}/${deployment.id}/statuses`, {
method: "POST",
body: JSON.stringify({ state: "inactive" }),
headers: {
"Content-Type": "application/json",
Accept: "application/vnd.github.ant-man-preview+json",
authorization: `token ${this.token}`
}
}).then(() => {
fetch(`${this.url}/${deployment.id}`, {
method: "DELETE",
headers: { authorization: `token ${this.token}` }
}).then(() => {
deployment.deleting = false;
deployment.deleted = true;
})
});
},
async deleteAll(){
this.deployments.forEach(deployment => {
this.deleteDeployment(deployment)
})
}
}
})
</script>
</body>
</html>