From a922d90414fea5b05152717a72f169c0d9ef7d09 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 27 Apr 2017 22:47:50 -0400 Subject: Add Vue with async deploy keys --- app/assets/javascripts/dispatcher.js | 3 + .../javascripts/settings/settings_repository.js | 92 ++++++++++++++++++++++ app/views/projects/deploy_keys/_index.html.haml | 33 +++----- 3 files changed, 107 insertions(+), 21 deletions(-) create mode 100644 app/assets/javascripts/settings/settings_repository.js diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index b20673cd03c..2300daf0727 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -48,6 +48,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion'; import UserCallout from './user_callout'; import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags'; import ShortcutsWiki from './shortcuts_wiki'; +import SettingsDeployKeys from './settings/settings_repository'; const ShortcutsBlob = require('./shortcuts_blob'); @@ -343,6 +344,8 @@ const ShortcutsBlob = require('./shortcuts_blob'); // Initialize Protected Tag Settings new ProtectedTagCreate(); new ProtectedTagEditList(); + // Initialize deploy key ajax call + new SettingsDeployKeys(); break; case 'projects:ci_cd:show': new gl.ProjectVariables(); diff --git a/app/assets/javascripts/settings/settings_repository.js b/app/assets/javascripts/settings/settings_repository.js new file mode 100644 index 00000000000..4c6f769f533 --- /dev/null +++ b/app/assets/javascripts/settings/settings_repository.js @@ -0,0 +1,92 @@ +/* eslint-disable no-new */ +import Vue from 'vue'; +import VueResource from 'vue-resource'; + +Vue.use(VueResource); + +export default class SettingsDeployKeys { + constructor() { + this.initVue(); + } + + deployKeyRowTemplate() { + return ` +
  • + +
    + + {{deployKey.title}} + +
    + {{deployKey.fingerprint}} +
    +
    +
    + {{project.full_name}} +
    +
    + + created {{deployKey.created_at}} + +
    + Enable + + Remove + Disable +
    +
    • ` + } + + deployKeyRowComponent() { + const self = this; + return { + props: { + deployKey: Object, + enabled: Boolean + }, + + computed: { + disableURL() { + return self.disableEndpoint.replace(':id', this.deployKey.id); + }, + + enableURL() { + return self.enableEndpoint.replace(':id', this.deployKey.id); + } + }, + + template: this.deployKeyRowTemplate() + } + } + + initVue() { + const self = this; + const el = document.getElementById('js-deploy-keys'); + const endpoint = el.dataset.endpoint; + this.jsonEndpoint = `${endpoint}.json`; + this.disableEndpoint = `${endpoint}/:id/disable`; + this.enableEndpoint = `${endpoint}/:id/enable`; + new Vue({ + el: el, + components: { + deployKeyRow: self.deployKeyRowComponent() + }, + data () { + return { + enabledKeys: [], + availableKeys: [] + } + }, + created () { + this.$http.get(self.jsonEndpoint) + .then((res) => { + const keys = JSON.parse(res.body); + this.enabledKeys = keys.enabled_keys; + this.availableKeys = keys.available_project_keys; + }); + } + }) + } +} \ No newline at end of file diff --git a/app/views/projects/deploy_keys/_index.html.haml b/app/views/projects/deploy_keys/_index.html.haml index 4cfbd9add00..b35cd356aa5 100644 --- a/app/views/projects/deploy_keys/_index.html.haml +++ b/app/views/projects/deploy_keys/_index.html.haml @@ -10,25 +10,16 @@ = render @deploy_keys.form_partial_path .col-lg-9.col-lg-offset-3 %hr - .col-lg-9.col-lg-offset-3.append-bottom-default.deploy-keys + #js-deploy-keys.col-lg-9.col-lg-offset-3.append-bottom-default{data:{endpoint: namespace_project_deploy_keys_path}} %h5.prepend-top-0 - Enabled deploy keys for this project (#{@deploy_keys.enabled_keys_size}) - - if @deploy_keys.any_keys_enabled? - %ul.well-list - = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.enabled_keys, as: :deploy_key - - else - .settings-message.text-center - No deploy keys found. Create one with the form above. - %h5.prepend-top-default - Deploy keys from projects you have access to (#{@deploy_keys.available_project_keys_size}) - - if @deploy_keys.any_available_project_keys_enabled? - %ul.well-list - = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_project_keys, as: :deploy_key - - else - .settings-message.text-center - No deploy keys from your projects could be found. Create one with the form above or add existing one below. - - if @deploy_keys.any_available_public_keys_enabled? - %h5.prepend-top-default - Public deploy keys available to any project (#{@deploy_keys.available_public_keys_size}) - %ul.well-list - = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_public_keys, as: :deploy_key + Enabled deploy keys for this project ({{enabledKeys.length}}) + %ul.well-list{"v-if" => "enabledKeys.length"} + %deploy-key-row{"v-for" => "deployKey in enabledKeys", ":deploy-key" => "deployKey", ":enabled" =>"true"} + .settings-message.text-center{"v-else" => true} + No deploy keys found. Create one with the form above. + %h5.prepend-top-0 + Deploy keys from projects you have access to ({{availableKeys.length}}) + %ul.well-list{"v-if" => "availableKeys.length"} + %deploy-key-row{"v-for" => "deployKey in availableKeys", ":deploy-key" => "deployKey", ":enabled" =>"false"} + .settings-message.text-center{"v-else" => true} + No deploy keys found. Create one with the form above. -- cgit v1.2.1