Исправил бесконечную загрузку, добавил настройки размера страниц и hdump

This commit is contained in:
saber-nyan 2019-05-06 21:42:20 +03:00
parent a555570918
commit 5656770319
No known key found for this signature in database
GPG Key ID: 7B069E9C295E6B4A
5 changed files with 76 additions and 18 deletions

View File

@ -44,11 +44,20 @@ export default {
'Content-Type': 'application/json',
},
});
const packets = this.packets;
let startsFrom;
if (packets && packets.length && packets[packets.length - 1]) {
startsFrom = packets[packets.length - 1].id;
} else {
startsFrom = 0;
}
instance.post(`/packet/${this.streamId}`, {
fetchLatest: true,
fetchLatest: false,
direction: 'ASC',
startingFrom: this.packets.length,
pageSize: 50,
startingFrom: startsFrom,
pageSize: parseInt(this.$store.state.pageSize),
}).then(response => {
const data = response.data;
if (data.length === 0) return $state.complete();

View File

@ -13,13 +13,14 @@ export default {
name: 'Packet',
props: ['id', 'content', 'timestamp',],
methods: {
hexdump(buffer, blockSize) {
hexdump(buffer, blockSize, lineNumberBase) {
blockSize = parseInt(blockSize, 10) || 16;
lineNumberBase = parseInt(lineNumberBase, 10) || 10;
let lines = [];
const hex = "0123456789ABCDEF";
for (let b = 0; b < buffer.length; b += blockSize) {
let block = buffer.slice(b, Math.min(b + blockSize, buffer.length));
let addr = ("0000000000" + b.toString(10)).slice(-10);
let addr = ("0000000000" + b.toString(lineNumberBase)).slice(-10);
let codes = block.split('').map(ch => {
let code = ch.charCodeAt(0);
return " " + hex[(0xF0 & code) >> 4] + hex[0x0F & code];
@ -37,7 +38,7 @@ export default {
hexdata() {
// const dataString = decodeURIComponent(escape(atob(this.$props.content)));
const dataString = atob(this.$props.content);
return this.hexdump(dataString, this.$store.state.hexdumpBlockSize);
return this.hexdump(dataString, this.$store.state.hexdumpBlockSize, this.$store.state.hexdumpLineNumberBase);
},
},
}

View File

@ -7,18 +7,37 @@
<label for="inputApiUrl">URL бэкенда</label>
<input type="url" class="form-control" id="inputApiUrl" placeholder="URL" v-model="apiUrl">
</div>
<div class="form-group">
<label for="inputApiLogin">Логин</label>
<input type="text" class="form-control" id="inputApiLogin" v-model="apiLogin">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputApiLogin">Логин</label>
<input type="text" class="form-control" id="inputApiLogin" v-model="apiLogin">
</div>
<div class="form-group col-md-6">
<label for="inputApiPassword">Пароль</label>
<input type="password" class="form-control" id="inputApiPassword" v-model="apiPassword">
</div>
</div>
<div class="form-group">
<label for="inputApiPassword">Пароль</label>
<input type="password" class="form-control" id="inputApiPassword" v-model="apiPassword">
<div class="form-row">
<div class="form-group col-md-5">
<label for="inputHexdumpBlockSize">Ширина блока HEX</label>
<input type="number" class="form-control" id="inputHexdumpBlockSize" v-model="hexdumpBlockSize">
</div>
<div class="form-group col-md-7">
<label for="inputHexdumpLineNumberBase">Номер строки</label>
<select id="inputHexdumpLineNumberBase" class="form-control" v-model="hexdumpLineNumberBase">
<option selected value="10">Десятичный</option>
<option value="16">Шестнадцатеричный</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputHexdumpBlockSize">Ширина блока HEX</label>
<input type="number" class="form-control" id="inputHexdumpBlockSize" v-model="hexdumpBlockSize">
<label for="inputPageSize">Размер страницы</label>
<input type="number" class="form-control" id="inputPageSize" v-model="pageSize">
</div>
<button type="submit" @click.prevent="$emit('close')" class="btn btn-primary">
Закрыть
</button>
@ -77,6 +96,22 @@ export default {
this.$store.commit('setHexdumpBlockSize', value);
},
},
hexdumpLineNumberBase: {
get() {
return this.$store.state.hexdumpLineNumberBase;
},
set(value) {
this.$store.commit('setHexdumpLineNumberBase', value);
},
},
pageSize: {
get() {
return this.$store.state.pageSize;
},
set(value) {
this.$store.commit('setPageSize', value);
},
},
},
}
</script>
@ -100,7 +135,7 @@ export default {
}
.modal-container {
width: 300px;
width: 500px;
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;

View File

@ -48,11 +48,20 @@ export default {
'Content-Type': 'application/json',
},
});
const streams = this.streams;
let startsFrom;
if (streams && streams.length && streams[streams.length - 1]) {
startsFrom = streams[streams.length - 1].id;
} else {
startsFrom = Number.MAX_SAFE_INTEGER; // FIXME -_-
}
instance.post(`/stream/${this.$props.servicePort || 'all'}`, {
fetchLatest: true,
fetchLatest: false,
direction: 'DESC',
startingFrom: this.streams.length,
pageSize: 50,
startingFrom: startsFrom,
pageSize: parseInt(this.$store.state.pageSize),
}).then(response => {
const data = response.data;
if (data.length === 0) return $state.complete();

View File

@ -10,12 +10,16 @@ export default new Vuex.Store({
apiLogin: 'BinaryBears',
apiPassword: '123456',
hexdumpBlockSize: 16,
hexdumpLineNumberBase: 10,
pageSize: 50,
},
mutations: {
setApiUrl: (state, payload) => state.apiUrl = payload,
setApiLogin: (state, payload) => state.apiLogin = payload,
setApiPassword: (state, payload) => state.apiPassword = payload,
setHexdumpBlockSize: (state, payload) => state.hexdumpBlockSize = payload,
setHexdumpLineNumberBase: (state, payload) => state.hexdumpLineNumberBase = payload,
setPageSize: (state, payload) => state.pageSize = payload,
},
plugins: [createPersistedState(),],
})