Skip to content

Deploy board left align pods and fix folder name

Filipa Lacerda requested to merge 1927-deploy-boards-regression into master

Changes

  • Fix css for deploy boards with few instances.
  • Fix JS to match the correct name - environment name should be the one sent in latest.name, folder name should be the one sent in root level key name

Screen Shots:
Screen_Shot_2017-03-20_at_19.37.42 Screen_Shot_2017-03-20_at_19.36.42 Screen_Shot_2017-03-20_at_19.38.01

|

How to test

To test this locally you can clone this repo: https://gitlab.com/gitlab-examples/review-apps-nginx in order to have CI setup.

In order to have environments with deploy boards you can use the Vue Interceptors to fake the response, you just need to update the path to match your project name:


Vue.http.interceptors.push((request, next) => {
  const envData = {
  "environments": [
    {
      "name": "production",
      "size": 1,
      "latest": {
        "id": 2,
        "name": "production",
        "state": "available",
        "external_url": "http:\/\/production.justanotherdemo.com",
        "environment_type": null,
        "last_deployment": {
          "id": 3,
          "iid": 3,
          "sha": "babfde1a365402ec1f0fd87c8b712c1e1e45f0ed",
          "ref": {
            "name": "master",
            "ref_path": "\/markpundsack\/minimal-ruby-app\/tree\/master"
          },
          "tag": false,
          "last?": true,
          "user": {
            "name": "Mark Pundsack",
            "username": "markpundsack",
            "id": 2,
            "state": "active",
            "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
            "web_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack"
          },
          "commit": {
            "id": "babfde1a365402ec1f0fd87c8b712c1e1e45f0ed",
            "short_id": "babfde1a",
            "title": "Set up auto deploy",
            "created_at": "2017-03-16T20:25:18.000+00:00",
            "parent_ids": [
              "f5690e06b56a2ed06a8e8485e8e9222ad048d33b"
            ],
            "message": "Set up auto deploy",
            "author_name": "Mark Pundsack",
            "author_email": "mpundsack@gitlab.com",
            "authored_date": "2017-03-16T20:25:18.000+00:00",
            "committer_name": "Mark Pundsack",
            "committer_email": "mpundsack@gitlab.com",
            "committed_date": "2017-03-16T20:25:18.000+00:00",
            "author": {
              "name": "Mark Pundsack",
              "username": "markpundsack",
              "id": 2,
              "state": "active",
              "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
              "web_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack"
            },
            "author_gravatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
            "commit_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack\/minimal-ruby-app\/commit\/babfde1a365402ec1f0fd87c8b712c1e1e45f0ed",
            "commit_path": "\/markpundsack\/minimal-ruby-app\/commit\/babfde1a365402ec1f0fd87c8b712c1e1e45f0ed"
          },
          "deployable": {
            "id": 3,
            "name": "production",
            "build_path": "\/markpundsack\/minimal-ruby-app\/builds\/3",
            "retry_path": "\/markpundsack\/minimal-ruby-app\/builds\/3\/retry",
            "created_at": "2017-03-16T20:25:19.447Z",
            "updated_at": "2017-03-16T21:38:11.055Z"
          },
          "manual_actions": [

          ]
        },
        "stop_action?": false,
        "environment_path": "\/markpundsack\/minimal-ruby-app\/environments\/2",
        "stop_path": "\/markpundsack\/minimal-ruby-app\/environments\/2\/stop",
        "terminal_path": "\/markpundsack\/minimal-ruby-app\/environments\/2\/terminal",
        "rollout_status_path": "\/markpundsack\/minimal-ruby-app\/environments\/2\/status.json",
        "created_at": "2017-03-16T20:25:19.487Z",
        "updated_at": "2017-03-16T21:38:11.277Z"
      }
    },
    {
      "name": "review",
      "size": 1,
      "latest": {
        "id": 3,
        "name": "review\/1-homepage",
        "state": "available",
        "external_url": "http:\/\/review-1-homepage-kggy45.justanotherdemo.com",
        "environment_type": "review",
        "last_deployment": {
          "id": 2,
          "iid": 2,
          "sha": "0781581bc69118dcf0075541d7af9f289c71d0b5",
          "ref": {
            "name": "1-homepage",
            "ref_path": "\/markpundsack\/minimal-ruby-app\/tree\/1-homepage"
          },
          "tag": false,
          "last?": true,
          "user": {
            "name": "Mark Pundsack",
            "username": "markpundsack",
            "id": 2,
            "state": "active",
            "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
            "web_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack"
          },
          "commit": {
            "id": "0781581bc69118dcf0075541d7af9f289c71d0b5",
            "short_id": "0781581b",
            "title": "Update server.rb",
            "created_at": "2017-03-16T21:23:41.000+00:00",
            "parent_ids": [
              "babfde1a365402ec1f0fd87c8b712c1e1e45f0ed"
            ],
            "message": "Update server.rb",
            "author_name": "Mark Pundsack",
            "author_email": "mpundsack@gitlab.com",
            "authored_date": "2017-03-16T21:23:41.000+00:00",
            "committer_name": "Mark Pundsack",
            "committer_email": "mpundsack@gitlab.com",
            "committed_date": "2017-03-16T21:23:41.000+00:00",
            "author": {
              "name": "Mark Pundsack",
              "username": "markpundsack",
              "id": 2,
              "state": "active",
              "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
              "web_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack"
            },
            "author_gravatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
            "commit_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack\/minimal-ruby-app\/commit\/0781581bc69118dcf0075541d7af9f289c71d0b5",
            "commit_path": "\/markpundsack\/minimal-ruby-app\/commit\/0781581bc69118dcf0075541d7af9f289c71d0b5"
          },
          "deployable": {
            "id": 5,
            "name": "review",
            "build_path": "\/markpundsack\/minimal-ruby-app\/builds\/5",
            "retry_path": "\/markpundsack\/minimal-ruby-app\/builds\/5\/retry",
            "created_at": "2017-03-16T21:23:45.191Z",
            "updated_at": "2017-03-16T21:24:23.566Z"
          },
          "manual_actions": [
            {
              "id": 6,
              "name": "stop_review",
              "build_path": "\/markpundsack\/minimal-ruby-app\/builds\/6",
              "retry_path": "\/markpundsack\/minimal-ruby-app\/builds\/6\/retry",
              "play_path": "\/markpundsack\/minimal-ruby-app\/builds\/6\/play",
              "created_at": "2017-03-16T21:23:45.286Z",
              "updated_at": "2017-03-16T21:24:23.644Z"
            }
          ]
        },
        "stop_action?": true,
        "environment_path": "\/markpundsack\/minimal-ruby-app\/environments\/3",
        "stop_path": "\/markpundsack\/minimal-ruby-app\/environments\/3\/stop",
        "terminal_path": "\/markpundsack\/minimal-ruby-app\/environments\/3\/terminal",
        "rollout_status_path": "\/markpundsack\/minimal-ruby-app\/environments\/3\/status.json",
        "created_at": "2017-03-16T21:23:45.269Z",
        "updated_at": "2017-03-16T21:24:23.828Z"
      }
    },
    {
      "name": "staging",
      "size": 1,
      "latest": {
        "id": 1,
        "name": "staging",
        "state": "available",
        "external_url": "http:\/\/staging.justanotherdemo.com",
        "environment_type": null,
        "last_deployment": {
          "id": 1,
          "iid": 1,
          "sha": "babfde1a365402ec1f0fd87c8b712c1e1e45f0ed",
          "ref": {
            "name": "master",
            "ref_path": "\/markpundsack\/minimal-ruby-app\/tree\/master"
          },
          "tag": false,
          "last?": true,
          "user": {
            "name": "Mark Pundsack",
            "username": "markpundsack",
            "id": 2,
            "state": "active",
            "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
            "web_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack"
          },
          "commit": {
            "id": "babfde1a365402ec1f0fd87c8b712c1e1e45f0ed",
            "short_id": "babfde1a",
            "title": "Set up auto deploy",
            "created_at": "2017-03-16T20:25:18.000+00:00",
            "parent_ids": [
              "f5690e06b56a2ed06a8e8485e8e9222ad048d33b"
            ],
            "message": "Set up auto deploy",
            "author_name": "Mark Pundsack",
            "author_email": "mpundsack@gitlab.com",
            "authored_date": "2017-03-16T20:25:18.000+00:00",
            "committer_name": "Mark Pundsack",
            "committer_email": "mpundsack@gitlab.com",
            "committed_date": "2017-03-16T20:25:18.000+00:00",
            "author": {
              "name": "Mark Pundsack",
              "username": "markpundsack",
              "id": 2,
              "state": "active",
              "avatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
              "web_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack"
            },
            "author_gravatar_url": "https:\/\/secure.gravatar.com\/avatar\/26cf0d1d89d41b47dc9a9d70a20d721d?s=80&d=identicon",
            "commit_url": "https:\/\/gitlab.justanotherdemo.com\/markpundsack\/minimal-ruby-app\/commit\/babfde1a365402ec1f0fd87c8b712c1e1e45f0ed",
            "commit_path": "\/markpundsack\/minimal-ruby-app\/commit\/babfde1a365402ec1f0fd87c8b712c1e1e45f0ed"
          },
          "deployable": {
            "id": 2,
            "name": "staging",
            "build_path": "\/markpundsack\/minimal-ruby-app\/builds\/2",
            "retry_path": "\/markpundsack\/minimal-ruby-app\/builds\/2\/retry",
            "created_at": "2017-03-16T20:25:19.384Z",
            "updated_at": "2017-03-16T20:26:15.498Z"
          },
          "manual_actions": [
            {
              "id": 3,
              "name": "production",
              "build_path": "\/markpundsack\/minimal-ruby-app\/builds\/3",
              "retry_path": "\/markpundsack\/minimal-ruby-app\/builds\/3\/retry",
              "created_at": "2017-03-16T20:25:19.447Z",
              "updated_at": "2017-03-16T21:38:11.055Z"
            }
          ]
        },
        "stop_action?": false,
        "environment_path": "\/markpundsack\/minimal-ruby-app\/environments\/1",
        "stop_path": "\/markpundsack\/minimal-ruby-app\/environments\/1\/stop",
        "terminal_path": "\/markpundsack\/minimal-ruby-app\/environments\/1\/terminal",
        "rollout_status_path": "\/markpundsack\/minimal-ruby-app\/environments\/1\/status.json",
        "created_at": "2017-03-16T20:25:19.436Z",
        "updated_at": "2017-03-16T20:26:15.675Z"
      }
    }
  ],
  "available_count": 3,
  "stopped_count": 0
};

  if (request.url === '/root/{YOUR_PROJECT}/environments.json') {
    next(request.respondWith(JSON.stringify(envData), {
      status: 200,
    }));
  }
  next();

});

Vue.http.interceptors.push((request, next) => {
  const deployBoardData = {
    "instances": [{"status":"finished","tooltip":"review-1-homepage-kggy45 (pod 0) Finished"}],
    "completion":100,"valid":true,"is_completed":true
  }
  if (request.url === '/markpundsack/minimal-ruby-app/environments/2/status.json') {
    next(request.respondWith(JSON.stringify(deployBoardData), {
      status: 200,
    }));
  }
  next();
});

Closes #1927 (closed) Closes #1928 (closed)

Merge request reports