github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/diff-viewer.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components|Diff Viewer', 5 }; 6 7 export let DiffViewerWithInsertions = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Diff Viewer with insertions</h5> 11 <div class="boxed-section"> 12 <div class="boxed-section-body is-dark"> 13 {{job-diff diff=insertionsOnly}} 14 </div> 15 </div> 16 `, 17 context: { 18 insertionsOnly: generateDiff([ 19 { Annotations: null, Name: 'Attempts', New: '15', Old: '15', Type: 'None' }, 20 { Annotations: null, Name: 'Delay', New: '25000000000', Old: '', Type: 'Added' }, 21 { Annotations: null, Name: 'Interval', New: '900000000000', Old: '', Type: 'Added' }, 22 { Annotations: null, Name: 'Mode', New: 'delay', Old: 'delay', Type: 'None' }, 23 ]), 24 }, 25 }; 26 }; 27 28 export let DiffViewerWithDeletions = () => { 29 return { 30 template: hbs` 31 <h5 class="title is-5">Diff Viewer with deletions</h5> 32 <div class="boxed-section"> 33 <div class="boxed-section-body is-dark"> 34 {{job-diff diff=deletionsOnly}} 35 </div> 36 </div> 37 `, 38 context: { 39 deletionsOnly: generateDiff([ 40 { Annotations: null, Name: 'Attempts', New: '15', Old: '15', Type: 'None' }, 41 { 42 Annotations: null, 43 Name: 'Delay', 44 New: '25000000000', 45 Old: '25000000000', 46 Type: 'None', 47 }, 48 { 49 Annotations: null, 50 Name: 'Interval', 51 New: '900000000000', 52 Old: '900000000000', 53 Type: 'None', 54 }, 55 { Annotations: null, Name: 'Mode', New: '', Old: 'delay', Type: 'Deleted' }, 56 ]), 57 }, 58 }; 59 }; 60 61 export let DiffViewerWithEdits = () => { 62 return { 63 template: hbs` 64 <h5 class="title is-5">Diff Viewer with edits</h5> 65 <div class="boxed-section"> 66 <div class="boxed-section-body is-dark"> 67 {{job-diff diff=editsOnly}} 68 </div> 69 <p class="annotation">Often times a diff will only have a couple lines. Minor tweaks to a job spec result in small diffs.</p> 70 </div> 71 `, 72 context: { 73 editsOnly: generateDiff([ 74 { Annotations: null, Name: 'Attempts', New: '15', Old: '15', Type: 'None' }, 75 { 76 Annotations: null, 77 Name: 'Delay', 78 New: '25000000000', 79 Old: '25000000000', 80 Type: 'None', 81 }, 82 { 83 Annotations: null, 84 Name: 'Interval', 85 New: '900000000000', 86 Old: '250000000000', 87 Type: 'Edited', 88 }, 89 { Annotations: null, Name: 'Mode', New: 'delay', Old: 'delay', Type: 'None' }, 90 ]), 91 }, 92 }; 93 }; 94 95 export let DiffViewerWithManyChanges = () => { 96 return { 97 template: hbs` 98 <h5 class="title is-5">Diff Viewer with many changes</h5> 99 <div class="boxed-section"> 100 <div class="boxed-section-body is-dark"> 101 {{job-diff diff=largeDiff}} 102 </div> 103 </div> 104 `, 105 context: { 106 largeDiff: { 107 Fields: null, 108 ID: 'example', 109 Objects: null, 110 TaskGroups: [ 111 { 112 Fields: null, 113 Name: 'cache', 114 Objects: null, 115 Tasks: [ 116 { 117 Annotations: null, 118 Fields: [ 119 { 120 Annotations: null, 121 Name: 'Meta[one]', 122 New: "flew over the cuckoo's nest", 123 Old: '', 124 Type: 'Added', 125 }, 126 { 127 Annotations: null, 128 Name: 'Meta[two]', 129 New: 'birds on a wire', 130 Old: '', 131 Type: 'Added', 132 }, 133 ], 134 Name: 'redis', 135 Objects: [ 136 { 137 Fields: [ 138 { 139 Annotations: null, 140 Name: 'image', 141 New: 'redis:3.4', 142 Old: 'redis:3.2', 143 Type: 'Edited', 144 }, 145 { 146 Annotations: null, 147 Name: 'port_map[0][db]', 148 New: '6380', 149 Old: '6379', 150 Type: 'Edited', 151 }, 152 ], 153 Name: 'Config', 154 Objects: null, 155 Type: 'Edited', 156 }, 157 { 158 Fields: [ 159 { Annotations: null, Name: 'CPU', New: '1000', Old: '500', Type: 'Edited' }, 160 { Annotations: null, Name: 'DiskMB', New: '0', Old: '0', Type: 'None' }, 161 { Annotations: null, Name: 'IOPS', New: '0', Old: '0', Type: 'None' }, 162 { 163 Annotations: null, 164 Name: 'MemoryMB', 165 New: '512', 166 Old: '256', 167 Type: 'Edited', 168 }, 169 ], 170 Name: 'Resources', 171 Objects: [ 172 { 173 Fields: [ 174 { Annotations: null, Name: 'MBits', New: '100', Old: '', Type: 'Added' }, 175 ], 176 Name: 'Network', 177 Objects: [ 178 { 179 Fields: [ 180 { 181 Annotations: null, 182 Name: 'Label', 183 New: 'db', 184 Old: '', 185 Type: 'Added', 186 }, 187 ], 188 Name: 'Dynamic Port', 189 Objects: null, 190 Type: 'Added', 191 }, 192 ], 193 Type: 'Added', 194 }, 195 { 196 Fields: [ 197 { Annotations: null, Name: 'MBits', New: '', Old: '10', Type: 'Deleted' }, 198 ], 199 Name: 'Network', 200 Objects: [ 201 { 202 Fields: [ 203 { 204 Annotations: null, 205 Name: 'Label', 206 New: '', 207 Old: 'db', 208 Type: 'Deleted', 209 }, 210 ], 211 Name: 'Dynamic Port', 212 Objects: null, 213 Type: 'Deleted', 214 }, 215 ], 216 Type: 'Deleted', 217 }, 218 ], 219 Type: 'Edited', 220 }, 221 { 222 Fields: [ 223 { 224 Annotations: null, 225 Name: 'AddressMode', 226 New: 'auto', 227 Old: 'auto', 228 Type: 'None', 229 }, 230 { 231 Annotations: null, 232 Name: 'Name', 233 New: 'redis-cache', 234 Old: 'redis-cache', 235 Type: 'None', 236 }, 237 { Annotations: null, Name: 'PortLabel', New: 'db', Old: 'db', Type: 'None' }, 238 ], 239 Name: 'Service', 240 Objects: [ 241 { 242 Fields: [ 243 { Annotations: null, Name: 'Tags', New: 'redis', Old: '', Type: 'Added' }, 244 { 245 Annotations: null, 246 Name: 'Tags', 247 New: 'cache', 248 Old: 'cache', 249 Type: 'None', 250 }, 251 { 252 Annotations: null, 253 Name: 'Tags', 254 New: 'global', 255 Old: 'global', 256 Type: 'None', 257 }, 258 ], 259 Name: 'Tags', 260 Objects: null, 261 Type: 'Added', 262 }, 263 { 264 Fields: [ 265 { 266 Annotations: null, 267 Name: 'AddressMode', 268 New: '', 269 Old: '', 270 Type: 'None', 271 }, 272 { Annotations: null, Name: 'Command', New: '', Old: '', Type: 'None' }, 273 { 274 Annotations: null, 275 Name: 'GRPCService', 276 New: '', 277 Old: '', 278 Type: 'None', 279 }, 280 { 281 Annotations: null, 282 Name: 'GRPCUseTLS', 283 New: 'false', 284 Old: 'false', 285 Type: 'None', 286 }, 287 { 288 Annotations: null, 289 Name: 'InitialStatus', 290 New: '', 291 Old: '', 292 Type: 'None', 293 }, 294 { 295 Annotations: null, 296 Name: 'Interval', 297 New: '15000000000', 298 Old: '10000000000', 299 Type: 'Edited', 300 }, 301 { Annotations: null, Name: 'Method', New: '', Old: '', Type: 'None' }, 302 { 303 Annotations: null, 304 Name: 'Name', 305 New: 'alive', 306 Old: 'alive', 307 Type: 'None', 308 }, 309 { Annotations: null, Name: 'Path', New: '', Old: '', Type: 'None' }, 310 { Annotations: null, Name: 'PortLabel', New: '', Old: '', Type: 'None' }, 311 { Annotations: null, Name: 'Protocol', New: '', Old: '', Type: 'None' }, 312 { 313 Annotations: null, 314 Name: 'TLSSkipVerify', 315 New: 'false', 316 Old: 'false', 317 Type: 'None', 318 }, 319 { 320 Annotations: null, 321 Name: 'Timeout', 322 New: '7000000000', 323 Old: '2000000000', 324 Type: 'Edited', 325 }, 326 { Annotations: null, Name: 'Type', New: 'tcp', Old: 'tcp', Type: 'None' }, 327 ], 328 Name: 'Check', 329 Objects: null, 330 Type: 'Edited', 331 }, 332 ], 333 Type: 'Edited', 334 }, 335 ], 336 Type: 'Edited', 337 }, 338 ], 339 Type: 'Edited', 340 Updates: null, 341 }, 342 { 343 Fields: [ 344 { Annotations: null, Name: 'Count', New: '1', Old: '', Type: 'Added' }, 345 { Annotations: null, Name: 'Meta[key]', New: 'value', Old: '', Type: 'Added' }, 346 { Annotations: null, Name: 'Meta[red]', New: 'fish', Old: '', Type: 'Added' }, 347 ], 348 Name: 'cache2', 349 Objects: [ 350 { 351 Fields: [ 352 { Annotations: null, Name: 'Attempts', New: '2', Old: '', Type: 'Added' }, 353 { Annotations: null, Name: 'Delay', New: '15000000000', Old: '', Type: 'Added' }, 354 { 355 Annotations: null, 356 Name: 'Interval', 357 New: '1800000000000', 358 Old: '', 359 Type: 'Added', 360 }, 361 { Annotations: null, Name: 'Mode', New: 'fail', Old: '', Type: 'Added' }, 362 ], 363 Name: 'RestartPolicy', 364 Objects: null, 365 Type: 'Added', 366 }, 367 { 368 Fields: [ 369 { Annotations: null, Name: 'Migrate', New: 'false', Old: '', Type: 'Added' }, 370 { Annotations: null, Name: 'SizeMB', New: '300', Old: '', Type: 'Added' }, 371 { Annotations: null, Name: 'Sticky', New: 'false', Old: '', Type: 'Added' }, 372 ], 373 Name: 'EphemeralDisk', 374 Objects: null, 375 Type: 'Added', 376 }, 377 ], 378 Tasks: [ 379 { 380 Annotations: null, 381 Fields: [ 382 { Annotations: null, Name: 'Driver', New: 'docker', Old: '', Type: 'Added' }, 383 { 384 Annotations: null, 385 Name: 'KillTimeout', 386 New: '5000000000', 387 Old: '', 388 Type: 'Added', 389 }, 390 { Annotations: null, Name: 'Leader', New: 'false', Old: '', Type: 'Added' }, 391 { Annotations: null, Name: 'ShutdownDelay', New: '0', Old: '', Type: 'Added' }, 392 ], 393 Name: 'redis', 394 Objects: [ 395 { 396 Fields: [ 397 { 398 Annotations: null, 399 Name: 'image', 400 New: 'redis:3.2', 401 Old: '', 402 Type: 'Added', 403 }, 404 { 405 Annotations: null, 406 Name: 'port_map[0][db]', 407 New: '6379', 408 Old: '', 409 Type: 'Added', 410 }, 411 ], 412 Name: 'Config', 413 Objects: null, 414 Type: 'Added', 415 }, 416 { 417 Fields: [ 418 { Annotations: null, Name: 'CPU', New: '500', Old: '', Type: 'Added' }, 419 { Annotations: null, Name: 'DiskMB', New: '0', Old: '', Type: 'Added' }, 420 { Annotations: null, Name: 'IOPS', New: '0', Old: '', Type: 'Added' }, 421 { Annotations: null, Name: 'MemoryMB', New: '256', Old: '', Type: 'Added' }, 422 ], 423 Name: 'Resources', 424 Objects: [ 425 { 426 Fields: [ 427 { Annotations: null, Name: 'MBits', New: '10', Old: '', Type: 'Added' }, 428 ], 429 Name: 'Network', 430 Objects: [ 431 { 432 Fields: [ 433 { 434 Annotations: null, 435 Name: 'Label', 436 New: 'db', 437 Old: '', 438 Type: 'Added', 439 }, 440 ], 441 Name: 'Dynamic Port', 442 Objects: null, 443 Type: 'Added', 444 }, 445 ], 446 Type: 'Added', 447 }, 448 ], 449 Type: 'Added', 450 }, 451 ], 452 Type: 'Added', 453 }, 454 ], 455 Type: 'Added', 456 Updates: null, 457 }, 458 ], 459 Type: 'Edited', 460 }, 461 }, 462 }; 463 }; 464 465 function generateDiff(changeset) { 466 return { 467 Fields: null, 468 ID: 'insertions-only', 469 Objects: null, 470 TaskGroups: [ 471 { 472 Fields: [{ Annotations: null, Name: 'Count', New: '2', Old: '2', Type: 'None' }], 473 Name: 'cache', 474 Objects: [ 475 { 476 Fields: changeset, 477 Name: 'RestartPolicy', 478 Objects: null, 479 Type: 'Edited', 480 }, 481 ], 482 Type: 'Edited', 483 Updates: null, 484 }, 485 ], 486 Type: 'Edited', 487 }; 488 }