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  }