Loading...
}
return (
-
+
- {iconName ? : null}
+ {iconName
+ ?
+ : null}
{selected}
- {isOpen ?
-
+ {isOpen
+ ?
: null}
)
}
}
-const {
- arrayOf,
- shape,
- string,
- func,
-} = PropTypes
+const {arrayOf, shape, string, func} = PropTypes
Dropdown.propTypes = {
- actions: arrayOf(shape({
- icon: string.isRequired,
- text: string.isRequired,
- handler: func.isRequired,
- })),
- items: arrayOf(shape({
- text: string.isRequired,
- })).isRequired,
+ actions: arrayOf(
+ shape({
+ icon: string.isRequired,
+ text: string.isRequired,
+ handler: func.isRequired,
+ })
+ ),
+ items: arrayOf(
+ shape({
+ text: string.isRequired,
+ })
+ ).isRequired,
onChoose: func.isRequired,
addNew: shape({
url: string.isRequired,
diff --git a/ui/src/style/components/query-editor.scss b/ui/src/style/components/query-editor.scss
index b55a015fc0..bb95febc18 100644
--- a/ui/src/style/components/query-editor.scss
+++ b/ui/src/style/components/query-editor.scss
@@ -21,7 +21,7 @@
border-color 0.25s ease;
border: 2px solid $query-editor--bg;
background-color: $query-editor--field-bg;
-
+
}
.query-editor--field {
font-size: 12px;
@@ -103,4 +103,7 @@
min-width: $query-editor--templates-menu-width;
max-width: $query-editor--templates-menu-width;
}
-}
\ No newline at end of file
+ .divider {
+ background: linear-gradient(to right, #00C9FF 0%, #22ADF6 100%);
+ }
+}
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index 2d99e41abe..a17acdd30c 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -131,6 +131,58 @@ table .monotype {
}
}
+/*
+ Table Tabs
+ ----------------------------------------------
+*/
+$table-tab-height: 30px;
+$table-tab-scrollbar-height: 6px;
+
+.table--tabs {
+ display: flex;
+ height: $table-tab-height;
+ align-items: center;
+}
+.table--tab {
+ font-size: 12px;
+ font-weight: 600;
+ @include no-user-select();
+ height: $table-tab-height;
+ border-radius: $radius-small $radius-small 0 0;
+ line-height: $table-tab-height;
+ padding: 0 6px;
+ background-color: $g4-onyx;
+ color: $g11-sidewalk;
+ margin-right: 2px;
+ transition:
+ color 0.25s ease,
+ background-color 0.25s ease;
+
+ &:hover {
+ background-color: $g5-pepper;
+ color: $g15-platinum;
+ cursor: pointer;
+ }
+ &.active {
+ background-color: $g6-smoke;
+ color: $g18-cloud;
+ }
+}
+.table--tabs-dropdown {
+ display: inline-block;
+}
+.table--tabs-content {
+ width: 100%;
+ height: calc(100% - #{$table-tab-height});
+ position: absolute;
+ top: $table-tab-height;
+}
+
+.table--tabs + .table--tabs-content > .generic-empty-state {
+ background-color: $g6-smoke !important;
+ border-radius: 0 $radius-small $radius-small $radius-small;
+}
+
/*
Responsive Tables
----------------------------------------------
diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js
index 3359ba0305..c848456b2d 100644
--- a/ui/src/utils/timeSeriesToDygraph.js
+++ b/ui/src/utils/timeSeriesToDygraph.js
@@ -16,67 +16,102 @@ const cells = {
}
// activeQueryIndex is an optional argument that indicated which query's series we want highlighted.
-export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInDataExplorer) {
+export default function timeSeriesToDygraph(
+ raw = [],
+ activeQueryIndex,
+ isInDataExplorer
+) {
// collect results from each influx response
- const results = reduce(raw, (acc, rawResponse, responseIndex) => {
- const responses = _.get(rawResponse, 'response.results', [])
- const indexedResponses = map(responses, (response) => ({...response, responseIndex}))
- return [...acc, ...indexedResponses]
- }, [])
+ const results = reduce(
+ raw,
+ (acc, rawResponse, responseIndex) => {
+ const responses = _.get(rawResponse, 'response.results', [])
+ const indexedResponses = map(responses, response => ({
+ ...response,
+ responseIndex,
+ }))
+ return [...acc, ...indexedResponses]
+ },
+ []
+ )
// collect each series
- const serieses = reduce(results, (acc, {series = [], responseIndex}, index) => {
- return [...acc, ...map(series, (item) => ({...item, responseIndex, index}))]
- }, [])
+ const serieses = reduce(
+ results,
+ (acc, {series = [], responseIndex}, index) => {
+ return [...acc, ...map(series, item => ({...item, responseIndex, index}))]
+ },
+ []
+ )
- const size = reduce(serieses, (acc, {columns, values}) => {
- if (columns.length && values.length) {
- return acc + (columns.length - 1) * values.length
- }
- return acc
- }, 0)
+ const size = reduce(
+ serieses,
+ (acc, {columns, values}) => {
+ if (columns.length && (values && values.length)) {
+ return acc + (columns.length - 1) * values.length
+ }
+ return acc
+ },
+ 0
+ )
// convert series into cells with rows and columns
let cellIndex = 0
let labels = []
- forEach(serieses, ({name: measurement, columns, values, index: seriesIndex, responseIndex, tags = {}}) => {
- const rows = map(values, (vals) => ({
- vals,
- }))
-
- // tagSet is each tag key and value for a series
- const tagSet = map(Object.keys(tags), (tag) => `[${tag}=${tags[tag]}]`).sort().join('')
- const unsortedLabels = map(columns.slice(1), (field) => ({
- label: `${measurement}.${field}${tagSet}`,
+ forEach(
+ serieses,
+ ({
+ name: measurement,
+ columns,
+ values,
+ index: seriesIndex,
responseIndex,
- seriesIndex,
- }))
- labels = concat(labels, unsortedLabels)
+ tags = {},
+ }) => {
+ const rows = map(values || [], vals => ({
+ vals,
+ }))
- forEach(rows, ({vals}) => {
- const [time, ...rowValues] = vals
+ // tagSet is each tag key and value for a series
+ const tagSet = map(Object.keys(tags), tag => `[${tag}=${tags[tag]}]`)
+ .sort()
+ .join('')
+ const unsortedLabels = map(columns.slice(1), field => ({
+ label: `${measurement}.${field}${tagSet}`,
+ responseIndex,
+ seriesIndex,
+ }))
+ labels = concat(labels, unsortedLabels)
- forEach(rowValues, (value, i) => {
- cells.label[cellIndex] = unsortedLabels[i].label
- cells.value[cellIndex] = value
- cells.time[cellIndex] = time
- cells.seriesIndex[cellIndex] = seriesIndex
- cells.responseIndex[cellIndex] = responseIndex
- cellIndex++ // eslint-disable-line no-plusplus
+ forEach(rows, ({vals}) => {
+ const [time, ...rowValues] = vals
+
+ forEach(rowValues, (value, i) => {
+ cells.label[cellIndex] = unsortedLabels[i].label
+ cells.value[cellIndex] = value
+ cells.time[cellIndex] = time
+ cells.seriesIndex[cellIndex] = seriesIndex
+ cells.responseIndex[cellIndex] = responseIndex
+ cellIndex++ // eslint-disable-line no-plusplus
+ })
})
- })
- })
+ }
+ )
const sortedLabels = _.sortBy(labels, 'label')
const tsMemo = {}
const nullArray = Array(sortedLabels.length).fill(null)
- const labelsToValueIndex = reduce(sortedLabels, (acc, {label, seriesIndex}, i) => {
- // adding series index prevents overwriting of two distinct labels that have the same field and measurements
- acc[label + seriesIndex] = i
- return acc
- }, {})
+ const labelsToValueIndex = reduce(
+ sortedLabels,
+ (acc, {label, seriesIndex}, i) => {
+ // adding series index prevents overwriting of two distinct labels that have the same field and measurements
+ acc[label + seriesIndex] = i
+ return acc
+ },
+ {}
+ )
const timeSeries = []
for (let i = 0; i < size; i++) {
@@ -97,23 +132,32 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
tsMemo[time] = existingRowIndex
}
- timeSeries[existingRowIndex].values[labelsToValueIndex[label + seriesIndex]] = value
+ timeSeries[existingRowIndex].values[
+ labelsToValueIndex[label + seriesIndex]
+ ] = value
}
const sortedTimeSeries = _.sortBy(timeSeries, 'time')
- const dygraphSeries = reduce(sortedLabels, (acc, {label, responseIndex}) => {
- if (!isInDataExplorer) {
- acc[label] = {
- axis: responseIndex === 0 ? 'y' : 'y2',
+ const dygraphSeries = reduce(
+ sortedLabels,
+ (acc, {label, responseIndex}) => {
+ if (!isInDataExplorer) {
+ acc[label] = {
+ axis: responseIndex === 0 ? 'y' : 'y2',
+ }
}
- }
- return acc
- }, {})
+ return acc
+ },
+ {}
+ )
return {
labels: ['time', ...map(sortedLabels, ({label}) => label)],
- timeSeries: map(sortedTimeSeries, ({time, values}) => ([new Date(time), ...values])),
+ timeSeries: map(sortedTimeSeries, ({time, values}) => [
+ new Date(time),
+ ...values,
+ ]),
dygraphSeries,
}
}