debian-mirror-gitlab/app/assets/javascripts/monitoring/components/graph_group.vue

88 lines
1.9 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2020-07-28 23:09:34 +05:30
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
2019-12-04 20:38:33 +05:30
2018-05-09 12:01:36 +05:30
export default {
2019-12-04 20:38:33 +05:30
components: {
2020-07-28 23:09:34 +05:30
GlLoadingIcon,
GlIcon,
2019-12-04 20:38:33 +05:30
},
2018-05-09 12:01:36 +05:30
props: {
name: {
type: String,
required: true,
2018-03-17 18:26:18 +05:30
},
2018-05-09 12:01:36 +05:30
showPanels: {
type: Boolean,
required: false,
default: true,
},
2020-07-28 23:09:34 +05:30
isLoading: {
type: Boolean,
required: false,
default: false,
},
2020-01-01 13:55:28 +05:30
/**
* Initial value of collapse on mount.
*/
2019-10-12 21:52:04 +05:30
collapseGroup: {
type: Boolean,
2020-01-01 13:55:28 +05:30
required: false,
default: false,
2019-10-12 21:52:04 +05:30
},
2018-05-09 12:01:36 +05:30
},
2019-12-04 20:38:33 +05:30
data() {
return {
2020-01-01 13:55:28 +05:30
isCollapsed: this.collapseGroup,
2019-12-04 20:38:33 +05:30
};
},
computed: {
caretIcon() {
2020-01-01 13:55:28 +05:30
return this.isCollapsed ? 'angle-right' : 'angle-down';
2019-12-04 20:38:33 +05:30
},
},
2020-01-01 13:55:28 +05:30
watch: {
collapseGroup(val) {
// Respond to changes in collapseGroup but do not
// collapse it once was opened by the user.
if (this.showPanels && !val) {
this.isCollapsed = false;
}
},
2019-12-04 20:38:33 +05:30
},
methods: {
collapse() {
2020-01-01 13:55:28 +05:30
this.isCollapsed = !this.isCollapsed;
2019-12-04 20:38:33 +05:30
},
},
2018-05-09 12:01:36 +05:30
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2020-07-28 23:09:34 +05:30
<div v-if="showPanels" ref="graph-group" class="card prometheus-panel">
2019-12-04 20:38:33 +05:30
<div class="card-header d-flex align-items-center">
<h4 class="flex-grow-1">{{ name }}</h4>
2021-09-30 23:02:18 +05:30
<gl-loading-icon v-if="isLoading" size="sm" name="loading" />
2020-06-23 00:09:42 +05:30
<a
data-testid="group-toggle-button"
2020-07-28 23:09:34 +05:30
:aria-label="__('Toggle collapse')"
:icon="caretIcon"
2020-06-23 00:09:42 +05:30
role="button"
2020-07-28 23:09:34 +05:30
class="js-graph-group-toggle gl-display-flex gl-ml-2 gl-text-gray-900"
2020-06-23 00:09:42 +05:30
tabindex="0"
@click="collapse"
@keyup.enter="collapse"
>
2020-07-28 23:09:34 +05:30
<gl-icon :name="caretIcon" />
2019-12-04 20:38:33 +05:30
</a>
</div>
<div
2020-01-01 13:55:28 +05:30
v-show="!isCollapsed"
ref="graph-group-content"
2019-12-21 20:55:43 +05:30
class="card-body prometheus-graph-group p-0"
2019-12-04 20:38:33 +05:30
>
<slot></slot>
2018-03-17 18:26:18 +05:30
</div>
2018-03-27 19:54:05 +05:30
</div>
2020-01-01 13:55:28 +05:30
<div v-else ref="graph-group-content" class="prometheus-graph-group"><slot></slot></div>
2018-03-17 18:26:18 +05:30
</template>