|
| 1 | +# Improve readability of the console output |
| 2 | + |
| 3 | +To improve readability of the console output, Microsoft Graph Developer Proxy will implement a way to communicate the different types of messages that are output to console. |
| 4 | + |
| 5 | +## History |
| 6 | + |
| 7 | +| Version | Date | Comments | Author | |
| 8 | +| ------- | ---- | -------- | ------ | |
| 9 | +| 1.0 | 2023-01-13 | Initial specifications | @waldekmastykarz | |
| 10 | + |
| 11 | +## Console output |
| 12 | + |
| 13 | +### Logging levels |
| 14 | + |
| 15 | +The Proxy will support logging the following types of messages: |
| 16 | + |
| 17 | +- **intercepted request**, when the Proxy intercepts/sees a request |
| 18 | +- **passed through**, when the Proxy passes a request through to the API |
| 19 | +- **warning**, when the Proxy notices a potential issue in the request that may be affecting the application, such as lack of the `$select` query parameter on a GET request |
| 20 | +- **tip**, when the Proxy sees room for improvement, such as using a Graph SDK to simplify error handling |
| 21 | +- **failed**, when the Proxy forcefully stops the request due to an issue, such as the application not waiting long enough when throttled |
| 22 | +- **chaos**, when the Proxy uses its chaos engine, to randomly fail a request |
| 23 | +- **mocked**, when the Proxy responds to a request with a mock response |
| 24 | + |
| 25 | +These types of message will be expressed by the following enum: |
| 26 | + |
| 27 | +```cs |
| 28 | +enum MessageType |
| 29 | +{ |
| 30 | + Normal, |
| 31 | + InterceptedRequest, |
| 32 | + PassedThrough, |
| 33 | + Warning, |
| 34 | + Tip, |
| 35 | + Failed, |
| 36 | + Chaos, |
| 37 | + Mocked |
| 38 | +} |
| 39 | +``` |
| 40 | + |
| 41 | +The enum contains a `Normal` value, which is the default value and will be used for all messages that don't fit into any of the other categories. |
| 42 | + |
| 43 | +### Labels |
| 44 | + |
| 45 | +#### Label modes |
| 46 | + |
| 47 | +To improve readability of the console output, each request will be decorated with a label. Proxy will support three types of labels: textual, ASCII icons and [Nerd Font](https://www.nerdfonts.com/) icons. By default, the Proxy will use text labels. The type of labels is configurable in `appsettings.json` by changing the value of the `labelMode` property to either `text`, `icon` or `nerdFont`. |
| 48 | + |
| 49 | +Following is a list of types of messages and the corresponding text- and icon labels (Nerd Font icons are displayed in the [Hack Nerd Font](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.2.2/Hack.zip) font): |
| 50 | + |
| 51 | +Message type|Label|Icon|Nerd Font |
| 52 | +------------|-----|----|--------- |
| 53 | +`Normal`|`[ LOG ]`|` `| |
| 54 | +`InterceptedRequest`|`[ REQUEST ]`|`← ←`|<span style="font-family: 'Hack Nerd Font'"></span> (f441) |
| 55 | +`PassedThrough`|`[ API ]`|`↑ ↑`|<span style="font-family: 'Hack Nerd Font'"></span> (e33c) |
| 56 | +`Warning`|`[ WARNING ]`|`/!\`|<span style="font-family: 'Hack Nerd Font'"></span> (f421) |
| 57 | +`Tip`|`[ TIP ]`|`(i)`|<span style="font-family: 'Hack Nerd Font'">ﯦ</span> (fbe6) |
| 58 | +`Failed`|`[ FAIL ]`|`× →`|<span style="font-family: 'Hack Nerd Font'"></span> (f65b) |
| 59 | +`Chaos`|`[ CHAOS ]`|`! →`|<span style="font-family: 'Hack Nerd Font'"></span> (f188) |
| 60 | +`Mocked`|`[ MOCK ]`|`o →`|<span style="font-family: 'Hack Nerd Font'"></span> (f064) |
| 61 | + |
| 62 | +#### Label colors |
| 63 | + |
| 64 | +When using text labels, only the labels are colored. The log message is printed using the default console color. |
| 65 | + |
| 66 | +Following is the list of colors for each label: |
| 67 | + |
| 68 | +Message type|Background color|Foreground color|Example |
| 69 | +------------|----------------|----------------|------- |
| 70 | +`Normal`|`Default`|`Default`|[ LOG ] |
| 71 | +`InterceptedRequest`|`Default`|`Default`|[ REQUEST ] |
| 72 | +`PassedThrough`|`Gray`|`Black`|<span style="color: black; background: grey">[ API ]</span> |
| 73 | +`Warning`|`Yellow`|`Black`|<span style="color: black; background: yellow">[ WARNING ]</span> |
| 74 | +`Tip`|`Blue`|`White`|<span style="color: white; background: blue">[ TIP ]</span> |
| 75 | +`Failed`|`Red`|`White`|<span style="color: white; background: red">[ FAIL ]</span> |
| 76 | +`Chaos`|`DarkRed`|`White`|<span style="color: white; background: darkred">[ CHAOS ]</span> |
| 77 | +`Mocked`|`DarkYellow`|`Black`|<span style="color: black; background: orange">[ MOCK ]</span> |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | +#### ASCII icons colors |
| 82 | + |
| 83 | +When using ASCII icons, both icons and messages are colored. |
| 84 | + |
| 85 | +Following is the list of colors for each label: |
| 86 | + |
| 87 | +Message type|Foreground color|Example |
| 88 | +------------|----------------|------- |
| 89 | +`Normal`|`Default`| |
| 90 | +`InterceptedRequest`|`Default`|← ← |
| 91 | +`PassedThrough`|`Gray`|<span style="color: grey">↑ ↑</span> |
| 92 | +`Warning`|`Yellow`|<span style="color: yellow">/!\</span> |
| 93 | +`Tip`|`Blue`|<span style="color: blue">(i)</span> |
| 94 | +`Failed`|`Red`|<span style="color: red">! →</span> |
| 95 | +`Chaos`|`DarkRed`|<span style="color: darkred">× →</span> |
| 96 | +`Mocked`|`DarkYellow`|<span style="color: orange">o →</span> |
| 97 | + |
| 98 | + |
| 99 | + |
| 100 | +#### Nerd Font icons colors |
| 101 | + |
| 102 | +When using Nerd Font icons, both icons and messages are colored. |
| 103 | + |
| 104 | +Following is the list of colors for each label: |
| 105 | + |
| 106 | +Message type|Foreground color|Example |
| 107 | +------------|----------------|------- |
| 108 | +`Normal`|`Default`| |
| 109 | +`InterceptedRequest`|`Default`|<span style="font-family: 'Hack Nerd Font'"></span> (f441) |
| 110 | +`PassedThrough`|`Gray`|<span style="font-family: 'Hack Nerd Font'; color: grey"></span> (e33c) |
| 111 | +`Warning`|`Yellow`|<span style="font-family: 'Hack Nerd Font'; color: yellow"></span> (f421) |
| 112 | +`Tip`|`Blue`|<span style="font-family: 'Hack Nerd Font'; color: blue">ﯦ</span> (fbe6) |
| 113 | +`Failed`|`Red`|<span style="font-family: 'Hack Nerd Font'; color: red"></span> (f65b) |
| 114 | +`Chaos`|`DarkRed`|<span style="font-family: 'Hack Nerd Font'; color: darkred"></span> (f188) |
| 115 | +`Mocked`|`DarkYellow`|<span style="font-family: 'Hack Nerd Font'; color: orange"></span> (f064) |
| 116 | + |
| 117 | + |
| 118 | + |
| 119 | +### Message context |
| 120 | + |
| 121 | +Because messages can be printed out of band (ie. multiple messages about intercepted requests, followed by Proxy's response to each request), it's important to know which message is related to which request. To help with this, each message is suffixed with the request's method and URL. |
| 122 | + |
| 123 | +```text |
| 124 | +↑ ↑ ┌ passed through |
| 125 | + └ GET https://graph.microsoft.com/v1.0/me/joinedTeams |
| 126 | +``` |
| 127 | + |
| 128 | +### Multiline messages |
| 129 | + |
| 130 | +To improve readability, multiline messages will be visually grouped together, using boxes. The first and the last line of the message will be indicated with respectively top-left-, and bottom-left corner symbol. Middle lines of messages of 3 and more lines will be indicated with a | (pipe) symbol. |
| 131 | + |
| 132 | +```text |
| 133 | +↑ ↑ ┌ passed through |
| 134 | + └ GET https://graph.microsoft.com/v1.0/me/joinedTeams |
| 135 | +``` |
| 136 | + |
| 137 | +```text |
| 138 | +/!\ ┌ To improve performance of your application, use the $select parameter. |
| 139 | + │ More info at https://learn.microsoft.com/graph/query-parameters#select-parameter |
| 140 | + └ GET https://graph.microsoft.com/v1.0/me/joinedTeams |
| 141 | +``` |
| 142 | + |
| 143 | +## Logging method |
| 144 | + |
| 145 | +To support requirements listed above, and ensure consistent logging from the Proxy's core and its plugins, we'll implement a centralized method, that accepts an array of messages, the type of the message, and context information about the request: |
| 146 | + |
| 147 | +```cs |
| 148 | +interface LoggingContext { |
| 149 | + public SessionEventArgs RequestArgs { get; } |
| 150 | +} |
| 151 | + |
| 152 | +Log(string[] messages, MessageType messageType, LoggingContext: context = null): void |
| 153 | +``` |
0 commit comments