github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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 <JobDiff @diff={{insertionsOnly}} /> 14 </div> 15 </div> 16 `, 17 context: { 18 insertionsOnly: generateDiff([ 19 { 20 Annotations: null, 21 Name: 'Attempts', 22 New: '15', 23 Old: '15', 24 Type: 'None', 25 }, 26 { 27 Annotations: null, 28 Name: 'Delay', 29 New: '25000000000', 30 Old: '', 31 Type: 'Added', 32 }, 33 { 34 Annotations: null, 35 Name: 'Interval', 36 New: '900000000000', 37 Old: '', 38 Type: 'Added', 39 }, 40 { 41 Annotations: null, 42 Name: 'Mode', 43 New: 'delay', 44 Old: 'delay', 45 Type: 'None', 46 }, 47 ]), 48 }, 49 }; 50 }; 51 52 export let DiffViewerWithDeletions = () => { 53 return { 54 template: hbs` 55 <h5 class="title is-5">Diff Viewer with deletions</h5> 56 <div class="boxed-section"> 57 <div class="boxed-section-body is-dark"> 58 <JobDiff @diff={{deletionsOnly}} /> 59 </div> 60 </div> 61 `, 62 context: { 63 deletionsOnly: generateDiff([ 64 { 65 Annotations: null, 66 Name: 'Attempts', 67 New: '15', 68 Old: '15', 69 Type: 'None', 70 }, 71 { 72 Annotations: null, 73 Name: 'Delay', 74 New: '25000000000', 75 Old: '25000000000', 76 Type: 'None', 77 }, 78 { 79 Annotations: null, 80 Name: 'Interval', 81 New: '900000000000', 82 Old: '900000000000', 83 Type: 'None', 84 }, 85 { 86 Annotations: null, 87 Name: 'Mode', 88 New: '', 89 Old: 'delay', 90 Type: 'Deleted', 91 }, 92 ]), 93 }, 94 }; 95 }; 96 97 export let DiffViewerWithEdits = () => { 98 return { 99 template: hbs` 100 <h5 class="title is-5">Diff Viewer with edits</h5> 101 <div class="boxed-section"> 102 <div class="boxed-section-body is-dark"> 103 <JobDiff @diff={{editsOnly}} /> 104 </div> 105 <p class="annotation">Often times a diff will only have a couple lines. Minor tweaks to a job spec result in small diffs.</p> 106 </div> 107 `, 108 context: { 109 editsOnly: generateDiff([ 110 { 111 Annotations: null, 112 Name: 'Attempts', 113 New: '15', 114 Old: '15', 115 Type: 'None', 116 }, 117 { 118 Annotations: null, 119 Name: 'Delay', 120 New: '25000000000', 121 Old: '25000000000', 122 Type: 'None', 123 }, 124 { 125 Annotations: null, 126 Name: 'Interval', 127 New: '900000000000', 128 Old: '250000000000', 129 Type: 'Edited', 130 }, 131 { 132 Annotations: null, 133 Name: 'Mode', 134 New: 'delay', 135 Old: 'delay', 136 Type: 'None', 137 }, 138 ]), 139 }, 140 }; 141 }; 142 143 export let DiffViewerWithManyChanges = () => { 144 return { 145 template: hbs` 146 <h5 class="title is-5">Diff Viewer with many changes</h5> 147 <div class="boxed-section"> 148 <div class="boxed-section-body is-dark"> 149 <JobDiff @diff={{largeDiff}} /> 150 </div> 151 </div> 152 `, 153 context: { 154 largeDiff: { 155 Fields: null, 156 ID: 'example', 157 Objects: null, 158 TaskGroups: [ 159 { 160 Fields: null, 161 Name: 'cache', 162 Objects: null, 163 Tasks: [ 164 { 165 Annotations: null, 166 Fields: [ 167 { 168 Annotations: null, 169 Name: 'Meta[one]', 170 New: "flew over the cuckoo's nest", 171 Old: '', 172 Type: 'Added', 173 }, 174 { 175 Annotations: null, 176 Name: 'Meta[two]', 177 New: 'birds on a wire', 178 Old: '', 179 Type: 'Added', 180 }, 181 ], 182 Name: 'redis', 183 Objects: [ 184 { 185 Fields: [ 186 { 187 Annotations: null, 188 Name: 'image', 189 New: 'redis:3.4', 190 Old: 'redis:7', 191 Type: 'Edited', 192 }, 193 { 194 Annotations: null, 195 Name: 'port_map[0][db]', 196 New: '6380', 197 Old: '6379', 198 Type: 'Edited', 199 }, 200 ], 201 Name: 'Config', 202 Objects: null, 203 Type: 'Edited', 204 }, 205 { 206 Fields: [ 207 { 208 Annotations: null, 209 Name: 'CPU', 210 New: '1000', 211 Old: '500', 212 Type: 'Edited', 213 }, 214 { 215 Annotations: null, 216 Name: 'DiskMB', 217 New: '0', 218 Old: '0', 219 Type: 'None', 220 }, 221 { 222 Annotations: null, 223 Name: 'IOPS', 224 New: '0', 225 Old: '0', 226 Type: 'None', 227 }, 228 { 229 Annotations: null, 230 Name: 'MemoryMB', 231 New: '512', 232 Old: '256', 233 Type: 'Edited', 234 }, 235 ], 236 Name: 'Resources', 237 Objects: [ 238 { 239 Fields: [ 240 { 241 Annotations: null, 242 Name: 'MBits', 243 New: '100', 244 Old: '', 245 Type: 'Added', 246 }, 247 ], 248 Name: 'Network', 249 Objects: [ 250 { 251 Fields: [ 252 { 253 Annotations: null, 254 Name: 'Label', 255 New: 'db', 256 Old: '', 257 Type: 'Added', 258 }, 259 ], 260 Name: 'Dynamic Port', 261 Objects: null, 262 Type: 'Added', 263 }, 264 ], 265 Type: 'Added', 266 }, 267 { 268 Fields: [ 269 { 270 Annotations: null, 271 Name: 'MBits', 272 New: '', 273 Old: '10', 274 Type: 'Deleted', 275 }, 276 ], 277 Name: 'Network', 278 Objects: [ 279 { 280 Fields: [ 281 { 282 Annotations: null, 283 Name: 'Label', 284 New: '', 285 Old: 'db', 286 Type: 'Deleted', 287 }, 288 ], 289 Name: 'Dynamic Port', 290 Objects: null, 291 Type: 'Deleted', 292 }, 293 ], 294 Type: 'Deleted', 295 }, 296 ], 297 Type: 'Edited', 298 }, 299 { 300 Fields: [ 301 { 302 Annotations: null, 303 Name: 'AddressMode', 304 New: 'auto', 305 Old: 'auto', 306 Type: 'None', 307 }, 308 { 309 Annotations: null, 310 Name: 'Name', 311 New: 'redis-cache', 312 Old: 'redis-cache', 313 Type: 'None', 314 }, 315 { 316 Annotations: null, 317 Name: 'PortLabel', 318 New: 'db', 319 Old: 'db', 320 Type: 'None', 321 }, 322 ], 323 Name: 'Service', 324 Objects: [ 325 { 326 Fields: [ 327 { 328 Annotations: null, 329 Name: 'Tags', 330 New: 'redis', 331 Old: '', 332 Type: 'Added', 333 }, 334 { 335 Annotations: null, 336 Name: 'Tags', 337 New: 'cache', 338 Old: 'cache', 339 Type: 'None', 340 }, 341 { 342 Annotations: null, 343 Name: 'Tags', 344 New: 'global', 345 Old: 'global', 346 Type: 'None', 347 }, 348 ], 349 Name: 'Tags', 350 Objects: null, 351 Type: 'Added', 352 }, 353 { 354 Fields: [ 355 { 356 Annotations: null, 357 Name: 'AddressMode', 358 New: '', 359 Old: '', 360 Type: 'None', 361 }, 362 { 363 Annotations: null, 364 Name: 'Command', 365 New: '', 366 Old: '', 367 Type: 'None', 368 }, 369 { 370 Annotations: null, 371 Name: 'GRPCService', 372 New: '', 373 Old: '', 374 Type: 'None', 375 }, 376 { 377 Annotations: null, 378 Name: 'GRPCUseTLS', 379 New: 'false', 380 Old: 'false', 381 Type: 'None', 382 }, 383 { 384 Annotations: null, 385 Name: 'InitialStatus', 386 New: '', 387 Old: '', 388 Type: 'None', 389 }, 390 { 391 Annotations: null, 392 Name: 'Interval', 393 New: '15000000000', 394 Old: '10000000000', 395 Type: 'Edited', 396 }, 397 { 398 Annotations: null, 399 Name: 'Method', 400 New: '', 401 Old: '', 402 Type: 'None', 403 }, 404 { 405 Annotations: null, 406 Name: 'Name', 407 New: 'alive', 408 Old: 'alive', 409 Type: 'None', 410 }, 411 { 412 Annotations: null, 413 Name: 'Path', 414 New: '', 415 Old: '', 416 Type: 'None', 417 }, 418 { 419 Annotations: null, 420 Name: 'PortLabel', 421 New: '', 422 Old: '', 423 Type: 'None', 424 }, 425 { 426 Annotations: null, 427 Name: 'Protocol', 428 New: '', 429 Old: '', 430 Type: 'None', 431 }, 432 { 433 Annotations: null, 434 Name: 'TLSSkipVerify', 435 New: 'false', 436 Old: 'false', 437 Type: 'None', 438 }, 439 { 440 Annotations: null, 441 Name: 'Timeout', 442 New: '7000000000', 443 Old: '2000000000', 444 Type: 'Edited', 445 }, 446 { 447 Annotations: null, 448 Name: 'Type', 449 New: 'tcp', 450 Old: 'tcp', 451 Type: 'None', 452 }, 453 ], 454 Name: 'Check', 455 Objects: null, 456 Type: 'Edited', 457 }, 458 ], 459 Type: 'Edited', 460 }, 461 ], 462 Type: 'Edited', 463 }, 464 ], 465 Type: 'Edited', 466 Updates: null, 467 }, 468 { 469 Fields: [ 470 { 471 Annotations: null, 472 Name: 'Count', 473 New: '1', 474 Old: '', 475 Type: 'Added', 476 }, 477 { 478 Annotations: null, 479 Name: 'Meta[key]', 480 New: 'value', 481 Old: '', 482 Type: 'Added', 483 }, 484 { 485 Annotations: null, 486 Name: 'Meta[red]', 487 New: 'fish', 488 Old: '', 489 Type: 'Added', 490 }, 491 ], 492 Name: 'cache2', 493 Objects: [ 494 { 495 Fields: [ 496 { 497 Annotations: null, 498 Name: 'Attempts', 499 New: '2', 500 Old: '', 501 Type: 'Added', 502 }, 503 { 504 Annotations: null, 505 Name: 'Delay', 506 New: '15000000000', 507 Old: '', 508 Type: 'Added', 509 }, 510 { 511 Annotations: null, 512 Name: 'Interval', 513 New: '1800000000000', 514 Old: '', 515 Type: 'Added', 516 }, 517 { 518 Annotations: null, 519 Name: 'Mode', 520 New: 'fail', 521 Old: '', 522 Type: 'Added', 523 }, 524 ], 525 Name: 'RestartPolicy', 526 Objects: null, 527 Type: 'Added', 528 }, 529 { 530 Fields: [ 531 { 532 Annotations: null, 533 Name: 'Migrate', 534 New: 'false', 535 Old: '', 536 Type: 'Added', 537 }, 538 { 539 Annotations: null, 540 Name: 'SizeMB', 541 New: '300', 542 Old: '', 543 Type: 'Added', 544 }, 545 { 546 Annotations: null, 547 Name: 'Sticky', 548 New: 'false', 549 Old: '', 550 Type: 'Added', 551 }, 552 ], 553 Name: 'EphemeralDisk', 554 Objects: null, 555 Type: 'Added', 556 }, 557 ], 558 Tasks: [ 559 { 560 Annotations: null, 561 Fields: [ 562 { 563 Annotations: null, 564 Name: 'Driver', 565 New: 'docker', 566 Old: '', 567 Type: 'Added', 568 }, 569 { 570 Annotations: null, 571 Name: 'KillTimeout', 572 New: '5000000000', 573 Old: '', 574 Type: 'Added', 575 }, 576 { 577 Annotations: null, 578 Name: 'Leader', 579 New: 'false', 580 Old: '', 581 Type: 'Added', 582 }, 583 { 584 Annotations: null, 585 Name: 'ShutdownDelay', 586 New: '0', 587 Old: '', 588 Type: 'Added', 589 }, 590 ], 591 Name: 'redis', 592 Objects: [ 593 { 594 Fields: [ 595 { 596 Annotations: null, 597 Name: 'image', 598 New: 'redis:7', 599 Old: '', 600 Type: 'Added', 601 }, 602 { 603 Annotations: null, 604 Name: 'port_map[0][db]', 605 New: '6379', 606 Old: '', 607 Type: 'Added', 608 }, 609 ], 610 Name: 'Config', 611 Objects: null, 612 Type: 'Added', 613 }, 614 { 615 Fields: [ 616 { 617 Annotations: null, 618 Name: 'CPU', 619 New: '500', 620 Old: '', 621 Type: 'Added', 622 }, 623 { 624 Annotations: null, 625 Name: 'DiskMB', 626 New: '0', 627 Old: '', 628 Type: 'Added', 629 }, 630 { 631 Annotations: null, 632 Name: 'IOPS', 633 New: '0', 634 Old: '', 635 Type: 'Added', 636 }, 637 { 638 Annotations: null, 639 Name: 'MemoryMB', 640 New: '256', 641 Old: '', 642 Type: 'Added', 643 }, 644 ], 645 Name: 'Resources', 646 Objects: [ 647 { 648 Fields: [ 649 { 650 Annotations: null, 651 Name: 'MBits', 652 New: '10', 653 Old: '', 654 Type: 'Added', 655 }, 656 ], 657 Name: 'Network', 658 Objects: [ 659 { 660 Fields: [ 661 { 662 Annotations: null, 663 Name: 'Label', 664 New: 'db', 665 Old: '', 666 Type: 'Added', 667 }, 668 ], 669 Name: 'Dynamic Port', 670 Objects: null, 671 Type: 'Added', 672 }, 673 ], 674 Type: 'Added', 675 }, 676 ], 677 Type: 'Added', 678 }, 679 ], 680 Type: 'Added', 681 }, 682 ], 683 Type: 'Added', 684 Updates: null, 685 }, 686 ], 687 Type: 'Edited', 688 }, 689 }, 690 }; 691 }; 692 693 function generateDiff(changeset) { 694 return { 695 Fields: null, 696 ID: 'insertions-only', 697 Objects: null, 698 TaskGroups: [ 699 { 700 Fields: [ 701 { 702 Annotations: null, 703 Name: 'Count', 704 New: '2', 705 Old: '2', 706 Type: 'None', 707 }, 708 ], 709 Name: 'cache', 710 Objects: [ 711 { 712 Fields: changeset, 713 Name: 'RestartPolicy', 714 Objects: null, 715 Type: 'Edited', 716 }, 717 ], 718 Type: 'Edited', 719 Updates: null, 720 }, 721 ], 722 Type: 'Edited', 723 }; 724 }