Feature/different deploy path (#742)

* serve images from CDN * rewrite image paths prior to circle ci upload * standardize on `../assets/` syntax for images destined for retrieval from CDN
dockstore · Aug 19, 2019 · 5305a09 · 5305a09
1 parent d025531
commit 5305a09
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 64 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -79,8 +79,16 @@ jobs:
       - when:
           condition: <<parameters.aws_bucket>>
           steps:
-            - attach_workspace:
-                at: .
+            - get_workspace
+            - install_container_dependencies
+            # Build again for the upload to s3
+            # TODO: https://gui.dockstore.org/${CIRCLE_TAG:-$CIRCLE_BRANCH}-$(echo $CIRCLE_SHA1 | cut -c -7) can probably be made into a bash/circle-ci variable.
+            - run:
+                name: Swap for CDN paths
+                command: bash -i -c "find src \( -iname '*.html' -o -iname '*.ts' -o -iname '*.json' \) -exec sed -i 's~\.\./assets/~https://gui\.dockstore\.org/${CIRCLE_TAG:-$CIRCLE_BRANCH}-$(echo $CIRCLE_SHA1 | cut -c -7)/assets/~g' {} +"
+            - run:
+                name: Build
+                command: bash -i -c 'npm run build.prod -- --deploy-url https://gui.dockstore.org/${CIRCLE_TAG:-$CIRCLE_BRANCH}-$(echo $CIRCLE_SHA1 | cut -c -7)/'
             # Copy to a versioned folder
             - aws-s3/copy:
                 from: dist
@@ -93,38 +101,6 @@ jobs:
                 to: 's3://${AWS_BUCKET}/${CIRCLE_TAG-$CIRCLE_BRANCH}-$(echo $CIRCLE_SHA1 | cut -c -7)/index.html'
                 arguments: |
                   --cache-control max-age=0
-            # Copy to a "live" develop folder
-            - aws-s3/copy:
-                from: dist
-                to: 's3://${AWS_BUCKET}/develop/'
-                arguments: |
-                  --recursive \
-                  --exclude index.html
-            - aws-s3/copy:
-                from: dist/index.html
-                to: 's3://${AWS_BUCKET}/develop/'
-                arguments: |
-                  --cache-control max-age=0
-  update_cloudfront:
-    working_directory: ~/repo
-    docker:
-      - image: circleci/python:2.7
-    parameters:
-      aws_bucket:
-        type: string
-        default: "${AWS_BUCKET}"
-    steps:
-      - when:
-          condition: <<parameters.aws_bucket>>
-          steps:
-            - attach_workspace:
-                at: .
-            - run:
-                name: Install AWS CLI
-                command: sudo pip install awscli --upgrade
-            - run:
-                name: Invalidate Cloudfront
-                command: bash -c 'aws cloudfront create-invalidation --distribution-id $AWS_CLOUDFRONT_DISTRIBUTION_ID --paths "/*"'
 
 workflows:
   version: 2
@@ -153,7 +129,7 @@ workflows:
               only: /.*/
           requires:
             - lint_unit_test_coverage
-      # Upload builds for tags to s3. We can add branches later
+      # Upload builds for tags and branches to s3.
       - upload_to_s3:
           requires:
             - integration_test_1
@@ -163,15 +139,7 @@ workflows:
             tags:
               only: /.*/
             branches:
-              # Note to reviewers: will change to develop before merging, once build works off the branch
-              only: feature/SEAB-314/cd
-      - update_cloudfront:
-          requires:
-            - upload_to_s3
-          filters:
-            branches:
-              # Note to reviewers: will change to develop before merging, once build works off the branch
-              only: feature/SEAB-314/cd
+              only: /.*/
 commands:
   install_container_dependencies:
     steps:

diff --git a/src/app/home-page/old-home-page/old-home-page.component.html b/src/app/home-page/old-home-page/old-home-page.component.html
@@ -94,7 +94,7 @@ <h4 class="title caption">
       <tabset class="homeComponent" type="tabs">
         <tab id="toolTab" [customClass]="browseToolsTab" (select)="onSelect($event)">
           <ng-template tabHeading>
-            <img class="site-icons-tab" src="assets/images/dockstore/dockstore-tools-blue.png" />
+            <img class="site-icons-tab" src="../assets/images/dockstore/dockstore-tools-blue.png" />
             Browse Tools
           </ng-template>
           <p>A tool is a docker container with an associated descriptor describing how to run it.</p>
@@ -104,7 +104,7 @@ <h4 class="title caption">
         </tab>
         <tab id="workflowTab" [customClass]="browseWorkflowsTab" (select)="onSelect($event)">
           <ng-template tabHeading>
-            <img class="site-icons-tab" src="assets/images/dockstore/dockstore-workflows-green.png" />
+            <img class="site-icons-tab" src="../assets/images/dockstore/dockstore-workflows-green.png" />
             Browse Workflows
           </ng-template>
           <p>A workflow is a series of tools strung together, with an associated descriptor describing how to run it.</p>

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -38,7 +38,7 @@ export class LoginComponent {
     iconRegistry: MatIconRegistry,
     sanitizer: DomSanitizer
   ) {
-    iconRegistry.addSvgIcon('google', sanitizer.bypassSecurityTrustResourceUrl('assets/svg/btn_google_light_normal_ios.svg'));
+    iconRegistry.addSvgIcon('google', sanitizer.bypassSecurityTrustResourceUrl('../assets/svg/btn_google_light_normal_ios.svg'));
   }
 
   private login(observable) {

diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -34,13 +34,16 @@
         <template [ngTemplateOutlet]="loginButton"></template>
         <mat-menu #menuLarge="matMenu">
           <a mat-menu-item data-cy="my-tools-nav-button" routerLink="/my-tools">
-            <img class="site-icons-small hidden-sm" src="assets/images/dockstore/dockstore-tools-purple.png" />&nbsp;My&nbsp;Tools
+            <img class="site-icons-small hidden-sm" src="../assets/images/dockstore/dockstore-tools-purple.png" />&nbsp;My&nbsp;Tools
           </a>
           <a mat-menu-item data-cy="my-workflows-nav-button" routerLink="/my-workflows">
-            <img class="site-icons-small hidden-sm" src="assets/images/dockstore/dockstore-workflows-purple.png" />&nbsp;My&nbsp;Workflows
+            <img
+              class="site-icons-small hidden-sm"
+              src="../assets/images/dockstore/dockstore-workflows-purple.png"
+            />&nbsp;My&nbsp;Workflows
           </a>
           <a *ngIf="devMode" mat-menu-item data-cy="my-services-nav-button" routerLink="/my-services">
-            <img class="site-icons-small hidden-sm" src="assets/images/dockstore/dockstore-workflows-purple.png" />&nbsp;My&nbsp;Services
+            <img class="site-icons-small hidden-sm" src="../assets/images/dockstore/dockstore-workflows-purple.png" />&nbsp;My&nbsp;Services
           </a>
           <mat-divider></mat-divider>
           <a mat-menu-item id="dropdown-accounts" routerLink="/accounts">

diff --git a/src/app/search/search-results/search-results.component.html b/src/app/search/search-results/search-results.component.html
@@ -17,7 +17,7 @@
 <tabset class="homeComponent" type="tabs">
   <tab id="toolTab" [active]="activeToolTab$ | async" [customClass]="browseToolsTab" [disabled]="noToolHits$ | async">
     <ng-template tabHeading>
-      <img class="site-icons-tab" src="assets/images/dockstore/dockstore-tools-blue.png" />
+      <img class="site-icons-tab" src="../assets/images/dockstore/dockstore-tools-blue.png" />
       Browse Tools
     </ng-template>
     <div *ngIf="toolTagCloudData">
@@ -60,7 +60,7 @@
       </div>
     </div>
     <ng-template tabHeading>
-      <img class="site-icons-tab" src="assets/images/dockstore/dockstore-workflows-green.png" />
+      <img class="site-icons-tab" src="../assets/images/dockstore/dockstore-workflows-green.png" />
       Browse Workflows
     </ng-template>
     <span class="m-2">

diff --git a/src/app/workflow/launch-third-party/launch-third-party.component.ts b/src/app/workflow/launch-third-party/launch-third-party.component.ts
@@ -156,8 +156,8 @@ export class LaunchThirdPartyComponent extends Base implements OnChanges, OnInit
     private descriptorsService: DescriptorsService
   ) {
     super();
-    iconRegistry.addSvgIcon('dnanexus', sanitizer.bypassSecurityTrustResourceUrl('assets/images/thirdparty/DX_Logo_white_alpha.svg'));
-    iconRegistry.addSvgIcon('terra', sanitizer.bypassSecurityTrustResourceUrl('assets/images/thirdparty/terra.svg'));
+    iconRegistry.addSvgIcon('dnanexus', sanitizer.bypassSecurityTrustResourceUrl('../assets/images/thirdparty/DX_Logo_white_alpha.svg'));
+    iconRegistry.addSvgIcon('terra', sanitizer.bypassSecurityTrustResourceUrl('../assets/images/thirdparty/terra.svg'));
   }
 
   ngOnInit(): void {

diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,5 @@
 <!DOCTYPE html>
 <html>
-  <!-- note that this file is in two different places:
-https://github.com/dockstore/compose_setup/blob/develop/templates/index.html.template
-and
-https://github.com/dockstore/dockstore-ui2/blob/develop/src/index.html
-
-Please keep the two in sync when making changes, pending a better solution via git submodules
--->
   <head>
     <meta charset="utf-8" />
     <title>Dockstore</title>
@@ -21,7 +14,7 @@
         "@context": "http://schema.org",
         "@type": "Organization",
         "url": "https://dockstore.org",
-        "logo": "https://raw.githubusercontent.com/dockstore/dockstore-ui2/develop/src/assets/images/dockstore/dockstore.png",
+        "logo": "../assets/images/dockstore/dockstore.png",
         "sameAs": ["https://twitter.com/DockstoreOrg"]
       }
     </script>

diff --git a/src/manifest.json b/src/manifest.json
@@ -4,12 +4,12 @@
   "description": "Create, Share, Use",
   "icons": [
     {
-      "src": "assets/images/dockstore/dockstore.png",
+      "src": "../assets/images/dockstore/dockstore.png",
       "sizes": "328x328",
       "type": "image/png"
     },
     {
-      "src": "assets/images/dockstore/dockstore.png",
+      "src": "../assets/images/dockstore/dockstore.png",
       "sizes": "512x512",
       "type": "image/png"
     }