Skip to content

Commit 4ab52ba

Browse files
alexjenningsalexjennings
committed
Disable wordbreak wrapping for long urls
1 parent 6e0cedb commit 4ab52ba

File tree

6 files changed

+146
-56
lines changed

6 files changed

+146
-56
lines changed

‎src/components/resource/ResourceDisplay.jsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
11
import { Fragment } from 'react';
22

3+
import { SimpleMetadataType, KeyValuePairType } from '../ui/DisplayType';
34
import TextGrid from '../ui/TextGrid';
4-
5-
function SimpleMetadataType({ metadata }) {
6-
return (
7-
<>
8-
<TextGrid title="Metadata" value="" />
9-
{metadata.field &&
10-
metadata.field.map((field) => (
11-
<TextGrid key={field.key} title={field.key} value={field.value} />
12-
))}
13-
</>
14-
);
15-
}
5+
import TypeArray from '../ui/TypeArray';
166

177
function ThumbnailServiceType({ thumbnail }) {
188
return (
199
<>
2010
<TextGrid title="Path" value={thumbnail.path} />
2111
<TextGrid title="Mode" value={thumbnail.mode} />
12+
<TextGrid title="state" value={thumbnail.state} />
13+
<TextGrid title="Last Success" value={thumbnail.lastSuccess} />
14+
<TextGrid title="Last Failure" value={thumbnail.lastFailure} />
15+
<TextGrid title="Failure Message" value={thumbnail.failureMessage} />
2216
</>
2317
);
2418
}
@@ -39,7 +33,7 @@ function FinalCutServerType({ finalcutserver }) {
3933
<TextGrid title="Tag" value={finalcutserver.tag} />
4034
<TextGrid title="State" value={finalcutserver.state} />
4135
<TextGrid title="Description" value={finalcutserver.description} />
42-
<SimpleMetadataType metadata={finalcutserver.metadata} />
36+
<TypeArray title="Metadata" value={finalcutserver.metadata} component={SimpleMetadataType} />
4337
</>
4438
);
4539
}
@@ -113,6 +107,7 @@ function TranscoderType({ transcoder }) {
113107
{/* <TextGrid title="Transcoder" value={transcoder.transcoder} /> */}
114108
<TextGrid title="Weight" value={transcoder.weight} />
115109
<TextGrid title="Max Job" value={transcoder.maxJob} />
110+
<TypeArray title="Resource Tag" value={transcoder.resourceTag} component={KeyValuePairType} />
116111
</>
117112
);
118113
}
@@ -134,7 +129,7 @@ function MXFServerResourceType({ mxfserver }) {
134129
<TextGrid title="Detect Atom" variant="boolean" value={mxfserver.detectAtom} />
135130
<TextGrid title="Enforce Quota" variant="boolean" value={mxfserver.enforceQuota} />
136131
<TextGrid title="File Import Pattern" value={mxfserver.fileImportPattern} />
137-
<SimpleMetadataType metadata={mxfserver.metadata} />
132+
<TypeArray title="Metadata" value={mxfserver.metadata} component={SimpleMetadataType} />
138133
</>
139134
);
140135
}

‎src/components/resource/ResourceForm.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Field from '../ui/Field';
1212
import FieldArray from '../ui/FieldArray';
1313
import FieldTypeArray from '../ui/FieldTypeArray';
1414
import FormSection from '../ui/FormSection';
15-
import { SimpleMetadataType } from '../ui/FormType';
15+
import { SimpleMetadataType, KeyValuePairType } from '../ui/FormType';
1616
import UrlField from '../ui/UrlField';
1717

1818
function TranscoderConfigurationType() {
@@ -257,6 +257,12 @@ export function TranscoderTypeForm() {
257257
label="Direct Access"
258258
component={TranscoderDirectAccess}
259259
/>
260+
<FieldTypeArray
261+
name="resourceTag"
262+
label="resourceTag"
263+
component={KeyValuePairType}
264+
fullWidth
265+
/>
260266
<FormSection
261267
name="configuration"
262268
label="Configuration"

‎src/components/resource/ResourceListRow.jsx‎

Lines changed: 113 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
import { withStyles } from '@material-ui/core';
12
import TableCell from '@material-ui/core/TableCell';
23

34
import { OnlineIcon, OfflineIcon } from '../ui/StatusIcon';
45
import TableRowLink from '../ui/TableRowLink';
56

7+
const styles = () => ({
8+
wordBreak: { wordBreak: 'break-all' },
9+
noBreak: { whiteSpace: 'nowrap' },
10+
});
11+
612
function NetworkRow({ resource }) {
713
return (
814
<>
@@ -22,60 +28,60 @@ function ExternalTranscoderRow({ resource }) {
2228
);
2329
}
2430

25-
function TranscoderRow({ resource }) {
31+
function TranscoderRow({ classes, resource }) {
2632
return (
2733
<>
28-
<TableCell>{resource.url}</TableCell>
34+
<TableCell className={classes.wordBreak}>{resource.url}</TableCell>
2935
<TableCell>{resource.version}</TableCell>
3036
<TableCell>{resource.state === 'ONLINE' ? <OnlineIcon /> : <OfflineIcon />}</TableCell>
3137
</>
3238
);
3339
}
3440

35-
function ThumbnailServiceRow({ resource }) {
41+
function ThumbnailServiceRow({ classes, resource }) {
3642
return (
3743
<>
38-
<TableCell>{resource.path}</TableCell>
44+
<TableCell className={classes.wordBreak}>{resource.path}</TableCell>
3945
<TableCell>{resource.state === 'ONLINE' ? <OnlineIcon /> : <OfflineIcon />}</TableCell>
4046
</>
4147
);
4248
}
4349

44-
function CerifyRow({ resource }) {
45-
return <TableCell>{resource.address}</TableCell>;
50+
function CerifyRow({ classes, resource }) {
51+
return <TableCell className={classes.wordBreak}>{resource.address}</TableCell>;
4652
}
4753

48-
function FinalCutServerRow({ resource }) {
54+
function FinalCutServerRow({ classes, resource }) {
4955
return (
5056
<>
51-
<TableCell>{resource.url}</TableCell>
57+
<TableCell className={classes.wordBreak}>{resource.url}</TableCell>
5258
<TableCell>{resource.tag}</TableCell>
5359
<TableCell>{resource.state}</TableCell>
5460
</>
5561
);
5662
}
5763

58-
function MXFServerRow({ resource }) {
64+
function MXFServerRow({ classes, resource }) {
5965
return (
6066
<>
61-
<TableCell>{resource.url}</TableCell>
67+
<TableCell className={classes.wordBreak}>{resource.url}</TableCell>
6268
<TableCell>{resource.workspaceUrl}</TableCell>
6369
<TableCell>{resource.userWorkspaceUrl}</TableCell>
6470
</>
6571
);
6672
}
6773

68-
function SigniantRow({ resource }) {
74+
function SigniantRow({ classes, resource }) {
6975
return (
7076
<>
71-
<TableCell>{resource.url}</TableCell>
77+
<TableCell className={classes.wordBreak}>{resource.url}</TableCell>
7278
<TableCell>{resource.tag}</TableCell>
7379
</>
7480
);
7581
}
7682

77-
function LDAPRow({ resource }) {
78-
return <TableCell>{resource.url}</TableCell>;
83+
function LDAPRow({ classes, resource }) {
84+
return <TableCell className={classes.wordBreak}>{resource.url}</TableCell>;
7985
}
8086

8187
function CloudConvertRow({ resource }) {
@@ -87,73 +93,143 @@ function CloudConvertRow({ resource }) {
8793
);
8894
}
8995

90-
function VidinetServiceRow({ resource }) {
96+
function VidinetServiceRow({ classes, resource }) {
9197
return (
9298
<>
9399
<TableCell>{resource.name}</TableCell>
94100
<TableCell>{resource.type}</TableCell>
95-
<TableCell>{resource.url}</TableCell>
101+
<TableCell className={classes.wordBreak}>{resource.url}</TableCell>
96102
<TableCell>{resource.endpoint}</TableCell>
97103
<TableCell>{resource.state}</TableCell>
98104
</>
99105
);
100106
}
101107

102-
function EidrRow({ resource }) {
108+
function EidrRow({ classes, resource }) {
103109
return (
104110
<>
105-
<TableCell>{resource.url}</TableCell>
111+
<TableCell className={classes.wordBreak}>{resource.url}</TableCell>
106112
<TableCell>{resource.partyId}</TableCell>
107113
<TableCell>{resource.userId}</TableCell>
108114
</>
109115
);
110116
}
111-
function CallbackRow({ resource }) {
112-
return <TableCell>{resource.uri}</TableCell>;
117+
function CallbackRow({ classes, resource }) {
118+
return <TableCell className={classes.wordBreak}>{resource.uri}</TableCell>;
113119
}
114120

115-
function ResourceRow({ resource, resourceType }) {
121+
function ResourceRow({ classes, resource, resourceType }) {
116122
if (resource[resourceType] === undefined) return null;
117123
switch (resourceType) {
118124
case 'network':
119-
return <NetworkRow resource={resource[resourceType]} resourceType={resourceType} />;
125+
return (
126+
<NetworkRow
127+
resource={resource[resourceType]}
128+
resourceType={resourceType}
129+
classes={classes}
130+
/>
131+
);
120132
case 'transcoder':
121-
return <TranscoderRow resource={resource[resourceType]} resourceType={resourceType} />;
133+
return (
134+
<TranscoderRow
135+
resource={resource[resourceType]}
136+
resourceType={resourceType}
137+
classes={classes}
138+
/>
139+
);
122140
case 'externalTranscoder':
123141
return (
124-
<ExternalTranscoderRow resource={resource[resourceType]} resourceType={resourceType} />
142+
<ExternalTranscoderRow
143+
resource={resource[resourceType]}
144+
resourceType={resourceType}
145+
classes={classes}
146+
/>
125147
);
126148
case 'cerify':
127-
return <CerifyRow resource={resource[resourceType]} resourceType={resourceType} />;
149+
return (
150+
<CerifyRow
151+
resource={resource[resourceType]}
152+
resourceType={resourceType}
153+
classes={classes}
154+
/>
155+
);
128156
case 'thumbnail':
129-
return <ThumbnailServiceRow resource={resource[resourceType]} resourceType={resourceType} />;
157+
return (
158+
<ThumbnailServiceRow
159+
resource={resource[resourceType]}
160+
resourceType={resourceType}
161+
classes={classes}
162+
/>
163+
);
130164
case 'finalcutserver':
131-
return <FinalCutServerRow resource={resource[resourceType]} resourceType={resourceType} />;
165+
return (
166+
<FinalCutServerRow
167+
resource={resource[resourceType]}
168+
resourceType={resourceType}
169+
classes={classes}
170+
/>
171+
);
132172
case 'mxfserver':
133-
return <MXFServerRow resource={resource[resourceType]} resourceType={resourceType} />;
173+
return (
174+
<MXFServerRow
175+
resource={resource[resourceType]}
176+
resourceType={resourceType}
177+
classes={classes}
178+
/>
179+
);
134180
case 'signiant':
135-
return <SigniantRow resource={resource[resourceType]} resourceType={resourceType} />;
181+
return (
182+
<SigniantRow
183+
resource={resource[resourceType]}
184+
resourceType={resourceType}
185+
classes={classes}
186+
/>
187+
);
136188
case 'ldap':
137-
return <LDAPRow resource={resource[resourceType]} resourceType={resourceType} />;
189+
return (
190+
<LDAPRow resource={resource[resourceType]} resourceType={resourceType} classes={classes} />
191+
);
138192
case 'cloudconvert':
139-
return <CloudConvertRow resource={resource[resourceType]} resourceType={resourceType} />;
193+
return (
194+
<CloudConvertRow
195+
resource={resource[resourceType]}
196+
resourceType={resourceType}
197+
classes={classes}
198+
/>
199+
);
140200
case 'vidinet':
141-
return <VidinetServiceRow resource={resource[resourceType]} resourceType={resourceType} />;
201+
return (
202+
<VidinetServiceRow
203+
resource={resource[resourceType]}
204+
resourceType={resourceType}
205+
classes={classes}
206+
/>
207+
);
142208
case 'eidr':
143-
return <EidrRow resource={resource[resourceType]} resourceType={resourceType} />;
209+
return (
210+
<EidrRow resource={resource[resourceType]} resourceType={resourceType} classes={classes} />
211+
);
144212
case 'callback':
145-
return <CallbackRow resource={resource[resourceType]} resourceType={resourceType} />;
213+
return (
214+
<CallbackRow
215+
resource={resource[resourceType]}
216+
resourceType={resourceType}
217+
classes={classes}
218+
/>
219+
);
146220
default:
147221
return <TableCell />;
148222
}
149223
}
150224

151-
export default function ResourceListRow({ resource, resourceType }) {
225+
function ResourceListRow({ classes, resource, resourceType }) {
152226
const { id: resourceId } = resource;
153227
return (
154228
<TableRowLink hover to={`/resource/${resourceType}/${resourceId}/`}>
155-
<TableCell>{resourceId}</TableCell>
156-
<ResourceRow resource={resource} resourceType={resourceType} />
229+
<TableCell className={classes.noBreak}>{resourceId}</TableCell>
230+
<ResourceRow resource={resource} resourceType={resourceType} classes={classes} />
157231
</TableRowLink>
158232
);
159233
}
234+
235+
export default withStyles(styles)(ResourceListRow);

‎src/components/storage/StorageMethodRow.jsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Checkbox from '@material-ui/core/Checkbox';
33
import Chip from '@material-ui/core/Chip';
44
import FormControlLabel from '@material-ui/core/FormControlLabel';
55
import FormGroup from '@material-ui/core/FormGroup';
6+
import { withStyles } from '@material-ui/core/styles';
67
import TableCell from '@material-ui/core/TableCell';
78
import TableRow from '@material-ui/core/TableRow';
89
import Typography from '@material-ui/core/Typography';
@@ -11,7 +12,12 @@ import { Link } from 'react-router-dom';
1112

1213
import { OnlineIcon, OfflineIcon } from '../ui/StatusIcon';
1314

14-
export default function StorageMethodRow({ storageMethod, storageId, hidePermissions }) {
15+
const styles = () => ({
16+
wordBreak: { wordBreak: 'break-word' },
17+
noBreak: { whiteSpace: 'nowrap' },
18+
});
19+
20+
function StorageMethodRow({ classes, storageMethod, storageId, hidePermissions }) {
1521
let isOnline = false;
1622
if (!storageMethod.lastFailure) {
1723
isOnline = true;
@@ -25,11 +31,12 @@ export default function StorageMethodRow({ storageMethod, storageId, hidePermiss
2531
component={Link}
2632
to={`/storage/${storageId}/method/${storageMethod.id}`}
2733
variant="text"
34+
className={classes.noBreak}
2835
>
2936
{storageMethod.id}
3037
</Button>
3138
</TableCell>
32-
<TableCell>{storageMethod.uri}</TableCell>
39+
<TableCell className={classes.wordBreak}>{storageMethod.uri}</TableCell>
3340
{hidePermissions !== true ? (
3441
<TableCell padding="checkbox">
3542
<FormGroup row>
@@ -58,3 +65,5 @@ export default function StorageMethodRow({ storageMethod, storageId, hidePermiss
5865
</TableRow>
5966
);
6067
}
68+
69+
export default withStyles(styles)(StorageMethodRow);

0 commit comments

Comments
 (0)