[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 271 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html
new file mode 100644
index 0000000000..23c08f6ec6
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html
@@ -0,0 +1,85 @@
+<div class="activity-log">
+
+    <div class="title-wrapper">
+        <div class="top-search">
+            <input type="text"
+                   class="search-text"
+                   placeholder="Search"
+                   data-ng-model="searchBind"
+                   data-tests-id="main-menu-input-search"
+                   ng-model-options="{ debounce: 500 }" />
+            <span class="w-sdc-search-icon magnification"></span>
+        </div>
+    </div>
+
+    <div class="table-container-flex">
+        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
+
+            <!-- Table headers -->
+            <div class="head flex-container">
+                <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
+                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
+                </div>
+            </div>
+
+            <!-- Table body -->
+            <div class="body">
+                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
+
+                    <!-- In case the logs are empty -->
+                    <div data-ng-if="!activityLog || activityLog.length===0" class="no-row-text">
+                        There are no logs to display
+                    </div>
+
+                    <!-- Loop on logs list -->
+                    <div data-ng-repeat="item in activityLog | filter: searchBind | orderBy:sortBy:reverse track by $index"
+                         data-ng-init="item.dateFormat = ( item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'MM/dd/yyyy':'UTC')+' | '+(item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'shortTime':'UTC' )"
+                         class="flex-container data-row"
+                         data-ng-class="{'selected': component === selectedComponent}"
+                         data-ng-click="doSelectComponent(component);"
+                        >
+
+                        <!-- Date -->
+                        <div class="table-col-general flex-item" sdc-smart-tooltip>
+                            {{item.dateFormat}}
+                        </div>
+
+                        <!-- Action -->
+                        <div class="table-col-general flex-item" sdc-smart-tooltip>
+                            {{item.ACTION}}
+                        </div>
+
+                        <!-- Comment -->
+                        <div class="table-col-general flex-item" sdc-smart-tooltip>
+                            {{item.COMMENT}}
+                        </div>
+
+                        <!-- Username -->
+                        <div class="table-col-general flex-item" sdc-smart-tooltip>
+                            {{item.MODIFIER}}
+                        </div>
+
+                        <!-- Status -->
+                        <div class="table-col-general flex-item" sdc-smart-tooltip>
+                            {{item.STATUS}}
+                            <span data-ng-class="{'success': item.STATUS>='200' && item.STATUS<='204','error': item.STATUS<'200' || item.STATUS>='300'}"></span>
+                        </div>
+
+                    </div>
+
+                </perfect-scrollbar>
+            </div><!-- End table body -->
+        </div><!-- End table -->
+    </div><!-- End table-container-flex -->
+
+</div>
+
+
+
+<!--<div ng-repeat="activityDate in  activityDateArray " class="w-sdc-component-viewer-right-activity-log" >
+    <div class="w-sdc-component-viewer-right-activity-log-date" >{{activityDate | date: 'longDate'}}</div>
+    <div ng-repeat="activity in activityLog[activityDate] | orderBy: '-TIMESTAMP'">
+        <div  class="w-sdc-component-viewer-right-activity-log-time">{{activity.TIMESTAMP.replace(" UTC", '') | stringToDateFilter | date: 'mediumTime':'UTC'}}</div>
+        <div class="w-sdc-component-viewer-right-activity-log-content">{{"Action: " + parseAction(activity.ACTION) + " Performed by: " + activity.MODIFIER + " Status: " + activity.STATUS}}</div>
+    </div>
+</div>-->
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
new file mode 100644
index 0000000000..61bb3e9f01
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less
@@ -0,0 +1,83 @@
+.activity-log {
+
+    margin-top: 30px;
+
+    .title-wrapper {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .table-container-flex .table .body .scrollbar-container {
+        max-height: 448px;
+    }
+    
+    .view-mode {
+        background-color: @main_color_p;
+    }
+
+    .table{
+        height: 490px;
+        margin-bottom: 0;
+    }
+
+    .table-container-flex {
+        margin-top: 10px;
+
+        .flex-item:nth-child(1) { width: 200px; }
+        .flex-item:nth-child(2) { flex-grow: 20; }
+        .flex-item:nth-child(3) { flex-grow: 30; }
+        .flex-item:nth-child(4) { flex-grow: 20; }
+        .flex-item:nth-child(5) { width: 80px; }
+
+        .success {
+            position: absolute;
+            top: 11px;
+            right: 20px;
+            .sprite-new;
+            .sdc-success;
+        }
+
+        .error {
+            position: absolute;
+            top: 11px;
+            right: 20px;
+            .sprite-new;
+            .sdc-error;
+        }
+
+    }
+
+    .data-row {
+        position: relative;
+    }
+
+    .top-search {
+        float: right;
+        position: relative;
+
+        input.search-text {
+            .border-radius(2px);
+            width: 245px;
+            height: 32px;
+            line-height: 32px;
+            border: 1px solid @main_color_o;
+            margin: 0;
+            outline: none;
+            text-indent: 10px;
+
+            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
+            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
+            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
+            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
+            &:-ms-input-placeholder { font-style: italic; } /* Edge */
+        }
+
+        .magnification {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+
+    }
+
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
new file mode 100644
index 0000000000..ed583dc4c0
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
@@ -0,0 +1,103 @@
+'use strict';
+import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+import {Activity} from "app/models";
+import {ActivityLogService} from "app/services";
+
+export interface IActivityLogViewModelScope extends IWorkspaceViewModelScope {
+    activityDateArray:Array<any>; //this is in order to sort the dates
+    activityLog:Array<Activity>;
+    preVersion:string;
+
+    tableHeadersList:Array<any>;
+    reverse:boolean;
+    sortBy:string;
+    searchBind:string;
+
+    getActivityLog(uniqueId:string):void;
+    onVersionChanged(version:any):void;
+    parseAction(action:string):string;
+    sort(sortBy:string):void;
+}
+
+export class ActivityLogViewModel {
+
+    static '$inject' = [
+        '$scope',
+        '$state',
+        'Sdc.Services.ActivityLogService'
+    ];
+
+    constructor(private $scope:IActivityLogViewModelScope,
+                private $state:ng.ui.IStateService,
+                private activityLogService:ActivityLogService) {
+
+        this.initScope();
+        this.$scope.setValidState(true);
+        this.initSortedTableScope();
+        this.$scope.updateSelectedMenuItem();
+
+        // Set default sorting
+        this.$scope.sortBy = 'logDate';
+    }
+
+    private initScope():void {
+
+        this.$scope.preVersion = this.$scope.component.version;
+
+        this.$scope.onVersionChanged = (version:any):void => {
+            if (version.versionNumber != this.$scope.component.version) {
+                this.$scope.isLoading = true;
+                this.$scope.getActivityLog(version.versionId);
+            }
+        };
+
+        this.$scope.getActivityLog = (uniqueId:any):void => {
+
+            let onError = (response) => {
+                this.$scope.isLoading = false;
+                console.info('onFaild', response);
+
+            };
+
+            let onSuccess = (response:Array<Activity>) => {
+                this.$scope.activityLog = _.sortBy(response, function (o) {
+                    return o.TIMESTAMP;
+                }); //response; //
+                this.$scope.isLoading = false;
+            };
+
+            this.$scope.isLoading = true;
+            if (this.$scope.component.isResource()) {
+                this.activityLogService.getActivityLogService('resources', uniqueId).then(onSuccess, onError);
+            }
+            if (this.$scope.component.isService()) {
+                this.activityLogService.getActivityLogService('services', uniqueId).then(onSuccess, onError);
+            }
+
+        };
+
+        if (!this.$scope.activityLog || this.$scope.preVersion != this.$scope.component.version) {
+            this.$scope.getActivityLog(this.$scope.component.uniqueId);
+        }
+
+        this.$scope.parseAction = (action:string) => {
+            return action ? action.split(/(?=[A-Z])/).join(' ') : '';
+        };
+
+    }
+
+    private initSortedTableScope = ():void => {
+        this.$scope.tableHeadersList = [
+            {title: 'Date', property: 'logDate'},
+            {title: 'Action', property: 'logAction'},
+            {title: 'Comment', property: 'logComment'},
+            {title: 'Username', property: 'logUsername'},
+            {title: 'Status', property: 'logStatus'}
+        ];
+
+        this.$scope.sort = (sortBy:string):void => {
+            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
+            this.$scope.sortBy = sortBy;
+        };
+    };
+}