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
1
Merge Requests
1
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
nexedi
gitlab-ce
Commits
793af999
Commit
793af999
authored
Jun 24, 2019
by
GitLab Bot
Browse files
Options
Browse Files
Download
Plain Diff
Automatic merge of gitlab-org/gitlab-ce master
parents
d3b37f90
c64e5848
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
189 additions
and
0 deletions
+189
-0
app/assets/javascripts/monitoring/components/charts/column.vue
...ssets/javascripts/monitoring/components/charts/column.vue
+131
-0
spec/javascripts/monitoring/charts/column_spec.js
spec/javascripts/monitoring/charts/column_spec.js
+58
-0
No files found.
app/assets/javascripts/monitoring/components/charts/column.vue
0 → 100644
View file @
793af999
<
script
>
import
{
GlColumnChart
}
from
'
@gitlab/ui/dist/charts
'
;
import
{
debounceByAnimationFrame
}
from
'
~/lib/utils/common_utils
'
;
import
{
getSvgIconPathContent
}
from
'
~/lib/utils/icon_utils
'
;
import
{
chartHeight
}
from
'
../../constants
'
;
import
{
makeDataSeries
}
from
'
~/helpers/monitor_helper
'
;
export
default
{
components
:
{
GlColumnChart
,
},
inheritAttrs
:
false
,
props
:
{
graphData
:
{
type
:
Object
,
required
:
true
,
validator
(
data
)
{
return
(
Array
.
isArray
(
data
.
queries
)
&&
data
.
queries
.
filter
(
query
=>
{
if
(
Array
.
isArray
(
query
.
result
))
{
return
(
query
.
result
.
filter
(
res
=>
Array
.
isArray
(
res
.
values
)).
length
===
query
.
result
.
length
);
}
return
false
;
}).
length
===
data
.
queries
.
length
);
},
containerWidth
:
{
type
:
Number
,
required
:
true
,
},
},
},
data
()
{
return
{
width
:
0
,
height
:
chartHeight
,
svgs
:
{},
debouncedResizeCallback
:
{},
};
},
computed
:
{
chartData
()
{
const
queryData
=
this
.
graphData
.
queries
.
reduce
((
acc
,
query
)
=>
{
const
series
=
makeDataSeries
(
query
.
result
,
{
name
:
this
.
formatLegendLabel
(
query
),
});
return
acc
.
concat
(
series
);
},
[]);
return
{
values
:
queryData
[
0
].
data
,
};
},
xAxisTitle
()
{
return
this
.
graphData
.
queries
[
0
].
result
[
0
].
x_label
!==
undefined
?
this
.
graphData
.
queries
[
0
].
result
[
0
].
x_label
:
''
;
},
yAxisTitle
()
{
return
this
.
graphData
.
queries
[
0
].
result
[
0
].
y_label
!==
undefined
?
this
.
graphData
.
queries
[
0
].
result
[
0
].
y_label
:
''
;
},
xAxisType
()
{
return
this
.
graphData
.
x_type
!==
undefined
?
this
.
graphData
.
x_type
:
'
category
'
;
},
dataZoomConfig
()
{
const
handleIcon
=
this
.
svgs
[
'
scroll-handle
'
];
return
handleIcon
?
{
handleIcon
}
:
{};
},
chartOptions
()
{
return
{
dataZoom
:
this
.
dataZoomConfig
,
};
},
},
watch
:
{
containerWidth
:
'
onResize
'
,
},
beforeDestroy
()
{
window
.
removeEventListener
(
'
resize
'
,
this
.
debouncedResizeCallback
);
},
created
()
{
this
.
debouncedResizeCallback
=
debounceByAnimationFrame
(
this
.
onResize
);
window
.
addEventListener
(
'
resize
'
,
this
.
debouncedResizeCallback
);
this
.
setSvg
(
'
scroll-handle
'
);
},
methods
:
{
formatLegendLabel
(
query
)
{
return
`
${
query
.
label
}
`
;
},
onResize
()
{
const
{
width
}
=
this
.
$refs
.
columnChart
.
$el
.
getBoundingClientRect
();
this
.
width
=
width
;
},
setSvg
(
name
)
{
getSvgIconPathContent
(
name
)
.
then
(
path
=>
{
if
(
path
)
{
this
.
$set
(
this
.
svgs
,
name
,
`path://
${
path
}
`
);
}
})
.
catch
(()
=>
{});
},
},
};
</
script
>
<
template
>
<div
class=
"prometheus-graph col-12 col-lg-6"
>
<div
class=
"prometheus-graph-header"
>
<h5
ref=
"graphTitle"
class=
"prometheus-graph-title"
>
{{
graphData
.
title
}}
</h5>
<div
ref=
"graphWidgets"
class=
"prometheus-graph-widgets"
><slot></slot></div>
</div>
<gl-column-chart
ref=
"columnChart"
v-bind=
"$attrs"
:data=
"chartData"
:option=
"chartOptions"
:width=
"width"
:height=
"height"
:x-axis-title=
"xAxisTitle"
:y-axis-title=
"yAxisTitle"
:x-axis-type=
"xAxisType"
/>
</div>
</
template
>
spec/javascripts/monitoring/charts/column_spec.js
0 → 100644
View file @
793af999
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
GlColumnChart
}
from
'
@gitlab/ui/dist/charts
'
;
import
ColumnChart
from
'
~/monitoring/components/charts/column.vue
'
;
describe
(
'
Column component
'
,
()
=>
{
let
columnChart
;
beforeEach
(()
=>
{
columnChart
=
shallowMount
(
ColumnChart
,
{
propsData
:
{
graphData
:
{
queries
:
[
{
x_label
:
'
Time
'
,
y_label
:
'
Usage
'
,
result
:
[
{
metric
:
{},
values
:
[
[
1495700554.925
,
'
8.0390625
'
],
[
1495700614.925
,
'
8.0390625
'
],
[
1495700674.925
,
'
8.0390625
'
],
],
},
],
},
],
},
containerWidth
:
100
,
},
});
});
afterEach
(()
=>
{
columnChart
.
destroy
();
});
describe
(
'
wrapped components
'
,
()
=>
{
describe
(
'
GitLab UI column chart
'
,
()
=>
{
let
glColumnChart
;
beforeEach
(()
=>
{
glColumnChart
=
columnChart
.
find
(
GlColumnChart
);
});
it
(
'
is a Vue instance
'
,
()
=>
{
expect
(
glColumnChart
.
isVueInstance
()).
toBe
(
true
);
});
it
(
'
receives data properties needed for proper chart render
'
,
()
=>
{
const
props
=
glColumnChart
.
props
();
expect
(
props
.
data
).
toBe
(
columnChart
.
vm
.
chartData
);
expect
(
props
.
option
).
toBe
(
columnChart
.
vm
.
chartOptions
);
});
});
});
});
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