Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Boxiang Sun
gitlab-ce
Commits
cbf1b656
Commit
cbf1b656
authored
Mar 14, 2017
by
Filipa Lacerda
Committed by
Alfredo Sumaran
Mar 14, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Use a button and a post request instead of UJS links - part 1 - Environments
parent
4b4e1f04
Changes
28
Hide whitespace changes
Inline
Side-by-side
Showing
28 changed files
with
375 additions
and
199 deletions
+375
-199
app/assets/javascripts/environments/components/environment.js
...assets/javascripts/environments/components/environment.js
+43
-33
app/assets/javascripts/environments/components/environment_actions.js
...avascripts/environments/components/environment_actions.js
+43
-13
app/assets/javascripts/environments/components/environment_external_url.js
...ripts/environments/components/environment_external_url.js
+8
-6
app/assets/javascripts/environments/components/environment_item.js
...s/javascripts/environments/components/environment_item.js
+20
-14
app/assets/javascripts/environments/components/environment_rollback.js
...vascripts/environments/components/environment_rollback.js
+43
-6
app/assets/javascripts/environments/components/environment_stop.js
...s/javascripts/environments/components/environment_stop.js
+41
-9
app/assets/javascripts/environments/components/environment_terminal_button.js
...ts/environments/components/environment_terminal_button.js
+5
-4
app/assets/javascripts/environments/components/environments_table.js
...javascripts/environments/components/environments_table.js
+10
-6
app/assets/javascripts/environments/environments_bundle.js
app/assets/javascripts/environments/environments_bundle.js
+1
-1
app/assets/javascripts/environments/event_hub.js
app/assets/javascripts/environments/event_hub.js
+3
-0
app/assets/javascripts/environments/folder/environments_folder_bundle.js
...scripts/environments/folder/environments_folder_bundle.js
+1
-1
app/assets/javascripts/environments/folder/environments_folder_view.js
...vascripts/environments/folder/environments_folder_view.js
+9
-10
app/assets/javascripts/environments/services/environments_service.js
...javascripts/environments/services/environments_service.js
+9
-6
app/assets/javascripts/environments/stores/environments_store.js
...ets/javascripts/environments/stores/environments_store.js
+3
-4
app/assets/javascripts/vue_shared/vue_resource_interceptor.js
...assets/javascripts/vue_shared/vue_resource_interceptor.js
+0
-4
app/assets/stylesheets/pages/environments.scss
app/assets/stylesheets/pages/environments.scss
+8
-0
spec/features/projects/environments/environments_spec.rb
spec/features/projects/environments/environments_spec.rb
+1
-9
spec/javascripts/environments/environment_actions_spec.js
spec/javascripts/environments/environment_actions_spec.js
+23
-12
spec/javascripts/environments/environment_external_url_spec.js
...javascripts/environments/environment_external_url_spec.js
+6
-5
spec/javascripts/environments/environment_item_spec.js
spec/javascripts/environments/environment_item_spec.js
+10
-8
spec/javascripts/environments/environment_rollback_spec.js
spec/javascripts/environments/environment_rollback_spec.js
+27
-15
spec/javascripts/environments/environment_spec.js
spec/javascripts/environments/environment_spec.js
+4
-4
spec/javascripts/environments/environment_stop_spec.js
spec/javascripts/environments/environment_stop_spec.js
+18
-12
spec/javascripts/environments/environment_table_spec.js
spec/javascripts/environments/environment_table_spec.js
+6
-2
spec/javascripts/environments/environment_terminal_button_spec.js
...ascripts/environments/environment_terminal_button_spec.js
+24
-0
spec/javascripts/environments/environments_store_spec.js
spec/javascripts/environments/environments_store_spec.js
+2
-2
spec/javascripts/environments/folder/environments_folder_view_spec.js
...ipts/environments/folder/environments_folder_view_spec.js
+4
-4
spec/javascripts/environments/mock_data.js
spec/javascripts/environments/mock_data.js
+3
-9
No files found.
app/assets/javascripts/environments/components/environment.js
View file @
cbf1b656
/* eslint-disable no-param-reassign, no-new */
/* global Flash */
import
EnvironmentsService
from
'
../services/environments_service
'
;
import
EnvironmentTable
from
'
./environments_table
'
;
import
EnvironmentsStore
from
'
../stores/environments_store
'
;
import
eventHub
from
'
../event_hub
'
;
const
Vue
=
window
.
Vue
=
require
(
'
vue
'
);
window
.
Vue
.
use
(
require
(
'
vue-resource
'
));
const
EnvironmentsService
=
require
(
'
../services/environments_service
'
);
const
EnvironmentTable
=
require
(
'
./environments_table
'
);
const
EnvironmentsStore
=
require
(
'
../stores/environments_store
'
);
require
(
'
../../vue_shared/components/table_pagination
'
);
require
(
'
../../lib/utils/common_utils
'
);
require
(
'
../../vue_shared/vue_resource_interceptor
'
);
module
.
exports
=
Vue
.
component
(
'
environment-component
'
,
{
export
default
Vue
.
component
(
'
environment-component
'
,
{
components
:
{
'
environment-table
'
:
EnvironmentTable
,
...
...
@@ -66,33 +67,15 @@ module.exports = Vue.component('environment-component', {
* Toggles loading property.
*/
created
()
{
const
scope
=
gl
.
utils
.
getParameterByName
(
'
scope
'
)
||
this
.
visibility
;
const
pageNumber
=
gl
.
utils
.
getParameterByName
(
'
page
'
)
||
this
.
pageNumber
;
const
endpoint
=
`
${
this
.
endpoint
}
?scope=
${
scope
}
&page=
${
pageNumber
}
`
;
const
service
=
new
EnvironmentsService
(
endpoint
);
this
.
isLoading
=
true
;
return
service
.
get
()
.
then
(
resp
=>
({
headers
:
resp
.
headers
,
body
:
resp
.
json
(),
}))
.
then
((
response
)
=>
{
this
.
store
.
storeAvailableCount
(
response
.
body
.
available_count
);
this
.
store
.
storeStoppedCount
(
response
.
body
.
stopped_count
);
this
.
store
.
storeEnvironments
(
response
.
body
.
environments
);
this
.
store
.
setPagination
(
response
.
headers
);
})
.
then
(()
=>
{
this
.
isLoading
=
false
;
})
.
catch
(()
=>
{
this
.
isLoading
=
false
;
new
Flash
(
'
An error occurred while fetching the environments.
'
,
'
alert
'
);
});
this
.
service
=
new
EnvironmentsService
(
this
.
endpoint
);
this
.
fetchEnvironments
();
eventHub
.
$on
(
'
refreshEnvironments
'
,
this
.
fetchEnvironments
);
},
beforeDestroyed
()
{
eventHub
.
$off
(
'
refreshEnvironments
'
);
},
methods
:
{
...
...
@@ -112,6 +95,32 @@ module.exports = Vue.component('environment-component', {
gl
.
utils
.
visitUrl
(
param
);
return
param
;
},
fetchEnvironments
()
{
const
scope
=
gl
.
utils
.
getParameterByName
(
'
scope
'
)
||
this
.
visibility
;
const
pageNumber
=
gl
.
utils
.
getParameterByName
(
'
page
'
)
||
this
.
pageNumber
;
this
.
isLoading
=
true
;
return
this
.
service
.
get
(
scope
,
pageNumber
)
.
then
(
resp
=>
({
headers
:
resp
.
headers
,
body
:
resp
.
json
(),
}))
.
then
((
response
)
=>
{
this
.
store
.
storeAvailableCount
(
response
.
body
.
available_count
);
this
.
store
.
storeStoppedCount
(
response
.
body
.
stopped_count
);
this
.
store
.
storeEnvironments
(
response
.
body
.
environments
);
this
.
store
.
setPagination
(
response
.
headers
);
})
.
then
(()
=>
{
this
.
isLoading
=
false
;
})
.
catch
(()
=>
{
this
.
isLoading
=
false
;
new
Flash
(
'
An error occurred while fetching the environments.
'
);
});
},
},
template
:
`
...
...
@@ -144,7 +153,7 @@ module.exports = Vue.component('environment-component', {
<div class="content-list environments-container">
<div class="environments-list-loading text-center" v-if="isLoading">
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-spinner fa-spin"
aria-hidden="true"
></i>
</div>
<div class="blank-state blank-state-no-icon"
...
...
@@ -173,7 +182,8 @@ module.exports = Vue.component('environment-component', {
<environment-table
:environments="state.environments"
:can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"/>
:can-read-environment="canReadEnvironmentParsed"
:service="service"/>
</div>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
...
...
app/assets/javascripts/environments/components/environment_actions.js
View file @
cbf1b656
const
Vue
=
require
(
'
vue
'
);
const
playIconSvg
=
require
(
'
icons/_icon_play.svg
'
);
/* global Flash */
/* eslint-disable no-new */
module
.
exports
=
Vue
.
component
(
'
actions-component
'
,
{
import
playIconSvg
from
'
icons/_icon_play.svg
'
;
import
eventHub
from
'
../event_hub
'
;
export
default
{
props
:
{
actions
:
{
type
:
Array
,
required
:
false
,
default
:
()
=>
[],
},
service
:
{
type
:
Object
,
required
:
true
,
},
},
data
()
{
return
{
playIconSvg
};
return
{
playIconSvg
,
isLoading
:
false
,
};
},
methods
:
{
onClickAction
(
endpoint
)
{
this
.
isLoading
=
true
;
this
.
service
.
postAction
(
endpoint
)
.
then
(()
=>
{
this
.
isLoading
=
false
;
eventHub
.
$emit
(
'
refreshEnvironments
'
);
})
.
catch
(()
=>
{
this
.
isLoading
=
false
;
new
Flash
(
'
An error occured while making the request.
'
);
});
},
},
template
:
`
<div class="btn-group" role="group">
<button class="dropdown btn btn-default dropdown-new" data-toggle="dropdown">
<button
class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
data-toggle="dropdown"
:disabled="isLoading">
<span>
<span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
<i class="fa fa-caret-down"></i>
<span v-html="playIconSvg"></span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
<i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</span>
<ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions">
<a :href="action.play_path"
data-method="post"
rel="nofollow"
class="js-manual-action-link">
<button
@click="onClickAction(action.play_path)"
class="js-manual-action-link no-btn">
${
playIconSvg
}
<span>
{{action.name}}
</span>
</
a
>
</
button
>
</li>
</ul>
</button>
</div>
`
,
}
)
;
};
app/assets/javascripts/environments/components/environment_external_url.js
View file @
cbf1b656
/**
* Renders the external url link in environments table.
*/
const
Vue
=
require
(
'
vue
'
);
module
.
exports
=
Vue
.
component
(
'
external-url-component
'
,
{
export
default
{
props
:
{
externalUrl
:
{
type
:
String
,
...
...
@@ -12,8 +10,12 @@ module.exports = Vue.component('external-url-component', {
},
template
:
`
<a class="btn external_url" :href="externalUrl" target="_blank">
<i class="fa fa-external-link"></i>
<a
class="btn external_url"
:href="externalUrl"
target="_blank"
title="Environment external URL">
<i class="fa fa-external-link" aria-hidden="true"></i>
</a>
`
,
}
)
;
};
app/assets/javascripts/environments/components/environment_item.js
View file @
cbf1b656
const
Vue
=
require
(
'
vue
'
);
const
Timeago
=
require
(
'
timeago.js
'
);
require
(
'
../../lib/utils/text_utility
'
);
require
(
'
../../vue_shared/components/commit
'
);
const
ActionsComponent
=
require
(
'
./environment_actions
'
);
const
ExternalUrlComponent
=
require
(
'
./environment_external_url
'
);
const
StopComponent
=
require
(
'
./environment_stop
'
);
const
RollbackComponent
=
require
(
'
./environment_rollback
'
);
const
TerminalButtonComponent
=
require
(
'
./environment_terminal_button
'
);
import
Timeago
from
'
timeago.js
'
;
import
ActionsComponent
from
'
./environment_actions
'
;
import
ExternalUrlComponent
from
'
./environment_external_url
'
;
import
StopComponent
from
'
./environment_stop
'
;
import
RollbackComponent
from
'
./environment_rollback
'
;
import
TerminalButtonComponent
from
'
./environment_terminal_button
'
;
import
'
../../lib/utils/text_utility
'
;
import
'
../../vue_shared/components/commit
'
;
/**
* Envrionment Item Component
...
...
@@ -17,7 +15,7 @@ const TerminalButtonComponent = require('./environment_terminal_button');
const
timeagoInstance
=
new
Timeago
();
module
.
exports
=
Vue
.
component
(
'
environment-item
'
,
{
export
default
{
components
:
{
'
commit-component
'
:
gl
.
CommitComponent
,
...
...
@@ -46,6 +44,11 @@ module.exports = Vue.component('environment-item', {
required
:
false
,
default
:
false
,
},
service
:
{
type
:
Object
,
required
:
true
,
},
},
computed
:
{
...
...
@@ -489,22 +492,25 @@ module.exports = Vue.component('environment-item', {
<td class="environments-actions">
<div v-if="!model.isFolder" class="btn-group pull-right" role="group">
<actions-component v-if="hasManualActions && canCreateDeployment"
:service="service"
:actions="manualActions"/>
<external-url-component v-if="externalURL && canReadEnvironment"
:external-url="externalURL"/>
<stop-component v-if="hasStopAction && canCreateDeployment"
:stop-url="model.stop_path"/>
:stop-url="model.stop_path"
:service="service"/>
<terminal-button-component v-if="model && model.terminal_path"
:terminal-path="model.terminal_path"/>
<rollback-component v-if="canRetry && canCreateDeployment"
:is-last-deployment="isLastDeployment"
:retry-url="retryUrl"/>
:retry-url="retryUrl"
:service="service"/>
</div>
</td>
</tr>
`
,
}
)
;
};
app/assets/javascripts/environments/components/environment_rollback.js
View file @
cbf1b656
/* global Flash */
/* eslint-disable no-new */
/**
* Renders Rollback or Re deploy button in environments table depending
* of the provided property `isLastDeployment`
* of the provided property `isLastDeployment`.
*
* Makes a post request when the button is clicked.
*/
const
Vue
=
require
(
'
vue
'
)
;
import
eventHub
from
'
../event_hub
'
;
module
.
exports
=
Vue
.
component
(
'
rollback-component
'
,
{
export
default
{
props
:
{
retryUrl
:
{
type
:
String
,
...
...
@@ -15,16 +19,49 @@ module.exports = Vue.component('rollback-component', {
type
:
Boolean
,
default
:
true
,
},
service
:
{
type
:
Object
,
required
:
true
,
},
},
data
()
{
return
{
isLoading
:
false
,
};
},
methods
:
{
onClick
()
{
this
.
isLoading
=
true
;
this
.
service
.
postAction
(
this
.
retryUrl
)
.
then
(()
=>
{
this
.
isLoading
=
false
;
eventHub
.
$emit
(
'
refreshEnvironments
'
);
})
.
catch
(()
=>
{
this
.
isLoading
=
false
;
new
Flash
(
'
An error occured while making the request.
'
);
});
},
},
template
:
`
<a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
<button type="button"
class="btn"
@click="onClick"
:disabled="isLoading">
<span v-if="isLastDeployment">
Re-deploy
</span>
<span v-else>
Rollback
</span>
</a>
<i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</button>
`
,
}
)
;
};
app/assets/javascripts/environments/components/environment_stop.js
View file @
cbf1b656
/* global Flash */
/* eslint-disable no-new, no-alert */
/**
* Renders the stop "button" that allows stop an environment.
* Used in environments table.
*/
const
Vue
=
require
(
'
vue
'
)
;
import
eventHub
from
'
../event_hub
'
;
module
.
exports
=
Vue
.
component
(
'
stop-component
'
,
{
export
default
{
props
:
{
stopUrl
:
{
type
:
String
,
default
:
''
,
},
service
:
{
type
:
Object
,
required
:
true
,
},
},
data
()
{
return
{
isLoading
:
false
,
};
},
methods
:
{
onClick
()
{
if
(
confirm
(
'
Are you sure you want to stop this environment?
'
))
{
this
.
isLoading
=
true
;
this
.
service
.
postAction
(
this
.
retryUrl
)
.
then
(()
=>
{
this
.
isLoading
=
false
;
eventHub
.
$emit
(
'
refreshEnvironments
'
);
})
.
catch
(()
=>
{
this
.
isLoading
=
false
;
new
Flash
(
'
An error occured while making the request.
'
,
'
alert
'
);
});
}
},
},
template
:
`
<
a class="btn stop-env-link
"
:href="stopUrl
"
data-confirm="Are you sure you want to stop this environment?
"
data-method="post
"
rel="nofollow
">
<
button type="button
"
class="btn stop-env-link
"
@click="onClick
"
:disabled="isLoading
"
title="Stop Environment
">
<i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
</a>
<i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</button>
`
,
}
)
;
};
app/assets/javascripts/environments/components/environment_terminal_button.js
View file @
cbf1b656
...
...
@@ -2,13 +2,13 @@
* Renders a terminal button to open a web terminal.
* Used in environments table.
*/
const
Vue
=
require
(
'
vue
'
);
const
terminalIconSvg
=
require
(
'
icons/_icon_terminal.svg
'
);
import
terminalIconSvg
from
'
icons/_icon_terminal.svg
'
;
module
.
exports
=
Vue
.
component
(
'
terminal-button-component
'
,
{
export
default
{
props
:
{
terminalPath
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
},
...
...
@@ -19,8 +19,9 @@ module.exports = Vue.component('terminal-button-component', {
template
:
`
<a class="btn terminal-button"
title="Open web terminal"
:href="terminalPath">
${
terminalIconSvg
}
</a>
`
,
}
)
;
};
app/assets/javascripts/environments/components/environments_table.js
View file @
cbf1b656
/**
* Render environments table.
*/
const
Vue
=
require
(
'
vue
'
);
const
EnvironmentItem
=
require
(
'
./environment_item
'
);
module
.
exports
=
Vue
.
component
(
'
environment-table-component
'
,
{
import
EnvironmentItem
from
'
./environment_item
'
;
export
default
{
components
:
{
'
environment-item
'
:
EnvironmentItem
,
},
...
...
@@ -28,6 +26,11 @@ module.exports = Vue.component('environment-table-component', {
required
:
false
,
default
:
false
,
},
service
:
{
type
:
Object
,
required
:
true
,
},
},
template
:
`
...
...
@@ -48,9 +51,10 @@ module.exports = Vue.component('environment-table-component', {
<tr is="environment-item"
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"></tr>
:can-read-environment="canReadEnvironment"
:service="service"></tr>
</template>
</tbody>
</table>
`
,
}
)
;
};
app/assets/javascripts/environments/environments_bundle.js
View file @
cbf1b656
const
EnvironmentsComponent
=
require
(
'
./components/environment
'
)
;
import
EnvironmentsComponent
from
'
./components/environment
'
;
$
(()
=>
{
window
.
gl
=
window
.
gl
||
{};
...
...
app/assets/javascripts/environments/event_hub.js
0 → 100644
View file @
cbf1b656
import
Vue
from
'
vue
'
;
export
default
new
Vue
();
app/assets/javascripts/environments/folder/environments_folder_bundle.js
View file @
cbf1b656
const
EnvironmentsFolderComponent
=
require
(
'
./environments_folder_view
'
)
;
import
EnvironmentsFolderComponent
from
'
./environments_folder_view
'
;
$
(()
=>
{
window
.
gl
=
window
.
gl
||
{};
...
...
app/assets/javascripts/environments/folder/environments_folder_view.js
View file @
cbf1b656
/* eslint-disable no-param-reassign, no-new */
/* global Flash */
import
EnvironmentsService
from
'
../services/environments_service
'
;
import
EnvironmentTable
from
'
../components/environments_table
'
;
import
EnvironmentsStore
from
'
../stores/environments_store
'
;
const
Vue
=
window
.
Vue
=
require
(
'
vue
'
);
window
.
Vue
.
use
(
require
(
'
vue-resource
'
));
const
EnvironmentsService
=
require
(
'
../services/environments_service
'
);
const
EnvironmentTable
=
require
(
'
../components/environments_table
'
);
const
EnvironmentsStore
=
require
(
'
../stores/environments_store
'
);
require
(
'
../../vue_shared/components/table_pagination
'
);
require
(
'
../../lib/utils/common_utils
'
);
require
(
'
../../vue_shared/vue_resource_interceptor
'
);
module
.
exports
=
Vue
.
component
(
'
environment-folder-view
'
,
{
export
default
Vue
.
component
(
'
environment-folder-view
'
,
{
components
:
{
'
environment-table
'
:
EnvironmentTable
,
...
...
@@ -88,11 +88,11 @@ module.exports = Vue.component('environment-folder-view', {
const
endpoint
=
`
${
this
.
endpoint
}
?scope=
${
scope
}
&page=
${
pageNumber
}
`
;
const
service
=
new
EnvironmentsService
(
endpoint
);
this
.
service
=
new
EnvironmentsService
(
endpoint
);
this
.
isLoading
=
true
;
return
service
.
get
()
return
this
.
service
.
get
()
.
then
(
resp
=>
({
headers
:
resp
.
headers
,
body
:
resp
.
json
(),
...
...
@@ -168,13 +168,12 @@ module.exports = Vue.component('environment-folder-view', {
:can-read-environment="canReadEnvironmentParsed"
:play-icon-svg="playIconSvg"
:terminal-icon-svg="terminalIconSvg"
:commit-icon-svg="commitIconSvg"
>
</environment-table
>
:commit-icon-svg="commitIconSvg"
:service="service"/
>
<table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
:change="changePage"
:pageInfo="state.paginationInformation">
</table-pagination>
:pageInfo="state.paginationInformation"/>
</div>
</div>
</div>
...
...
app/assets/javascripts/environments/services/environments_service.js
View file @
cbf1b656
const
Vue
=
require
(
'
vue
'
);
/* eslint-disable class-methods-use-this */
import
Vue
from
'
vue
'
;
class
EnvironmentsService
{
export
default
class
EnvironmentsService
{
constructor
(
endpoint
)
{
this
.
environments
=
Vue
.
resource
(
endpoint
);
}
get
()
{
return
this
.
environments
.
get
();
get
(
scope
,
page
)
{
return
this
.
environments
.
get
(
{
scope
,
page
}
);
}
}
module
.
exports
=
EnvironmentsService
;
postAction
(
endpoint
)
{
return
Vue
.
http
.
post
(
endpoint
,
{},
{
emulateJSON
:
true
});
}
}
app/assets/javascripts/environments/stores/environments_store.js
View file @
cbf1b656
require
(
'
~/lib/utils/common_utils
'
);
import
'
~/lib/utils/common_utils
'
;
/**
* Environments Store.
*
* Stores received environments, count of stopped environments and count of
* available environments.
*/
class
EnvironmentsStore
{
export
default
class
EnvironmentsStore
{
constructor
()
{
this
.
state
=
{};
this
.
state
.
environments
=
[];
...
...
@@ -86,5 +87,3 @@ class EnvironmentsStore {
return
count
;
}
}
module
.
exports
=
EnvironmentsStore
;
app/assets/javascripts/vue_shared/vue_resource_interceptor.js
View file @
cbf1b656
...
...
@@ -6,10 +6,6 @@ Vue.http.interceptors.push((request, next) => {
Vue
.
activeResources
=
Vue
.
activeResources
?
Vue
.
activeResources
+
1
:
1
;
next
((
response
)
=>
{
if
(
typeof
response
.
data
===
'
string
'
)
{
response
.
data
=
JSON
.
parse
(
response
.
data
);
}
Vue
.
activeResources
--
;
});
});
...
...
app/assets/stylesheets/pages/environments.scss
View file @
cbf1b656
...
...
@@ -141,6 +141,14 @@
margin-right
:
0
;
}
}
.no-btn
{
border
:
none
;
background
:
none
;
outline
:
none
;
width
:
100%
;
text-align
:
left
;
}
}
}
...
...
spec/features/projects/environments/environments_spec.rb
View file @
cbf1b656
...
...
@@ -111,10 +111,8 @@ feature 'Environments page', :feature, :js do
find
(
'.js-dropdown-play-icon-container'
).
click
expect
(
page
).
to
have_content
(
action
.
name
.
humanize
)
expect
{
click_link
(
action
.
name
.
humanize
)
}
expect
{
find
(
'.js-manual-action-link'
).
click
}
.
not_to
change
{
Ci
::
Pipeline
.
count
}
expect
(
action
.
reload
).
to
be_pending
end
scenario
'does show build name and id'
do
...
...
@@ -158,12 +156,6 @@ feature 'Environments page', :feature, :js do
expect
(
page
).
to
have_selector
(
'.stop-env-link'
)
end
scenario
'starts build when stop button clicked'
do
find
(
'.stop-env-link'
).
click
expect
(
page
).
to
have_content
(
'close_app'
)
end
context
'for reporter'
do
let
(
:role
)
{
:reporter
}
...
...
spec/javascripts/environments/environment_actions_spec.js
View file @
cbf1b656
const
ActionsComponent
=
require
(
'
~/environments/components/environment_actions
'
);
import
Vue
from
'
vue
'
;
import
actionsComp
from
'
~/environments/components/environment_actions
'
;
describe
(
'
Actions Component
'
,
()
=>
{
preloadFixtures
(
'
static/environments/element.html.raw
'
);
let
ActionsComponent
;
let
actionsMock
;
let
spy
;
let
component
;
beforeEach
(()
=>
{
loadFixtures
(
'
static/environments/element.html.raw
'
);
});
ActionsComponent
=
Vue
.
extend
(
actionsComp
);
it
(
'
should render a dropdown with the provided actions
'
,
()
=>
{
const
actionsMock
=
[
actionsMock
=
[
{
name
:
'
bar
'
,
play_path
:
'
https://gitlab.com/play
'
,
...
...
@@ -19,18 +21,27 @@ describe('Actions Component', () => {
},
];
const
component
=
new
ActionsComponent
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
spy
=
jasmine
.
createSpy
(
'
spy
'
).
and
.
returnValue
(
Promise
.
resolve
());
component
=
new
ActionsComponent
({
propsData
:
{
actions
:
actionsMock
,
service
:
{
postAction
:
spy
,
},
},
});
}).
$mount
();
});
it
(
'
should render a dropdown with the provided actions
'
,
()
=>
{
expect
(
component
.
$el
.
querySelectorAll
(
'
.dropdown-menu li
'
).
length
,
).
toEqual
(
actionsMock
.
length
);
expect
(
component
.
$el
.
querySelector
(
'
.dropdown-menu li a
'
).
getAttribute
(
'
href
'
),
).
toEqual
(
actionsMock
[
0
].
play_path
);
});
it
(
'
should call the service when an action is clicked
'
,
()
=>
{
component
.
$el
.
querySelector
(
'
.dropdown
'
).
click
();
component
.
$el
.
querySelector
(
'
.js-manual-action-link
'
).
click
();
expect
(
spy
).
toHaveBeenCalledWith
(
actionsMock
[
0
].
play_path
);
});
});
spec/javascripts/environments/environment_external_url_spec.js
View file @
cbf1b656
const
ExternalUrlComponent
=
require
(
'
~/environments/components/environment_external_url
'
);
import
Vue
from
'
vue
'
;
import
externalUrlComp
from
'
~/environments/components/environment_external_url
'
;
describe
(
'
External URL Component
'
,
()
=>
{
preloadFixtures
(
'
static/environments/element.html.raw
'
);
let
ExternalUrlComponent
;
beforeEach
(()
=>
{
loadFixtures
(
'
static/environments/element.html.raw
'
);
ExternalUrlComponent
=
Vue
.
extend
(
externalUrlComp
);
});
it
(
'
should link to the provided externalUrl prop
'
,
()
=>
{
const
externalURL
=
'
https://gitlab.com
'
;
const
component
=
new
ExternalUrlComponent
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
propsData
:
{
externalUrl
:
externalURL
,
},
});
})
.
$mount
()
;
expect
(
component
.
$el
.
getAttribute
(
'
href
'
)).
toEqual
(
externalURL
);
expect
(
component
.
$el
.
querySelector
(
'
fa-external-link
'
)).
toBeDefined
();
...
...
spec/javascripts/environments/environment_item_spec.js
View file @
cbf1b656
window
.
timeago
=
require
(
'
timeago.js
'
);
const
EnvironmentItem
=
require
(
'
~/environments/components/environment_item
'
);
import
'
timeago.js
'
;
import
Vue
from
'
vue
'
;
import
environmentItemComp
from
'
~/environments/components/environment_item
'
;
describe
(
'
Environment item
'
,
()
=>
{
preloadFixtures
(
'
static/environments/table.html.raw
'
);
let
EnvironmentItem
;
beforeEach
(()
=>
{
loadFixtures
(
'
static/environments/table.html.raw
'
);
EnvironmentItem
=
Vue
.
extend
(
environmentItemComp
);
});
describe
(
'
When item is folder
'
,
()
=>
{
...
...
@@ -21,13 +23,13 @@ describe('Environment item', () => {
};
component
=
new
EnvironmentItem
({
el
:
document
.
querySelector
(
'
tr#environment-row
'
),
propsData
:
{
model
:
mockItem
,
canCreateDeployment
:
false
,
canReadEnvironment
:
true
,
service
:
{},
},
});
})
.
$mount
()
;
});
it
(
'
Should render folder icon and name
'
,
()
=>
{
...
...
@@ -109,13 +111,13 @@ describe('Environment item', () => {
};
component
=
new
EnvironmentItem
({
el
:
document
.
querySelector
(
'
tr#environment-row
'
),
propsData
:
{
model
:
environment
,
canCreateDeployment
:
true
,
canReadEnvironment
:
true
,
service
:
{},
},
});
})
.
$mount
()
;
});
it
(
'
should render environment name
'
,
()
=>
{
...
...
spec/javascripts/environments/environment_rollback_spec.js
View file @
cbf1b656
const
RollbackComponent
=
require
(
'
~/environments/components/environment_rollback
'
);
import
Vue
from
'
vue
'
;
import
rollbackComp
from
'
~/environments/components/environment_rollback
'
;
describe
(
'
Rollback Component
'
,
()
=>
{
preloadFixtures
(
'
static/environments/element.html.raw
'
);
const
retryURL
=
'
https://gitlab.com/retry
'
;
let
RollbackComponent
;
let
spy
;
beforeEach
(()
=>
{
loadFixtures
(
'
static/environments/element.html.raw
'
);
RollbackComponent
=
Vue
.
extend
(
rollbackComp
);
spy
=
jasmine
.
createSpy
(
'
spy
'
).
and
.
returnValue
(
Promise
.
resolve
());
});
it
(
'
Should
link to the provided retryUrl
'
,
()
=>
{
it
(
'
Should
render Re-deploy label when isLastDeployment is true
'
,
()
=>
{
const
component
=
new
RollbackComponent
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
propsData
:
{
retryUrl
:
retryURL
,
isLastDeployment
:
true
,
service
:
{
postAction
:
spy
,
},
},
});
})
.
$mount
()
;
expect
(
component
.
$el
.
getAttribute
(
'
href
'
)).
toEqual
(
retryURL
);
expect
(
component
.
$el
.
querySelector
(
'
span
'
).
textContent
).
toContain
(
'
Re-deploy
'
);
});
it
(
'
Should render R
e-deploy label when isLastDeployment is tru
e
'
,
()
=>
{
it
(
'
Should render R
ollback label when isLastDeployment is fals
e
'
,
()
=>
{
const
component
=
new
RollbackComponent
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
propsData
:
{
retryUrl
:
retryURL
,
isLastDeployment
:
true
,
isLastDeployment
:
false
,
service
:
{
postAction
:
spy
,
},
},
});
})
.
$mount
()
;
expect
(
component
.
$el
.
querySelector
(
'
span
'
).
textContent
).
toContain
(
'
R
e-deploy
'
);
expect
(
component
.
$el
.
querySelector
(
'
span
'
).
textContent
).
toContain
(
'
R
ollback
'
);
});
it
(
'
Should render Rollback label when isLastDeployment is false
'
,
()
=>
{
it
(
'
should call the service when the button is clicked
'
,
()
=>
{
const
component
=
new
RollbackComponent
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
propsData
:
{
retryUrl
:
retryURL
,
isLastDeployment
:
false
,
service
:
{
postAction
:
spy
,
},
},
});
})
.
$mount
()
;
expect
(
component
.
$el
.
querySelector
(
'
span
'
).
textContent
).
toContain
(
'
Rollback
'
);
component
.
$el
.
click
();
expect
(
spy
).
toHaveBeenCalledWith
(
retryURL
);
});
});
spec/javascripts/environments/environment_spec.js
View file @
cbf1b656
const
Vue
=
require
(
'
vue
'
)
;
require
(
'
~/flash
'
)
;
const
EnvironmentsComponent
=
require
(
'
~/environments/components/environment
'
)
;
const
{
environment
}
=
require
(
'
./mock_data
'
)
;
import
Vue
from
'
vue
'
;
import
'
~/flash
'
;
import
EnvironmentsComponent
from
'
~/environments/components/environment
'
;
import
{
environment
}
from
'
./mock_data
'
;
describe
(
'
Environment
'
,
()
=>
{
preloadFixtures
(
'
static/environments/environments.html.raw
'
);
...
...
spec/javascripts/environments/environment_stop_spec.js
View file @
cbf1b656
const
StopComponent
=
require
(
'
~/environments/components/environment_stop
'
);
import
Vue
from
'
vue
'
;
import
stopComp
from
'
~/environments/components/environment_stop
'
;
describe
(
'
Stop Component
'
,
()
=>
{
preloadFixtures
(
'
static/environments/element.html.raw
'
);
let
stopURL
;
let
StopComponent
;
let
component
;
let
spy
;
const
stopURL
=
'
/stop
'
;
beforeEach
(()
=>
{
loadFixtures
(
'
static/environments/element.html.raw
'
);
StopComponent
=
Vue
.
extend
(
stopComp
);
spy
=
jasmine
.
createSpy
(
'
spy
'
).
and
.
returnValue
(
Promise
.
resolve
());
spyOn
(
window
,
'
confirm
'
).
and
.
returnValue
(
true
);
stopURL
=
'
/stop
'
;
component
=
new
StopComponent
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
propsData
:
{
stopUrl
:
stopURL
,
service
:
{
postAction
:
spy
,
},
},
});
})
.
$mount
()
;
});
it
(
'
should link to the provided URL
'
,
()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'
href
'
)).
toEqual
(
stopURL
);
it
(
'
should render a button to stop the environment
'
,
()
=>
{
expect
(
component
.
$el
.
tagName
).
toEqual
(
'
BUTTON
'
);
expect
(
component
.
$el
.
getAttribute
(
'
title
'
)).
toEqual
(
'
Stop Environment
'
);
});
it
(
'
should have a data-confirm attribute
'
,
()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'
data-confirm
'
)).
toEqual
(
'
Are you sure you want to stop this environment?
'
);
it
(
'
should call the service when an action is clicked
'
,
()
=>
{
component
.
$el
.
click
();
expect
(
spy
).
toHaveBeenCalled
();
});
});
spec/javascripts/environments/environment_table_spec.js
View file @
cbf1b656
const
EnvironmentTable
=
require
(
'
~/environments/components/environments_table
'
);
import
Vue
from
'
vue
'
;
import
environmentTableComp
from
'
~/environments/components/environments_table
'
;
describe
(
'
Environment item
'
,
()
=>
{
preloadFixtures
(
'
static/environments/element.html.raw
'
);
...
...
@@ -16,14 +17,17 @@ describe('Environment item', () => {
},
};
const
EnvironmentTable
=
Vue
.
extend
(
environmentTableComp
);
const
component
=
new
EnvironmentTable
({
el
:
document
.
querySelector
(
'
.test-dom-element
'
),
propsData
:
{
environments
:
[{
mockItem
}],
canCreateDeployment
:
false
,
canReadEnvironment
:
true
,
service
:
{},
},
});
})
.
$mount
()
;
expect
(
component
.
$el
.
tagName
).
toEqual
(
'
TABLE
'
);
});
...
...
spec/javascripts/environments/environment_terminal_button_spec.js
0 → 100644
View file @
cbf1b656
import
Vue
from
'
vue
'
;
import
terminalComp
from
'
~/environments/components/environment_terminal_button
'
;
describe
(
'
Stop Component
'
,
()
=>
{
let
TerminalComponent
;
let
component
;
const
terminalPath
=
'
/path
'
;
beforeEach
(()
=>
{
TerminalComponent
=
Vue
.
extend
(
terminalComp
);
component
=
new
TerminalComponent
({
propsData
:
{
terminalPath
,
},
}).
$mount
();
});
it
(
'
should render a link to open a web terminal with the provided path
'
,
()
=>
{
expect
(
component
.
$el
.
tagName
).
toEqual
(
'
A
'
);
expect
(
component
.
$el
.
getAttribute
(
'
title
'
)).
toEqual
(
'
Open web terminal
'
);
expect
(
component
.
$el
.
getAttribute
(
'
href
'
)).
toEqual
(
terminalPath
);
});
});
spec/javascripts/environments/environments_store_spec.js
View file @
cbf1b656
const
Store
=
require
(
'
~/environments/stores/environments_store
'
)
;
const
{
environmentsList
,
serverData
}
=
require
(
'
./mock_data
'
)
;
import
Store
from
'
~/environments/stores/environments_store
'
;
import
{
environmentsList
,
serverData
}
from
'
./mock_data
'
;
(()
=>
{
describe
(
'
Store
'
,
()
=>
{
...
...
spec/javascripts/environments/folder/environments_folder_view_spec.js
View file @
cbf1b656
const
Vue
=
require
(
'
vue
'
)
;
require
(
'
~/flash
'
)
;
const
EnvironmentsFolderViewComponent
=
require
(
'
~/environments/folder/environments_folder_view
'
)
;
const
{
environmentsList
}
=
require
(
'
../mock_data
'
)
;
import
Vue
from
'
vue
'
;
import
'
~/flash
'
;
import
EnvironmentsFolderViewComponent
from
'
~/environments/folder/environments_folder_view
'
;
import
{
environmentsList
}
from
'
../mock_data
'
;
describe
(
'
Environments Folder View
'
,
()
=>
{
preloadFixtures
(
'
static/environments/environments_folder_view.html.raw
'
);
...
...
spec/javascripts/environments/mock_data.js
View file @
cbf1b656
const
environmentsList
=
[
export
const
environmentsList
=
[
{
name
:
'
DEV
'
,
size
:
1
,
...
...
@@ -30,7 +30,7 @@ const environmentsList = [
},
];
const
serverData
=
[
export
const
serverData
=
[
{
name
:
'
DEV
'
,
size
:
1
,
...
...
@@ -67,7 +67,7 @@ const serverData = [
},
];
const
environment
=
{
export
const
environment
=
{
name
:
'
DEV
'
,
size
:
1
,
latest
:
{
...
...
@@ -84,9 +84,3 @@ const environment = {
updated_at
:
'
2017-01-31T10:53:46.894Z
'
,
},
};
module
.
exports
=
{
environmentsList
,
environment
,
serverData
,
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment