Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paginate by action #861

Merged
merged 2 commits into from
Jul 11, 2024
Merged

Paginate by action #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9583040
paginate by action
archSoftDev Jun 22, 2024
de40061
retry to fetch the block and show error if it fails. Also added loadi…
Viterbo Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 29 additions & 13 deletions src/components/BlockCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,21 @@ import { formatDate } from 'src/utils/string-utils';
export default defineComponent({
name: 'BlockCard',
props: {
block_num: {
type: String,
required: true,
},
block: {
type: Object as PropType<Block>,
required: false,
default: null,
},
},
setup(props) {
const loading = ref<boolean>(true);
const router = useRouter();
const q = useQuasar();
const blockNum = computed(() => props.block_num);
const Block = computed(() => props.block);
const blockInfo = ref<{ key: string; value: string }[]>([]);
async function nextBlock() {
Expand Down Expand Up @@ -96,6 +102,7 @@ export default defineComponent({
},
{ key: 'Actions', value: actionCount.toString() },
];
loading.value = false;
}
}
watch(Block, () => {
Expand All @@ -105,13 +112,14 @@ export default defineComponent({
setBlockData();
});
return {
block_num: computed(() => Block.value?.block_num || 0),
nextBlock,
previousBlock,
numberWithCommas,
formatDate,
copy,
blockInfo,
blockNum,
loading,
};
},
});
Expand Down Expand Up @@ -154,7 +162,7 @@ export default defineComponent({
</q-card-section>
<q-card-section class="q-pt-none">
<div class="row items-center">
<div class="col-11 text-bold ellipsis">{{numberWithCommas(block_num)}}</div>
<div class="col-11 text-bold ellipsis">{{numberWithCommas(parseInt(block_num))}}</div>
<div class="col-1">
<q-btn
class="float-right"
Expand All @@ -168,20 +176,28 @@ export default defineComponent({
</div>
</div>
</q-card-section>
<q-card-section>
<div class="text-grey-7">SUMMARY</div>
<!-- we show a centered spinner if loading is true -->
<q-card-section v-if="loading" class="q-pa-none">
<div class="row full-width justify-center">
<q-spinner-dots color="primary" size="40px"/>
</div>
</q-card-section>
<div v-for="item in blockInfo" :key="item.key">
<q-separator class="card-separator" inset="inset"/>
<template v-else>
<q-card-section>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="text-body1 text-weight-medium text-uppercase">{{item.key}}</div>
</div>
<div class="col-xs-12 col-sm-6 text-right text-bold">{{item.value}}</div>
</div>
<div class="text-grey-7">SUMMARY</div>
</q-card-section>
</div>
<div v-for="item in blockInfo" :key="item.key">
<q-separator class="card-separator" inset="inset"/>
<q-card-section>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="text-body1 text-weight-medium text-uppercase">{{item.key}}</div>
</div>
<div class="col-xs-12 col-sm-6 text-right text-bold">{{item.value}}</div>
</div>
</q-card-section>
</div>
</template>
</div>
</q-card>
</div>
Expand Down
108 changes: 44 additions & 64 deletions src/components/TransactionsTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,56 +251,30 @@ export default defineComponent({
const filterRows = () => {
filteredRows.value = rows.value;
};

const loadTableData = async (): Promise<void> => {
let tableData: Action[];
let tableData: Action[] = [];
if (isTransaction.value) {
tableData = (await api.getTransaction(account.value)).actions;
} else if (hasActions.value) {
tableData = actions.value;
} else {
const page = paginationSettings.value.page;
let limit = paginationSettings.value.rowsPerPage;

let notified = accountsModel.value ?? '';
let after = '';
let before = '';
if (toDateModel.value !== now) {
before = new Date(toDateModel.value).toISOString();
}
if (fromDateModel.value !== '') {
after = new Date(fromDateModel.value).toISOString();
}
const notified = accountsModel.value ?? '';
const after = fromDateModel.value !== '' ? new Date(fromDateModel.value).toISOString() : '';
const before = toDateModel.value !== now ? new Date(toDateModel.value).toISOString() : '';
const sort = paginationSettings.value.descending ? 'desc' : 'asc';
const extras: {[key:string]:string} = {};

let extras: {[key:string]:string} | null = tokenModel.value ? { 'act.account': tokenModel.value.contract } : null;
if (actionsModel.value) {
extras = extras ? {
...extras,
'act.name': actionsModel.value,
} : {
'act.name': actionsModel.value,
};
}

if (page > 1 && currentFirstAction.value === 0) {
currentFirstAction.value = rows.value[0]?.action.global_sequence;
if (tokenModel.value) {
extras['act.account'] = tokenModel.value.contract;
// Increase limit to allow for filtering
limit = limit * 3;
}

if (currentFirstAction.value > 0) {
extras = extras ? {
...extras,
'global_sequence': '0-' + currentFirstAction.value.toString(),
} : {
'global_sequence': '0-' + currentFirstAction.value.toString(),
};
if (actionsModel.value) {
extras['act.name'] = actionsModel.value;
}

// if token is selected, we need to get all transactions and filter them
// so we eventually will need more than the current page size
if (tokenModel.value) {
limit = 100;
}
const response = await api.getTransactions({
page,
limit,
Expand All @@ -318,36 +292,42 @@ export default defineComponent({
if (tableData) {
if (tokenModel.value) {
tableData = tableData.filter(
item => (item.act.data as {quantity?:string}).quantity?.includes(tokenModel.value.symbol),
item => (item.act.data as {quantity?:string})?.quantity?.includes(tokenModel.value.symbol),
);

// take only the first aginationSettings.value.rowsPerPage items
tableData = tableData.slice(0, paginationSettings.value.rowsPerPage);
}

rows.value = tableData.map(item => ({
name: item.trx_id,
transaction: { id: item.trx_id, type: 'transaction' },
timestamp: item['@timestamp'] || item.timestamp,
action: item,
data: hasActions.value
? { data: item.data, name: item.account }
: { data: item.act.data, name: item.act.name },
actions: [
{
name: item.trx_id,
transaction: { id: item.trx_id, type: 'transaction' },
timestamp: item['@timestamp'],
action: item,
data: hasActions.value
? {
data: item.data,
name: item.account,
}
: { data: item.act.data as unknown, name: item.act.name },
},
],
}));
const flattenedData: TransactionTableRow[] = [];
tableData.forEach((action) => {
const actionsArray = action.act?.data ? [action] : [];
actionsArray.forEach((act) => {
flattenedData.push({
name: act.trx_id,
transaction: { id: act.trx_id, type: 'transaction' },
timestamp: act['@timestamp'] || act.timestamp,
action: act,
data: {
data: act.act.data,
name: act.act.name,
},
actions: actionsArray.map(a => ({
name: a.trx_id,
transaction: { id: a.trx_id, type: 'transaction' },
timestamp: a['@timestamp'] || a.timestamp,
action: a,
data: {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
data: a.act.data,
name: a.act.name,
},
})),
});
});
});

// Apply pagination after filtering
const startIndex = (paginationSettings.value.page - 1) * paginationSettings.value.rowsPerPage;
rows.value = flattenedData.slice(startIndex, startIndex + paginationSettings.value.rowsPerPage);
totalRows.value = flattenedData.length;
}
void filterRows();
};
Expand Down
69 changes: 52 additions & 17 deletions src/pages/Block.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,51 @@ export default defineComponent({
const router = useRouter();
const found = ref(true);
const block = ref<Block>(null);
const block_num = ref<string>(route.params.block as string);
const actions = ref<Action[]>([]);
const tab = ref<string>((route.query['tab'] as string) || 'actions');
const tries = 3;
const error = ref<string>('');
// tryToLoadBlock is a function that tries to load a block from the API at least 3 times before giving up
const tryToLoadBlock = async (block_num: string) => {
error.value = '';
let block = null;
for (let i = 0; i < tries; i++) {
try {
block = await api.getBlock(block_num);
break;
} catch (e) {
console.error(`Failed to load block ${block_num} on try ${i + 1}`);
if (i === tries - 1) {
throw e;
}
}
}
return block;
};
onMounted(async () => {
// api get block and set block
block.value = await api.getBlock(route.params.block as string);
block.value.transactions.forEach((tr) => {
const act = tr.trx.transaction?.actions.map(act => ({
...act,
trx_id: tr.trx.id,
act: {
...act.act,
name: act.name,
data: act.data,
account: act.account,
},
'@timestamp': block.value.timestamp,
}));
actions.value = actions.value.concat(act);
});
found.value = !!block.value;
try {
block.value = await tryToLoadBlock(block_num.value);
block.value.transactions.forEach((tr) => {
const act = tr.trx.transaction?.actions.map(act => ({
...act,
trx_id: tr.trx.id,
act: {
...act.act,
name: act.name,
data: act.data,
account: act.account,
},
'@timestamp': block.value.timestamp,
}));
actions.value = actions.value.concat(act);
});
found.value = !!block.value;
} catch (e) {
found.value = false;
error.value = 'Unable to load block, try refreshing the page';
}
});
watch([tab], () => {
void router.push({
Expand All @@ -48,6 +73,8 @@ export default defineComponent({
found,
Actions: actions,
block,
block_num,
error,
};
},
components: {
Expand All @@ -61,7 +88,12 @@ export default defineComponent({

<div class="row">
<div class="col-12 header-support q-pb-lg">
<BlockCard v-if="found" class="q-pa-lg" :block="block"/>
<BlockCard
v-if="found"
class="q-pa-lg"
:block="block"
:block_num="block_num"
/>
<div v-else class="q-pa-lg">
<div class="row full-width justify-center">
<div class="col-xs-12 col-md-8 col-lg-6">
Expand All @@ -70,6 +102,9 @@ export default defineComponent({
<q-card-section class="q-pl-md">
<div class="text-h4 text-bold">block not found</div>
</q-card-section>
<q-card-section v-if="error" class="q-pl-md">
<div class="text-h6 text-bold">{{ error }}</div>
</q-card-section>
</div>
</q-card>
</div>
Expand Down
Loading