Add CircleCI Integration

Signed-off-by: MTRNord <mtrnord1@gmail.com>

config/integrations/circleci.yaml

@@ -0,0 +1,8 @@
+type: "complex-bot"
+integrationType: "circleci"
+enabled: true
+name: "CircleCI"
+about: "Sends CircleCI build results into the room"
+avatar: "img/avatars/circleci.png"
+upstream:
+  type: "vector"

web/app/configs/circleci/circleci-config.component.html

@@ -0,0 +1,63 @@
+<div class="config-wrapper">
+    <img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
+    <div class="config-header">
+        <img [src]="integration.avatar">
+        <h4>Configure CircleCI hooks</h4>
+    </div>
+    <div class="config-content">
+        <form (submit)="addRepository()" novalidate name="addRepoForm">
+            <div class="row">
+                <div class="col-md-12" style="margin-bottom: 12px;">
+                    <h6>.circleci/config.yml configuration</h6>
+                    The following will need to be added to your .circleci/config.yml file:
+                    <pre class="yaml">{{ circleYaml }}</pre>
+                </div>
+                <div class="col-md-8" style="margin-bottom: 12px;">
+                    <h6>Your CircleCI hooks</h6>
+                    <div class="input-group input-group-sm">
+                        <input type="text" class="form-control"
+                               placeholder="owner/repo-name"
+                               [(ngModel)]="repoKey" name="repoKey"
+                               [disabled]="isUpdating">
+                        <span class="input-group-btn">
+                            <button type="submit" class="btn btn-success" [disabled]="isUpdating">
+                                <i class="fa fa-plus-circle"></i> Add Repository
+                            </button>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-md-12 removable" *ngFor="let repo of integration.repoTemplates trackById">
+                    {{ repo.repoKey }}
+                    <button type="button" class="btn btn-outline-info btn-sm" (click)="editTemplate(repo.repoKey)"
+                            style="margin-top: -5px;" [disabled]="isUpdating" *ngIf="!isTemplateToggled(repo.repoKey)">
+                        <i class="fa fa-pencil"></i> Edit
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-danger" (click)="removeRepository(repo.repoKey)"
+                            style="margin-top: -5px;" [disabled]="isUpdating">
+                        <i class="fa fa-times"></i> Remove Repository
+                    </button>
+                    <div *ngIf="isTemplateToggled(repo.repoKey)">
+                        <textarea [(ngModel)]="repo.newTemplate" name="template-{{repo.repoKey}}"
+                                  style="width: 100%; height: 100px; margin-top: 5px;"></textarea>
+                        <button type="button" class="btn btn-primary btn-sm" (click)="saveTemplate(repo.repoKey)">Save
+                        </button>
+                        <button type="button" class="btn btn-outline btn-sm" (click)="toggleTemplate(repo.repoKey)">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-12" *ngIf="integration.immutableRepoTemplates.length > 0">
+                    <h6 class="other-items-title">Hooks from other users in the room</h6>
+                </div>
+                <div class="col-md-12 list" *ngFor="let repo of integration.immutableRepoTemplates trackById">
+                    {{ repo.repoKey }} <span class="text-muted">(added by {{ repo.ownerId }})</span>
+                    <button type="button" class="btn btn-outline-info btn-sm" (click)="toggleTemplate(repo.repoKey)"
+                            style="margin-top: -5px;" [disabled]="isUpdating">
+                        {{ isTemplateToggled(repo.repoKey) ? "Hide" : "Show" }} Template
+                    </button>
+                    <pre *ngIf="isTemplateToggled(repo.repoKey)">{{ repo.template }}</pre>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

web/app/configs/circleci/circleci-config.component.scss

@@ -0,0 +1,19 @@
+// component styles are encapsulated and only applied to their components
+.list {
+  margin-top: 5px;
+}
+
+.removable {
+  margin-top: 3px;
+}
+
+.other-items-title {
+  margin-top: 25px;
+  margin-bottom: 0;
+}
+
+.yaml {
+  border: 1px solid #ccc;
+  background: #eee;
+  padding: 5px;
+}

web/app/configs/circleci/circleci-config.component.ts

@@ -0,0 +1,116 @@
+import { Component } from "@angular/core";
+import { CircleCiIntegration } from "../../shared/models/integration";
+import { ModalComponent, DialogRef } from "ngx-modialog";
+import { ConfigModalContext } from "../../integration/integration.component";
+import { ToasterService } from "angular2-toaster";
+import { ApiService } from "../../shared/api.service";
+
+@Component({
+    selector: "my-circleci-config",
+    templateUrl: "./circleci-config.component.html",
+    styleUrls: ["./circleci-config.component.scss", "./../config.component.scss"],
+})
+export class CircleCiConfigComponent implements ModalComponent<ConfigModalContext> {
+
+    public integration: CircleCiIntegration;
+
+    public isUpdating = false;
+    public repoKey = "";
+    public repoTemplate = "";
+    public circleYaml = "";
+
+    private roomId: string;
+    private scalarToken: string;
+    private knownRepos: string[] = [];
+    private visibleTemplates = [];
+
+    constructor(public dialog: DialogRef<ConfigModalContext>,
+                private toaster: ToasterService,
+                private api: ApiService) {
+        this.integration = <CircleCiIntegration>dialog.context.integration;
+        this.roomId = dialog.context.roomId;
+        this.scalarToken = dialog.context.scalarToken;
+
+        this.circleYaml = "notify:\n    webhooks:\n        - url: " + this.integration.webhookUrl;
+
+        this.calculateKnownRepos();
+        this.reset();
+    }
+
+    private calculateKnownRepos() {
+        for (let repo of this.integration.repoTemplates)
+            this.knownRepos.push(repo.repoKey);
+        for (let immutableRepo of this.integration.immutableRepoTemplates)
+            this.knownRepos.push(immutableRepo.repoKey);
+    }
+
+    public toggleTemplate(repoKey: string) {
+        let idx = this.visibleTemplates.indexOf(repoKey);
+        if (idx === -1) this.visibleTemplates.push(repoKey);
+        else this.visibleTemplates.splice(idx, 1);
+    }
+
+    public isTemplateToggled(repoKey: string) {
+        return this.visibleTemplates.indexOf(repoKey) !== -1;
+    }
+
+    public editTemplate(repoKey: string) {
+        this.toggleTemplate(repoKey);
+        let repoConfig = this.integration.repoTemplates.find(r => r.repoKey === repoKey);
+        repoConfig.newTemplate = repoConfig.template;
+    }
+
+    public saveTemplate(repoKey: string) {
+        let repoConfig = this.integration.repoTemplates.find(r => r.repoKey === repoKey);
+        repoConfig.template = repoConfig.newTemplate;
+        this.updateTemplates().then(() => this.toggleTemplate(repoKey));
+    }
+
+    public addRepository() {
+        if (!this.repoKey || this.repoKey.trim().length === 0) {
+            this.toaster.pop("warning", "Please enter a repository");
+            return;
+        }
+        if (this.knownRepos.indexOf(this.repoKey) !== -1) {
+            this.toaster.pop("error", "Repository " + this.repoKey + " is already being tracked");
+            return;
+        }
+
+        this.integration.repoTemplates.push({repoKey: this.repoKey, template: this.repoTemplate, newTemplate: ""});
+        this.updateTemplates().then(() => this.reset());
+    }
+
+    private reset() {
+        this.repoKey = "";
+        this.repoTemplate = "%{build_num}#%{build_num} (%{branch} - %{commit} : %{committer_name}): %{outcome}\n    Build details : %{build_url}\n";
+    }
+
+    public removeRepository(repoKey: string) {
+        for (let i = 0; i < this.integration.repoTemplates.length; i++) {
+            if (this.integration.repoTemplates[i].repoKey === repoKey) {
+                this.integration.repoTemplates.splice(i, 1);
+                this.updateTemplates().then(() => this.reset());
+                return;
+            }
+        }
+
+        this.toaster.pop("error", "Could not find target repository");
+    }
+
+    public updateTemplates() {
+        this.isUpdating = true;
+        return this.api.updateIntegrationState(this.roomId, this.integration.type, this.integration.integrationType, this.scalarToken, {
+            repoTemplates: this.integration.repoTemplates
+        }).then(response => {
+            this.integration.repoTemplates = response.repoTemplates;
+            this.integration.immutableRepoTemplates = response.immutableRepoTemplates;
+            this.calculateKnownRepos();
+            this.isUpdating = false;
+            this.toaster.pop("success", "Repositories updated");
+        }).catch(err => {
+            this.toaster.pop("error", err.json().error);
+            console.error(err);
+            this.isUpdating = false;
+        });
+    }
+}

web/app/shared/integration.service.ts

@@ -4,6 +4,7 @@ import { RssConfigComponent } from "../configs/rss/rss-config.component";
 import { ContainerContent } from "ngx-modialog";
 import { IrcConfigComponent } from "../configs/irc/irc-config.component";
 import { TravisCiConfigComponent } from "../configs/travisci/travisci-config.component";
+import { CircleCiConfigComponent } from "../configs/circleci/circleci-config.component";
 import { CustomWidgetConfigComponent } from "../configs/widget/custom_widget/custom_widget-config.component";
 import { YoutubeWidgetConfigComponent } from "../configs/widget/youtube/youtube-config.component";
 import { TwitchWidgetConfigComponent } from "../configs/widget/twitch/twitch-config.component";
@@ -28,6 +29,9 @@ export class IntegrationService {
             "travisci": {
                 component: TravisCiConfigComponent,
             },
+            "circleci": {
+                component: CircleCiConfigComponent,
+            },
         },
         "bridge": {
             "irc": {

web/app/shared/models/integration.ts

@@ -26,6 +26,12 @@ export interface TravisCiIntegration extends Integration {
     webhookUrl: string; // immutable
 }
 
+export interface CircleCiIntegration extends Integration {
+    repoTemplates: { repoKey: string, template: string, newTemplate: string }[]; // newTemplate is local
+    immutableRepoTemplates: { repoKey: string, template: string, ownerId: string }[];
+    webhookUrl: string; // immutable
+}
+
 export interface IRCIntegration extends Integration {
     availableNetworks: { name: string, id: string }[];
     channels: { [networkId: string]: string[] };