[FEATURE_REQUEST] Workspace Sidebar Width & Display Components

[JD2005L]

Is your feature request related to a problem? If so, please describe.

Some of my services are duplicate instances, so seeing only icons doesn't differentiate, as well status icons would be helpful.

Describe the solution you'd like

Allow sidebar width to be modifiable or selectable to visually include application titles, description, & status indicator.

Priority

Medium (Would be very useful)

Is this something you would be keen to implement

No

[liss-bot]

Welcome to Dashy 👋 It's great to have you here, but unfortunately your ticket has been closed to prevent spam and low quality issues. Please ensure the following criteria are met, before reopening this issue.

Issues are sometimes closed when users:

• Have only recently joined GitHub
• Have not yet stared this repository
• Have not previously interacted with the repo

Before you reopen this issue, please also ensure that:

• You have checked that a similar issue does not already exist
• You have checked the documentation for an existing solution
• You have completed the relevant sections in the Issue template

Once you have verified the above standards are met, you may reopen this issue.

[JD2005L]

I don't see anywhere to reopen the issue.

[Lissy93]

You should be able to do this by passing in custom CSS. An AFK at the moment, but if you're stuck, I could send you the params that you would need to set.

[JD2005L]

I did attempt to at least adjust the width via the custom CSS area, but anything I wrote in that box and attempted to save resulted in 'Error - Invalid CSS'. I don't find any documentation as to what sort of syntax should be entered here, as for example I'm attempting to write .side-bar {width:200px} and it's not allowing it. So any help with at least this would be wonderful, but can we include the title and status indicator via CSS as well?

[Lissy93]

Heya @JD2005L - I've made some changes to remove the CSS validation which was causing your issue, which is now merged.

[Lissy93]

And in terms of the status indicators, these are not supported currently on the workspace view, but you can probably add it with something like:

Import the component

import StatusIndicator from '@/components/LinkItems/StatusIndicator';

register the component

  components: {
    ...
    StatusIndicator,
  },

Use the component

<StatusIndicator
  class="status-indicator"
  v-if="enableStatusCheck"
  :statusSuccess="statusResponse ? statusResponse.successStatus : undefined"
  :statusText="statusResponse ? statusResponse.message : undefined"
/>

You'll also need to add a method to fetch the status for your service, you can do something like this, wrap it in a function, which then gets called in the mounted(){} hook.

axios.get(endpoint)
  .then((response) => {
    if (response.data) this.statusResponse = response.data;
  })
  .catch(() => { // Something went very wrong.
    this.statusResponse = {
    statusText: 'Failed to make request',
    statusSuccess: false,
  };
});

For info about the endpoint, see Status Indicators Docs, but it's basically https://[your-path-to-dashy]/status-check/?url=[encoded-url], and you can get and encode the URL for a given service using encodeURI(this.url).