Add Spy mode toggle and counter

Author: tommysitu

src/app/shared/models/usage.model.ts

@@ -5,6 +5,7 @@ export interface Usage {
 
 export interface ModeCounter {
   simulate: number;
+  spy: number;
   capture: number;
   modify: number;
   synthesize: number;

src/app/views/dashboard/dashboard.component.html

@@ -35,6 +35,7 @@
         <div class="btn-group btn-group-mode" id="hoverfly-mode-selector" >
           <a (click)="setMode($event)" name="capture" [class.btn-primary]="hoverfly.mode === 'capture'" class="btn btn-xs btn-default btn-mode">Capture</a>
           <a (click)="setMode($event)" name="simulate"  [class.btn-primary]="hoverfly.mode ==='simulate'" class="btn btn-default btn-xs btn-mode">Simulate</a>
+          <a (click)="setMode($event)" name="spy"  [class.btn-primary]="hoverfly.mode ==='spy'" class="btn btn-default btn-xs btn-mode">Spy</a>
           <a (click)="setMode($event)" name="modify" [class.btn-primary]="hoverfly.mode ==='modify'" class="btn btn-default btn-xs btn-mode">Modify</a>
           <a (click)="setMode($event)" name="synthesize" [class.btn-primary]="hoverfly.mode ==='synthesize'" class="btn btn-default btn-xs btn-mode">Synthesize</a>
         </div>
@@ -50,12 +51,14 @@
             <tr>
               <th>Captured</th>
               <th>Simulated</th>
+              <th>Spied</th>
               <th>Modified</th>
               <th>Synthesized</th>
             </tr>
             <tr id="hoverfly-counters">
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.capture || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.simulate || 0 }}</span></td>
+              <td><span class="label label-default">{{ hoverfly?.usage?.counters?.spy || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.modify || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.synthesize || 0 }}</span></td>
             </tr>

src/app/views/dashboard/dashboard.component.spec.ts

@@ -129,8 +129,9 @@ describe('Component: Dashboard', () => {
           counters: {
             capture: 100,
             simulate: 200,
-            modify: 300,
-            synthesize: 400
+            spy: 300,
+            modify: 400,
+            synthesize: 500
           }
         }
     });
@@ -145,6 +146,7 @@ describe('Component: Dashboard', () => {
       expect(counters.children[1].nativeElement.textContent).toBe('200');
       expect(counters.children[2].nativeElement.textContent).toBe('300');
       expect(counters.children[3].nativeElement.textContent).toBe('400');
+      expect(counters.children[4].nativeElement.textContent).toBe('500');
     });
   }));
 

src/styles.css

@@ -67,6 +67,7 @@ pre, code {
     font-size: 14px;
     height: auto;
     padding: 10px 12px;
+    width: 100px;
 }
 
 .table-responsive {