adam.goldsmith/SaltStatus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Color the background of the connection state to make it more clear

Browse Source
This commit is contained in:
Adam Goldsmith 2020-09-13 22:39:15 -04:00
parent 69cdb76a60
commit 466ae39346
1 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.vue
View File

@ -7,13 +7,9 @@
Hide <code>saltutil.find_job</code> jobs Hide <code>saltutil.find_job</code> jobs
<input type="checkbox" v-model="hideFindJob" /> <input type="checkbox" v-model="hideFindJob" />
</label> </label>
{{ <span class="event-source-state" :class="evtSourceState">
!evtSource || evtSource.readyState == evtSource.CLOSED {{ evtSourceState }}
? 'Disconnected' </span>
: evtSource.readyState == evtSource.OPEN
? 'Connected'
: 'Connecting'
}}
<Job <Job
v-for="(jobEvents, jid) in jobs" v-for="(jobEvents, jid) in jobs"
:key="jid" :key="jid"
@ -43,6 +39,7 @@ export default class App extends Vue {
showRawEvents: boolean = false; showRawEvents: boolean = false;
hideFindJob: boolean = true; hideFindJob: boolean = true;
evtSourceTimeout: number | null = null; evtSourceTimeout: number | null = null;
evtSourceState: 'Disconnected' | 'Connecting' | 'Connected' = 'Disconnected';
mounted(): void { mounted(): void {
fetch(BASE_URL + 'login', { fetch(BASE_URL + 'login', {
@ -64,7 +61,7 @@ export default class App extends Vue {
this.evtSource.onopen = (e) => { this.evtSource.onopen = (e) => {
console.info('Connected to eventSource.'); console.info('Connected to eventSource.');
this.$forceUpdate(); // evtSource.readyState won't be detected otherwise this.updateEvtSourceState();
}; };
this.evtSource.onmessage = (e) => { this.evtSource.onmessage = (e) => {
@ -83,8 +80,8 @@ export default class App extends Vue {
if (!this.evtSourceTimeout) { if (!this.evtSourceTimeout) {
console.info('Lost eventSource, reconnecting'); console.info('Lost eventSource, reconnecting');
console.info(e); console.info(e);
this.$forceUpdate(); // evtSource.readyState won't be detected otherwise this.updateEvtSourceState();
this.evtSource.close(); this.evtSource?.close();
this.evtSourceTimeout = window.setTimeout( this.evtSourceTimeout = window.setTimeout(
this.connectEventSource, this.connectEventSource,
1000, 1000,
@ -100,5 +97,28 @@ export default class App extends Vue {
): event is Extract<salt.SaltEvent, { splitTag: ['salt', T, ...any[]] }> { ): event is Extract<salt.SaltEvent, { splitTag: ['salt', T, ...any[]] }> {
return event.splitTag[1] === type; return event.splitTag[1] === type;
} }
updateEvtSourceState(): void {
this.evtSourceState =
!this.evtSource || this.evtSource.readyState == this.evtSource.CLOSED
? 'Disconnected'
: this.evtSource.readyState == this.evtSource.OPEN
? 'Connected'
: 'Connecting';
}
} }
</script> </script>
<style lang="scss">
.event-source-state {
&.Disconnected {
background-color: red;
}
&.Connecting {
background-color: yellow;
}
&.Connected {
background-color: green;
}
}
</style>