Feat: Add suspicious instances detail (#22)

src/app/instances/instances.module.ts

@@ -10,6 +10,7 @@ import {ReactiveFormsModule} from "@angular/forms";
 import { EditOwnInstanceComponent } from './pages/edit-own-instance/edit-own-instance.component';
 import {Guards} from "../guards/guards";
 import { HesitatedInstancesComponent } from './pages/hesitated-instances/hesitated-instances.component';
+import { SuspiciousInstanceDetailComponent } from './pages/suspicious-instance-detail/suspicious-instance-detail.component';
 
 const routes: Routes = [
   {
@@ -32,6 +33,10 @@ const routes: Routes = [
     path: 'detail/:instance',
     component: InstanceDetailComponent,
   },
+  {
+    path: 'suspicious/detail/:instance',
+    component: SuspiciousInstanceDetailComponent,
+  },
   {
     path: 'edit/my',
     component: EditOwnInstanceComponent,
@@ -46,7 +51,8 @@ const routes: Routes = [
     SuspiciousInstancesComponent,
     CensuredInstancesComponent,
     EditOwnInstanceComponent,
-    HesitatedInstancesComponent
+    HesitatedInstancesComponent,
+    SuspiciousInstanceDetailComponent
   ],
   imports: [
     CommonModule,

src/app/instances/pages/suspicious-instance-detail/suspicious-instance-detail.component.html

@@ -0,0 +1,63 @@
+<app-loader *ngIf="loading else content"></app-loader>
+
+<ng-template #content>
+  <div class="col-md-12">
+    <div class="card" *ngIf="detail">
+      <div class="card-header">
+        <h3 class="card-title" id="instance-details">Instance details</h3>
+      </div>
+      <div class="card-body">
+        <table class="table table-bordered">
+          <tbody>
+          <tr>
+            <th>Field</th>
+            <th>Value</th>
+          </tr>
+          <tr>
+            <td>Domain</td>
+            <td>{{detail.domain}}</td>
+          </tr>
+          <tr>
+            <td>Uptime</td>
+            <td>{{(detail.uptime_alltime / 100) | formatPercentage:2}}</td>
+          </tr>
+          <tr>
+            <td>Local posts</td>
+            <td>{{detail.local_posts | formatNumber}}</td>
+          </tr>
+          <tr>
+            <td>Comments count</td>
+            <td>{{detail.comment_counts | formatNumber}}</td>
+          </tr>
+          <tr>
+            <td>Total users</td>
+            <td>{{detail.total_users | formatNumber}}</td>
+          </tr>
+          <tr>
+            <td>Monthly active users</td>
+            <td>{{detail.active_users_monthly | formatNumber}}</td>
+          </tr>
+          <tr>
+            <td>Registrations open</td>
+            <td><app-yes-no [swapColors]="true" [yes]="detail.signup"></app-yes-no></td>
+          </tr>
+          <tr>
+            <td>Local users per comments & posts</td>
+            <td>
+              {{detail.activity_suspicion | formatNumber:2}}
+              <app-tooltip text="Higher is worse" />
+            </td>
+          </tr>
+          <tr>
+            <td>Local users per monthly active users</td>
+            <td>
+              {{detail.active_users_suspicion | formatNumber:2}}
+              <app-tooltip text="Higher is worse" />
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</ng-template>

src/app/instances/pages/suspicious-instance-detail/suspicious-instance-detail.component.scss

@@ -0,0 +1,3 @@
+:host {
+  min-width: 100%;
+}

src/app/instances/pages/suspicious-instance-detail/suspicious-instance-detail.component.ts

@@ -0,0 +1,57 @@
+import {Component, OnInit} from '@angular/core';
+import {TitleService} from "../../../services/title.service";
+import {FediseerApiService} from "../../../services/fediseer-api.service";
+import {AuthenticationManagerService} from "../../../services/authentication-manager.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ApiResponseHelperService} from "../../../services/api-response-helper.service";
+import {toPromise} from "../../../types/resolvable";
+import {MessageService} from "../../../services/message.service";
+import {SuspiciousInstanceDetailResponse} from "../../../response/suspicious-instance-detail.response";
+
+@Component({
+  selector: 'app-suspicious-instance-detail',
+  templateUrl: './suspicious-instance-detail.component.html',
+  styleUrls: ['./suspicious-instance-detail.component.scss']
+})
+export class SuspiciousInstanceDetailComponent implements OnInit {
+  public loading: boolean = true;
+  public detail: SuspiciousInstanceDetailResponse | null = null;
+
+  constructor(
+    private readonly titleService: TitleService,
+    private readonly api: FediseerApiService,
+    private readonly authManager: AuthenticationManagerService,
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly router: Router,
+    private readonly apiResponseHelper: ApiResponseHelperService,
+    private readonly messageService: MessageService,
+  ) {
+  }
+
+  public async ngOnInit(): Promise<void> {
+    this.activatedRoute.params.subscribe(async params => {
+      this.loading = true;
+
+      const instanceDomain = <string>params['instance'];
+      this.titleService.title = `${instanceDomain} | Instance detail`;
+
+      const instanceList = await toPromise(this.api.getSuspiciousInstances());
+      if (this.apiResponseHelper.handleErrors([instanceList])) {
+        this.loading = false;
+        return;
+      }
+
+      const instance = instanceList.successResponse!.instances.filter(
+        instance => instance.domain === instanceDomain,
+      )[0] ?? null;
+
+      if (instance === null) {
+        this.messageService.createError('This instance is not on the list of suspicious instances.');
+        this.loading = false;
+        return;
+      }
+      this.detail = instance;
+      this.loading = false;
+    });
+  }
+}

src/app/instances/pages/suspicious-instances/suspicious-instances.component.html

@@ -16,7 +16,7 @@
           </thead>
           <tbody>
           <tr *ngFor="let instance of instances">
-            <td><a routerLink="/instances/detail/{{instance.domain}}">{{instance.domain}}</a></td>
+            <td><a routerLink="/instances/suspicious/detail/{{instance.domain}}">{{instance.domain}}</a></td>
             <td *ngIf="!currentInstance.anonymous">
               <a href="javascript:void(0)" (click)="toggleCensure(instance.domain)">
                 <app-yes-no [yes]="censuredByMe.indexOf(instance.domain) > -1"></app-yes-no>

src/app/response/suspicious-instance-detail.response.ts

@@ -4,7 +4,7 @@ export interface SuspiciousInstanceDetailResponse {
   domain: string;
   uptime_alltime: float;
   local_posts: int;
-  comments_count: int;
+  comment_counts: int;
   total_users: int;
   active_users_monthly: int;
   signup: boolean;

src/app/shared/components/yes-no/yes-no.component.html

@@ -1,2 +1,10 @@
-<span class="text-success" *ngIf="yes">Yes</span>
-<span class="text-danger" *ngIf="!yes">No</span>
+<span
+  [class.text-success]="!swapColors"
+  [class.text-danger]="swapColors"
+  *ngIf="yes"
+>Yes</span>
+<span
+  [class.text-success]="swapColors"
+  [class.text-danger]="!swapColors"
+  *ngIf="!yes"
+>No</span>

src/app/shared/components/yes-no/yes-no.component.ts

@@ -7,4 +7,5 @@ import {Component, Input} from '@angular/core';
 })
 export class YesNoComponent {
   @Input() yes: boolean = false;
+  @Input() swapColors: boolean = false;
 }

src/app/shared/pipes/format-number.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'formatNumber'
+})
+export class FormatNumberPipe implements PipeTransform {
+
+  transform(value: string | number, digits: number | null = null): string {
+    return new Intl.NumberFormat(undefined, {
+      minimumFractionDigits: digits ?? undefined,
+      maximumFractionDigits: digits ?? undefined,
+    }).format(Number(value));
+  }
+
+}

src/app/shared/pipes/format-percentage.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'formatPercentage'
+})
+export class FormatPercentagePipe implements PipeTransform {
+
+  transform(value: string | number, digits: number | null = null): string {
+    return new Intl.NumberFormat(undefined, {
+      minimumFractionDigits: digits ?? undefined,
+      maximumFractionDigits: digits ?? undefined,
+      style: 'percent',
+    }).format(Number(value));
+  }
+}

src/app/shared/shared.module.ts

@@ -8,6 +8,8 @@ import { TomSelectDirective } from './directives/tom-select.directive';
 import { TooltipComponent } from './components/tooltip/tooltip.component';
 import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
 import { FormatDatetimePipe } from './pipes/format-date.pipe';
+import { FormatPercentagePipe } from './pipes/format-percentage.pipe';
+import { FormatNumberPipe } from './pipes/format-number.pipe';
 
 
 
@@ -20,16 +22,20 @@ import { FormatDatetimePipe } from './pipes/format-date.pipe';
     TomSelectDirective,
     TooltipComponent,
     FormatDatetimePipe,
+    FormatPercentagePipe,
+    FormatNumberPipe,
+  ],
+  exports: [
+    ToObservablePipe,
+    LoaderComponent,
+    YesNoComponent,
+    IterableEnumPipe,
+    TomSelectDirective,
+    TooltipComponent,
+    FormatDatetimePipe,
+    FormatPercentagePipe,
+    FormatNumberPipe
   ],
-    exports: [
-        ToObservablePipe,
-        LoaderComponent,
-        YesNoComponent,
-        IterableEnumPipe,
-        TomSelectDirective,
-        TooltipComponent,
-        FormatDatetimePipe
-    ],
   imports: [
     CommonModule,
     NgbTooltip