Add agent metadata statusbar to monitor resource usage #555
Conversation
src/remote.ts
Outdated
| this.storage.writeToCoderOutputChannel( | ||
| formatMetadataError(agentWatcher.error), | ||
| ); | ||
| statusBarItem.hide(); |
There was a problem hiding this comment.
Would it make sense to show the error here? Or just a warning icon or something with the error in the tooltip maybe?
There was a problem hiding this comment.
Hmmm tbh I am not entirely sure how frequent an error like this can happen.
If we show an error, it could be annoying if it keeps popping up frequently. Perhaps adding an error icon with some label and the tooltip can include the error message is good (while still logging of course). Though I don't love having a "useless" status bar item since the status bar is already crowded 🤔
Which is why I favor the current approach, what do you think?
There was a problem hiding this comment.
My thinking is that if we think it is important enough to show metadata in the status bar, it is important enough to show errors getting that metadata.
Definitely agree there should be no popups or anything like that, that would be super annoying.
Thinking about it from the original request, the user wanted to be able to see disk space in the status bar. Suppose one day there was an error and we could not fetch the metadata, likely the user wants to be aware of that (I am projecting of course lol)
There was a problem hiding this comment.
Hmmm yeah I see your point now. In that case, I think I can show the something like a warning logo with a label then when hovering we show the error details (the same one that is logged). We can even change the background color so it's yellow-ish for example.
So my proposal is something like
statusBarItem.text = "$(warning) Agent Status Unavailable";
statusBarItem.tooltip = errMessage;
statusBarItem.color = new vscode.ThemeColor(
"statusBarItem.warningForeground",
);
statusBarItem.backgroundColor = new vscode.ThemeColor(
"statusBarItem.warningBackground",
);
|
One extra improvement here is that we can use Coders icon right next to the text. This would require creating a custom font with all the extensions logos in it so might be out of scope here 🤔 For example the Git extension adds this which gives context to what the text after it means: 
-- Currently in this PR, it just shows whatever the first item is which is not intuitive for users to recognize as being related to Coder |
|
This is just using the logo SVG: 
It seems a bit big tbh, maybe the |
|
I prefer the no logo, or if we can make the logo smaller, such as 70% of its original size. |
Agreed, the logo is a bit too big, here's how it looks if the logo is scaled down to 60% of its original size: 
Ideally there should be a more "square" form of the Coder logo that would fit the VS Code environment more. Here it just means that the logo is made smaller and so there are invisible spaces around it. For example, if you point to the left of it you get the hover due to the invisible padding: 
|
|
@rachelmullenax can we have a square logo for use cases like this? |
|
I wonder if some generic icon indicating a remote resource would work better than the logo? Like a cloud icon or something. |
I think this could work well since the VS Code codions fit well within the ecosystem. 
The only worry here is that just having an icon won't give enough of an indication that this is |
EhabY
force-pushed
the
add-agent-metadata-statusbar
branch
from
39c307d to
f5c8b9f
Compare
#191
Looks like the following:
The statusbar creation happens in
remote.ts#setupwhich AFAIK seems to be called only once per session/extension activation. The creation of this statusbar happens at the very end when everything goes smoothly.