Skip to content
Snippets Groups Projects

Create test asset overlay

Merged Mattia Bruno Stellacci requested to merge create_test_asset_overlay into master
6 unresolved threads
Files
2
import React from 'react';
import _ from 'lodash';
import { Badge, Button } from 'react-bootstrap';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
// A custom buttom displayed as 'pivot' of the table allowing the user
// to copy the URL if necessary and otherwise displaying it as tooltip
const UrlButton = ({ url }) => {
return (
url && (
<OverlayTrigger
key={url}
placement="top"
overlay={
<Popover id={`popover-positioned-${url}`}>
<Popover.Content>{url}</Popover.Content>
</Popover>
}
>
<Button
variant="outline-primary"
size="sm"
onClick={() => navigator.clipboard.writeText(url)}
>
Copy Url
</Button>
</OverlayTrigger>
)
);
};
Please register or sign in to reply
// convert a list of strings to bootstrap "pill badges"
const listToPills = vals => {
return (
<React.Fragment>
{_.map(vals, val => (
<Badge pill variant="secondary" key={val}>
{val}
</Badge>
))}
</React.Fragment>
);
};
const listToBadges = vals => {
return (
<React.Fragment>
{_.map(vals, val => (
<Badge className="test-case-badge" variant="secondary" key={val}>
{val}
</Badge>
))}
</React.Fragment>
);
};
// remove entries, the value of which is just an 'x', other values are left untouched
// this seems to be the case for quite a few columns
const removeXValues = val => {
if (_.lowerCase(val) === 'x') {
return '';
} else {
return val;
}
};
const booleanToIcon = val => <i className={val ? 'bi bi-check-square' : 'bi bi-square'} />;
const testVectorColumnsRaw = [
{
isDummy: true,
text: 'url',
fixed: true,
dataField: 'url',
preProcess: val => {
// extract expressive url for vector, wrapped in <a> in API-response
// THIS IS NOT VERY ROBUST, relies on exact string-match
var url = _.replace(val, '<a href=', '');
return _.replace(url, '>Link</a>', '');
},
formatter: cell => {
return <UrlButton url={cell} />;
},
},
{
text: 'testvector',
dataField: 'testvector',
preProcess: val => {
// extract expressive label for vector, wrapped in <a> in API-response
var label = _.last(_.split(val, '">', 2));
return _.replace(label, '</a>', '');
},
},
{
text: 'testcase',
dataField: 'testcase',
preProcess: x => _.split(x, ','),
formatter: listToBadges,
},
{
text: 'active',
dataField: 'active',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'Asset identifier',
dataField: 'asset_identifier',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'Feature',
dataField: 'feature',
},
{
text: 'Feature Group',
dataField: 'featureGroup',
},
{
text: 'identifier',
dataField: 'identifier',
},
{
text: 'audio_codec',
dataField: 'audio_codec',
preProcess: x => _.split(x, ','),
formatter: listToPills,
},
{
text: 'Base Url',
dataField: 'base_url',
},
{
text: 'cenc_pssh',
dataField: 'cenc_pssh',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'Created At',
type: 'date',
dataField: 'createdAt',
},
{
text: 'dashjs_smoke_vector',
dataField: 'dashjs_smoke_vector',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'default_content',
dataField: 'default_content',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'Description',
dataField: 'description',
},
{
text: 'Duration',
dataField: 'duration',
preProcess: removeXValues,
},
{
text: 'early_terminated_period',
dataField: 'early_terminated_period',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'max_num_audio',
dataField: 'max_num_audio',
},
{
text: 'max_num_video',
dataField: 'max_num_video',
},
{
text: 'max_video_resolution',
dataField: 'max_video_resolution',
},
{
text: 'mime_types',
dataField: 'mime_types',
preProcess: x => _.split(x, ','),
formatter: listToPills,
},
{
text: 'min_update_period',
dataField: 'min_update_period',
preProcess: removeXValues,
},
{
text: 'mpd_type',
dataField: 'mpd_type',
},
{
text: 'multi_resolution_video',
dataField: 'multi_resolution_video',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'num_periods',
dataField: 'num_periods',
},
{
text: 'period_xlink_actuate',
dataField: 'period_xlink_actuate',
preProcess: removeXValues,
},
{
text: 'period_xlink_href',
dataField: 'period_xlink_href',
},
{
text: 'profile',
dataField: 'profile',
},
{
text: 'segment_template',
dataField: 'segment_template',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'segment_template_duration',
dataField: 'segment_template_duration',
preProcess: removeXValues,
},
{
text: 'segment_template_number',
dataField: 'segment_template_number',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'segment_template_presentation_timeoffset',
dataField: 'segment_template_presentation_timeoffset',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'segment_template_time',
dataField: 'segment_template_time',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'segment_timeline',
dataField: 'segment_timeline',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'content_protection_schemeid_uri',
dataField: 'content_protection_schemeid_uri',
preProcess: _.flow(removeXValues, x => _.split(x, ',')),
formatter: listToBadges,
},
{
text: 'inband_event_stream_schemeid_uri',
dataField: 'inband_event_stream_schemeid_uri',
preProcess: removeXValues,
},
{
text: 'source',
dataField: 'source',
},
{
text: 'time_shift_buffer_depth',
dataField: 'time_shift_buffer_depth',
preProcess: removeXValues,
},
{
text: 'updatedAt',
dataField: 'updatedAt',
},
{
text: 'urn_mpeg_dash_period_continuity_2014',
dataField: 'urn_mpeg_dash_period_continuity_2014',
preProcess: Boolean,
formatter: booleanToIcon,
},
{
text: 'utc_timing_schemeid_uri',
dataField: 'utc_timing_schemeid_uri',
preProcess: _.flow(removeXValues, x => _.split(x, ',')),
formatter: listToPills,
},
{
text: 'video_codec',
dataField: 'video_codec',
preProcess: _.flow(removeXValues, x => _.split(x, ',')),
formatter: listToPills,
},
];
const testVectorColumsPreProcessFunctions = _.mapValues(
// key items by field, map values to just the function
_.keyBy(
// Limit values to one's with preprocessing function
_.filter(testVectorColumnsRaw, o => _.has(o, 'preProcess')),
'dataField'
),
'preProcess'
);
export function preProcessTestVector(value, key) {
if (_.has(testVectorColumsPreProcessFunctions, key)) {
var val = testVectorColumsPreProcessFunctions[key](value);
return val;
} else {
return value;
}
}
// omit specified columns
export const testVectorTableColumns = _.map(testVectorColumnsRaw, o => _.omit(o, ['preProcess']));
export const testVectorColumnSelectOptions = _.map(testVectorColumnsRaw, o => ({
value: o.dataField,
label: o.text,
}));
Loading