github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

modal for UI confirmations

pull/805/head v0.90.65
hunterlong 2020-09-02 00:47:55 -07:00
parent 1c57f5af53
commit eb9792d184
14 changed files with 227 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/config/webpack.config.prod.js
View File

@ -74,7 +74,7 @@ const webpackConfig = merge(commonConfig, {
threshold: 10240,
minRatio: 0.8
}),
new webpack.HashedModuleIdsPlugin(),
// new webpack.HashedModuleIdsPlugin(),
new HtmlPlugin({
template: 'public/base.gohtml',
filename: 'base.gohtml',

28
frontend/src/assets/scss/layout.scss
View File

@ -14,6 +14,34 @@ A:HOVER {
color: lighten($text-color, 12%) !important;
}
.modal-backdrop {
top: 0;
left: 0;
position: absolute;
display: block;
z-index: 10000;
width: 100%;
height: 100%;
background-color: #00000073;
}
.modal {
z-index: 999999 !important;
display: block;
}
.modal-dialog {
top: 20%;
}
.modal-header {
padding: 0.5rem 1rem;
}
.modal-footer {
padding: 0.5rem 1rem;
}
.text-muted {
color: lighten($text-color, 30%) !important;
}

18
frontend/src/components/Dashboard/DashboardMessages.vue
View File

@ -81,13 +81,21 @@
serviceName (service) {
return service.name || "Global Message"
},
async delete(m) {
await Api.message_delete(m.id)
const messages = await Api.messages()
this.$store.commit('setMessages', messages)
},
async deleteMessage(m) {
let c = confirm(`Are you sure you want to delete message '${m.title}'?`)
if (c) {
await Api.message_delete(m.id)
const messages = await Api.messages()
this.$store.commit('setMessages', messages)
const modal = {
visible: true,
title: "Delete Announcement",
body: `Are you sure you want to delete Announcement ${m.title}?`,
btnColor: "btn-danger",
btnText: "Delete Announcement",
func: () => this.delete(m),
}
this.$store.commit("setModal", modal)
}
}
}

26
frontend/src/components/Dashboard/DashboardServices.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="col-12">
<div class="card contain-card mb-4">
<div class="card-header">{{ $t('top_nav.services') }}
<router-link v-if="$store.state.admin" to="/dashboard/create_service" class="btn btn-sm btn-success float-right">
@ -67,6 +68,7 @@
</template>
<script>
const Modal = () => import(/* webpackChunkName: "dashboard" */ "@/components/Elements/Modal")
const FormGroup = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Group')
const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '@/forms/ToggleSwitch')
const ServicesList = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ServicesList')
@ -76,6 +78,7 @@
export default {
name: 'DashboardServices',
components: {
Modal,
ServicesList,
ToggleSwitch,
FormGroup,
@ -112,13 +115,24 @@
this.group = g
this.edit = !mode
},
confirm_delete(service) {
},
async delete(g) {
await Api.group_delete(g.id)
const groups = await Api.groups()
this.$store.commit('setGroups', groups)
},
async deleteGroup(g) {
let c = confirm(`Are you sure you want to delete '${g.name}'?`)
if (c) {
await Api.group_delete(g.id)
const groups = await Api.groups()
this.$store.commit('setGroups', groups)
}
const modal = {
visible: true,
title: "Delete Group",
body: `Are you sure you want to delete group ${g.name}? All services attached will be removed from this group.`,
btnColor: "btn-danger",
btnText: "Delete Group",
func: () => this.delete(g),
}
this.$store.commit("setModal", modal)
}
}
}

18
frontend/src/components/Dashboard/DashboardUsers.vue
View File

@ -74,13 +74,21 @@
this.user = u
this.edit = !mode
},
async delete(u) {
await Api.user_delete(u.id)
const users = await Api.users()
this.$store.commit('setUsers', users)
},
async deleteUser(u) {
let c = confirm(`Are you sure you want to delete user '${u.username}'?`)
if (c) {
await Api.user_delete(u.id)
const users = await Api.users()
this.$store.commit('setUsers', users)
const modal = {
visible: true,
title: "Delete User",
body: `Are you sure you want to delete user ${u.username}?`,
btnColor: "btn-danger",
btnText: "Delete User",
func: () => this.delete(u),
}
this.$store.commit("setModal", modal)
}
}
}

20
frontend/src/components/Dashboard/Failures.vue
View File

@ -151,14 +151,22 @@ export default {
await this.gotoPage(1)
},
methods: {
async delete() {
await Api.service_failures_delete(this.service)
this.service = await Api.service(this.service.id)
this.total = 0
await this.load()
},
async deleteFailures() {
const c = confirm('Are you sure you want to delete all failures?')
if (c) {
await Api.service_failures_delete(this.service)
this.service = await Api.service(this.service.id)
this.total = 0
await this.load()
const modal = {
visible: true,
title: "Delete All Failures",
body: `Are you sure you want to delete all Failures for service ${this.service.title}?`,
btnColor: "btn-danger",
btnText: "Delete Failures",
func: () => this.delete(),
}
this.$store.commit("setModal", modal)
},
async gotoPage(page) {
this.page = page;

24
frontend/src/components/Dashboard/Incidents.vue
View File

@ -80,15 +80,23 @@ const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/
methods: {
async delete(i) {
this.res = await Api.incident_delete(i)
if (this.res.status === "success") {
this.incidents = this.incidents.filter(obj => obj.id !== i.id);
//await this.loadIncidents()
}
},
async deleteIncident(incident) {
let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
if (c) {
this.res = await Api.incident_delete(incident)
if (this.res.status === "success") {
this.incidents = this.incidents.filter(obj => obj.id !== incident.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
//await this.loadIncidents()
} // TODO: further error checking here... maybe alert user it failed with modal or so
}
const modal = {
visible: true,
title: "Delete Incident",
body: `Are you sure you want to delete Incident ${incident.title}?`,
btnColor: "btn-danger",
btnText: "Delete Incident",
func: () => this.delete(incident),
}
this.$store.commit("setModal", modal)
},
async createIncident() {

27
frontend/src/components/Dashboard/ServicesList.vue
View File

@ -72,12 +72,14 @@
<script>
import Api from "../../API";
import ServiceSparkList from "@/components/Service/ServiceSparkList";
import Modal from "@/components/Elements/Modal";
const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
export default {
name: 'ServicesList',
components: {
Modal,
ServiceSparkList,
ToggleSwitch,
draggable
@ -159,14 +161,25 @@ export default {
await Api.services_reorder(data)
await this.update()
},
tester(s) {
console.log(s)
},
async delete(s) {
this.loading = true
await Api.service_delete(s.id)
await this.update()
this.loading = false
},
async deleteService(s) {
let c = confirm(`Are you sure you want to delete '${s.name}'?`)
if (c) {
this.loading = true
await Api.service_delete(s.id)
await this.update()
this.loading = false
}
const modal = {
visible: true,
title: "Delete Service",
body: `Are you sure you want to delete service ${s.name}? This will also delete all failures, checkins, and incidents for this service.`,
btnColor: "btn-danger",
btnText: "Delete Service",
func: () => this.delete(s),
}
this.$store.commit("setModal", modal)
},
serviceGroup(s) {
let group = this.$store.getters.groupById(s.group_id)

22
frontend/src/components/Dashboard/ThemeEditor.vue
View File

@ -144,14 +144,22 @@ import('codemirror/mode/css/css.js')
this.pending = false
await this.fetchTheme()
},
async delete() {
this.pending = true
const resp = await Api.theme_generate(false)
await this.fetchTheme()
this.pending = false
},
async deleteAssets() {
this.pending = true
let c = confirm('Are you sure you want to delete all local assets?')
if (c) {
const resp = await Api.theme_generate(false)
await this.fetchTheme()
}
this.pending = false
const modal = {
visible: true,
title: "Delete Local Assets",
body: `Are you sure you want to delete all local assets?`,
btnColor: "btn-danger",
btnText: "Delete",
func: () => this.delete(),
}
this.$store.commit("setModal", modal)
},
async saveAssets() {
this.pending = true

50
frontend/src/components/Elements/Modal.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<div v-if="modal.visible" class="modal d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{modal.title}}</h5>
</div>
<div class="modal-body">
<p>{{modal.body}}</p>
</div>
<div class="modal-footer">
<button @click.prevent="close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button @click.prevent="runFunc" type="button" :class="`btn ${modal.btnColor}`">{{modal.btnText}}</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
data () {
return {
}
},
computed: {
modal() {
return this.$store.getters.modal
}
},
mounted() {
},
methods: {
runFunc() {
this.$store.getters.modal.func()
this.close()
},
close() {
this.$store.commit("setModal", {visible: false})
}
}
}
</script>
<style scoped>
</style>

4
frontend/src/forms/Notifier.vue
View File

@ -149,11 +149,11 @@
<div v-for="(log, i) in notifier.logs.reverse()" class="alert" :class="{'alert-danger': log.error, 'alert-dark': !log.success && !log.error, 'alert-success': log.success && !log.error}">
<span class="d-block">
Service '{{$store.getters.serviceById(log.service).name}}'
Service {{log.service}}
{{log.success ? "Success Triggered" : "Failure Triggered"}}
</span>
<div class="bg-white p-3 small mt-2">
<div v-if="log.message !== ''" class="bg-white p-3 small mt-2">
<code>{{log.message}}</code>
</div>

7
frontend/src/pages/Dashboard.vue
View File

@ -1,16 +1,20 @@
<template>
<div class="container col-md-7 col-sm-12 mt-md-5">
<div v-if="modal" class="modal-backdrop"></div>
<Modal/>
<TopNav :admin="admin"/>
<router-view :admin="admin"/>
</div>
</template>
<script>
import Modal from "@/components/Elements/Modal";
const TopNav = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/TopNav')
export default {
name: 'Dashboard',
components: {
Modal,
TopNav,
},
data () {
@ -20,6 +24,9 @@
}
},
computed: {
modal() {
return this.$store.getters.modal.visible
},
admin() {
return this.$store.getters.admin
},

22
frontend/src/pages/Settings.vue
View File

@ -189,15 +189,23 @@
liClass(id) {
return this.tab === id
},
async renew() {
await Api.renewApiKeys()
const core = await Api.core()
this.$store.commit('setCore', core)
this.core = core
await this.logout()
},
async renewApiKeys() {
let r = confirm("Are you sure you want to reset the API keys? You will be logged out.");
if (r === true) {
await Api.renewApiKeys()
const core = await Api.core()
this.$store.commit('setCore', core)
this.core = core
await this.logout()
const modal = {
visible: true,
title: "Reset API Key",
body: `Are you sure you want to reset the API keys? You will be logged out.`,
btnColor: "btn-danger",
btnText: "Reset",
func: () => this.renew(),
}
this.$store.commit("setModal", modal)
},
async logout () {
await Api.logout()

14
frontend/src/store.js
View File

@ -31,7 +31,15 @@ export default new Vuex.Store({
checkins: [],
admin: false,
user: false,
loggedIn: false
loggedIn: false,
modal: {
visible: false,
title: "Modal Header",
body: "This is the content for the modal body",
btnText: "Save Changes",
btnColor: "btn-primary",
func: null,
}
},
getters: {
hasAllData: state => state.hasAllData,
@ -49,6 +57,7 @@ export default new Vuex.Store({
notifiers: state => state.notifiers,
checkins: state => state.checkins,
loggedIn: state => state.loggedIn,
modal: state => state.modal,
isAdmin: state => state.admin,
isUser: state => state.user,
@ -140,6 +149,9 @@ export default new Vuex.Store({
setOAuth(state, oauth) {
state.oauth = oauth
},
setModal(state, modal) {
state.modal = modal
},
},
actions: {
async getAllServices(context) {