BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 7c7f5266 by Filipa Lacerda
Options

[ci skip] Fix more rules

parent 1525b005
Showing with 581 additions and 484 deletions
app/assets/javascripts/boards/components/board_card.vue
......@@ -89,6 +89,7 @@ export default {
:issue="issue"
:issue-link-base="issueLinkBase"
:root-path="rootPath"
:update-filters="true" />
:update-filters="true"
/>
</li>
</template>
app/assets/javascripts/clusters/components/applications.vue
......@@ -77,12 +77,12 @@ which incur additional costs. See %{pricingLink}`)),
return sprintf(
_.escape(s__(`ClusterIntegration|Prometheus is an open-source monitoring system
with %{gitlabIntegrationLink} to monitor deployed applications.`)),
{
gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
target="_blank" rel="noopener noreferrer">
${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
</a>`,
},
{
gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
target="_blank" rel="noopener noreferrer">
${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
</a>`,
},
false,
);
},
......
app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
......@@ -12,7 +12,7 @@
props: {
items: {
type: Array,
default: []
default: () => [],
},
stage: {
type: Object,
......
app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
......@@ -13,7 +13,7 @@
props: {
items: {
type: Array,
default: []
default: () => [],
},
stage: {
type: Object,
......
app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
......@@ -14,7 +14,7 @@
props: {
items: {
type: Array,
default: []
default: () => [],
},
stage: {
type: Object,
......@@ -81,8 +81,7 @@
name="fork"
:size="16"
/>
<a
:href="mergeRequest.branch.url">
<a :href="mergeRequest.branch.url">
{{ mergeRequest.branch.name }}
</a>
</span>
......
app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
......@@ -15,7 +15,7 @@
props: {
items: {
type: Array,
default: []
default: () => [],
},
stage: {
type: Object,
......@@ -69,7 +69,7 @@
<a
:href="build.commitUrl"
class="commit-sha"
>
>
{{ build.shortSha }}
</a>
</h5>
......@@ -77,7 +77,7 @@
<a
:href="build.url"
class="build-date"
>
>
{{ build.date }}
</a>
{{ s__('ByAuthor|by') }}
......
app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
......@@ -6,15 +6,21 @@
import icon from '../../vue_shared/components/icon.vue';
export default {
props: {
items: Array,
stage: Object,
},
components: {
totalTime,
limitWarning,
icon,
},
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
computed: {
iconBuildStatus() {
return iconBuildStatus;
......@@ -35,29 +41,59 @@
<li
v-for="(build, i) in items"
:key="i"
class="stage-event-item item-build-component">
class="stage-event-item item-build-component"
>
<div class="item-details">
<h5 class="item-title">
<span class="icon-build-status" v-html="iconBuildStatus"></span>
<a :href="build.url" class="item-build-name">{{ build.name }}</a>
<span
class="icon-build-status"
v-html="iconBuildStatus"
>
</span>
<a
:href="build.url"
class="item-build-name"
>
{{ build.name }}
</a>
&middot;
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
<a
:href="build.url"
class="pipeline-id"
>
#{{ build.id }}
</a>
<icon
name="fork"
:size="16">
</icon>
<a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
<span class="icon-branch" v-html="iconBranch"></span>
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
:size="16"
/>
<a
:href="build.branch.url"
class="ref-name"
>
{{ build.branch.name }}
</a>
<span
class="icon-branch"
v-html="iconBranch"
>
</span>
<a
:href="build.commitUrl"
class="commit-sha">
{{ build.shortSha }}
</a>
</h5>
<span>
<a :href="build.url" class="issue-date">
<a
:href="build.url"
class="issue-date">
{{ build.date }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime"/>
<total-time :time="build.totalTime" />
</div>
</li>
</ul>
......
app/assets/javascripts/cycle_analytics/components/total_time_component.vue
......@@ -17,10 +17,30 @@
<template>
<span class="total-time">
<template v-if="hasData">
<template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template>
<template v-if="time.hours">{{ time.hours }} <span>{{ n__('Time|hr', 'Time|hrs', time.hours) }}</span></template>
<template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('Time|min', 'Time|mins', time.mins) }}</span></template>
<template v-if="time.seconds && hasData === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template>
<template v-if="time.days">
{{ time.days }}
<span>
{{ n__('day', 'days', time.days) }}
</span>
</template>
<template v-if="time.hours">
{{ time.hours }}
<span>
{{ n__('Time|hr', 'Time|hrs', time.hours) }}
</span>
</template>
<template v-if="time.mins && !time.days">
{{ time.mins }}
<span>
{{ n__('Time|min', 'Time|mins', time.mins) }}
</span>
</template>
<template v-if="time.seconds && hasData === 1 || time.seconds === 0">
{{ time.seconds }}
<span>
{{ s__('Time|s') }}
</span>
</template>
</template>
<template v-else>
--
......
app/assets/javascripts/deploy_keys/components/action_btn.vue
......@@ -3,10 +3,8 @@
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
data() {
return {
isLoading: false,
};
components: {
loadingIcon,
},
props: {
deployKey: {
......@@ -23,11 +21,16 @@
default: 'btn-default',
},
},
components: {
loadingIcon,
data() {
return {
isLoading: false,
};
},
computed: {
text() {
return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
},
},
methods: {
doAction() {
this.isLoading = true;
......@@ -37,11 +40,6 @@
});
},
},
computed: {
text() {
return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
},
},
};
</script>
......
app/assets/javascripts/deploy_keys/components/app.vue
......@@ -7,11 +7,9 @@
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
data() {
return {
isLoading: false,
store: new DeployKeysStore(),
};
components: {
keysPanel,
loadingIcon,
},
props: {
endpoint: {
......@@ -19,6 +17,12 @@
required: true,
},
},
data() {
return {
isLoading: false,
store: new DeployKeysStore(),
};
},
computed: {
hasKeys() {
return Object.keys(this.keys).length;
......@@ -27,9 +31,20 @@
return this.store.keys;
},
},
components: {
keysPanel,
loadingIcon,
created() {
this.service = new DeployKeysService(this.endpoint);
eventHub.$on('enable.key', this.enableKey);
eventHub.$on('remove.key', this.disableKey);
eventHub.$on('disable.key', this.disableKey);
},
mounted() {
this.fetchKeys();
},
beforeDestroy() {
eventHub.$off('enable.key', this.enableKey);
eventHub.$off('remove.key', this.disableKey);
eventHub.$off('disable.key', this.disableKey);
},
methods: {
fetchKeys() {
......@@ -59,21 +74,6 @@
}
},
},
created() {
this.service = new DeployKeysService(this.endpoint);
eventHub.$on('enable.key', this.enableKey);
eventHub.$on('remove.key', this.disableKey);
eventHub.$on('disable.key', this.disableKey);
},
mounted() {
this.fetchKeys();
},
beforeDestroy() {
eventHub.$off('enable.key', this.enableKey);
eventHub.$off('remove.key', this.disableKey);
eventHub.$off('disable.key', this.disableKey);
},
};
</script>
......
app/assets/javascripts/deploy_keys/components/key.vue
......@@ -3,6 +3,9 @@
import { getTimeago } from '../../lib/utils/datetime_utility';
export default {
components: {
actionBtn,
},
props: {
deployKey: {
type: Object,
......@@ -17,9 +20,6 @@
required: true,
},
},
components: {
actionBtn,
},
computed: {
timeagoDate() {
return getTimeago().format(this.deployKey.created_at);
......@@ -61,9 +61,10 @@
</div>
<div class="deploy-key-content prepend-left-default deploy-key-projects">
<a
v-for="project in deployKey.projects"
v-for="(project, i) in deployKey.projects"
class="label deploy-project-label"
:href="project.full_path"
:key="i"
>
{{ project.full_name }}
</a>
......
app/assets/javascripts/deploy_keys/components/keys_panel.vue
......@@ -2,6 +2,9 @@
import key from './key.vue';
export default {
components: {
key,
},
props: {
title: {
type: String,
......@@ -25,9 +28,6 @@
required: true,
},
},
components: {
key,
},
};
</script>
......@@ -37,12 +37,14 @@
{{ title }}
({{ keys.length }})
</h5>
<ul class="well-list"
<ul
class="well-list"
v-if="keys.length"
>
<li
v-for="deployKey in keys"
:key="deployKey.id">
:key="deployKey.id"
>
<key
:deploy-key="deployKey"
:store="store"
......
app/assets/javascripts/environments/components/container.vue
......@@ -4,6 +4,11 @@
import environmentTable from '../components/environments_table.vue';
export default {
components: {
environmentTable,
loadingIcon,
tablePagination,
},
props: {
isLoading: {
type: Boolean,
......@@ -26,12 +31,6 @@
required: true,
},
},
components: {
environmentTable,
loadingIcon,
tablePagination,
},
methods: {
onChangePage(page) {
this.$emit('onChangePage', page);
......@@ -47,7 +46,7 @@
label="Loading environments"
v-if="isLoading"
size="3"
/>
/>
<slot name="emptyState"></slot>
......@@ -59,13 +58,13 @@
:environments="environments"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
/>
<table-pagination
v-if="pagination && pagination.totalPages > 1"
:change="onChangePage"
:pageInfo="pagination"
/>
:page-info="pagination"
/>
</div>
</div>
</template>
app/assets/javascripts/environments/components/empty_state.vue
<script>
export default {
name: 'environmentsEmptyState',
name: 'EnvironmentsEmptyState',
props: {
newPath: {
type: String,
......@@ -21,21 +21,22 @@
<div class="blank-state-row">
<div class="blank-state-center">
<h2 class="blank-state-title js-blank-state-title">
{{s__("Environments|You don't have any environments right now.")}}
{{ s__("Environments|You don't have any environments right now.") }}
</h2>
<p class="blank-state-text">
{{s__("Environments|Environments are places where code gets deployed, such as staging or production.")}}
{{ s__("Environments|Environments are places where code gets deployed, such as staging or production.") }}
<br />
<a :href="helpPath">
{{s__("Environments|Read more about environments")}}
{{ s__("Environments|Read more about environments") }}
</a>
</p>
<a
v-if="canCreateEnvironment"
:href="newPath"
class="btn btn-create js-new-environment-button">
{{s__("Environments|New environment")}}
class="btn btn-create js-new-environment-button"
>
{{ s__("Environments|New environment") }}
</a>
</div>
</div>
......
app/assets/javascripts/environments/components/environment_actions.vue
<script>
import playIconSvg from 'icons/_icon_play.svg';
import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import playIconSvg from 'icons/_icon_play.svg';
import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default {
props: {
actions: {
type: Array,
required: false,
default: () => [],
export default {
directives: {
tooltip,
},
},
directives: {
tooltip,
},
components: {
loadingIcon,
},
components: {
loadingIcon,
},
props: {
actions: {
type: Array,
required: false,
default: () => [],
},
},
data() {
return {
playIconSvg,
isLoading: false,
};
},
data() {
return {
playIconSvg,
isLoading: false,
};
},
computed: {
title() {
return 'Deploy to...';
computed: {
title() {
return 'Deploy to...';
},
},
},
methods: {
onClickAction(endpoint) {
this.isLoading = true;
methods: {
onClickAction(endpoint) {
this.isLoading = true;
eventHub.$emit('postAction', endpoint);
},
eventHub.$emit('postAction', endpoint);
},
isActionDisabled(action) {
if (action.playable === undefined) {
return false;
}
isActionDisabled(action) {
if (action.playable === undefined) {
return false;
}
return !action.playable;
return !action.playable;
},
},
},
};
};
</script>
<template>
<div
......@@ -63,27 +62,32 @@ export default {
data-toggle="dropdown"
:title="title"
:aria-label="title"
:disabled="isLoading">
:disabled="isLoading"
>
<span>
<span v-html="playIconSvg"></span>
<i
class="fa fa-caret-down"
aria-hidden="true"/>
aria-hidden="true"
/>
<loading-icon v-if="isLoading" />
</span>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions">
<li
v-for="(action, i) in actions"
:key="i">
<button
type="button"
class="js-manual-action-link no-btn btn"
@click="onClickAction(action.play_path)"
:class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)">
:disabled="isActionDisabled(action)"
>
<span v-html="playIconSvg"></span>
<span>
{{action.name}}
{{ action.name }}
</span>
</button>
</li>
......
app/assets/javascripts/environments/components/environment_external_url.vue
<script>
import tooltip from '../../vue_shared/directives/tooltip';
import { s__ } from '../../locale';
import tooltip from '../../vue_shared/directives/tooltip';
import { s__ } from '../../locale';
/**
* Renders the external url link in environments table.
*/
export default {
props: {
externalUrl: {
type: String,
required: true,
/**
* Renders the external url link in environments table.
*/
export default {
directives: {
tooltip,
},
props: {
externalUrl: {
type: String,
required: true,
},
},
},
directives: {
tooltip,
},
computed: {
title() {
return s__('Environments|Open');
computed: {
title() {
return s__('Environments|Open');
},
},
},
};
};
</script>
<template>
<a
......@@ -33,9 +32,12 @@ export default {
rel="noopener noreferrer nofollow"
:title="title"
:aria-label="title"
:href="externalUrl">
:href="externalUrl"
>
<i
class="fa fa-external-link"
aria-hidden="true" />
aria-hidden="true"
>
</i>
</a>
</template>
app/assets/javascripts/issue_show/components/description.vue
......@@ -56,7 +56,10 @@
this.updateTaskStatusText();
},
},
mounted() {
this.renderGFM();
this.updateTaskStatusText();
},
methods: {
renderGFM() {
$(this.$refs['gfm-content']).renderGFM();
......@@ -91,7 +94,7 @@
$tasksShort.text(
`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ?
's' :
''}`
''}`,
);
} else {
$tasks.text('');
......@@ -99,10 +102,6 @@
}
},
},
mounted() {
this.renderGFM();
this.updateTaskStatusText();
},
};
</script>
......@@ -112,7 +111,8 @@
class="description"
:class="{
'js-task-list-container': canUpdate
}">
}"
>
<div
class="wiki"
:class="{
......
app/assets/javascripts/issue_show/components/edited.vue
<script>
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
export default {
props: {
updatedAt: {
type: String,
required: false,
default: '',
export default {
components: {
timeAgoTooltip,
},
updatedByName: {
type: String,
required: false,
default: '',
props: {
updatedAt: {
type: String,
required: false,
default: '',
},
updatedByName: {
type: String,
required: false,
default: '',
},
updatedByPath: {
type: String,
required: false,
default: '',
},
},
updatedByPath: {
type: String,
required: false,
default: '',
computed: {
hasUpdatedBy() {
return this.updatedByName && this.updatedByPath;
},
},
},
components: {
timeAgoTooltip,
},
computed: {
hasUpdatedBy() {
return this.updatedByName && this.updatedByPath;
},
},
};
};
</script>
<template>
......@@ -48,7 +48,7 @@ export default {
class="author_link"
:href="updatedByPath"
>
<span>{{updatedByName}}</span>
<span>{{ updatedByName }}</span>
</a>
</span>
</small>
......
app/assets/javascripts/issue_show/components/fields/description.vue
......@@ -4,6 +4,9 @@
export default {
mixins: [updateMixin],
components: {
markdownField,
},
props: {
formState: {
type: Object,
......@@ -28,9 +31,6 @@
default: true,
},
},
components: {
markdownField,
},
mounted() {
this.$refs.textarea.focus();
},
......
app/assets/javascripts/issue_show/components/form.vue
......@@ -6,6 +6,13 @@
import descriptionTemplate from './fields/description_template.vue';
export default {
components: {
lockedWarning,
titleField,
descriptionField,
descriptionTemplate,
editActions,
},
props: {
canDestroy: {
type: Boolean,
......@@ -52,13 +59,6 @@
default: true,
},
},
components: {
lockedWarning,
titleField,
descriptionField,
descriptionTemplate,
editActions,
},
computed: {
hasIssuableTemplates() {
return this.issuableTemplates.length;
......@@ -78,16 +78,19 @@
:form-state="formState"
:issuable-templates="issuableTemplates"
:project-path="projectPath"
:project-namespace="projectNamespace" />
:project-namespace="projectNamespace"
/>
</div>
<div
:class="{
'col-sm-8 col-lg-9': hasIssuableTemplates,
'col-xs-12': !hasIssuableTemplates,
}">
}"
>
<title-field
:form-state="formState"
:issuable-templates="issuableTemplates" />
:issuable-templates="issuableTemplates"
/>
</div>
</div>
<description-field
......@@ -100,6 +103,7 @@
<edit-actions
:form-state="formState"
:can-destroy="canDestroy"
:show-delete-button="showDeleteButton" />
:show-delete-button="showDeleteButton"
/>
</form>
</template>
app/assets/javascripts/issue_show/components/title.vue
......@@ -6,12 +6,8 @@
export default {
mixins: [animateMixin],
data() {
return {
preAnimation: false,
pulseAnimation: false,
titleEl: document.querySelector('title'),
};
directives: {
tooltip,
},
props: {
issuableRef: {
......@@ -37,8 +33,17 @@
default: false,
},
},
directives: {
tooltip,
data() {
return {
preAnimation: false,
pulseAnimation: false,
titleEl: document.querySelector('title'),
};
},
computed: {
pencilIcon() {
return spriteIcon('pencil', 'link-highlight');
},
},
watch: {
titleHtml() {
......@@ -46,11 +51,6 @@
this.animateChange();
},
},
computed: {
pencilIcon() {
return spriteIcon('pencil', 'link-highlight');
},
},
methods: {
setPageTitle() {
const currentPageTitleScope = this.titleEl.innerText.split('·');
......@@ -85,7 +85,7 @@
data-placement="bottom"
data-container="body"
@click="edit"
>
>
</button>
</div>
</template>
app/assets/javascripts/jobs/components/header.vue
......@@ -4,6 +4,10 @@
export default {
name: 'jobHeaderSection',
components: {
ciHeader,
loadingIcon,
},
props: {
job: {
type: Object,
......@@ -14,10 +18,6 @@
required: true,
},
},
components: {
ciHeader,
loadingIcon,
},
data() {
return {
actions: this.getActions(),
......@@ -31,6 +31,11 @@
return !this.isLoading && Object.keys(this.job).length;
},
},
watch: {
job() {
this.actions = this.getActions();
},
},
methods: {
getActions() {
const actions = [];
......@@ -46,11 +51,6 @@
return actions;
},
},
watch: {
job() {
this.actions = this.getActions();
},
},
};
</script>
<template>
......@@ -63,11 +63,11 @@
:time="job.created_at"
:user="job.user"
:actions="actions"
:hasSidebarButton="true"
/>
:has-sidebar-button="true"
/>
<loading-icon
v-if="isLoading"
size="2"
/>
/>
</div>
</template>
app/assets/javascripts/jobs/components/sidebar_detail_row.vue
......@@ -23,9 +23,10 @@
<p class="build-detail-row">
<span
v-if="hasTitle"
class="build-light-text">
{{title}}:
class="build-light-text"
>
{{ title }}:
</span>
{{value}}
{{ value }}
</p>
</template>
app/assets/javascripts/jobs/components/sidebar_details_block.vue
......@@ -6,6 +6,13 @@
export default {
name: 'SidebarDetailsBlock',
components: {
detailRow,
loadingIcon,
},
mixins: [
timeagoMixin,
],
props: {
job: {
type: Object,
......@@ -16,13 +23,6 @@
required: true,
},
},
mixins: [
timeagoMixin,
],
components: {
detailRow,
loadingIcon,
},
computed: {
shouldRenderContent() {
return !this.isLoading && Object.keys(this.job).length > 0;
......@@ -58,11 +58,13 @@
<template v-if="shouldRenderContent">
<div
class="block retry-link"
v-if="job.retry_path || job.new_issue_path">
v-if="job.retry_path || job.new_issue_path"
>
<a
v-if="job.new_issue_path"
class="js-new-issue btn btn-new btn-inverted"
:href="job.new_issue_path">
:href="job.new_issue_path"
>
New issue
</a>
<a
......@@ -70,20 +72,21 @@
class="js-retry-job btn btn-inverted-secondary"
:href="job.retry_path"
data-method="post"
rel="nofollow">
rel="nofollow"
>
Retry
</a>
</div>
<div :class="{block : renderBlock }">
<p
class="build-detail-row js-job-mr"
v-if="job.merge_request">
<span
class="build-light-text">
v-if="job.merge_request"
>
<span class="build-light-text">
Merge Request:
</span>
<a :href="job.merge_request.path">
!{{job.merge_request.iid}}
!{{ job.merge_request.iid }}
</a>
</p>
......@@ -92,49 +95,49 @@
v-if="job.duration"
title="Duration"
:value="duration"
/>
/>
<detail-row
class="js-job-finished"
v-if="job.finished_at"
title="Finished"
:value="timeFormated(job.finished_at)"
/>
/>
<detail-row
class="js-job-erased"
v-if="job.erased_at"
title="Erased"
:value="timeFormated(job.erased_at)"
/>
/>
<detail-row
class="js-job-queued"
v-if="job.queued"
title="Queued"
:value="queued"
/>
/>
<detail-row
class="js-job-runner"
v-if="job.runner"
title="Runner"
:value="runnerId"
/>
/>
<detail-row
class="js-job-coverage"
v-if="job.coverage"
title="Coverage"
:value="coverage"
/>
/>
<p
class="build-detail-row js-job-tags"
v-if="job.tags.length">
<span
class="build-light-text">
v-if="job.tags.length"
>
<span class="build-light-text">
Tags:
</span>
<span
v-for="tag in job.tags"
key="tag"
v-for="(tag, i) in job.tags"
:key="i"
class="label label-primary">
{{tag}}
{{ tag }}
</span>
</p>
......@@ -146,7 +149,8 @@
class="js-cancel-job btn btn-sm btn-default"
:href="job.cancel_path"
data-method="post"
rel="nofollow">
rel="nofollow"
>
Cancel
</a>
</div>
......@@ -156,6 +160,6 @@
class="prepend-top-10"
v-if="isLoading"
size="2"
/>
/>
</div>
</template>
app/assets/javascripts/monitoring/components/dashboard.vue
......@@ -11,6 +11,12 @@
export default {
components: {
Graph,
GraphGroup,
EmptyState,
},
data() {
const metricsData = document.querySelector('#prometheus-graphs').dataset;
const store = new MonitoringStore();
......@@ -36,12 +42,30 @@
};
},
components: {
Graph,
GraphGroup,
EmptyState,
created() {
this.service = new MonitoringService({
metricsEndpoint: this.metricsEndpoint,
deploymentEndpoint: this.deploymentEndpoint,
});
eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
eventHub.$on('hoverChanged', this.hoverChanged);
},
beforeDestroy() {
eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
eventHub.$off('hoverChanged', this.hoverChanged);
window.removeEventListener('resize', this.resizeThrottled, false);
},
mounted() {
this.resizeThrottled = _.throttle(this.resize, 600);
if (!this.hasMetrics) {
this.state = 'gettingStarted';
} else {
this.getGraphsData();
window.addEventListener('resize', this.resizeThrottled, false);
}
},
methods: {
getGraphsData() {
this.state = 'loading';
......@@ -72,36 +96,14 @@
this.hoverData = data;
},
},
created() {
this.service = new MonitoringService({
metricsEndpoint: this.metricsEndpoint,
deploymentEndpoint: this.deploymentEndpoint,
});
eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
eventHub.$on('hoverChanged', this.hoverChanged);
},
beforeDestroy() {
eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
eventHub.$off('hoverChanged', this.hoverChanged);
window.removeEventListener('resize', this.resizeThrottled, false);
},
mounted() {
this.resizeThrottled = _.throttle(this.resize, 600);
if (!this.hasMetrics) {
this.state = 'gettingStarted';
} else {
this.getGraphsData();
window.addEventListener('resize', this.resizeThrottled, false);
}
},
};
</script>
<template>
<div v-if="!showEmptyState" class="prometheus-graphs">
<div
v-if="!showEmptyState"
class="prometheus-graphs"
>
<graph-group
v-for="(groupData, index) in store.groups"
:key="index"
......
app/assets/javascripts/monitoring/components/empty_state.vue
......@@ -76,20 +76,26 @@ If this takes a long time, ensure that data is available.`,
<template>
<div class="prometheus-state">
<div class="state-svg svg-content">
<img :src="currentState.svgUrl"/>
<img :src="currentState.svgUrl" />
</div>
<h4 class="state-title">
{{currentState.title}}
{{ currentState.title }}
</h4>
<p class="state-description">
{{currentState.description}}
<a v-if="showButtonDescription" :href="settingsPath">
{{ currentState.description }}
<a
v-if="showButtonDescription"
:href="settingsPath"
>
Prometheus server
</a>
</p>
<div class="state-button">
<a class="btn btn-success" :href="buttonPath">
{{currentState.buttonText}}
<a
class="btn btn-success"
:href="buttonPath"
>
{{ currentState.buttonText }}
</a>
</div>
</div>
......
app/assets/javascripts/monitoring/components/graph.vue
......@@ -3,10 +3,10 @@
import { axisLeft, axisBottom } from 'd3-axis';
import { max, extent } from 'd3-array';
import { select } from 'd3-selection';
import GraphLegend from './graph/legend.vue';
import GraphFlag from './graph/flag.vue';
import GraphDeployment from './graph/deployment.vue';
import GraphPath from './graph/path.vue';
import graphLegend from './graph/legend.vue';
import graphFlag from './graph/flag.vue';
import graphDeployment from './graph/deployment.vue';
import graphPath from './graph/path.vue';
import MonitoringMixin from '../mixins/monitoring_mixins';
import eventHub from '../event_hub';
import measurements from '../utils/measurements';
......@@ -17,6 +17,16 @@
const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
export default {
components: {
graphLegend,
graphFlag,
graphDeployment,
graphPath,
},
mixins: [MonitoringMixin],
props: {
graphData: {
type: Object,
......@@ -45,8 +55,6 @@
},
},
mixins: [MonitoringMixin],
data() {
return {
baseGraphHeight: 450,
......@@ -74,13 +82,6 @@
};
},
components: {
GraphLegend,
GraphFlag,
GraphDeployment,
GraphPath,
},
computed: {
outerViewBox() {
return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
......@@ -104,6 +105,26 @@
},
},
watch: {
updateAspectRatio() {
if (this.updateAspectRatio) {
this.graphHeight = 450;
this.graphWidth = 600;
this.measurements = measurements.large;
this.draw();
eventHub.$emit('toggleAspectRatio');
}
},
hoverData() {
this.positionFlag();
},
},
mounted() {
this.draw();
},
methods: {
draw() {
const breakpointSize = bp.getBreakpointSize();
......@@ -192,36 +213,16 @@
}); // This will select all of the ticks once they're rendered
},
},
watch: {
updateAspectRatio() {
if (this.updateAspectRatio) {
this.graphHeight = 450;
this.graphWidth = 600;
this.measurements = measurements.large;
this.draw();
eventHub.$emit('toggleAspectRatio');
}
},
hoverData() {
this.positionFlag();
},
},
mounted() {
this.draw();
},
};
</script>
<template>
<div
<div
class="prometheus-graph"
@mouseover="showFlagContent = true"
@mouseleave="showFlagContent = false">
<h5 class="text-center graph-title">
{{graphData.title}}
{{ graphData.title }}
</h5>
<div
class="prometheus-svg-container"
......@@ -231,12 +232,12 @@
ref="baseSvg">
<g
class="x-axis"
:transform="axisTransform">
</g>
:transform="axisTransform"
/>
<g
class="y-axis"
transform="translate(70, 20)">
</g>
transform="translate(70, 20)"
/>
<graph-legend
:graph-width="graphWidth"
:graph-height="graphHeight"
......@@ -251,40 +252,41 @@
<svg
class="graph-data"
:viewBox="innerViewBox"
ref="graphData">
<graph-path
v-for="(path, index) in timeSeries"
:key="index"
:generated-line-path="path.linePath"
:generated-area-path="path.areaPath"
:line-style="path.lineStyle"
:line-color="path.lineColor"
:area-color="path.areaColor"
/>
<rect
class="prometheus-graph-overlay"
:width="(graphWidth - 70)"
:height="(graphHeight - 100)"
transform="translate(-5, 20)"
ref="graphOverlay"
@mousemove="handleMouseOverGraph($event)">
</rect>
<graph-deployment
:show-deploy-info="showDeployInfo"
:deployment-data="reducedDeploymentData"
:graph-width="graphWidth"
:graph-height="graphHeight"
:graph-height-offset="graphHeightOffset"
/>
<graph-flag
v-if="showFlag"
:current-x-coordinate="currentXCoordinate"
:current-data="currentData"
:current-flag-position="currentFlagPosition"
:graph-height="graphHeight"
:graph-height-offset="graphHeightOffset"
:show-flag-content="showFlagContent"
/>
ref="graphData"
>
<graph-path
v-for="(path, index) in timeSeries"
:key="index"
:generated-line-path="path.linePath"
:generated-area-path="path.areaPath"
:line-style="path.lineStyle"
:line-color="path.lineColor"
:area-color="path.areaColor"
/>
<rect
class="prometheus-graph-overlay"
:width="(graphWidth - 70)"
:height="(graphHeight - 100)"
transform="translate(-5, 20)"
ref="graphOverlay"
@mousemove="handleMouseOverGraph($event)"
/>
<graph-deployment
:show-deploy-info="showDeployInfo"
:deployment-data="reducedDeploymentData"
:graph-width="graphWidth"
:graph-height="graphHeight"
:graph-height-offset="graphHeightOffset"
/>
<graph-flag
v-if="showFlag"
:current-x-coordinate="currentXCoordinate"
:current-data="currentData"
:current-flag-position="currentFlagPosition"
:graph-height="graphHeight"
:graph-height-offset="graphHeightOffset"
:show-flag-content="showFlagContent"
/>
</svg>
</svg>
</div>
......
app/assets/javascripts/monitoring/components/graph/deployment.vue
<script>
import { dateFormatWithName, timeFormat } from '../../utils/date_time_formatters';
import Icon from '../../../vue_shared/components/icon.vue';
import icon from '../../../vue_shared/components/icon.vue';
export default {
components: {
icon,
},
props: {
showDeployInfo: {
type: Boolean,
......@@ -26,10 +29,6 @@
},
},
components: {
Icon,
},
computed: {
calculatedHeight() {
return this.graphHeight - this.graphHeightOffset;
......@@ -83,51 +82,55 @@
v-for="(deployment, index) in deploymentData"
:key="index"
:class="nameDeploymentClass(deployment)"
:transform="transformDeploymentGroup(deployment)">
:transform="transformDeploymentGroup(deployment)"
>
<rect
x="0"
y="0"
:height="calculatedHeight"
width="3"
fill="url(#shadow-gradient)">
</rect>
fill="url(#shadow-gradient)"
/>
<line
class="deployment-line"
x1="0"
y1="0"
x2="0"
:y2="calculatedHeight"
stroke="#000">
</line>
stroke="#000"
/>
<svg
v-if="deployment.showDeploymentFlag"
class="js-deploy-info-box"
:x="positionFlag(deployment)"
y="0"
width="134"
:height="svgContainerHeight(deployment.tag)">
:height="svgContainerHeight(deployment.tag)"
>
<rect
class="rect-text-metric deploy-info-rect rect-metric"
x="1"
y="1"
rx="2"
width="132"
:height="svgContainerHeight(deployment.tag) - 2">
</rect>
:height="svgContainerHeight(deployment.tag) - 2"
/>
<text
class="deploy-info-text text-metric-bold"
transform="translate(5, 2)">
transform="translate(5, 2)"
>
Deployed
</text>
<!--The date info-->
<g transform="translate(5, 20)">
<text class="deploy-info-text">
{{formatDate(deployment.time)}}
{{ formatDate(deployment.time) }}
</text>
<text
<text
class="deploy-info-text text-metric-bold"
x="62">
{{formatTime(deployment.time)}}
x="62"
>
{{ formatTime(deployment.time) }}
</text>
</g>
<line
......@@ -136,40 +139,41 @@
y1="38"
x2="132"
:y2="38"
stroke="#000">
</line>
stroke="#000"
/>
<!--Commit information-->
<g transform="translate(5, 40)">
<icon
name="commit"
:width="12"
:height="12"
:y="3">
</icon>
:y="3"
/>
<a :xlink:href="deployment.commitUrl">
<text
class="deploy-info-text deploy-info-text-link"
transform="translate(20, 2)">
{{refText(deployment)}}
{{ refText(deployment) }}
</text>
</a>
</g>
<!--Tag information-->
<g
transform="translate(5, 55)"
transform="translate(5, 55)"
v-if="deployment.tag">
<icon
name="label"
:width="12"
:height="12"
:y="5">
</icon>
:y="5"
/>
<a :xlink:href="deployment.tagUrl">
<text
class="deploy-info-text deploy-info-text-link"
transform="translate(20, 2)"
y="2">
{{deployment.tag}}
y="2"
>
{{ deployment.tag }}
</text>
</a>
</g>
......@@ -177,20 +181,20 @@
</g>
<svg
height="0"
width="0">
width="0"
>
<defs>
<linearGradient
id="shadow-gradient">
<linearGradient id="shadow-gradient">
<stop
offset="0%"
stop-color="#000"
stop-opacity="0.4">
</stop>
stop-opacity="0.4"
/>
<stop
offset="100%"
stop-color="#000"
stop-opacity="0">
</stop>
stop-opacity="0"
/>
</linearGradient>
</defs>
</svg>
......
app/assets/javascripts/monitoring/components/graph/flag.vue
......@@ -58,13 +58,14 @@
:y1="0"
:x2="currentXCoordinate"
:y2="calculatedHeight"
transform="translate(-5, 20)">
</line>
<svg
transform="translate(-5, 20)"
/>
<svg
v-if="showFlagContent"
class="rect-text-metric"
:x="currentFlagPosition"
y="0">
y="0"
>
<rect
class="rect-metric"
x="4"
......@@ -72,21 +73,23 @@
rx="2"
width="90"
height="40"
transform="translate(-3, 20)">
</rect>
transform="translate(-3, 20)"
/>
<text
class="text-metric text-metric-bold"
x="16"
y="35"
transform="translate(-5, 20)">
{{formatTime}}
transform="translate(-5, 20)"
>
{{ formatTime }}
</text>
<text
class="text-metric"
x="16"
y="15"
transform="translate(-5, 20)">
{{formatDate}}
transform="translate(-5, 20)"
>
{{ formatDate }}
</text>
</svg>
</g>
......
app/assets/javascripts/monitoring/components/graph/legend.vue
......@@ -73,6 +73,21 @@
},
},
mounted() {
this.$nextTick(() => {
const bbox = this.$refs.ylabel.getBBox();
this.metricUsageXPosition = 0;
this.seriesXPosition = 0;
if (this.$refs.legendTitleSvg != null) {
this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
}
if (this.$refs.seriesTitleSvg != null) {
this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
}
this.yLabelWidth = bbox.width + 10; // Added some padding
this.yLabelHeight = bbox.height + 5;
});
},
methods: {
translateLegendGroup(index) {
return `translate(0, ${12 * (index)})`;
......@@ -100,26 +115,10 @@
return null;
},
},
mounted() {
this.$nextTick(() => {
const bbox = this.$refs.ylabel.getBBox();
this.metricUsageXPosition = 0;
this.seriesXPosition = 0;
if (this.$refs.legendTitleSvg != null) {
this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
}
if (this.$refs.seriesTitleSvg != null) {
this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
}
this.yLabelWidth = bbox.width + 10; // Added some padding
this.yLabelHeight = bbox.height + 5;
});
},
};
</script>
<template>
<g
class="axis-label-container">
<g class="axis-label-container">
<line
class="label-x-axis-line"
stroke="#000000"
......@@ -127,8 +126,8 @@
x1="10"
:y1="yPosition"
:x2="graphWidth + 20"
:y2="yPosition">
</line>
:y2="yPosition"
/>
<line
class="label-y-axis-line"
stroke="#000000"
......@@ -136,39 +135,43 @@
x1="10"
y1="0"
:x2="10"
:y2="yPosition">
</line>
:y2="yPosition"
/>
<rect
class="rect-axis-text"
:transform="rectTransform"
:width="yLabelWidth"
:height="yLabelHeight">
</rect>
:height="yLabelHeight"
/>
<text
class="label-axis-text y-label-text"
text-anchor="middle"
:transform="textTransform"
ref="ylabel">
{{yAxisLabel}}
ref="ylabel"
>
{{ yAxisLabel }}
</text>
<rect
class="rect-axis-text"
:x="xPosition + 60"
:y="graphHeight - 80"
width="35"
height="50">
</rect>
height="50"
/>
<text
class="label-axis-text x-label-text"
:x="xPosition + 60"
:y="yPosition"
dy=".35em">
dy=".35em"
>
Time
</text>
<g class="legend-group"
<g
class="legend-group"
v-for="(series, index) in timeSeries"
:key="index"
:transform="translateLegendGroup(index)">
:transform="translateLegendGroup(index)"
>
<line
:stroke="series.lineColor"
:stroke-width="measurements.legends.height"
......@@ -176,23 +179,25 @@
:x1="measurements.legends.offsetX"
:x2="measurements.legends.offsetX + measurements.legends.width"
:y1="graphHeight - measurements.legends.offsetY"
:y2="graphHeight - measurements.legends.offsetY">
</line>
:y2="graphHeight - measurements.legends.offsetY"
/>
<text
v-if="timeSeries.length > 1"
class="legend-metric-title"
ref="legendTitleSvg"
x="38"
:y="graphHeight - 30">
{{createSeriesString(index, series)}}
:y="graphHeight - 30"
>
{{ createSeriesString(index, series) }}
</text>
<text
v-else
class="legend-metric-title"
ref="legendTitleSvg"
x="38"
:y="graphHeight - 30">
{{legendTitle}} {{formatMetricUsage(series)}}
:y="graphHeight - 30"
>
{{ legendTitle }} {{ formatMetricUsage(series) }}
</text>
</g>
</g>
......
app/assets/javascripts/monitoring/components/graph/path.vue
......@@ -12,6 +12,7 @@
lineStyle: {
type: String,
required: false,
default: '',
},
lineColor: {
type: String,
......@@ -37,8 +38,8 @@
class="metric-area"
:d="generatedAreaPath"
:fill="areaColor"
transform="translate(-5, 20)">
</path>
transform="translate(-5, 20)"
/>
<path
class="metric-line"
:d="generatedLinePath"
......@@ -46,7 +47,7 @@
fill="none"
stroke-width="1"
:stroke-dasharray="strokeDashArray"
transform="translate(-5, 20)">
</path>
transform="translate(-5, 20)"
/>
</g>
</template>
app/assets/javascripts/monitoring/components/graph_group.vue
<script>
export default {
props: {
name: {
type: String,
required: true,
export default {
props: {
name: {
type: String,
required: true,
},
},
},
};
};
</script>
<template>
<div class="panel panel-default prometheus-panel">
<div class="panel-heading">
<h4>{{name}}</h4>
<h4>{{ name }}</h4>
</div>
<div class="panel-body prometheus-graph-group">
<slot />
......
app/assets/javascripts/notes/components/note_actions.vue
......@@ -64,6 +64,13 @@
return this.getUserDataByProp('id');
},
},
created() {
this.emojiSmiling = emojiSmiling;
this.emojiSmile = emojiSmile;
this.emojiSmiley = emojiSmiley;
this.editSvg = editSvg;
this.ellipsisSvg = ellipsisSvg;
},
methods: {
onEdit() {
this.$emit('handleEdit');
......@@ -72,13 +79,6 @@
this.$emit('handleDelete');
},
},
created() {
this.emojiSmiling = emojiSmiling;
this.emojiSmile = emojiSmile;
this.emojiSmiley = emojiSmiley;
this.editSvg = editSvg;
this.ellipsisSvg = ellipsisSvg;
},
};
</script>
......@@ -86,7 +86,9 @@
<div class="note-actions">
<span
v-if="accessLevel"
class="note-role user-access-role">{{accessLevel}}</span>
class="note-role user-access-role">
{{ accessLevel }}
</span>
<div
v-if="canAddAwardEmoji"
class="note-actions-item">
......@@ -126,10 +128,10 @@
class="note-action-button js-note-edit btn btn-transparent"
data-container="body"
data-placement="bottom">
<span
v-html="editSvg"
class="link-highlight">
</span>
<span
v-html="editSvg"
class="link-highlight">
</span>
</button>
</div>
<div
......@@ -143,10 +145,10 @@
data-toggle="dropdown"
data-container="body"
data-placement="bottom">
<span
class="icon"
v-html="ellipsisSvg">
</span>
<span
class="icon"
v-html="ellipsisSvg">
</span>
</button>
<ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
<li v-if="canReportAsAbuse">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment