Skip to content

Commit

Permalink
AN-22443 (on-prem: 1.16.1): remove user id from UI and use user name …
Browse files Browse the repository at this point in the history
…instead
  • Loading branch information
amirch1 committed Dec 20, 2020
1 parent bbedb59 commit 693cdfe
Show file tree
Hide file tree
Showing 15 changed files with 225 additions and 141 deletions.
129 changes: 94 additions & 35 deletions package-lock.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
<i class="icon-small-viewer-contributor"></i>
</div>
<div class="kReportRowDetails">
<span class="kTitle" [kTooltip]="item.name" [showOnEllipsis]="true">
{{item.name}}
<span class="kTitle" [kTooltip]="item.full_name || item.name" [showOnEllipsis]="true">
{{item.full_name || item.name}}
</span>
<span class="kScore">{{'app.category.plays' | translate: { '0': item['count_plays'] } }}</span>
</div>
Expand Down Expand Up @@ -73,4 +73,3 @@
</k-area-blocker>

</div>

Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export class MiniTopViewersConfig extends ReportDataBaseConfig {
constructor(_translate: TranslateService) {
super(_translate);
}

public getConfig(): ReportDataConfig {
return {
[ReportDataSection.table]: {
Expand All @@ -19,6 +19,11 @@ export class MiniTopViewersConfig extends ReportDataBaseConfig {
hidden: true,
},
'name': {
format: value => value,
nonComparable: true,
hidden: true
},
'full_name': {
format: value => value,
nonComparable: true,
sortOrder: 1,
Expand Down
102 changes: 51 additions & 51 deletions src/app/modules/category/views/performance/performance.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@ import { ViewConfig } from "configuration/view-config";
export class CategoryPerformanceComponent extends CategoryBase implements OnDestroy {
@Input() dateFilterComponent: DateFilterComponent;
@Input() categoryId: string = null;

private _order = '-date_id';
private _reportType = reportTypeMap(KalturaReportType.userEngagementTimeline);
private _dataConfig: ReportDataConfig;
private _filterChange = new Subject();
private compareEchartsIntance: any;

protected _componentId = 'performance';

public highlights$ = new BehaviorSubject<{ current: Report, compare: Report, busy: boolean, error: KalturaAPIException }>({ current: null, compare: null, busy: false, error: null });

public _tableModes = TableModes;
public _tableMode = ''; // set default table view only after the filter is updated with the category ID
public _columns: string[] = [];
Expand Down Expand Up @@ -76,16 +76,16 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
public _currentPeriod: { from: number, to: number };
public _comparePeriod: { from: number, to: number };
public _filterChange$ = this._filterChange.asObservable();

public _drillDown: {label: string, id: string, pid: string, source?: string} = {label: '', id: '', pid: ''};
private _viewConfig: ViewConfig = analyticsConfig.viewsConfig.category.performance;
public _showExternalLink = true;
public _showCustomLegend = false;

public get _isCompareMode(): boolean {
return this._compareFilter !== null;
}

constructor(private _frameEventManager: FrameEventManagerService,
private _translate: TranslateService,
private _reportService: ReportService,
Expand All @@ -102,18 +102,18 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._dataConfig = _dataConfigService.getConfig();
this._selectedMetrics = this._dataConfig.totals.preSelected;
}

ngOnDestroy() {
this._filterChange.complete();
this.highlights$.complete();
}

protected _loadReport(sections = this._dataConfig): void {
this.highlights$.next({ current: null, compare: null, busy: true, error: null });
this._isBusy = true;
this._blockerMessage = null;
this._showCustomLegend = false;

if (this.categoryId && !this._filter.categoriesIdsIn && !this._filter.playbackContextIdsIn) {
this._filter.categoriesIdsIn = this.categoryId;
}
Expand All @@ -125,14 +125,14 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
}
sections = { ...sections }; // make local copy
delete sections[ReportDataSection.table]; // remove table config to prevent table request

const reportConfig: ReportConfig = { reportType: this._reportType, filter: this._filter, order: this._order };
this._reportService.getReport(reportConfig, sections, false)
.pipe(switchMap(report => {
if (!this._isCompareMode) {
return ObservableOf({ report, compare: null });
}

if (this.categoryId && !this._compareFilter.categoriesIdsIn && !this._compareFilter.playbackContextIdsIn) {
this._compareFilter.categoriesIdsIn = this.categoryId;
}
Expand All @@ -143,7 +143,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._compareFilter.entryIdIn = this._drillDown.id;
}
const compareReportConfig = { reportType: this._reportType, filter: this._compareFilter, order: this._order };

return this._reportService.getReport(compareReportConfig, sections, false)
.pipe(map(compare => ({ report, compare })));
}))
Expand All @@ -153,24 +153,24 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._tableMode = TableModes.users;
}
this.highlights$.next({ current: report, compare: compare, busy: false, error: null });

if (report.totals && (!this._tabsData.length || this._filter.userIds)) {
this._handleTotals(report.totals); // handle totals
}

if (compare) {
this._datesTableData = { current: report, compare: compare };
this._handleCompare(report, compare);
} else {
if (report.graphs.length) {
this._handleGraphs(report.graphs); // handle graphs

this._datesTableData = { current: report };
}
}

this._firstTimeLoading = false;

if (this._filter.playbackContextIdsIn) {
// need to load non-context graph
this.loadNoContextData();
Expand All @@ -192,7 +192,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this.highlights$.next({ current: null, compare: null, busy: false, error: error });
});
}

protected _updateFilter(): void {
this._filter.timeZoneOffset = this._dateFilter.timeZoneOffset;
this._filter.fromDate = this._dateFilter.startDate;
Expand All @@ -211,30 +211,30 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
}
this._filterChange.next();
}

protected _updateRefineFilter(): void {
const userIds = this._filter.userIds;

this._refineFilterToServerValue(this._filter);

if (userIds) {
this._filter.userIds = userIds;
}
if (this._compareFilter) {
this._refineFilterToServerValue(this._compareFilter);

if (userIds) {
this._compareFilter.userIds = userIds;
}
}

this._filterChange.next();
}

private _handleCompare(current: Report, compare: Report, secondSeries = false): void {
this._currentPeriod = { from: this._filter.fromDate, to: this._filter.toDate };
this._comparePeriod = { from: this._compareFilter.fromDate, to: this._compareFilter.toDate };

if (current.graphs.length && compare.graphs.length) {
const { lineChartData } = this._compareService.compareGraphData(
this._currentPeriod,
Expand All @@ -249,13 +249,13 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
setTimeout(() => {
this.compareEchartsIntance.setOption({ legend: [{ show: false }] }, false);
}, 100);

} else {
this._lineChartData = !isEmptyObject(lineChartData) ? lineChartData : null;
this._showCustomLegend = false;
}
}

if (current.totals && compare.totals) {
this._tabsData = this._compareService.compareTotalsData(
this._currentPeriod,
Expand All @@ -267,11 +267,11 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
);
}
}

private _handleTotals(totals: KalturaReportTotal): void {
this._tabsData = this._reportService.parseTotals(totals, this._dataConfig.totals, this._selectedMetrics);
}

private _handleGraphs(graphs: KalturaReportGraph[], secondSeries = false): void {
const { lineChartData } = this._reportService.parseGraphs(
graphs,
Expand All @@ -286,16 +286,16 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._showCustomLegend = false;
}
}

public _onTabChange(tab: Tab): void {
this._logger.trace('Handle tab change action by user', { tab });
this._selectedMetrics = tab.key;
}

public _toggleTable(): void {
this._logger.trace('Handle toggle table visibility action by user', { tableVisible: !this._showTable });
this._showTable = !this._showTable;

if (analyticsConfig.isHosted) {
setTimeout(() => {
const height = document.getElementById('analyticsApp').getBoundingClientRect().height;
Expand All @@ -304,7 +304,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
}, 0);
}
}

public _onRefineFilterChange(event: RefineFilter): void {
const userIds = event.length
? event
Expand All @@ -324,51 +324,51 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
.map(filter => filter.value.id)
.join(analyticsConfig.valueSeparator)
: null;

if (userIds) {
this._filter.userIds = userIds;

if (this._compareFilter) {
this._compareFilter.userIds = userIds;
}
} else {
delete this._filter.userIds;

if (this._compareFilter) {
delete this._compareFilter.userIds;
}
}

if (entriesIds) {
this._filter.entryIdIn = entriesIds;

if (this._compareFilter) {
this._compareFilter.entryIdIn = entriesIds;
}
} else {
delete this._filter.entryIdIn;

if (this._compareFilter) {
delete this._compareFilter.entryIdIn;
}
}

if (contextIds) {
this._filter.playbackContextIdsIn = contextIds;

if (this._compareFilter) {
this._compareFilter.playbackContextIdsIn = contextIds;
}
} else {
delete this._filter.playbackContextIdsIn;

if (this._compareFilter) {
delete this._compareFilter.playbackContextIdsIn;
}
}
this._filterChange.next();
}

public _onChangeMode(): void {
this._firstTimeLoading = true;

Expand All @@ -381,10 +381,10 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
delete this._compareFilter.entryIdIn;
}
}

public onDrillDown(type: 'user' | 'entry', event): void {
if (type === 'user') {
this._drillDown = {label: event.user, id: event.user, pid: event.pid};
this._drillDown = {label: event.fullname.length ? event.fullname : event.user, id: event.user, pid: event.pid};
this._filter.userIds = event.id;
if (this._isCompareMode) {
this._compareFilter.userIds = event.id;
Expand All @@ -404,7 +404,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._loadReport();
}
}

public drillUp(): void {
if (this._drillDown.label.length) {
this._drillDown = {label: '', id: '', pid: ''};
Expand All @@ -423,7 +423,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
}
this._loadReport();
}

public navigateToDrilldown() {
if (this._tableMode === TableModes.user) {
this._navigationDrillDownService.drilldown('user', this._drillDown.id, true, this._drillDown.pid);
Expand All @@ -433,11 +433,11 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._navigationDrillDownService.drilldown(path, this._drillDown.id, true, this._drillDown.pid);
}
}

public onCompareChartInit(ec) {
this.compareEchartsIntance = ec;
}

private loadNoContextData(sections = this._dataConfig): void {
delete sections.table;
delete sections.totals;
Expand Down Expand Up @@ -485,7 +485,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._blockerMessage = this._errorsManager.getErrorMessage(error, actions);
});
}

private addNoContextSeries(lineChartData, isCompare = false): void {
Object.keys(lineChartData).forEach(key => {
if (this._lineChartData[key] && this._lineChartData[key].series) {
Expand Down Expand Up @@ -549,7 +549,7 @@ export class CategoryPerformanceComponent extends CategoryBase implements OnDest
this._showCustomLegend = true;
}
});

// hack to refresh the selected metrics data
const saveMetrics = this._selectedMetrics;
this._selectedMetrics = null;
Expand Down
Loading

0 comments on commit 693cdfe

Please sign in to comment.