Skip to content

Commit

Permalink
feat: Add the ability to display the subscriptions for a notification
Browse files Browse the repository at this point in the history
  • Loading branch information
@KallynGowdy
KallynGowdy committed Oct 17, 2024
1 parent 169433c commit 9f88669
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 140 deletions.
2 changes: 1 addition & 1 deletion src/aux-server/aux-web/aux-auth/site/AuthNotification/AuthNotification.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
margin-top: 12px;
}

.notification-runs-table {
.notification-subscriptions-table {
margin-top: 12px;
}
117 changes: 52 additions & 65 deletions src/aux-server/aux-web/aux-auth/site/AuthNotification/AuthNotification.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { authManager } from '../../shared/index';
import { SvgIcon } from '@casual-simulation/aux-components';
import type {
NotificationRecord,
NotificationSubscription,
WebhookRunInfo,
} from '@casual-simulation/aux-records';
import { LoadingHelper } from '../LoadingHelper';
Expand All @@ -25,7 +26,7 @@ const PAGE_SIZE = 10;
},
})
export default class AuthNotification extends Vue {
// private _helper: LoadingHelper<WebhookRunInfo>;
private _subscriptionsHelper: LoadingHelper<NotificationSubscription>;

@Prop({ required: true })
recordName: string;
Expand All @@ -34,21 +35,21 @@ export default class AuthNotification extends Vue {
notification: NotificationRecord;

loading: boolean = false;
// items: {
// mdCount: number;
// mdPage: number;
// startIndex: number;
// endIndex: number;
// mdData: WebhookRunInfo[];
// } = {
// mdCount: 0,
// mdPage: 0,
// mdData: [],
// startIndex: 0,
// endIndex: 0,
// };
subscriptions: {
mdCount: number;
mdPage: number;
startIndex: number;
endIndex: number;
mdData: NotificationSubscription[];
} = {
mdCount: 0,
mdPage: 0,
mdData: [],
startIndex: 0,
endIndex: 0,
};

// selectedItem: WebhookRunInfo = null;
selectedSubscription: NotificationSubscription = null;

@Watch('recordName', {})
onRecordNameChanged(last: string, next: string) {
Expand All @@ -68,60 +69,46 @@ export default class AuthNotification extends Vue {
this._reset();
}

// getWebhookUrl(webhook: NotificationRecord) {
// const url = new URL(
// '/api/v2/records/webhook/run',
// authManager.client.endpoint
// );
// url.searchParams.set('recordName', this.recordName);
// url.searchParams.set('address', webhook.address);
// return url.href;
// }

private _reset() {
// this._helper = new LoadingHelper(async (lastItem) => {
// const result = await authManager.client.listWebhookRuns({
// recordName: this.recordName,
// address: this.webhook.address,
// requestTimeMs: lastItem?.requestTimeMs,
// });
this._subscriptionsHelper = new LoadingHelper(async (lastItem) => {
const result =
await authManager.client.listNotificationSubscriptions({
recordName: this.recordName,
address: this.notification.address,
});

// if (result.success === true) {
// return {
// items: result.items,
// totalCount: result.totalCount,
// };
// } else {
// return {
// items: [],
// totalCount: 0,
// };
// }
// });
// this.items = {
// mdCount: 0,
// mdPage: 0,
// mdData: [],
// startIndex: 0,
// endIndex: 0,
// };
if (result.success === true) {
return {
items: result.subscriptions,
totalCount: result.subscriptions.length,
};
} else {
return {
items: [],
totalCount: 0,
};
}
});
this.subscriptions = {
mdCount: 0,
mdPage: 0,
mdData: [],
startIndex: 0,
endIndex: 0,
};
this.loading = false;
// this.updatePagination(1, PAGE_SIZE);
this.updatePagination(1, PAGE_SIZE);
}

// changePage(change: number) {
// this.updatePagination(this.items.mdPage + change, PAGE_SIZE);
// }

// onSelectItem(item: WebhookRunInfo) {
// this.selectedItem = item;
// }
onSelectSubscription(item: NotificationSubscription) {
this.selectedSubscription = item;
}

// async updatePagination(page: number, pageSize: number) {
// let nextPage = await this._helper.loadPage(page, pageSize);
// if (nextPage) {
// this.items = nextPage;
// }
// return true;
// }
async updatePagination(page: number, pageSize: number) {
let nextPage = await this._subscriptionsHelper.loadPage(page, pageSize);
if (nextPage) {
this.subscriptions = nextPage;
}
return true;
}
}
77 changes: 13 additions & 64 deletions src/aux-server/aux-web/aux-auth/site/AuthNotification/AuthNotification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,88 +13,37 @@
>Description: {{ notification.description }}</span
>
</md-list-item>
<!-- <md-list-item>
<md-icon>info</md-icon>
<span class="md-list-item-text"
>Target Record Name: {{ webhook.targetRecordName }}</span
>
</md-list-item>
<md-list-item>
<md-icon>info</md-icon>
<span class="md-list-item-text"
>Target Address: {{ webhook.targetAddress }}</span
>
</md-list-item>
<md-list-item>
<md-icon>info</md-icon>
<span class="md-list-item-text"
>User ID: {{ webhook.userId || '(null)' }}</span
>
</md-list-item> -->
<!-- <md-list-item>
<md-icon>info</md-icon>
<span class="md-list-item-text">URL: {{ getWebhookUrl(webhook) }}</span>
</md-list-item> -->
</md-list>
</md-card-content>
</md-card>

<!-- <md-table
class="webhook-runs-table"
v-model="items.mdData"
<md-table
class="notification-subscriptions-table"
v-model="subscriptions.mdData"
md-card
md-fixed-header
@md-selected="onSelectItem"
@md-selected="onSelectSubscription"
>
<md-table-toolbar>
<h1 class="md-title">{{ webhook.address }} Runs</h1>
<h1 class="md-title">{{ notification.address }} Subscriptions</h1>
</md-table-toolbar>

<md-table-empty-state
md-label="No runs found"
:md-description="`No runs found for this webhook.`"
md-label="No subscriptions found"
:md-description="`No subscriptions found for this notification.`"
>
</md-table-empty-state>

<md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
<md-table-cell md-label="ID" md-sort-by="runId">{{
item.runId.substring(0, 8)
<md-table-cell md-label="ID" md-sort-by="id">{{ item.id }}</md-table-cell>
<md-table-cell md-label="User ID" md-sort-by="userId">{{
item.userId || '(null)'
}}</md-table-cell>
<md-table-cell md-label="Request Time" md-sort-by="requestTimeMs">
<relative-time :millis="item.requestTimeMs"></relative-time>
</md-table-cell>
<md-table-cell md-label="Response Time" md-sort-by="responseTimeMs">
<relative-time :millis="item.responseTimeMs"></relative-time>
</md-table-cell>
<md-table-cell md-label="Status Code" md-sort-by="statusCode">{{
item.statusCode
<md-table-cell md-label="Push Subscription ID" md-sort-by="pushSubscriptionId">{{
item.pushSubscriptionId || '(null)'
}}</md-table-cell>
</md-table-row>
<template v-slot:md-table-pagination v-if="items.mdData.length > 0">
<div class="md-table-pagination">
<span>{{ items.startIndex }}-{{ items.endIndex }} of {{ items.mdCount }}</span>
<md-button
class="md-icon-button md-table-pagination-previous"
@click="changePage(-1)"
:disabled="items.mdPage === 1"
>
<md-icon>keyboard_arrow_left</md-icon>
</md-button>
<md-button
class="md-icon-button md-table-pagination-next"
@click="changePage(+1)"
:disabled="items.endIndex + 1 >= items.mdCount"
>
<md-icon>keyboard_arrow_right</md-icon>
</md-button>
</div>
</template>
</md-table> -->

<!-- <webhook-run v-if="selectedItem" :run="selectedItem" /> -->
</md-table>
</div>
</template>
<script src="./AuthNotification.ts"></script>
Expand Down
10 changes: 0 additions & 10 deletions src/aux-server/aux-web/aux-auth/site/AuthRecordsNotifications/AuthRecordsNotifications.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,6 @@ export default class AuthRecordsNotifications extends Vue {
this._reset();
}

// getWebhookUrl(webhook: NotificationRecord) {
// const url = new URL(
// '/api/v2/records/webhook/run',
// authManager.client.endpoint
// );
// url.searchParams.set('recordName', this.recordName);
// url.searchParams.set('address', webhook.address);
// return url.href;
// }

private _reset() {
this.selectedItem = null;
this._helper = new LoadingHelper(async (lastItem) => {
Expand Down

0 comments on commit 9f88669

Please sign in to comment.