Skip to content

[PoC] sse support #990 #2

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

Open
isuru89 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[PoC] sse support #990 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
68 changes: 64 additions & 4 deletions ...ages/app/src/renderer/app/components/environment-routes/environment-routes.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,60 @@
/>
</div>

<!-- SSE Options -->
<div
*ngIf="
data.activeRoute &&
data.activeRoute.type === 'http' &&
data.activeRoute.method === 'get'
"
class="d-flex mt-2"
>
<app-toggle
prefix="alive-modes"
formControlName="aliveMode"
[items]="aliveModes"
></app-toggle>
<div class="input-group">
<div
class="input-group-prepend"
ngbTooltip="Streaming interval (ms)"
>
<span class="input-group-text">
<app-svg icon="access_time"></app-svg>
</span>
</div>
<input
type="number"
class="form-control"
[attr.disabled]="
activeRouteForm.get(['type']).value === 'http' &&
activeRouteForm.get(['method']).value === 'get' &&
activeRouteForm.get(['aliveMode']).value !== 'SSE'
? true
: null
"
[appInputNumber]="{
min: 10,
max: Infinity,
canBeEmpty: false
}"
formControlName="streamingInterval"
/>
<div
*ngIf="
10 > (activeRouteForm.get(['streamingInterval']).value || 0)
"
class="warning-message ms-auto text-center ps-2 align-self-center"
id="disabled-rules-warning-message"
[ngbTooltip]="texts.MINIMUM_STREAMING_INTERVAL_WARNING"
>
<app-svg icon="warning" class="pe-1"></app-svg>
</div>
</div>
</div>

<!-- WS Options -->
<div
*ngIf="data.activeRoute && data.activeRoute.type === 'ws'"
class="d-flex mt-2"
Expand Down Expand Up @@ -453,7 +507,8 @@
<li
class="nav-item"
*ngIf="
data.activeRoute?.type === 'http' ||
(data.activeRoute?.type === 'http' &&
data.activeRoute?.aliveMode !== 'SSE') ||
(data.activeRoute?.type === 'crud' &&
!data.activeRouteResponse?.default)
"
Expand Down Expand Up @@ -615,8 +670,10 @@
type="number"
class="form-control"
[attr.disabled]="
data.activeRoute.type === 'ws' &&
!!data.activeRoute.streamingMode
(data.activeRoute.type === 'ws' &&
!!data.activeRoute.streamingMode) ||
(data.activeRoute.type === 'http' &&
data.activeRoute.aliveMode === 'SSE')
? true
: null
"
Expand Down Expand Up @@ -725,7 +782,10 @@
*ngIf="data.activeRouteResponse?.filePath"
class="d-flex justify-content-between mt-2 px-2"
>
<div class="form-check">
<div
class="form-check"
*ngIf="data.activeRoute?.aliveMode !== 'SSE'"
>
<input
type="checkbox"
class="form-check-input"
Expand Down
33 changes: 28 additions & 5 deletions packages/app/src/renderer/app/components/environment-routes/environment-routes.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from '@angular/forms';
import { DeployInstance } from '@mockoon/cloud';
import {
AliveMode,
Environment,
FileExtensionsWithTemplating,
GetContentType,
Expand Down Expand Up @@ -162,6 +163,18 @@ export class EnvironmentRoutesComponent implements OnInit, OnDestroy {
public scrollToBottom = this.uiService.scrollToBottom;
public databuckets$: Observable<DropdownItems>;
public externalLink$: Observable<string>;
public aliveModes: ToggleItems = [
{
value: AliveMode.NONE,
icon: 'endpoint',
tooltip: 'No Streaming'
},
{
value: AliveMode.SSE,
icon: 'announce',
tooltip: 'Event Stream (SSE)'
}
];
public methods: DropdownItems = [
{
value: Methods.all,
Expand Down Expand Up @@ -644,12 +657,14 @@ export class EnvironmentRoutesComponent implements OnInit, OnDestroy {
*/
private initForms() {
this.activeRouteForm = this.formBuilder.group({
type: [RouteDefault.type],
documentation: [RouteDefault.documentation],
method: [RouteDefault.method],
endpoint: [RouteDefault.endpoint],
responseMode: [RouteDefault.responseMode],
streamingMode: [RouteDefault.streamingMode],
streamingInterval: [RouteDefault.streamingInterval]
streamingInterval: [RouteDefault.streamingInterval],
aliveMode: [RouteDefault.aliveMode]
});

this.defaultResponseTooltip$ = this.activeRouteForm
Expand All @@ -673,9 +688,16 @@ export class EnvironmentRoutesComponent implements OnInit, OnDestroy {
// send new activeRouteForm values to the store, one by one
merge(
...Object.keys(this.activeRouteForm.controls).map((controlName) =>
this.activeRouteForm
.get(controlName)
.valueChanges.pipe(map((newValue) => ({ [controlName]: newValue })))
this.activeRouteForm.get(controlName).valueChanges.pipe(
map((newValue) => {
// when aliveMode property changes, switch active tab to 'RESPONSE' tab.
if (controlName === 'aliveMode') {
this.setActiveTab('RESPONSE');
}

return { [controlName]: newValue };
})
)
)
)
.pipe(
Expand Down Expand Up @@ -738,7 +760,8 @@ export class EnvironmentRoutesComponent implements OnInit, OnDestroy {
endpoint: activeRoute.endpoint,
responseMode: activeRoute.responseMode,
streamingMode: activeRoute.streamingMode,
streamingInterval: activeRoute.streamingInterval
streamingInterval: activeRoute.streamingInterval,
aliveMode: activeRoute.aliveMode
},
{ emitEvent: false }
);
Expand Down
9 changes: 9 additions & 0 deletions packages/app/src/renderer/app/components/menus/routes-menu/routes-menu.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,15 @@
}}
</span>

@if (route.aliveMode === 'SSE') {
<app-svg
class="color-method-ws me-2"
icon="announce"
size="14"
ngbTooltip="SSE mode activated"
></app-svg>
}

@if (route.responseMode === ResponseMode.RANDOM) {
<app-svg
class="text-primary me-2"
Expand Down
37 changes: 31 additions & 6 deletions packages/app/src/renderer/app/components/svg/svg.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@
viewBox="0 0 24 24"
*ngSwitchCase="'science'"
>
<g><rect fill="none" height="24" width="24" /></g>
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M19.8,18.4L14,10.67V6.5l1.35-1.69C15.61,4.48,15.38,4,14.96,4H9.04C8.62,4,8.39,4.48,8.65,4.81L10,6.5v4.17L4.2,18.4 C3.71,19.06,4.18,20,5,20h14C19.82,20,20.29,19.06,19.8,18.4z"
Expand All @@ -44,6 +46,7 @@
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}

@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
Expand All @@ -67,7 +70,9 @@
width="24px"
*ngSwitchCase="'login'"
>
<g><rect fill="none" height="24" width="24" /></g>
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"
Expand Down Expand Up @@ -129,7 +134,9 @@
viewBox="0 0 24 24"
*ngSwitchCase="'misc'"
>
<g><rect fill="none" height="24" width="24" /></g>
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<path
Expand Down Expand Up @@ -239,7 +246,9 @@
viewBox="0 0 24 24"
*ngSwitchCase="'file_open'"
>
<g><rect fill="none" height="24" width="24" /></g>
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.89,2,1.99,2H15v-8h5V8L14,2z M13,9V3.5L18.5,9H13z M17,21.66V16h5.66v2h-2.24 l2.95,2.95l-1.41,1.41L19,19.41l0,2.24H17z"
Expand Down Expand Up @@ -269,7 +278,9 @@
viewBox="0 0 24 24"
*ngSwitchCase="'account'"
>
<g><rect fill="none" height="24" width="24" /></g>
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"
Expand Down Expand Up @@ -811,7 +822,9 @@
viewBox="0 0 24 24"
*ngSwitchCase="'data'"
>
<g><rect fill="none" height="24" width="24" /></g>
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<path
Expand Down Expand Up @@ -902,6 +915,18 @@
d="M192 32c0-17.7 14.3-32 32-32C383.1 0 512 128.9 512 288c0 17.7-14.3 32-32 32s-32-14.3-32-32C448 164.3 347.7 64 224 64c-17.7 0-32-14.3-32-32zM60.6 220.6L164.7 324.7l28.4-28.4c-.7-2.6-1.1-5.4-1.1-8.3c0-17.7 14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32c-2.9 0-5.6-.4-8.3-1.1l-28.4 28.4L291.4 451.4c14.5 14.5 11.8 38.8-7.3 46.3C260.5 506.9 234.9 512 208 512C93.1 512 0 418.9 0 304c0-26.9 5.1-52.5 14.4-76.1c7.5-19 31.8-21.8 46.3-7.3zM224 96c106 0 192 86 192 192c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-70.7-57.3-128-128-128c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
*ngSwitchCase="'announce'"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 14H6v-2h2v2zm0-3H6V9h2v2zm0-3H6V6h2v2zm7 6h-5v-2h5v2zm3-3h-8V9h8v2zm0-3h-8V6h8v2z"
/>
</svg>
<svg
width="24px"
height="24px"
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/renderer/app/components/svg/svg.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export class SvgComponent {
| 'websocket'
| 'broadcast'
| 'events'
| 'announce'
| 'public'
| string;
}
3 changes: 2 additions & 1 deletion packages/app/src/renderer/app/stores/reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1091,7 +1091,8 @@ export const environmentReducer = (
'endpoint',
'method',
'streamingMode',
'streamingInterval'
'streamingInterval',
'aliveMode'
];

newState = {
Expand Down
Loading
Loading