From df41052370550e0838962b0c91633f24ac54d2d7 Mon Sep 17 00:00:00 2001 From: Vincent Fiduccia Date: Fri, 21 Apr 2017 11:10:58 -0700 Subject: [PATCH] Keyboard shortcuts --- app/application/route.js | 6 ++ app/authenticated/controller.js | 13 ++-- app/authenticated/route.js | 23 +++++++ app/components/container-row/template.hbs | 52 +-------------- app/components/container-table/template.hbs | 2 +- app/components/dns-row/template.hbs | 4 +- app/components/form-stack/component.js | 9 +-- app/components/host-row/template.hbs | 2 +- app/components/modal-shortcuts/component.js | 7 ++ app/components/modal-shortcuts/template.hbs | 64 +++++++++++++++++++ app/components/page-header/template.hbs | 2 +- app/components/service-row/template.hbs | 8 ++- .../settings/theme-toggle/template.hbs | 10 +-- .../settings/user-info/template.hbs | 8 +-- app/container/commands/template.hbs | 2 +- app/container/networking/template.hbs | 2 +- app/container/security/template.hbs | 5 +- app/containers/index/route.js | 11 ++++ app/hosts/index/route.js | 13 ++++ app/mixins/upgrade-component.js | 11 ++-- app/models/host.js | 1 - app/models/service.js | 1 + app/models/stack.js | 3 +- app/router.js | 2 +- app/services/endpoint.js | 16 ----- app/styles/components/_tables.scss | 14 ++-- app/templates/error-sub-row.hbs | 10 +++ .../controller.js | 0 .../route.js | 0 .../template.hbs | 2 +- translations/en-us.yaml | 6 +- 31 files changed, 196 insertions(+), 113 deletions(-) create mode 100644 app/components/modal-shortcuts/component.js create mode 100644 app/components/modal-shortcuts/template.hbs create mode 100644 app/templates/error-sub-row.hbs rename app/{user-settings => user-preferences}/controller.js (100%) rename app/{user-settings => user-preferences}/route.js (100%) rename app/{user-settings => user-preferences}/template.hbs (89%) diff --git a/app/application/route.js b/app/application/route.js index c2da47b7a..c6d4c31e5 100644 --- a/app/application/route.js +++ b/app/application/route.js @@ -7,6 +7,7 @@ export default Ember.Route.extend({ github : Ember.inject.service(), language : Ember.inject.service('user-language'), modal : Ember.inject.service(), + prefs : Ember.inject.service(), settings : Ember.inject.service(), previousParams : null, @@ -122,11 +123,16 @@ export default Ember.Route.extend({ this.set('previousLang', cur); svc.sideLoadLanguage('none'); } + }, + + systemToggle() { + this.get('prefs').toggleProperty('showSystemResources'); } }, shortcuts: { 'shift+l': 'langToggle', + 'shift+s': 'systemToggle', }, finishLogin() { diff --git a/app/authenticated/controller.js b/app/authenticated/controller.js index ba434d9a2..f98ad6145 100644 --- a/app/authenticated/controller.js +++ b/app/authenticated/controller.js @@ -47,8 +47,13 @@ export default Ember.Controller.extend({ return this.get('projects.isReady') && this.get('hasHosts'); }.property('projects.isReady','hasHosts'), - forceUpgrade: function() { - return this.get('currentPath').indexOf('authenticated.settings.projects') !== 0 && - this.get('currentPath').indexOf('authenticated.admin-tab.') !== 0; - }.property('currentPath'), + forceUpgrade: false, + checkForUpgrade: function() { + let path = this.get('currentPath'); + Ember.run.next(() => { + let force = path.indexOf('authenticated.settings.projects') !== 0 && + path.indexOf('authenticated.admin-tab.') !== 0; + this.set('forceUpgrade', force); + }); + }.observes('currentPath'), }); diff --git a/app/authenticated/route.js b/app/authenticated/route.js index 5588052b5..562e06341 100644 --- a/app/authenticated/route.js +++ b/app/authenticated/route.js @@ -265,5 +265,28 @@ export default Ember.Route.extend(Subscribe, PromiseToCb, { this.refresh(); console.log('Switch finished'); }, + + gotoA() { this.transitionTo('apps-tab.index', this.get('projects.current.id')); }, + gotoC() { this.transitionTo('containers.index', this.get('projects.current.id')); }, + gotoD() { this.transitionTo('dns.index', this.get('projects.current.id')); }, + gotoE() { this.transitionTo('settings.projects.index' ); }, + gotoH() { this.transitionTo('hosts.index', this.get('projects.current.id')); }, + gotoK() { this.transitionTo('authenticated.project.api.keys', this.get('projects.current.id')); }, + gotoL() { this.transitionTo('balancers.index', this.get('projects.current.id')); }, + gotoS() { this.transitionTo('scaling-groups.index', this.get('projects.current.id')); }, + help() { this.get('modalService').toggleModal('modal-shortcuts'); }, }, + + shortcuts: { + 'a': 'gotoA', + 'c': 'gotoC', + 'd': 'gotoD', + 'e': 'gotoE', + 'h': 'gotoH', + 'k': 'gotoK', + 'l': 'gotoL', + 's': 'gotoS', + 'shift+/': 'help', + }, + }); diff --git a/app/components/container-row/template.hbs b/app/components/container-row/template.hbs index bbbef734e..1bf67802f 100644 --- a/app/components/container-row/template.hbs +++ b/app/components/container-row/template.hbs @@ -12,58 +12,7 @@ {{model.displayImage}} - {{#if (and (eq showCommand "inline") model.command)~}} - ({{model.command}}) - {{/if}} - {{#if showStats}} - - {{#if (and statsAvailable model.cpuSpark)}} - {{#tooltip-element tagName="span" inlineBlock=false type="tooltip-basic" model=sparkCPUModel tooltipTemplate='tooltip-static' tooltipFor="sparkCPU"}} - {{spark-line - data=model.cpuSpark - width=60 height=25 max=cpuMax - prefix="containersPage.table.sparkPrefixCpu" - formatter="percent" - type="cpu" - tooltipModel=(mut sparkCPUModel) - }} - {{/tooltip-element}} - {{#tooltip-element tagName="span" inlineBlock=false type="tooltip-basic" model=sparkMemoryModel tooltipTemplate='tooltip-static' tooltipFor="sparkMemory"}} - {{spark-line - data=model.memorySpark - width=60 height=25 max=memoryMax - prefix="containersPage.table.sparkPrefixMemory" - formatter="mib" - type="memory" - tooltipModel=(mut sparkMemoryModel) - }} - {{/tooltip-element}} - {{#tooltip-element tagName="span" inlineBlock=false type="tooltip-basic" model=sparkNetworkModel tooltipTemplate='tooltip-static' tooltipFor="sparkNetwork"}} - {{spark-line - data=model.networkSpark - width=60 height=25 max=networkMax - prefix="containersPage.table.sparkPrefixNetwork" - formatter="kbps" - type="network" - tooltipModel=(mut sparkNetworkModel) - }} - {{/tooltip-element}} - {{#tooltip-element tagName="span" inlineBlock=false type="tooltip-basic" model=sparkStorageModel tooltipTemplate='tooltip-static' tooltipFor="sparkStorage"}} - {{spark-line - data=model.storageSpark - width=60 height=25 max=storageMax - prefix="containersPage.table.sparkPrefixStorage" - formatter="kbps" - type="storage" - tooltipModel=(mut sparkStorageModel) - }} - {{/tooltip-element}} - {{else}} - {{t 'generic.na'}} - {{/if}} - - {{/if}} {{#if showActions}} {{action-menu model=model showPrimary=showPrimaryActions}} @@ -82,3 +31,4 @@ {{t 'generic.createdDate' date=(date-from-now model.created)}} +{{partial "error-sub-row"}} diff --git a/app/components/container-table/template.hbs b/app/components/container-table/template.hbs index 2ec0e7254..d0ba22645 100644 --- a/app/components/container-table/template.hbs +++ b/app/components/container-table/template.hbs @@ -17,7 +17,7 @@ groupByRef=groupByRef headers=headers as |sortable kind inst dt|}} {{#if (eq kind "row")}} - {{container-row model=inst dt=dt showCommand="column" bulkActions=bulkActions showHost=showHost showActions=true showPrimaryActions=false}} + {{container-row model=inst dt=dt showCommand="column" bulkActions=bulkActions showHost=showHost showActions=true showPrimaryActions=false fullColspan=sortable.fullColspan}} {{else if (eq kind "group")}} diff --git a/app/components/dns-row/template.hbs b/app/components/dns-row/template.hbs index 09344aa0b..aca9bd241 100644 --- a/app/components/dns-row/template.hbs +++ b/app/components/dns-row/template.hbs @@ -1,4 +1,4 @@ - + {{check-box nodeId=model.id}} @@ -48,6 +48,8 @@ {{/if}} +{{partial "error-sub-row"}} + {{#if canExpand}} {{! make the alternating color match }} diff --git a/app/components/form-stack/component.js b/app/components/form-stack/component.js index b2971aa4b..81c52d76e 100644 --- a/app/components/form-stack/component.js +++ b/app/components/form-stack/component.js @@ -34,17 +34,18 @@ export default Ember.Component.extend({ // Find the default stack if none is passed in if ( this.get('mode') === REUSE && !this.get('stack') ) { let stack = all.findBy('name', this.get('defaultName')) - if ( stack ) { + if ( stack && stack.get('id') ) { this.set('reuseStackId', stack.get('id')); - Ember.run.next(() => { - this.updateStack(); - }); } else { Ember.run.next(() => { this.set('mode', CREATE); this.set('showAdvanced', true); }); } + + Ember.run.next(() => { + this.updateStack(); + }); } }, diff --git a/app/components/host-row/template.hbs b/app/components/host-row/template.hbs index 829031b1a..d5aa54491 100644 --- a/app/components/host-row/template.hbs +++ b/app/components/host-row/template.hbs @@ -1,4 +1,4 @@ - + {{check-box nodeId=model.id}} diff --git a/app/components/modal-shortcuts/component.js b/app/components/modal-shortcuts/component.js new file mode 100644 index 000000000..f45537595 --- /dev/null +++ b/app/components/modal-shortcuts/component.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; +import ModalBase from 'ui/mixins/modal-base'; + +export default Ember.Component.extend(ModalBase, { + classNames: ['generic', 'medium-modal'], + settings: Ember.inject.service(), +}); diff --git a/app/components/modal-shortcuts/template.hbs b/app/components/modal-shortcuts/template.hbs new file mode 100644 index 000000000..045dd896f --- /dev/null +++ b/app/components/modal-shortcuts/template.hbs @@ -0,0 +1,64 @@ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
General Navigation
A"Apps" page
C"Containers" page
D"DNS" page
E"Manage Environments" page
H"Hosts" page
K"API Keys" page
L"Load Balancers" page
S"Scaling Groups" page
?You are here
+
+
+ + + + + + + + + + + + +
Other Stuff
GToggle View Grouping
Shift+SToggle "Show System"
+
+
+ +
+ +
diff --git a/app/components/page-header/template.hbs b/app/components/page-header/template.hbs index 7f474978d..0f1babf17 100644 --- a/app/components/page-header/template.hbs +++ b/app/components/page-header/template.hbs @@ -129,7 +129,7 @@
  • {{#link-to "settings.projects"}}{{t 'nav.environment.manage'}}{{/link-to}}
    • {{#if isCaas}} -
  • {{#link-to "user-settings"}}{{t 'nav.userSettings.link'}}{{/link-to}}
    • +
  • {{#link-to "user-preferences"}}{{t 'nav.userPreferences.link'}}{{/link-to}}
    • {{/if}}
  • {{#link-to "logout" class="user-logout"}} {{t 'nav.user.logout'}}{{/link-to}}
    • diff --git a/app/components/service-row/template.hbs b/app/components/service-row/template.hbs index 9ca181bd8..d96c02ab7 100644 --- a/app/components/service-row/template.hbs +++ b/app/components/service-row/template.hbs @@ -1,4 +1,4 @@ - + {{check-box nodeId=model.id}} @@ -63,12 +63,14 @@ {{/if}} +{{partial "error-sub-row"}} + {{#if canExpand}} {{! make the alternating color match }} {{! checkbox and expand}} - {{#liquid-if expanded}} + {{#if expanded}} {{container-table body=model.instances stickyHeader=false @@ -78,7 +80,7 @@ subRow=true showHost=true }} - {{/liquid-if}} + {{/if}} {{! actions}} diff --git a/app/components/settings/theme-toggle/template.hbs b/app/components/settings/theme-toggle/template.hbs index 5a31787d2..c55225d79 100644 --- a/app/components/settings/theme-toggle/template.hbs +++ b/app/components/settings/theme-toggle/template.hbs @@ -1,22 +1,22 @@ -

    {{t 'userSettingsPage.theme.header'}}

    +

    {{t 'userPreferencesPage.theme.header'}}

    - {{t 'userSettingsPage.theme.light'}} + {{t 'userPreferencesPage.theme.light'}}
    - {{t 'userSettingsPage.theme.auto'}} + {{t 'userPreferencesPage.theme.auto'}}
    - {{t 'userSettingsPage.theme.dark'}} + {{t 'userPreferencesPage.theme.dark'}}
    -

    {{t 'userSettingsPage.theme.autoDetail'}}

    +

    {{t 'userPreferencesPage.theme.autoDetail'}}

    diff --git a/app/components/settings/user-info/template.hbs b/app/components/settings/user-info/template.hbs index b8796e964..295a907fa 100644 --- a/app/components/settings/user-info/template.hbs +++ b/app/components/settings/user-info/template.hbs @@ -1,18 +1,18 @@ -

    {{t 'userSettingsPage.generalInfo.header'}}

    +

    {{t 'userPreferencesPage.generalInfo.header'}}

    - + {{input-or-display editable=editing value=account.name}}
    - + {{input-or-display editable=editing value=account.login}}
    - +
    diff --git a/app/container/commands/template.hbs b/app/container/commands/template.hbs index be742324e..a195ee668 100644 --- a/app/container/commands/template.hbs +++ b/app/container/commands/template.hbs @@ -1,5 +1,5 @@
    - {{form-command + {{container/form-command instance=model initialLabels=model.labels editing=false diff --git a/app/container/networking/template.hbs b/app/container/networking/template.hbs index f580f9dc6..7701c8bff 100644 --- a/app/container/networking/template.hbs +++ b/app/container/networking/template.hbs @@ -1,4 +1,4 @@ -{{form-networking +{{container/form-networking editing=false instance=model.container initialLabels=model.container.labels diff --git a/app/container/security/template.hbs b/app/container/security/template.hbs index ecd98803f..585ac6aa2 100644 --- a/app/container/security/template.hbs +++ b/app/container/security/template.hbs @@ -1 +1,4 @@ -{{form-security instance=model editing=false}} +{{container/form-security + instance=model + editing=false +}} diff --git a/app/containers/index/route.js b/app/containers/index/route.js index 202867b3a..471e4d7ad 100644 --- a/app/containers/index/route.js +++ b/app/containers/index/route.js @@ -5,4 +5,15 @@ export default Ember.Route.extend({ setDefaultRoute: Ember.on('activate', function() { this.set(`session.${C.SESSION.CONTAINER_ROUTE}`,'containers'); }), + + actions: { + toggleGrouping() { + let cur = this.get('controller.mode'); + this.set('controller.mode', (cur === 'list' ? 'grouped' : 'list')); + }, + }, + + shortcuts: { + 'g': 'toggleGrouping', + } }); diff --git a/app/hosts/index/route.js b/app/hosts/index/route.js index 2467aef9e..72f4f3ad6 100644 --- a/app/hosts/index/route.js +++ b/app/hosts/index/route.js @@ -8,4 +8,17 @@ export default Ember.Route.extend({ }; }); }, + + actions: { + toggleGrouping() { + let choices = ['list','dot','grouped']; + let cur = this.get('controller.mode'); + let neu = choices[((choices.indexOf(cur)+1) % choices.length)]; + this.set('controller.mode', neu); + }, + }, + + shortcuts: { + 'g': 'toggleGrouping', + } }); diff --git a/app/mixins/upgrade-component.js b/app/mixins/upgrade-component.js index 3fc1c7fba..e1b7108b6 100644 --- a/app/mixins/upgrade-component.js +++ b/app/mixins/upgrade-component.js @@ -24,6 +24,7 @@ var queue = async.queue(getUpgradeInfo, 2); function getUpgradeInfo(task, cb) { var obj = task.obj; + console.log('Upgrade info', obj.model.id); let deps = { upgradeInfo: obj.get('catalog').fetchTemplate(task.id, true) @@ -102,10 +103,6 @@ function getUpgradeInfo(task, cb) { obj.set('upgradeStatus', ERROR); } }).finally(() => { - if ( obj.isDestroyed || obj.isDestroying ) { - return; - } - cb(); }); } @@ -123,6 +120,7 @@ export default Ember.Mixin.create({ init() { this._super(...arguments); + console.log('init', this.get('model.id')); this.updateStatus(); }, @@ -212,6 +210,9 @@ export default Ember.Mixin.create({ }, externalIdChanged: function() { - Ember.run.once(this, 'updateStatus'); + Ember.run.once(() => { + console.log('externalIdChange', this.get('model.id')); + this.updateStatus(); + }); }.observes('model.{externalId,state}'), }); diff --git a/app/models/host.js b/app/models/host.js index 054d41179..ff46fa1db 100644 --- a/app/models/host.js +++ b/app/models/host.js @@ -66,7 +66,6 @@ var Host = Resource.extend(StateCounts,{ var url = this.linkFor('config'); if ( url ) { - url = this.get('endpointSvc').addAuthParams(url); Util.download(url); } } diff --git a/app/models/service.js b/app/models/service.js index 78df8cf9e..b7dc65520 100644 --- a/app/models/service.js +++ b/app/models/service.js @@ -263,6 +263,7 @@ var Service = Resource.extend(StateCounts, { return [ 'service', + 'scalinggroup', 'networkdriverservice', 'storagedriverservice', 'loadbalancerservice', diff --git a/app/models/stack.js b/app/models/stack.js index f15f29955..52dcefd87 100644 --- a/app/models/stack.js +++ b/app/models/stack.js @@ -90,8 +90,7 @@ var Stack = Resource.extend(StateCounts, { }, exportConfig: function() { - var url = this.get('endpointSvc').addAuthParams(this.linkFor('composeConfig')); - download(url); + download(this.linkFor('composeConfig')); }, viewCode: function() { diff --git a/app/router.js b/app/router.js index b7f0cf3bc..b95ca60cc 100644 --- a/app/router.js +++ b/app/router.js @@ -26,7 +26,7 @@ Router.map(function() { this.route('style-guide', {path: '/style-guide'}); this.route('dummy-dev', {path: '/dev'}); - this.route('user-settings', {path: '/user-settings', resetNamespace: true}); + this.route('user-preferences', {path: '/user-preferences', resetNamespace: true}); // Settings this.route('settings', {resetNamespace: true}, function() { diff --git a/app/services/endpoint.js b/app/services/endpoint.js index b3b082794..4b38f8694 100644 --- a/app/services/endpoint.js +++ b/app/services/endpoint.js @@ -34,22 +34,6 @@ export default Ember.Service.extend({ return a.origin; }.property('absolute'), - addAuthParams: function(url) { - var token = this.get('cookies').get(C.COOKIE.TOKEN); - if ( token ) - { - url = Util.addQueryParam(url, 'token', token); - } - - var projectId = this.get(`tab-session.${C.TABSESSION.PROJECT}`); - if ( projectId ) - { - url = Util.addQueryParam(url, 'projectId', projectId); - } - - return url; - }, - swarm: function() { var port = this.get(`settings.${C.SETTING.SWARM_PORT}`); if ( !port ) { diff --git a/app/styles/components/_tables.scss b/app/styles/components/_tables.scss index 980bddeb2..d9974f7c2 100644 --- a/app/styles/components/_tables.scss +++ b/app/styles/components/_tables.scss @@ -28,15 +28,17 @@ $group-row-height : 40px; } > TR { + background-color: $table-bg; + border: $table-border-color solid 1px; + + &:not(:last-of-type) { + border-bottom: 0; + } + > TD { border: none; - - // &:nth-child(2) { - // border-bottom: $table-border-color solid 1px; - // } } - background-color: $table-bg; - border: $table-border-color solid 1px; + &.row-selected { background-color: $table-bg-selected; } diff --git a/app/templates/error-sub-row.hbs b/app/templates/error-sub-row.hbs new file mode 100644 index 000000000..28ef2d7fd --- /dev/null +++ b/app/templates/error-sub-row.hbs @@ -0,0 +1,10 @@ +{{#if model.showTransitioningMessage}} + {{! make the alternating color match }} + + {{! checkbox}} + + {{model.transitioningMessage}} + + {{! actions}} + +{{/if}} diff --git a/app/user-settings/controller.js b/app/user-preferences/controller.js similarity index 100% rename from app/user-settings/controller.js rename to app/user-preferences/controller.js diff --git a/app/user-settings/route.js b/app/user-preferences/route.js similarity index 100% rename from app/user-settings/route.js rename to app/user-preferences/route.js diff --git a/app/user-settings/template.hbs b/app/user-preferences/template.hbs similarity index 89% rename from app/user-settings/template.hbs rename to app/user-preferences/template.hbs index f953deeb5..c46396cb4 100644 --- a/app/user-settings/template.hbs +++ b/app/user-preferences/template.hbs @@ -1,5 +1,5 @@
    -

    {{t 'userSettingsPage.header'}}

    +

    {{t 'userPreferencesPage.header'}}

    diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 790499683..8bd252017 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -1150,7 +1150,7 @@ swarmPage: body: noData: You do not have any Services yet. -userSettingsPage: +userPreferencesPage: header: Preferences theme: header: Theme @@ -3676,8 +3676,8 @@ nav: themeLight: Light themeAuto: Auto themeDark: Dark - userSettings: - link: "User Settings" + userPreferences: + link: "Preferences" ############################## # Resource Actions