ng-kinintel 0.0.317

package/src/lib/components/snapshots/snapshots.component.html

@@ -0,0 +1,408 @@
+<div class="p-6 bg-white border-b border-gray-200">
+    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+        <div class="flex items-start flex-1">
+            <div class="pt-1.5">
+                <div class="flex items-center">
+                    <h1 class="text-2xl font-bold text-gray-900">Snapshots</h1>
+                    <mat-chip-list *ngIf="activeTag" class="overflow-hidden">
+                        <mat-chip class="mb-4 ml-2 active-tag" [removable]="true" (removed)="removeActiveTag()">
+                            <span><b>{{config.tagLabel || 'Tag'}}:&nbsp;</b>{{activeTag ? activeTag.tag : ''}}</span>
+                            <mat-icon matChipRemove>cancel</mat-icon>
+                        </mat-chip>
+                    </mat-chip-list>
+                </div>
+
+                <p class="text-sm font-medium text-gray-500">
+                    A list of all the snapshots currently available.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="px-4 sm:px-6 lg:px-8 mt-0">
+    <div class="flex flex-col">
+        <div *ngIf="!canHaveSnapshots" class="mt-8 border-l-4 border-yellow-400 bg-yellow-50 p-4">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd"
+                              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                              clip-rule="evenodd"/>
+                    </svg>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-yellow-700 mb-0">
+                        Snapshots are reserved for our Accredited users. Please <a class="font-medium text-yellow-700 underline hover:text-yellow-600"
+                                                                                      href="https://dnsrf.org/joining-options/index.html">review our Tiers</a> to find out more.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="canHaveSnapshots" class="-my-2 -mx-4 sm:-mx-6 lg:-mx-8">
+            <div class="inline-block min-w-full py-2 align-middle">
+                <div class="mt-3 sm:mt-0 flex-1">
+                    <label for="mobile-search-candidate" class="sr-only">Search</label>
+                    <div class="flex">
+                        <div class="relative flex-grow focus-within:z-10">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
+                                     viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                                          clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <input type="text" name="mobile-search-candidate" id="mobile-search-candidate"
+                                   class="block w-full rounded-none pl-10 border-t-0 border-l-0 border-gray-300"
+                                   placeholder="Search snapshots"
+                                   (keyup)="searchText.next($event.target.value)">
+                        </div>
+                    </div>
+                </div>
+                <table class="min-w-full border-separate" style="border-spacing: 0">
+                    <ng-template [ngIf]="activeTag && snapshots.tag.data.length">
+                        <thead class="bg-gray-100">
+                        <tr>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                {{environment.tagLabel}} Snapshots
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Status
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Last Started
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Next Start Time
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 backdrop-blur backdrop-filter">
+                                <span class="sr-only">Edit</span>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody class="bg-white">
+                        <tr *ngFor="let snapshot of snapshots.tag.data">
+                            <td>
+                                <button *ngIf="snapshot.taskStatus !== 'RUNNING'" color="primary"
+                                        matTooltip="Trigger snapshot to run now" mat-icon-button
+                                        (click)="triggerSnapshot(snapshot.key, snapshots.project)">
+                                    <mat-icon>play_arrow</mat-icon>
+                                </button>
+                                <svg *ngIf="snapshot.taskStatus === 'RUNNING'"
+                                     class="animate-spin ml-3 mr-2 h-5 w-5 text-secondary"
+                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                            stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor"
+                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                            </td>
+                            <td (click)="snapshot.taskStatus !== 'PENDING' ? view(snapshot.key + '_latest') : null"
+                                class="cursor-pointer w-1/2 border-b border-gray-200 py-2 px-4 text-sm font-medium text-gray-900">
+                                <div class="mb-1 hover:underline">{{snapshot.snapshotProfileTitle}}</div>
+                                <div>
+                                    <span class="inline-flex text-xs pr-2 font-normal text-gray-500">
+                                        {{snapshot.relatedObjectTitle}}
+                                    </span>
+                                </div>
+                            </td>
+                            <td class="whitespace-nowrap border-b border-gray-200 py-0.5 px-2 text-sm text-gray-500">
+                                <div
+                                    class="inline-flex text-sm lowercase flex items-center text-white px-3 rounded-full"
+                                    [ngClass]="{'py-0.5': snapshot.taskStatus !== 'RUNNING','py-1': snapshot.taskStatus === 'RUNNING', 'bg-gray-400': snapshot.taskStatus === 'PENDING', 'bg-secondary': snapshot.taskStatus === 'RUNNING', 'bg-success': snapshot.taskStatus === 'COMPLETED', 'bg-danger': snapshot.taskStatus === 'FAILED'}">
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'PENDING'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                             stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'RUNNING'">
+                                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                                    stroke-width="4"></circle>
+                                            <path class="opacity-75" fill="currentColor"
+                                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'COMPLETED'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                             stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'FAILED'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                             stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'TIMED_OUT'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                        </svg>
+                                    </ng-template>
+                                    {{_.startCase(snapshot.taskStatus)}}
+                                </div>
+                            </td>
+                            <td class="whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm text-gray-500">
+                                {{snapshot.taskLastStartTime}}
+                            </td>
+                            <td class="whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm text-gray-500">
+                                {{snapshot.taskNextStartTime}}
+                            </td>
+                            <td class="relative whitespace-nowrap border-b border-gray-200 py-2 px-4 text-right text-sm">
+                                <div class="flex items-center justify-end">
+                                    <button *ngIf="snapshot.config.createHistory" mat-button
+                                            color="primary"
+                                            [disabled]="snapshot.taskStatus === 'PENDING'"
+                                            (click)="view(snapshot.key)">
+                                        View Historical
+                                    </button>
+                                    <button *ngIf="snapshot.config.createLatest" mat-button
+                                            color="primary"
+                                            [disabled]="snapshot.taskStatus === 'PENDING'"
+                                            (click)="view(snapshot.key + '_latest')">
+                                        View Latest
+                                    </button>
+                                    <div class="divider"></div>
+                                    <button color="primary" mat-icon-button [matMenuTriggerFor]="itemMenu">
+                                        <mat-icon>more_vert</mat-icon>
+                                    </button>
+                                    <mat-menu #itemMenu="matMenu">
+                                        <button mat-menu-item (click)="editSnapshot(snapshot.key, snapshots.tag)">
+                                            Edit Snapshot
+                                        </button>
+                                        <button mat-menu-item (click)="viewParent(snapshot.relatedObjectPrimaryKey)">
+                                            View Parent Query
+                                        </button>
+                                        <button mat-menu-item
+                                                (click)="delete(snapshot.key, snapshots.tag)">
+                                            Delete Snapshot
+                                        </button>
+                                    </mat-menu>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="6"
+                                class="border-t bg-gray-50 whitespace-nowrap border-b border-gray-200 py-1 px-4 text-sm text-gray-900">
+                                <div class="paging-toolbar flex align-center justify-end">
+
+                                    <div class="flex items-center justify-center">
+                                        <div class="text-xs text-gray-400 mr-10">
+                                            Showing {{snapshots.tag.offset + 1}} - {{(snapshots.tag.page * snapshots.tag.limit) - (snapshots.tag.limit - snapshots.tag.data.length)}}</div>
+                                        <select [value]="snapshots.tag.limit"
+                                                (change)="pageSizeChange($event.target.value, snapshots.tag)"
+                                                class="mr-8 p-1.5">
+                                            <option [value]="1">1</option>
+                                            <option [value]="5">5</option>
+                                            <option [value]="10">10</option>
+                                            <option [value]="25">25</option>
+                                            <option [value]="50">50</option>
+                                            <option [value]="100">100</option>
+                                            <option [value]="250">250</option>
+                                            <option [value]="1000">1000</option>
+                                        </select>
+                                        <button mat-icon-button class="mr-4" (click)="decreaseOffset(snapshots.tag)"
+                                                [disabled]="snapshots.tag.page <= 1">
+                                            <mat-icon>chevron_left</mat-icon>
+                                        </button>
+                                        <button mat-icon-button (click)="increaseOffset(snapshots.tag)"
+                                                [disabled]="snapshots.tag.endOfResults">
+                                            <mat-icon>chevron_right</mat-icon>
+                                        </button>
+                                    </div>
+
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </ng-template>
+                    <ng-template [ngIf]="snapshots.project.data.length">
+                        <thead class="bg-gray-100">
+                        <tr>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Project Snapshots
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Status
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Last Started
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                Next Start Time
+                            </th>
+                            <th scope="col"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 backdrop-blur backdrop-filter">
+                                <span class="sr-only">Edit</span>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody class="bg-white">
+                        <tr *ngFor="let snapshot of snapshots.project.data">
+                            <td>
+                                <button *ngIf="snapshot.taskStatus !== 'RUNNING'" color="primary"
+                                        matTooltip="Trigger snapshot to run now" mat-icon-button
+                                        (click)="triggerSnapshot(snapshot.key, snapshots.project)">
+                                    <mat-icon>play_arrow</mat-icon>
+                                </button>
+                                <svg *ngIf="snapshot.taskStatus === 'RUNNING'"
+                                     class="animate-spin ml-3 mr-2 h-5 w-5 text-secondary"
+                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                            stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor"
+                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                            </td>
+                            <td (click)="snapshot.taskStatus !== 'PENDING' ? view(snapshot.key + '_latest') : null"
+                                class="cursor-pointer w-1/3 border-b border-gray-200 py-2 px-4 text-sm font-medium text-gray-900">
+                                <div class="mb-1 hover:underline">{{snapshot.title}}</div>
+                                <div>
+                                    <span class="inline-flex text-xs pr-2 font-normal text-gray-500">
+                                        {{snapshot.relatedObjectTitle}}
+                                    </span>
+                                </div>
+                            </td>
+                            <td class="whitespace-nowrap border-b border-gray-200 py-0.5 px-2 text-sm text-gray-500">
+                                <div
+                                    class="inline-flex text-sm lowercase flex items-center text-white px-3 rounded-full"
+                                    [ngClass]="{'py-0.5': snapshot.taskStatus !== 'RUNNING','py-1': snapshot.taskStatus === 'RUNNING', 'bg-gray-400': snapshot.taskStatus === 'PENDING', 'bg-secondary': snapshot.taskStatus === 'RUNNING', 'bg-success': snapshot.taskStatus === 'COMPLETED', 'bg-danger': snapshot.taskStatus === 'FAILED', 'bg-purple-500': snapshot.taskStatus === 'TIMED_OUT'}">
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'PENDING'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                             stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                  d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'RUNNING'">
+                                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                                    stroke-width="4"></circle>
+                                            <path class="opacity-75" fill="currentColor"
+                                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'COMPLETED'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                             stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'FAILED'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                             stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
+                                        </svg>
+                                    </ng-template>
+                                    <ng-template [ngIf]="snapshot.taskStatus === 'TIMED_OUT'">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="-ml-1 w-6 h-6 mr-2">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                        </svg>
+                                    </ng-template>
+                                    {{_.startCase(snapshot.taskStatus)}}
+                                </div>
+                            </td>
+                            <td class="whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm text-gray-500">
+                                {{snapshot.taskLastStartTime}}
+                            </td>
+                            <td class="whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm text-gray-500">
+                                {{snapshot.taskNextStartTime}}
+                            </td>
+                            <td class="relative whitespace-nowrap border-b border-gray-200 py-2 px-4 text-right text-sm">
+                                <div class="flex items-center justify-end">
+                                    <button *ngIf="snapshot.config.createHistory" mat-button
+                                            color="primary"
+                                            [disabled]="snapshot.taskStatus === 'PENDING'"
+                                            (click)="view(snapshot.key)">
+                                        View Historical
+                                    </button>
+                                    <button *ngIf="snapshot.config.createLatest" mat-button
+                                            color="primary"
+                                            [disabled]="snapshot.taskStatus === 'PENDING'"
+                                            (click)="view(snapshot.key + '_latest')">
+                                        View Latest
+                                    </button>
+                                    <div class="divider"></div>
+                                    <button color="primary" mat-icon-button [matMenuTriggerFor]="itemMenu">
+                                        <mat-icon>more_vert</mat-icon>
+                                    </button>
+                                    <mat-menu #itemMenu="matMenu">
+                                        <button mat-menu-item (click)="editSnapshot(snapshot.key, snapshots.project)">
+                                            Edit Snapshot
+                                        </button>
+                                        <button mat-menu-item (click)="viewParent(snapshot.relatedObjectPrimaryKey)">
+                                            View Parent Query
+                                        </button>
+                                        <button mat-menu-item
+                                                (click)="delete(snapshot.key, snapshots.project)">
+                                            Delete Snapshot
+                                        </button>
+                                    </mat-menu>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="6"
+                                class="bg-gray-50 whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm text-gray-900">
+                                <div class="paging-toolbar flex align-center justify-end">
+
+                                    <div class="flex items-center justify-center">
+                                        <div class="text-xs text-gray-400 mr-10">
+                                            Showing {{snapshots.project.offset + 1}} - {{(snapshots.project.page * snapshots.project.limit) - (snapshots.project.limit - snapshots.project.data.length)}}
+                                        </div>
+                                        <select [value]="snapshots.project.limit"
+                                                (change)="pageSizeChange($event.target.value, snapshots.project)"
+                                                class="mr-8 p-2">
+                                            <option [value]="1">1</option>
+                                            <option [value]="5">5</option>
+                                            <option [value]="10">10</option>
+                                            <option [value]="25">25</option>
+                                            <option [value]="50">50</option>
+                                            <option [value]="100">100</option>
+                                            <option [value]="250">250</option>
+                                            <option [value]="1000">1000</option>
+                                        </select>
+                                        <button mat-icon-button class="mr-4" (click)="decreaseOffset(snapshots.project)"
+                                                [disabled]="snapshots.project.page <= 1">
+                                            <mat-icon>chevron_left</mat-icon>
+                                        </button>
+                                        <button mat-icon-button (click)="increaseOffset(snapshots.project)"
+                                                [disabled]="snapshots.project.endOfResults">
+                                            <mat-icon>chevron_right</mat-icon>
+                                        </button>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </ng-template>
+
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/snapshots/snapshots.component.sass

@@ -0,0 +1,4 @@
+.divider
+    width: 1px
+    height: 17px
+    background-color: #cecece

package/src/lib/components/snapshots/snapshots.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnapshotsComponent } from './snapshots.component';
+
+describe('SnapshotsComponent', () => {
+  let component: SnapshotsComponent;
+  let fixture: ComponentFixture<SnapshotsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SnapshotsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SnapshotsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});