Skip to content

Commit

Permalink
Resolve #88 & #5 anms exp bld 001 navigation filtering (#123)
Browse files Browse the repository at this point in the history 
* 88: Added filtering transcoder log on transcoder log id

* 88: Fixed filtering transcoder log on input string and uri

* #5: Added active color to selected page indicator

* updated pageSizeChange to set page to 1

---------

Co-authored-by: Nicholas Brunner <[email protected]>
Co-authored-by: linkodm1 <[email protected]>
  • Loading branch information
@njbrunner
3 people authored Aug 26, 2024
1 parent c478425 commit 28e4e82
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 83 deletions.
19 changes: 11 additions & 8 deletions anms-core/anms/routes/transcoder.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,19 @@ async def paged_transcoder_log(params: Params = Depends()):
return await paginate(session, select(TranscoderLog).order_by(desc(TranscoderLog.transcoder_log_id)), params)


@router.get("/db/search/{query}", status_code=status.HTTP_200_OK, response_model=Page[TL])
@router.get("/db/search/{query:path}", status_code=status.HTTP_200_OK, response_model=Page[TL])
async def paged_transcoder_log(query: str, params: Params = Depends()):
async with get_async_session() as session:
query = '%' + query + '%'

return await paginate(session, select(TranscoderLog).where(or_(
TranscoderLog.input_string.ilike(query),
TranscoderLog.uri.ilike(query),
TranscoderLog.cbor.ilike(query)
)).order_by(desc(TranscoderLog.transcoder_log_id)), params)
filters = []
filters.append(TranscoderLog.input_string.ilike(f'%{query}%'))
filters.append(TranscoderLog.uri.ilike(f'%{query}%'))
filters.append(TranscoderLog.cbor.ilike(f'%{query}%'))
if query.isdigit():
filters.append(TranscoderLog.transcoder_log_id == int(query))

return await paginate(session, select(TranscoderLog)
.where(or_(*filters))
.order_by(desc(TranscoderLog.transcoder_log_id)), params)

@router.get("/db/id/{id}", status_code=status.HTTP_200_OK, response_model=TL)
async def transcoder_log_by_id(id: str):
Expand Down
153 changes: 79 additions & 74 deletions anms-ui/public/app/components/management/builder/transcoder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,72 @@
<div>
<template v-if="serviceLoading">
<div class="d-flex justify-content-center mt-3">
<b-spinner variant="info" label="Loading..." type="grow"></b-spinner>
<b-spinner variant="info"
label="Loading..."
type="grow"></b-spinner>
</div>
</template>
<template v-if="!serviceLoading">
<b-row>
<b-col offset="2" cols="8">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Search by ID String, URI, or CBOR"
v-model="searchString"
@change="handleSearchStringChange($event)"
v-on:keyup.enter="handlePageChange(1)"
/>
<div class="input-group-append">
<button
class="btn btn-outline-secondary"
type="button"
@click="handlePageChange(1)"
>
Search
</button>
<b-row>
<b-col offset="2"
cols="8">
<div class="input-group mb-3">
<input type="text"
class="form-control"
placeholder="Search by ID, Input String, URI, or CBOR"
v-model="searchString"
@change="handleSearchStringChange($event)"
v-on:keyup.enter="handlePageChange(1)" />
<div class="input-group-append">
<button class="btn btn-outline-secondary"
type="button"
@click="handlePageChange(1)">
Search
</button>
</div>
</div>
</div>
<div class="mb-3">
Items per Page:
<select v-model="pageSize" @change="handlePageSizeChange($event)">
<option v-for="size in pageSizes" :key="size" :value="size">
{{ size }}
</option>
</select>
</div>
<b-pagination
v-model="page"
:total-rows="count"
:per-page="pageSize"
aria-controls="transcoder-table"
@change="handlePageChange"
></b-pagination>
<div class="b-table">
<p>Select CBOR to send to Agents tab</p>
<b-table scr
id="transcoder-table"
:items="currentTranscoderLogs"
:fields="fields"
:per-page="pageSize"
hover
bordered
:sort-by.sync="sortField"
:sort-desc.sync="sortDesc"
>
<template #cell(cbor)="{ item }">
<h5 v-b-tooltip.hover
title="send to agents page"
@click="sendTranscoderCode(item.cbor)">
{{ item.cbor }}
</h5>
</template>
</b-table>
</div>
</b-col>
</b-row>
</template>
<div class="b-table">
<p>Select CBOR to send to Agents tab</p>
<b-table scr
id="transcoder-table"
:items="currentTranscoderLogs"
:fields="fields"
:per-page="pageSize"
hover
bordered
:sort-by.sync="sortField"
:sort-desc.sync="sortDesc">
<template #cell(cbor)="{ item }">
<h5 v-b-tooltip.hover
title="send to agents page"
@click="sendTranscoderCode(item.cbor)">
{{ item.cbor }}
</h5>
</template>
</b-table>
<div class="d-flex float-right">
<div class="my-2 mx-3">
Items per Page:
<select v-model="pageSize"
@change="handlePageSizeChange($event)">
<option v-for="size in pageSizes"
:key="size"
:value="size">
{{ size }}
</option>
</select>
</div>
<b-pagination v-model="page"
class="m-0"
:total-rows="count"
:per-page="pageSize"
aria-controls="transcoder-table"
@change="handlePageChange"></b-pagination>
</div>
</div>
</b-col>
</b-row>
</template>
</div>
</template>

Expand All @@ -78,7 +80,7 @@ export default {
data() {
return {
fields: [
{key:"transcoder_log_id", sortable:true}, {key:"input_string", sortable:true}, {key:"parsed_as", sortable:true}, {key:"cbor", sortable:false}, {key:"ari",sortable:false},{key:"uri", sortable:false},
{ key: "transcoder_log_id", sortable: true }, { key: "input_string", sortable: true }, { key: "parsed_as", sortable: true }, { key: "cbor", sortable: false }, { key: "ari", sortable: false }, { key: "uri", sortable: false },
],
nodeMan: null,
node: null,
Expand All @@ -90,24 +92,24 @@ export default {
loading: true,
errored: false,
pageSizes: [5, 10, 20, 50, 100],
selected:null,
transcoderWorkerId:"",
sortField:"",
sortDesc:false,
selected: null,
transcoderWorkerId: "",
sortField: "",
sortDesc: false,
};
},
mounted() {
const vm = this;
vm.reloadTranscoderLog();
vm.transcoderWorkerId = setInterval(() => {
console.log("Calling schedule transcoder Log refresh in App");
vm.reloadTranscoderLog();
console.log("Calling schedule transcoder Log refresh in App");
vm.reloadTranscoderLog();
}, status_refresh_rate);
},
beforeDestroy() {
console.log("Clearing interval with id:", this.transcoderWorkerId);
clearInterval(this.transcoderWorkerId);
},
console.log("Clearing interval with id:", this.transcoderWorkerId);
clearInterval(this.transcoderWorkerId);
},
computed: {
...mapGetters("transcoder", {
currentTranscoderLogs: "currentTranscoderLogs",
Expand Down Expand Up @@ -139,10 +141,8 @@ export default {
handlePageSizeChange(event) {
const vm = this;
vm.setPageSize(event.target.value);
// vm.setPage(1);
// vm.reloadTranscoderLog();
handlePageChange(1);
},
handleSearchStringChange(event) {
const vm = this;
vm.setSearchString(event.target.value);
Expand All @@ -151,9 +151,14 @@ export default {
};
</script>

<style scoped>
<style>
.b-table {
max-height: calc(100vh - 300px);
overflow-y: auto;
}
.page-item.active .page-link {
border-color: var(--success);
color: var(--success)
}
</style>
6 changes: 5 additions & 1 deletion anms-ui/server/components/transcoder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,12 @@
return next(Boom.badData('Invalid size=' + req.query.size));
}
const params = {'page': req.query.page, 'size': req.query.size };
const url = utils.generateAnmsCoreUrl(['transcoder', 'db', 'search', transcoderQuery], params);
const url = utils.generateAnmsCoreUrl(['transcoder', 'db', 'search', encodeURIComponent(transcoderQuery)], params);
console.log("[getTranscoderPagedBySearch]: url");
console.log(url);
const transcoderLog = await axios.get(url);
console.log("[getTranscoderPagedBySearch]: transcoderLog.data");
console.log(transcoderLog.data);
return res.status(200).json(transcoderLog.data);
}
catch (err) {
Expand Down

0 comments on commit 28e4e82

Please sign in to comment.