diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ab20c0..196abe9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ # Changelog -## [0.3] - 2019-06-02 +## [0.3.1] - 25.06.2020 + +### Added + +- Dashboard: Show Groups (List Mode) in columns + ability to select more columns +- Dashboard: Show Watchers in Groups (List Mode) in columns + ability to select more columns +- Dashboard: Save/Restore following settings, when using the same Browser (localStorage): + - Theme + - View Mode + - Masonry min-width +- Dashboard: Add Update counter + +### Styling + +- Dashboard: Better styling List Mode + +## [0.3] - 2020-06-02 ### Added diff --git a/README.md b/README.md index 5cfb23a..784dc1e 100644 --- a/README.md +++ b/README.md @@ -28,10 +28,6 @@ ![Senstate Current Workflow](readme_assets/senstate-current-workflow.svg) -> Upcoming: - -![Senstate Current Workflow](readme_assets/senstate_upcoming_workflow.svg) - ## Articles / Tutorial >[Introduction](https://dev.to/negue/senstate-make-sense-of-your-state-while-debugging-96f) @@ -60,25 +56,23 @@ npx @senstate/cli | -------- | ----------------- | ----------------------- | | JS/TS | [Repo][repo_js] | [negue][user_negue] | | C# | [Repo][repo_csharp] | [negue][user_negue] | -| Rust | [Repo][repo_rust] | [dnaka91][user_dnaka91] | -| Kotlin | *(in progress)* | [dnaka91][user_dnaka91] | -| Go | [Repo][repo_go] | [dnaka91][user_dnaka91] | +| Add yours| [Spec][SpecURL] | | [repo_js]: https://github.com/senstate/platform/blob/master/libs/client/README.md -[repo_rust]: https://github.com/dnaka91/senstate-rs -[repo_go]: https://github.com/dnaka91/senstate-go [repo_csharp]: https://github.com/senstate/csharp-client [user_negue]: https://github.com/negue -[user_dnaka91]: https://dnaka91.netlify.com -All clients connect with web-sockets, here are the current [specs](api.spec.md). +All clients connect with web-sockets, here are the current [specs][SpecURL]. + +[SpecURL]: api.spec.md If you use the same static App-Id, you can keep the Watchers / Logger / Errors between App-restarts. ## TODO / In progress - more to come :) +- idea? open an issue :) ## Show your support diff --git a/apps/senstate-dashboard/src/app/app.component.html b/apps/senstate-dashboard/src/app/app.component.html index 2eb842d..796e5d8 100644 --- a/apps/senstate-dashboard/src/app/app.component.html +++ b/apps/senstate-dashboard/src/app/app.component.html @@ -87,33 +87,23 @@ - - + + - - -
+ C# +    JS - - Rust - - - - Go - -
+ Create your own Library for your needed Language:
diff --git a/apps/senstate-dashboard/src/app/app.component.scss b/apps/senstate-dashboard/src/app/app.component.scss index 0891812..cefa7ba 100644 --- a/apps/senstate-dashboard/src/app/app.component.scss +++ b/apps/senstate-dashboard/src/app/app.component.scss @@ -129,3 +129,17 @@ mat-toolbar { margin-top: 1rem; margin-bottom: 1rem; } + +.center { + text-align: center; +} + +::ng-deep { + .divider { + height: 1px; + background: white; + width: 100%; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } +} diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.html b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.html index fa88757..43b9ad9 100644 --- a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.html +++ b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.html @@ -17,8 +17,7 @@

matBadgeOverlap="false">Watchers - + List -
- - - Disable Max-Width - + + + + diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.scss b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.scss index a10673d..0cfc701 100644 --- a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.scss +++ b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.scss @@ -24,13 +24,7 @@ padding: 15px } -.divider { - height: 1px; - background: white; - width: 100%; -margin-top: 5px; -margin-bottom: 5px; -} + :host.disconnected { opacity: 0.5; diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.ts b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.ts index 31b6da9..d2025ce 100644 --- a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.ts +++ b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, HostBinding, Input, OnInit} from '@angular/core'; import {App} from "@senstate/dashboard-connection"; import {Observable} from "rxjs"; import {ErrorData, LogData} from "@senstate/client"; @@ -8,7 +8,6 @@ import {DebugToggleService} from "../../services/debug-toggle.service"; import {SettingsService} from "../../services/settings.service"; const SETTING_LIST_TYPE = 'list'; -const SETTING_MAX_WIDTH = 'masonry_disable_max_width'; @Component({ selector: 'senstate-app-overview', @@ -23,7 +22,6 @@ export class AppOverviewComponent implements OnInit { public logs$: Observable; public errors$: Observable; - public autoSizeActive = false; public listType: string; @@ -33,11 +31,9 @@ export class AppOverviewComponent implements OnInit { } constructor (private hub: HubService, - private cd: ChangeDetectorRef, private settings: SettingsService, public debugToggle: DebugToggleService) { this.listType = settings.loadSetting(SETTING_LIST_TYPE, 'list'); - this.autoSizeActive = settings.loadSetting(SETTING_MAX_WIDTH, false); } ngOnInit () { @@ -56,13 +52,6 @@ export class AppOverviewComponent implements OnInit { return `${Object.keys(obj).length}`; } - toggleAutoSize () { - this.autoSizeActive = !this.autoSizeActive; - - this.settings.saveSetting(SETTING_MAX_WIDTH, this.autoSizeActive); - // this.cd.markForCheck(); - this.cd.detectChanges(); - } saveListType(newListType: any) { this.settings.saveSetting(SETTING_LIST_TYPE, newListType); diff --git a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.module.ts b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.module.ts index 8ac58d3..e4b097c 100644 --- a/apps/senstate-dashboard/src/app/components/app-overview/app-overview.module.ts +++ b/apps/senstate-dashboard/src/app/components/app-overview/app-overview.module.ts @@ -17,6 +17,7 @@ import {MatSelectModule} from "@angular/material/select"; import {MatDividerModule} from "@angular/material/divider"; import {WatchersListModule} from "../tab-content/watchers-list/watchers-list.module"; import {MatChipsModule} from "@angular/material/chips"; +import {DynamicPortalModule, PortalHubService} from "@gewd/ng-utils/dynamic-portal"; @NgModule({ @@ -24,26 +25,30 @@ import {MatChipsModule} from "@angular/material/chips"; exports: [ AppOverviewComponent ], - imports: [ - CommonModule, - MatTabsModule, - MatBadgeModule, - WatchersMasonryModule, - LogViewerModule, - ErrorViewerModule, - MatButtonModule, - MatIconModule, - MatMenuModule, - MatCheckboxModule, - MatRadioModule, - MdePopoverModule, - MatOptionModule, - MatSelectModule, - MatDividerModule, - WatchersMasonryModule, - WatchersMasonryModule, - WatchersListModule, - MatChipsModule + imports: [ + CommonModule, + MatTabsModule, + MatBadgeModule, + WatchersMasonryModule, + LogViewerModule, + ErrorViewerModule, + MatButtonModule, + MatIconModule, + MatMenuModule, + MatCheckboxModule, + MatRadioModule, + MdePopoverModule, + MatOptionModule, + MatSelectModule, + MatDividerModule, + WatchersMasonryModule, + WatchersMasonryModule, + WatchersListModule, + MatChipsModule, + DynamicPortalModule + ], + providers: [ + PortalHubService ] }) export class AppOverviewModule { } diff --git a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.html b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.html index 996a61d..062f9eb 100644 --- a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.html +++ b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.html @@ -1,5 +1,7 @@ -
+
+
+
diff --git a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.scss b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.scss index bd979f9..eb6ce56 100644 --- a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.scss +++ b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.scss @@ -1,8 +1,9 @@ :host { display: block; + width: calc(var(--group-holder-width, 100) * 1%); - &:not(:first-of-type) { - margin-top: 0.5rem; + &:not(:last-of-type) { + margin-bottom: 0.5rem; } } @@ -14,9 +15,14 @@ width: 100%; display: block; margin-bottom: 0.5rem; + height: 1.3rem; &:empty { - display: none; + opacity: 0; } } +.inner-padding { + margin: 5px; +} + diff --git a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.ts b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.ts index 61e437e..f703d80 100644 --- a/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.ts +++ b/apps/senstate-dashboard/src/app/components/shared/group-holder/group-holder.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'senstate-group-holder', @@ -8,6 +8,9 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; }) export class GroupHolderComponent implements OnInit { + @Input() + public showGroupName = false; + constructor() { } ngOnInit() { diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.html b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.html index 90667c4..829fec6 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.html +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.html @@ -1,23 +1,50 @@ - -

+ +

No watchers yet :)

- - - {{group.key}} - Watchers: {{group.watchers.length}} - - -
- {{ tag.tag }}: - {{tag.watchId}} -
- -
- +
+ + + + + {{group.key}} - Watchers: {{group.watchers.length}} + + +
+
+ {{ tag.tag }}: + {{tag.watchId}} +
+ +
+
+ + +
+ + +
+ + + + 2 Columns + 3 Columns + 4 Columns + +
+ + + + 2 Columns + 3 Columns + 4 Columns + + diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.scss b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.scss index eb9a5d7..82b415a 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.scss +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.scss @@ -1,6 +1,3 @@ -.watcher-entry { - margin-left: 0.5rem; -} code { background: #444; @@ -8,4 +5,31 @@ code { padding: 6px; margin-bottom: 0.5rem; display: inline-block; + margin-left: -0.4rem; +} + +.groups { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.divider { + +} + +.watcher-holder { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.watcher-entry { + padding-left: 0.5rem; + margin-bottom: 0.5rem; + width: calc((var(--watcher-holder-width, 50) * 1%) - 8px); + + &:not(:last-of-type) { + margin-bottom: 0.5rem; + } } diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.ts b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.ts index 853745f..4c89386 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.ts +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.component.ts @@ -1,8 +1,9 @@ -import {Component, OnInit, ChangeDetectionStrategy, Input, TrackByFunction} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Input, OnInit, TrackByFunction} from '@angular/core'; import {Observable} from "rxjs"; import {WatcherMeta} from "@senstate/client"; import {GroupedWatchers, HubService} from "../../../state/hub.service"; import {DebugToggleService} from "../../../services/debug-toggle.service"; +import {map} from "rxjs/operators"; @Component({ selector: 'senstate-watchers-list', @@ -12,10 +13,16 @@ import {DebugToggleService} from "../../../services/debug-toggle.service"; }) export class WatchersListComponent implements OnInit { + @Input() + public groupedColumnWidth: number = 50; + + @Input() + public watcherColumnWidth: number = 50; + @Input() public appId: string; - public watchers$: Observable; + public groupedWatchers$: Observable; public trackByWatcherFunc: TrackByFunction = (index, item) => { return item.watchId; @@ -29,6 +36,21 @@ export class WatchersListComponent implements OnInit { public debugToggle: DebugToggleService) { } ngOnInit() { - this.watchers$ = this.hub.getGroupedWatchersByApp$(this.appId); + this.groupedWatchers$ = this.hub.getGroupedWatchersByApp$(this.appId).pipe( + map(groupedWatchers => { + const hasGroupName = groupedWatchers.some(group => this.hasName(group)); + + groupedWatchers.forEach(group => { + group.haveGroups = hasGroupName; + group.hasName = this.hasName(group); + }); + + return groupedWatchers; + }) + ); + } + + private hasName(group: GroupedWatchers) { + return group.key && group.key !== 'undefined'; } } diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.module.ts b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.module.ts index 5c370b1..577023e 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.module.ts +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-list/watchers-list.module.ts @@ -1,9 +1,12 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {WatchersListComponent} from "./watchers-list.component"; -import { ListJsonValueComponent } from './list-json-value/list-json-value.component'; +import {ListJsonValueComponent} from './list-json-value/list-json-value.component'; import {JsonViewerModule} from "../../json-viewer/json-viewer.module"; import {SharedModule} from "../../shared/shared.module"; +import {DynamicPortalModule} from "@gewd/ng-utils/dynamic-portal"; +import {MatSelectModule} from "@angular/material/select"; +import {CssPropsModule} from "../../../directives/css-props/css-props.module"; @NgModule({ @@ -18,6 +21,9 @@ import {SharedModule} from "../../shared/shared.module"; CommonModule, JsonViewerModule, SharedModule, + DynamicPortalModule, + MatSelectModule, + CssPropsModule, ] }) export class WatchersListModule { diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.html b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.html index 91f47ce..c50248e 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.html +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.html @@ -14,11 +14,11 @@ Show History Diff from previous + Update Counter

-
Diff @@ -37,3 +37,8 @@ + + + Updated: {{ updateCount$ | async }} + + diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.scss b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.scss index 6caa56d..1f45a54 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.scss +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.scss @@ -68,3 +68,7 @@ margin-top: 5px !important; margin-bottom: 5px !important; } + +mat-hint { + font-size: 75%; +} diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.ts b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.ts index f7caa14..949da43 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.ts +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watcher-card/watcher-card.component.ts @@ -1,13 +1,4 @@ -import { - Component, - OnInit, - ChangeDetectionStrategy, - Input, - Directive, - TemplateRef, - ContentChild, - ChangeDetectorRef -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, ContentChild, Directive, Input, OnInit, TemplateRef} from '@angular/core'; import {HubService} from "../../../../state/hub.service"; import {Observable} from "rxjs"; @@ -39,6 +30,7 @@ export class WatcherCardComponent implements OnInit { public appId: string; public paused$: Observable; + public updateCount$: Observable; @ContentChild(HistoryTemplateDirective, { static: true }) historyTemplateDir: HistoryTemplateDirective; @@ -50,6 +42,7 @@ export class WatcherCardComponent implements OnInit { ngOnInit() { this.paused$ = this.hub.isWatcherPaused$(this.appId, this.watchId); + this.updateCount$ = this.hub.getWatcherUpdateCount$(this.watchId); } togglePaused () { diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.html b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.html index 4c83e5b..c2dcb1c 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.html +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.html @@ -74,3 +74,14 @@

+ + + +
+ + + + Auto-Size {{autoSizeCards}} + + diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.spec.ts b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.spec.ts index 3140426..5f61614 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.spec.ts +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.spec.ts @@ -1,8 +1,9 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { WatchersMasonryComponent } from './watchers-masonry.component'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {WatchersMasonryComponent} from './watchers-masonry.component'; import {NO_ERRORS_SCHEMA} from "@angular/core"; import {HubServiceMock, HubServiceMockProvider} from "@test-utils/mocks"; import {NEVER} from "rxjs"; +import { DynamicPortalModule, PortalHubService } from "@gewd/ng-utils/dynamic-portal"; describe('WatchersMasonryComponent', () => { let component: WatchersMasonryComponent; @@ -10,9 +11,15 @@ describe('WatchersMasonryComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ WatchersMasonryComponent ], + imports: [ + DynamicPortalModule + ], + declarations: [ + WatchersMasonryComponent + ], providers: [ - HubServiceMockProvider + HubServiceMockProvider, + PortalHubService ], schemas: [NO_ERRORS_SCHEMA] }) diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.ts b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.ts index e5a7470..42275b6 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.ts +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.component.ts @@ -1,14 +1,11 @@ -import { - Component, - OnInit, - ChangeDetectionStrategy, - Input, TrackByFunction -} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, TrackByFunction} from '@angular/core'; import {Observable} from "rxjs"; import {WatcherMeta} from "@senstate/client"; import {GroupedWatchers, HubService} from "../../../state/hub.service"; import {NgxMasonryOptions} from "ngx-masonry"; +import {SettingsService} from "../../../services/settings.service"; +const SETTING_MAX_WIDTH = 'masonry_disable_max_width'; @Component({ selector: 'senstate-watchers-masonry', @@ -38,10 +35,23 @@ export class WatchersMasonryComponent implements OnInit { return item.key; }; - constructor(private hub: HubService) { } + constructor(private hub: HubService, + private cd: ChangeDetectorRef, + private settings: SettingsService) { + + this.autoSizeCards = settings.loadSetting(SETTING_MAX_WIDTH, false); + } ngOnInit() { this.watchers$ = this.hub.getGroupedWatchersByApp$(this.appId); } + toggleAutoSize() { + this.autoSizeCards = !this.autoSizeCards; + + this.settings.saveSetting(SETTING_MAX_WIDTH, this.autoSizeCards); + // this.cd.markForCheck(); + this.cd.detectChanges(); + } + } diff --git a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.module.ts b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.module.ts index 41309db..0ddbfbd 100644 --- a/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.module.ts +++ b/apps/senstate-dashboard/src/app/components/tab-content/watchers-masonry/watchers-masonry.module.ts @@ -15,6 +15,8 @@ import {MatCheckboxModule} from "@angular/material/checkbox"; import {WatchHistoryComponent} from './watchers/watch-history/watch-history.component'; import {WatchDiffComponent} from "./watchers/watch-diff/watch-diff.component"; import {SharedModule} from "../../shared/shared.module"; +import {MatFormFieldModule} from "@angular/material/form-field"; +import {DynamicPortalModule} from "@gewd/ng-utils/dynamic-portal"; @NgModule({ @@ -41,7 +43,9 @@ import {SharedModule} from "../../shared/shared.module"; MatIconModule, MatButtonModule, MatCheckboxModule, - SharedModule + SharedModule, + MatFormFieldModule, + DynamicPortalModule ] }) export class WatchersMasonryModule { diff --git a/apps/senstate-dashboard/src/app/directives/css-props/css-props.directive.ts b/apps/senstate-dashboard/src/app/directives/css-props/css-props.directive.ts new file mode 100644 index 0000000..599dfe7 --- /dev/null +++ b/apps/senstate-dashboard/src/app/directives/css-props/css-props.directive.ts @@ -0,0 +1,35 @@ +import {ChangeDetectorRef, Directive, ElementRef, Input, NgZone, OnChanges, SimpleChanges} from '@angular/core'; + +/* + * Workaround for setting CSS custom properties: + * https://github.com/angular/angular/issues/9343 + * + * Cannot work for any style properties. + */ +@Directive({ + selector: '[cssProps]', +}) +export class CSSPropsDirective implements OnChanges { + + @Input() cssProps: any; + + constructor(private element: ElementRef, + private cd: ChangeDetectorRef, + private zone: NgZone) { + (window as any).myElement = element.nativeElement; + } + + ngOnChanges({cssProps}: SimpleChanges) { + if (cssProps && cssProps.currentValue) { + const {style} = this.element.nativeElement; + this.zone.runOutsideAngular(() => { + for (const [k, v] of Object.entries(cssProps.currentValue)) { + console.info({k, v}, cssProps.currentValue); + style.setProperty(k, v.toString(), "important"); + + } + }) + + } + } +} diff --git a/apps/senstate-dashboard/src/app/directives/css-props/css-props.module.ts b/apps/senstate-dashboard/src/app/directives/css-props/css-props.module.ts new file mode 100644 index 0000000..505ef4c --- /dev/null +++ b/apps/senstate-dashboard/src/app/directives/css-props/css-props.module.ts @@ -0,0 +1,15 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {CSSPropsDirective} from "./css-props.directive"; + + +@NgModule({ + declarations: [CSSPropsDirective], + exports: [ + CSSPropsDirective + ], + imports: [ + CommonModule + ] +}) +export class CssPropsModule { } diff --git a/apps/senstate-dashboard/src/app/state/hub.service.ts b/apps/senstate-dashboard/src/app/state/hub.service.ts index 3ba209c..74e0cc1 100644 --- a/apps/senstate-dashboard/src/app/state/hub.service.ts +++ b/apps/senstate-dashboard/src/app/state/hub.service.ts @@ -20,6 +20,8 @@ const hubWatchMeta = { export interface GroupedWatchers { key: string; watchers: WatcherMeta[]; + haveGroups?: boolean; + hasName?: boolean; } @Injectable() @@ -152,14 +154,15 @@ export class HubService { client: '', watchers: { [stringWatcherKey]: { + group: 'Group 1', type: WatchType.String, tag: 'string value', watchId: stringWatcherKey }, [numWatcherKey]: { + group: 'Group 1', type: WatchType.Number, tag: 'number value', - group: 'Group 1', watchId: numWatcherKey }, [jsonWatcherKey]: { @@ -250,4 +253,11 @@ export class HubService { } ]) } + + getWatcherUpdateCount$(watchId: string) { + return this.state.select(s => s.data.eventsCounter[watchId]).pipe( + + ); + + } } diff --git a/apps/senstate/src/root-assets/package.json b/apps/senstate/src/root-assets/package.json index 541036a..38b63aa 100644 --- a/apps/senstate/src/root-assets/package.json +++ b/apps/senstate/src/root-assets/package.json @@ -1,6 +1,6 @@ { "name": "@senstate/cli", - "version": "0.3.0", + "version": "0.3.1", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/package.json b/package.json index d4a3722..4e56bd3 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@angular/platform-browser-dynamic": "8.2.13", "@angular/router": "8.2.13", "@gewd/lazy": "^0.1.1", + "@gewd/ng-utils": "^0.2.1", "@material-extended/mde": "2.3.1", "@ngrx/effects": "8.4.0", "@ngrx/store": "8.4.0", @@ -70,14 +71,14 @@ "reflect-metadata": "0.1.12", "rxjs": "6.4.0", "serve-static": "1.14.1", + "snyk": "^1.334.0", "stacktracey": "1.2.122", "ts-action": "11.0.0", "ts-action-immer": "3.0.1", "tslib": "1.10.0", "ws": "7.1.2", "xss": "^1.0.6", - "zone.js": "0.9.1", - "snyk": "^1.334.0" + "zone.js": "0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "0.803.21", diff --git a/readme_assets/senstate-current-workflow.svg b/readme_assets/senstate-current-workflow.svg index 3ab71c9..30fb844 100644 --- a/readme_assets/senstate-current-workflow.svg +++ b/readme_assets/senstate-current-workflow.svg @@ -1,6 +1 @@ -
JS-Client Library
Hub
Rust-Client Library
Go-Client Library
Dashboard
 \ No newline at end of file +
JS-Client
soon*
Log-Only Mode
JS-Client Library
App-Overlay
Hub
Dashboard
CSharp
 diff --git a/readme_assets/senstate_upcoming_workflow.svg b/readme_assets/senstate_upcoming_workflow.svg deleted file mode 100644 index c699676..0000000 --- a/readme_assets/senstate_upcoming_workflow.svg +++ /dev/null @@ -1,6 +0,0 @@ -
JS-Client only (*soon)
App-Overlay
JS-Client Library
Log-OnlyMode
Hub
Rust-Client Library
Go-Client Library
Dashboard
 \ No newline at end of file diff --git a/readme_assets/workflow.mmd b/readme_assets/workflow.mmd index e20634e..454e69f 100644 --- a/readme_assets/workflow.mmd +++ b/readme_assets/workflow.mmd @@ -1,11 +1,19 @@ graph LR - subgraph "JS-Client only (*soon)" - JS --> App-Overlay - JS --> Log-OnlyMode - end + Hub--> Dashboard + + subgraph "JS-Client" + + JS --> Log[Log-Only Mode] + subgraph soon["soon*"] + JS --> App-Overlay + end + end JS[JS-Client Library] --> Hub{Hub} + CS[CSharp] --> Hub - Rust[Rust-Client Library] --> Hub - Go[Go-Client Library] --> Hub - Hub--> Dashboard + +class soon lightblue; +classDef lightblue fill:#23D; +classDef lightblue color: white; +classDef lightblue padding-top: 10px;