If enabled, allow users and orgs to set their time machine expiration

Fixes https://www.pivotaltracker.com/story/show/142881203

static/js/directives/ui/duration-input/duration-input.component.html

@@ -0,0 +1,4 @@
+<div class="duration-input-element">
+    <range-slider ng-range-min="$ctrl.min_s" ng-range-max="$ctrl.max_s" ng-model="$ctrl.seconds"></range-slider>
+    <span class="duration-explanation">{{ $ctrl.durationExplanation($ctrl.seconds) }}</span>
+</div>

static/js/directives/ui/duration-input/duration-input.component.ts

@@ -0,0 +1,57 @@
+import { Input, Output, Component, Inject } from 'ng-metadata/core';
+import * as moment from "moment";
+
+/**
+ * A component that allows for selecting a time duration.
+ */
+@Component({
+  selector: 'duration-input',
+  templateUrl: '/static/js/directives/ui/duration-input/duration-input.component.html'
+})
+export class DurationInputComponent implements ng.IComponentController {
+  @Input('<') public min: string;
+  @Input('<') public max: string;
+  @Input('=?') public value: string;
+  @Input('=?') public seconds: number;
+
+  private min_s: number;
+  private max_s: number;
+
+  constructor (@Inject('$scope') private $scope: ng.IScope) {
+
+  }
+
+  public $onInit(): void {
+    // TODO: replace this.
+    this.$scope.$watch(() => this.seconds, this.updateValue.bind(this));
+
+    this.refresh();
+  }
+
+  public $onChanges(changes: ng.IOnChangesObject): void {
+    this.refresh();
+  }
+
+  private updateValue(): void {
+    this.value = this.seconds + 's';
+  }
+
+  private refresh(): void {
+    this.min_s = this.toSeconds(this.min || '0s');
+    this.max_s = this.toSeconds(this.max || '1h');
+
+    if (this.value) {
+      this.seconds = this.toSeconds(this.value || '0s')
+    };
+  }
+
+  private durationExplanation(durationSeconds: string): string {
+    return moment.duration(parseInt(durationSeconds), 's').humanize();
+  }
+
+  private toSeconds(durationStr: string): number {
+    var number = durationStr.substring(0, durationStr.length - 1);
+    var suffix = durationStr.substring(durationStr.length - 1);
+    return moment.duration(parseInt(number), <moment.unitOfTime.Base>suffix).asSeconds();
+  }
+}

static/js/directives/ui/time-machine-settings/time-machine-settings.component.html

@@ -0,0 +1,22 @@
+<div class="time-machine-settings-element" ng-if="$ctrl.maximum != '0s' && $ctrl.Features.CHANGE_TAG_EXPIRATION">
+ <table class="co-list-table">
+    <tr>
+      <td>Time Machine:</td>
+      <td ng-show="$ctrl.updating">
+        <div class="cor-loader-inline"></div>
+      </td>
+      <td ng-show="!$ctrl.updating" ng-if="$ctrl.Config.TAG_EXPIRATION_OPTIONS.length">
+        <select class="form-control" ng-model="$ctrl.current_s"
+                ng-options="$ctrl.getSeconds(o) as $ctrl.durationExplanation($ctrl.getSeconds(o)) for o in $ctrl.Config.TAG_EXPIRATION_OPTIONS">
+        </select>
+
+        <div class="help-text">The amount of time, after a tag is deleted, that the tag is accessible in time machine before being garbage collected.</div>
+        <a class="btn btn-primary save-expiration" ng-disabled="$ctrl.current_s == $ctrl.initial_s" ng-click="$ctrl.updateExpiration()">Save Expiration Time</a>
+      </td>
+      <td ng-show="!$ctrl.updating" ng-if="!$ctrl.Config.TAG_EXPIRATION_OPTIONS.length">
+        <div>{{ $ctrl.durationExplanation($ctrl.current_s) }}</div>
+        <div class="help-text">The amount of time, after a tag is deleted, that the tag is accessible in time machine before being garbage collected.</div>
+      </td>
+    </tr>
+  </table>
+</div>

static/js/directives/ui/time-machine-settings/time-machine-settings.component.ts

@@ -0,0 +1,72 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+import * as moment from "moment";
+
+/**
+ * A component that displays settings for a namespace for time machine.
+ */
+@Component({
+  selector: 'timeMachineSettings',
+  templateUrl: '/static/js/directives/ui/time-machine-settings/time-machine-settings.component.html'
+})
+export class TimeMachineSettingsComponent implements ng.IComponentController {
+  @Input('<') public user: any;
+  @Input('<') public organization: any;
+
+  private initial_s: number;
+  private current_s: number;
+  private updating: boolean;
+
+  constructor (@Inject('Config') private Config: any, @Inject('ApiService') private ApiService: any,
+               @Inject('Features') private Features: any) {
+    this.current_s = 0;
+    this.initial_s = 0;
+    this.updating = false;
+  }
+
+  public $onInit(): void {
+    if (this.user) {
+      this.current_s = this.user.tag_expiration_s;
+      this.initial_s = this.user.tag_expiration_s;
+    } else if (this.organization) {
+      this.current_s = this.organization.tag_expiration_s;
+      this.initial_s = this.organization.tag_expiration_s;
+    }
+  }
+
+  private getSeconds(durationStr: string): number {
+    if (!durationStr) {
+      return 0;
+    }
+
+    var number = durationStr.substring(0, durationStr.length - 1);
+    var suffix = durationStr.substring(durationStr.length - 1);
+    return moment.duration(parseInt(number), <moment.unitOfTime.Base>suffix).asSeconds();
+  }
+
+  private durationExplanation(durationSeconds: number): string {
+    return moment.duration(durationSeconds || 0, 's').humanize();
+  }
+
+  private updateExpiration(): void {
+    this.updating = true;
+    var errorDisplay = this.ApiService.errorDisplay('Could not update time machine setting', () => {
+      this.updating = false;
+    })
+
+    var method = (this.user ? this.ApiService.changeUserDetails :
+                              this.ApiService.changeOrganizationDetails);
+    var params = {};
+    if (this.organization) {
+      params['orgname'] = this.organization.name;
+    }
+
+    var data = {
+      'tag_expiration_s': this.current_s,
+    };
+
+    method(data, params).then((resp) => {
+      this.updating = false;
+      this.initial_s = this.current_s;
+    }, errorDisplay);
+  }
+}