commit 78f94294f41ae7821f0f3b9ac469bd1343b140c8 · pdsls.dev/pdsls

+222 -88
src/views/logs.tsx
···

       13
       13
        
       export const PlcLogView = (props: { did: string }) => {

     

       14
       14
        
         const [activePlcEvent, setActivePlcEvent] = createSignal<PlcEvent | undefined>();

     

       15
       15
        
       

     

       16
       16
       +
         const shouldShowDiff = (diff: DiffEntry) =>

     

       17
       17
       +
           !activePlcEvent() || diff.type.startsWith(activePlcEvent()!);

     

       18
       18
       +
       

     

       19
       19
       +
         const shouldShowEntry = (diffs: DiffEntry[]) =>

     

       20
       20
       +
           !activePlcEvent() || diffs.some((d) => d.type.startsWith(activePlcEvent()!));

     

       21
       21
       +
       

     

       16
       22
        
         const fetchPlcLogs = async () => {

     

       17
       23
        
           const res = await fetch(

     

       18
       24
        
             `${localStorage.plcDirectory ?? "https://plc.directory"}/${props.did}/log/audit`,

     
···

       31
       37
        
         const [plcOps] =

     

       32
       38
        
           createResource<[IndexedEntry<CompatibleOperationOrTombstone>, DiffEntry[]][]>(fetchPlcLogs);

     

       33
       39
        
       

     

       34
       34
       -
         const FilterButton = (props: { icon: string; event: PlcEvent }) => (

     

       35
       35
       -
           <button

     

       36
       36
       -
             classList={{

     

       37
       37
       -
               "flex items-center rounded-full p-1.5": true,

     

       38
       38
       -
               "bg-neutral-700 dark:bg-neutral-200": activePlcEvent() === props.event,

     

       39
       39
       -
               "hover:bg-neutral-200 dark:hover:bg-neutral-700": activePlcEvent() !== props.event,

     

       40
       40
       -
             }}

     

       41
       41
       -
             onclick={() => setActivePlcEvent(activePlcEvent() === props.event ? undefined : props.event)}

     

       42
       42
       -
           >

     

       43
       43
       -
             <span

     

       44
       44
       -
               class={`${props.icon} ${activePlcEvent() === props.event ? "text-neutral-200 dark:text-neutral-900" : ""}`}

     

       45
       45
       -
             ></span>

     

       46
       46
       -
           </button>

     

       47
       47
       -
         );

     

       40
       40
       +
         const FilterButton = (props: { icon: string; event: PlcEvent; label: string }) => {

     

       41
       41
       +
           const isActive = () => activePlcEvent() === props.event;

     

       42
       42
       +
           const toggleFilter = () => setActivePlcEvent(isActive() ? undefined : props.event);

     

       43
       43
       +
       

     

       44
       44
       +
           return (

     

       45
       45
       +
             <button

     

       46
       46
       +
               classList={{

     

       47
       47
       +
                 "flex items-center gap-1 sm:gap-1.5 rounded-lg px-2 py-1.5 text-xs sm:text-sm transition-colors": true,

     

       48
       48
       +
                 "bg-neutral-700 text-white dark:bg-neutral-200 dark:text-neutral-900": isActive(),

     

       49
       49
       +
                 "bg-neutral-200 text-neutral-700 hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600":

     

       50
       50
       +
                   !isActive(),

     

       51
       51
       +
               }}

     

       52
       52
       +
               onclick={toggleFilter}

     

       53
       53
       +
             >

     

       54
       54
       +
               <span class={props.icon}></span>

     

       55
       55
       +
               <span class="font-medium">{props.label}</span>

     

       56
       56
       +
             </button>

     

       57
       57
       +
           );

     

       58
       58
       +
         };

     

       48
       59
        
       

     

       49
       60
        
         const DiffItem = (props: { diff: DiffEntry }) => {

     

       50
       61
        
           const diff = props.diff;

     

       51
       51
       -
           let title = "Unknown log entry";

     

       52
       52
       -
           let icon = "lucide--circle-help";

     

       53
       53
       -
           let value = "";

     

       54
       62
        
       

     

       55
       55
       -
           if (diff.type === "identity_created") {

     

       56
       56
       -
             icon = "lucide--bell";

     

       57
       57
       -
             title = `Identity created`;

     

       58
       58
       -
           } else if (diff.type === "identity_tombstoned") {

     

       59
       59
       -
             icon = "lucide--skull";

     

       60
       60
       -
             title = `Identity tombstoned`;

     

       61
       61
       -
           } else if (diff.type === "handle_added" || diff.type === "handle_removed") {

     

       62
       62
       -
             icon = "lucide--at-sign";

     

       63
       63
       -
             title = diff.type === "handle_added" ? "Alias added" : "Alias removed";

     

       64
       64
       -
             value = diff.handle;

     

       65
       65
       -
           } else if (diff.type === "handle_changed") {

     

       66
       66
       -
             icon = "lucide--at-sign";

     

       67
       67
       -
             title = "Alias updated";

     

       68
       68
       -
             value = `${diff.prev_handle} → ${diff.next_handle}`;

     

       69
       69
       -
           } else if (diff.type === "rotation_key_added" || diff.type === "rotation_key_removed") {

     

       70
       70
       -
             icon = "lucide--key-round";

     

       71
       71
       -
             title = diff.type === "rotation_key_added" ? "Rotation key added" : "Rotation key removed";

     

       72
       72
       -
             value = diff.rotation_key;

     

       73
       73
       -
           } else if (diff.type === "service_added" || diff.type === "service_removed") {

     

       74
       74
       -
             icon = "lucide--hard-drive";

     

       75
       75
       -
             title = `Service ${diff.service_id} ${diff.type === "service_added" ? "added" : "removed"}`;

     

       76
       76
       -
             value = `${diff.service_endpoint}`;

     

       77
       77
       -
           } else if (diff.type === "service_changed") {

     

       78
       78
       -
             icon = "lucide--hard-drive";

     

       79
       79
       -
             title = `Service ${diff.service_id} updated`;

     

       80
       80
       -
             value = `${diff.prev_service_endpoint} → ${diff.next_service_endpoint}`;

     

       81
       81
       -
           } else if (

     

       82
       82
       -
             diff.type === "verification_method_added" ||

     

       83
       83
       -
             diff.type === "verification_method_removed"

     

       84
       84
       -
           ) {

     

       85
       85
       -
             icon = "lucide--shield-check";

     

       86
       86
       -
             title = `Verification method ${diff.method_id} ${diff.type === "verification_method_added" ? "added" : "removed"}`;

     

       87
       87
       -
             value = `${diff.method_key}`;

     

       88
       88
       -
           } else if (diff.type === "verification_method_changed") {

     

       89
       89
       -
             icon = "lucide--shield-check";

     

       90
       90
       -
             title = `Verification method ${diff.method_id} updated`;

     

       91
       91
       -
             value = `${diff.prev_method_key} → ${diff.next_method_key}`;

     

       92
       92
       -
           }

     

       63
       63
       +
           const getDiffConfig = () => {

     

       64
       64
       +
             switch (diff.type) {

     

       65
       65
       +
               case "identity_created":

     

       66
       66
       +
                 return { icon: "lucide--bell", title: "Identity created" };

     

       67
       67
       +
               case "identity_tombstoned":

     

       68
       68
       +
                 return { icon: "lucide--skull", title: "Identity tombstoned" };

     

       69
       69
       +
               case "handle_added":

     

       70
       70
       +
                 return {

     

       71
       71
       +
                   icon: "lucide--at-sign",

     

       72
       72
       +
                   title: "Alias added",

     

       73
       73
       +
                   value: diff.handle,

     

       74
       74
       +
                   isAddition: true,

     

       75
       75
       +
                 };

     

       76
       76
       +
               case "handle_removed":

     

       77
       77
       +
                 return {

     

       78
       78
       +
                   icon: "lucide--at-sign",

     

       79
       79
       +
                   title: "Alias removed",

     

       80
       80
       +
                   value: diff.handle,

     

       81
       81
       +
                   isRemoval: true,

     

       82
       82
       +
                 };

     

       83
       83
       +
               case "handle_changed":

     

       84
       84
       +
                 return {

     

       85
       85
       +
                   icon: "lucide--at-sign",

     

       86
       86
       +
                   title: "Alias updated",

     

       87
       87
       +
                   oldValue: diff.prev_handle,

     

       88
       88
       +
                   newValue: diff.next_handle,

     

       89
       89
       +
                 };

     

       90
       90
       +
               case "rotation_key_added":

     

       91
       91
       +
                 return {

     

       92
       92
       +
                   icon: "lucide--key-round",

     

       93
       93
       +
                   title: "Rotation key added",

     

       94
       94
       +
                   value: diff.rotation_key,

     

       95
       95
       +
                   isAddition: true,

     

       96
       96
       +
                 };

     

       97
       97
       +
               case "rotation_key_removed":

     

       98
       98
       +
                 return {

     

       99
       99
       +
                   icon: "lucide--key-round",

     

       100
       100
       +
                   title: "Rotation key removed",

     

       101
       101
       +
                   value: diff.rotation_key,

     

       102
       102
       +
                   isRemoval: true,

     

       103
       103
       +
                 };

     

       104
       104
       +
               case "service_added":

     

       105
       105
       +
                 return {

     

       106
       106
       +
                   icon: "lucide--hard-drive",

     

       107
       107
       +
                   title: "Service added",

     

       108
       108
       +
                   badge: diff.service_id,

     

       109
       109
       +
                   value: diff.service_endpoint,

     

       110
       110
       +
                   isAddition: true,

     

       111
       111
       +
                 };

     

       112
       112
       +
               case "service_removed":

     

       113
       113
       +
                 return {

     

       114
       114
       +
                   icon: "lucide--hard-drive",

     

       115
       115
       +
                   title: "Service removed",

     

       116
       116
       +
                   badge: diff.service_id,

     

       117
       117
       +
                   value: diff.service_endpoint,

     

       118
       118
       +
                   isRemoval: true,

     

       119
       119
       +
                 };

     

       120
       120
       +
               case "service_changed":

     

       121
       121
       +
                 return {

     

       122
       122
       +
                   icon: "lucide--hard-drive",

     

       123
       123
       +
                   title: "Service updated",

     

       124
       124
       +
                   badge: diff.service_id,

     

       125
       125
       +
                   oldValue: diff.prev_service_endpoint,

     

       126
       126
       +
                   newValue: diff.next_service_endpoint,

     

       127
       127
       +
                 };

     

       128
       128
       +
               case "verification_method_added":

     

       129
       129
       +
                 return {

     

       130
       130
       +
                   icon: "lucide--shield-check",

     

       131
       131
       +
                   title: "Verification method added",

     

       132
       132
       +
                   badge: diff.method_id,

     

       133
       133
       +
                   value: diff.method_key,

     

       134
       134
       +
                   isAddition: true,

     

       135
       135
       +
                 };

     

       136
       136
       +
               case "verification_method_removed":

     

       137
       137
       +
                 return {

     

       138
       138
       +
                   icon: "lucide--shield-check",

     

       139
       139
       +
                   title: "Verification method removed",

     

       140
       140
       +
                   badge: diff.method_id,

     

       141
       141
       +
                   value: diff.method_key,

     

       142
       142
       +
                   isRemoval: true,

     

       143
       143
       +
                 };

     

       144
       144
       +
               case "verification_method_changed":

     

       145
       145
       +
                 return {

     

       146
       146
       +
                   icon: "lucide--shield-check",

     

       147
       147
       +
                   title: "Verification method updated",

     

       148
       148
       +
                   badge: diff.method_id,

     

       149
       149
       +
                   oldValue: diff.prev_method_key,

     

       150
       150
       +
                   newValue: diff.next_method_key,

     

       151
       151
       +
                 };

     

       152
       152
       +
               default:

     

       153
       153
       +
                 return { icon: "lucide--circle-help", title: "Unknown log entry" };

     

       154
       154
       +
             }

     

       155
       155
       +
           };

     

       156
       156
       +
       

     

       157
       157
       +
           const config = getDiffConfig();

     

       158
       158
       +
           const {

     

       159
       159
       +
             icon,

     

       160
       160
       +
             title,

     

       161
       161
       +
             value = "",

     

       162
       162
       +
             oldValue = "",

     

       163
       163
       +
             newValue = "",

     

       164
       164
       +
             badge = "",

     

       165
       165
       +
             isAddition = false,

     

       166
       166
       +
             isRemoval = false,

     

       167
       167
       +
           } = config;

     

       93
       168
        
       

     

       94
       169
        
           return (

     

       95
       95
       -
             <div class="grid grid-cols-[min-content_1fr] items-center gap-x-1">

     

       96
       96
       -
               <div class={icon + ` iconify shrink-0`} />

     

       97
       97
       -
               <p

     

       98
       98
       -
                 classList={{

     

       99
       99
       -
                   "font-semibold": true,

     

       100
       100
       -
                   "text-neutral-400 line-through dark:text-neutral-600": diff.orig.nullified,

     

       101
       101
       -
                 }}

     

       102
       102
       -
               >

     

       103
       103
       -
                 {title}

     

       104
       104
       -
               </p>

     

       105
       105
       -
               <div></div>

     

       106
       106
       -
               {value}

     

       170
       170
       +
             <div

     

       171
       171
       +
               classList={{

     

       172
       172
       +
                 "grid grid-cols-[auto_1fr] gap-x-2 gap-y-1": true,

     

       173
       173
       +
                 "opacity-60": diff.orig.nullified,

     

       174
       174
       +
               }}

     

       175
       175
       +
             >

     

       176
       176
       +
               <div class={`${icon} iconify shrink-0 self-center`} />

     

       177
       177
       +
               <div class="flex min-w-0 items-center gap-1.5">

     

       178
       178
       +
                 <p

     

       179
       179
       +
                   classList={{

     

       180
       180
       +
                     "font-semibold text-sm": true,

     

       181
       181
       +
                     "line-through": diff.orig.nullified,

     

       182
       182
       +
                   }}

     

       183
       183
       +
                 >

     

       184
       184
       +
                   {title}

     

       185
       185
       +
                 </p>

     

       186
       186
       +
                 <Show when={badge}>

     

       187
       187
       +
                   <span class="shrink-0 rounded bg-neutral-200 px-1.5 py-0.5 text-xs font-medium dark:bg-neutral-700">

     

       188
       188
       +
                     #{badge}

     

       189
       189
       +
                   </span>

     

       190
       190
       +
                 </Show>

     

       191
       191
       +
                 <Show when={diff.orig.nullified}>

     

       192
       192
       +
                   <span class="ml-auto rounded bg-neutral-200 px-2 py-0.5 text-xs font-medium dark:bg-neutral-700">

     

       193
       193
       +
                     Nullified

     

       194
       194
       +
                   </span>

     

       195
       195
       +
                 </Show>

     

       196
       196
       +
               </div>

     

       197
       197
       +
               <Show when={value}>

     

       198
       198
       +
                 <div></div>

     

       199
       199
       +
                 <div

     

       200
       200
       +
                   classList={{

     

       201
       201
       +
                     "text-sm break-all flex items-start gap-2 min-w-0": true,

     

       202
       202
       +
                     "text-green-600 dark:text-green-400": isAddition,

     

       203
       203
       +
                     "text-red-600 dark:text-red-400": isRemoval,

     

       204
       204
       +
                     "text-neutral-600 dark:text-neutral-400": !isAddition && !isRemoval,

     

       205
       205
       +
                   }}

     

       206
       206
       +
                 >

     

       207
       207
       +
                   <Show when={isAddition}>

     

       208
       208
       +
                     <span class="shrink-0">+</span>

     

       209
       209
       +
                   </Show>

     

       210
       210
       +
                   <Show when={isRemoval}>

     

       211
       211
       +
                     <span class="shrink-0">−</span>

     

       212
       212
       +
                   </Show>

     

       213
       213
       +
                   <span class="break-all">{value}</span>

     

       214
       214
       +
                 </div>

     

       215
       215
       +
               </Show>

     

       216
       216
       +
               <Show when={oldValue && newValue}>

     

       217
       217
       +
                 <div></div>

     

       218
       218
       +
                 <div class="flex min-w-0 flex-col gap-1 text-sm">

     

       219
       219
       +
                   <div class="flex items-start gap-2 text-red-600 dark:text-red-400">

     

       220
       220
       +
                     <span class="shrink-0">−</span>

     

       221
       221
       +
                     <span class="break-all">{oldValue}</span>

     

       222
       222
       +
                   </div>

     

       223
       223
       +
                   <div class="flex items-start gap-2 text-green-600 dark:text-green-400">

     

       224
       224
       +
                     <span class="shrink-0">+</span>

     

       225
       225
       +
                     <span class="break-all">{newValue}</span>

     

       226
       226
       +
                   </div>

     

       227
       227
       +
                 </div>

     

       228
       228
       +
               </Show>

     

       107
       229
        
             </div>

     

       108
       230
        
           );

     

       109
       231
        
         };

     

       110
       232
        
       

     

       111
       233
        
         return (

     

       112
       112
       -
           <div class="flex w-full flex-col gap-2 wrap-anywhere">

     

       113
       113
       -
             <div class="flex items-center gap-1">

     

       114
       114
       -
               <div class="iconify lucide--filter" />

     

       115
       115
       -
               <div class="dark:shadow-dark-700 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-xs dark:border-neutral-700">

     

       116
       116
       -
                 <FilterButton icon="iconify lucide--at-sign" event="handle" />

     

       117
       117
       -
                 <FilterButton icon="iconify lucide--key-round" event="rotation_key" />

     

       118
       118
       -
                 <FilterButton icon="iconify lucide--hard-drive" event="service" />

     

       119
       119
       -
                 <FilterButton icon="iconify lucide--shield-check" event="verification_method" />

     

       234
       234
       +
           <div class="flex w-full flex-col gap-4 wrap-anywhere">

     

       235
       235
       +
             <div class="flex flex-col gap-2">

     

       236
       236
       +
               <div class="flex items-center gap-1.5 text-sm">

     

       237
       237
       +
                 <div class="iconify lucide--filter" />

     

       238
       238
       +
                 <p class="font-semibold">Filter by type</p>

     

       239
       239
       +
               </div>

     

       240
       240
       +
               <div class="flex flex-wrap gap-1 sm:gap-2">

     

       241
       241
       +
                 <FilterButton icon="iconify lucide--at-sign" event="handle" label="Alias" />

     

       242
       242
       +
                 <FilterButton

     

       243
       243
       +
                   icon="iconify lucide--key-round"

     

       244
       244
       +
                   event="rotation_key"

     

       245
       245
       +
                   label="Rotation Key"

     

       246
       246
       +
                 />

     

       247
       247
       +
                 <FilterButton icon="iconify lucide--hard-drive" event="service" label="Service" />

     

       248
       248
       +
                 <FilterButton

     

       249
       249
       +
                   icon="iconify lucide--shield-check"

     

       250
       250
       +
                   event="verification_method"

     

       251
       251
       +
                   label="Verification"

     

       252
       252
       +
                 />

     

       120
       253
        
               </div>

     

       121
       254
        
             </div>

     

       122
       122
       -
             <div class="flex flex-col gap-1 text-sm">

     

       255
       255
       +
             <div class="flex flex-col gap-3">

     

       123
       256
        
               <For each={plcOps()}>

     

       124
       257
        
                 {([entry, diffs]) => (

     

       125
       125
       -
                   <Show

     

       126
       126
       -
                     when={!activePlcEvent() || diffs.find((d) => d.type.startsWith(activePlcEvent()!))}

     

       127
       127
       -
                   >

     

       128
       128
       -
                     <div class="flex flex-col">

     

       129
       129
       -
                       <span class="text-neutral-500 dark:text-neutral-400">

     

       130
       130
       -
                         {localDateFromTimestamp(new Date(entry.createdAt).getTime())}

     

       131
       131
       -
                       </span>

     

       132
       132
       -
                       {diffs.map((diff) => (

     

       133
       133
       -
                         <Show when={!activePlcEvent() || diff.type.startsWith(activePlcEvent()!)}>

     

       134
       134
       -
                           <DiffItem diff={diff} />

     

       135
       135
       -
                         </Show>

     

       136
       136
       -
                       ))}

     

       258
       258
       +
                   <Show when={shouldShowEntry(diffs)}>

     

       259
       259
       +
                     <div class="flex flex-col gap-2">

     

       260
       260
       +
                       <div class="flex items-center gap-2 text-sm">

     

       261
       261
       +
                         <div class="iconify lucide--clock text-neutral-600 dark:text-neutral-400" />

     

       262
       262
       +
                         <span class="font-medium text-neutral-700 dark:text-neutral-300">

     

       263
       263
       +
                           {localDateFromTimestamp(new Date(entry.createdAt).getTime())}

     

       264
       264
       +
                         </span>

     

       265
       265
       +
                       </div>

     

       266
       266
       +
                       <div class="flex flex-col gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 text-sm dark:border-neutral-700 dark:bg-neutral-800">

     

       267
       267
       +
                         <For each={diffs.filter(shouldShowDiff)}>

     

       268
       268
       +
                           {(diff) => <DiffItem diff={diff} />}

     

       269
       269
       +
                         </For>

     

       270
       270
       +
                       </div>

     

       137
       271
        
                     </div>

     

       138
       272
        
                   </Show>

     

       139
       273
        
                 )}