refactor: 💡 move sidebar into session details tab (#1892)
✅ Closes: ICU-10961
This commit is contained in:
Cameron Perera authored and 
Zhihe Li committed
1 parent
1f3689ffdf
commit
1102c94875
2 files changed
+112
-104
No files matched your search
@@ -1,29 +1,119 @@
|
||||
{{!
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
}}
|
||||
|
||||
<Hds::Tabs as |T|>
|
||||
<T.Tab>{{t 'titles.details'}} </T.Tab>
|
||||
<T.Tab @icon='terminal' {{on 'click' this.openTerminal}}>
|
||||
{{t 'resources.session.shell'}}
|
||||
</T.Tab>
|
||||
<T.Panel>
|
||||
{{#if (and @model.proxy_address @model.proxy_port)}}
|
||||
<Session::ProxyUrl
|
||||
@proxyAddress={{@model.proxy_address}}
|
||||
@proxyPort={{@model.proxy_port}}
|
||||
@isSSHTarget={{@model.target.isSSH}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{#if @model.credentials}}
|
||||
<CredentialsPanel @credentials={{@model.credentials}} />
|
||||
{{else}}
|
||||
<Hds::ApplicationState data-test-no-credentials as |A|>
|
||||
<A.Header @title={{t 'resources.session.messages.connected.title'}} />
|
||||
<A.Body
|
||||
@text={{t
|
||||
'resources.session.messages.connected.description'
|
||||
targetDisplayName=@model.target.displayName
|
||||
}}
|
||||
/>
|
||||
</Hds::ApplicationState>
|
||||
{{/if}}</T.Panel>
|
||||
<Rose::Layout::BodyContent as |bc|>
|
||||
<bc.Body>
|
||||
{{#if (and @model.proxy_address @model.proxy_port)}}
|
||||
<Session::ProxyUrl
|
||||
@proxyAddress={{@model.proxy_address}}
|
||||
@proxyPort={{@model.proxy_port}}
|
||||
@isSSHTarget={{@model.target.isSSH}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{#if @model.credentials}}
|
||||
<CredentialsPanel @credentials={{@model.credentials}} />
|
||||
{{else}}
|
||||
<Hds::ApplicationState data-test-no-credentials as |A|>
|
||||
<A.Header
|
||||
@title={{t 'resources.session.messages.connected.title'}}
|
||||
/>
|
||||
<A.Body
|
||||
@text={{t
|
||||
'resources.session.messages.connected.description'
|
||||
targetDisplayName=@model.target.displayName
|
||||
}}
|
||||
/>
|
||||
</Hds::ApplicationState>
|
||||
{{/if}}
|
||||
</bc.Body>
|
||||
<bc.Sidebar>
|
||||
<div class='details-sidebar'>
|
||||
{{#if @model.host}}
|
||||
<div>
|
||||
<div
|
||||
class='title hds-typography-display-200 hds-font-weight-semibold'
|
||||
>
|
||||
{{t 'resources.host.details'}}
|
||||
</div>
|
||||
<Rose::MetadataList @orientation='vertical' as |list|>
|
||||
{{! Host name }}
|
||||
{{#if @model.host.name}}
|
||||
<list.Item @icon='network-alt' @color='faint'>
|
||||
{{@model.host.name}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Host description }}
|
||||
{{#if @model.host.description}}
|
||||
<list.Item @icon='message-circle-fill' @color='faint'>
|
||||
{{@model.host.description}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Host ID }}
|
||||
<list.Item @icon='hash' @color='faint'>
|
||||
<Copyable
|
||||
@text={{@model.host.id}}
|
||||
@buttonText={{t 'actions.copy-to-clipboard'}}
|
||||
@acknowledgeText={{t 'states.copied'}}
|
||||
>
|
||||
{{@model.host.id}}
|
||||
</Copyable>
|
||||
</list.Item>
|
||||
</Rose::MetadataList>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div>
|
||||
<div
|
||||
class='title hds-typography-display-200 hds-font-weight-semibold'
|
||||
>
|
||||
{{t 'resources.target.details'}}
|
||||
</div>
|
||||
<Rose::MetadataList @orientation='vertical' as |list|>
|
||||
{{! Target name }}
|
||||
<list.Item @icon='target' @color='faint'>
|
||||
{{@model.target.name}}
|
||||
</list.Item>
|
||||
{{! Project name }}
|
||||
<list.Item @icon='grid' @color='faint'>
|
||||
{{@model.target.project.displayName}}
|
||||
</list.Item>
|
||||
{{! Target description }}
|
||||
{{#if @model.target.description}}
|
||||
<list.Item @icon='message-circle-fill' @color='faint'>
|
||||
{{@model.target.description}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Target type }}
|
||||
<list.Item class='resource-type' @icon='terminal' @color='faint'>
|
||||
{{#if @model.target.isSSH}}
|
||||
{{t 'resources.target.types.ssh'}}
|
||||
{{else}}
|
||||
{{t 'resources.target.types.tcp'}}
|
||||
{{/if}}
|
||||
</list.Item>
|
||||
{{! Target ID }}
|
||||
<list.Item @icon='hash' @color='faint'>
|
||||
<Copyable
|
||||
@text={{@model.target.id}}
|
||||
@buttonText={{t 'actions.copy-to-clipboard'}}
|
||||
@acknowledgeText={{t 'states.copied'}}
|
||||
>
|
||||
{{@model.target.id}}
|
||||
</Copyable>
|
||||
</list.Item>
|
||||
</Rose::MetadataList>
|
||||
</div>
|
||||
</div>
|
||||
</bc.Sidebar>
|
||||
</Rose::Layout::BodyContent>
|
||||
</T.Panel>
|
||||
<T.Panel>
|
||||
<div id='terminal-container'></div>
|
||||
</T.Panel>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
Copyright (c) HashiCorp, Inc.
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
}}
|
||||
|
||||
{{page-title @model.displayName}}
|
||||
|
||||
<Rose::Layout::Page as |page|>
|
||||
@@ -25,90 +26,7 @@
|
||||
</page.actions>
|
||||
|
||||
<page.body class='details-screen-body'>
|
||||
|
||||
<Rose::Layout::BodyContent as |bc|>
|
||||
<bc.Body>
|
||||
<Session::Tabs @model={{@model}} />
|
||||
</bc.Body>
|
||||
<bc.Sidebar>
|
||||
<div class='details-sidebar'>
|
||||
{{#if @model.host}}
|
||||
<div>
|
||||
<div
|
||||
class='title hds-typography-display-200 hds-font-weight-semibold'
|
||||
>
|
||||
{{t 'resources.host.details'}}
|
||||
</div>
|
||||
<Rose::MetadataList @orientation='vertical' as |list|>
|
||||
{{! Host name }}
|
||||
{{#if @model.host.name}}
|
||||
<list.Item @icon='network-alt' @color='faint'>
|
||||
{{@model.host.name}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Host description }}
|
||||
{{#if @model.host.description}}
|
||||
<list.Item @icon='message-circle-fill' @color='faint'>
|
||||
{{@model.host.description}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Host ID }}
|
||||
<list.Item @icon='hash' @color='faint'>
|
||||
<Copyable
|
||||
@text={{@model.host.id}}
|
||||
@buttonText={{t 'actions.copy-to-clipboard'}}
|
||||
@acknowledgeText={{t 'states.copied'}}
|
||||
>
|
||||
{{@model.host.id}}
|
||||
</Copyable>
|
||||
</list.Item>
|
||||
</Rose::MetadataList>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div>
|
||||
<div
|
||||
class='title hds-typography-display-200 hds-font-weight-semibold'
|
||||
>
|
||||
{{t 'resources.target.details'}}
|
||||
</div>
|
||||
<Rose::MetadataList @orientation='vertical' as |list|>
|
||||
{{! Target name }}
|
||||
<list.Item @icon='target' @color='faint'>
|
||||
{{@model.target.name}}
|
||||
</list.Item>
|
||||
{{! Project name }}
|
||||
<list.Item @icon='grid' @color='faint'>
|
||||
{{@model.target.project.displayName}}
|
||||
</list.Item>
|
||||
{{! Target description }}
|
||||
{{#if @model.target.description}}
|
||||
<list.Item @icon='message-circle-fill' @color='faint'>
|
||||
{{@model.target.description}}
|
||||
</list.Item>
|
||||
{{/if}}
|
||||
{{! Target type }}
|
||||
<list.Item class='resource-type' @icon='terminal' @color='faint'>
|
||||
{{#if @model.target.isSSH}}
|
||||
{{t 'resources.target.types.ssh'}}
|
||||
{{else}}
|
||||
{{t 'resources.target.types.tcp'}}
|
||||
{{/if}}
|
||||
</list.Item>
|
||||
{{! Target ID }}
|
||||
<list.Item @icon='hash' @color='faint'>
|
||||
<Copyable
|
||||
@text={{@model.target.id}}
|
||||
@buttonText={{t 'actions.copy-to-clipboard'}}
|
||||
@acknowledgeText={{t 'states.copied'}}
|
||||
>
|
||||
{{@model.target.id}}
|
||||
</Copyable>
|
||||
</list.Item>
|
||||
</Rose::MetadataList>
|
||||
</div>
|
||||
</div>
|
||||
</bc.Sidebar>
|
||||
</Rose::Layout::BodyContent>
|
||||
<Session::Tabs @model={{@model}} />
|
||||
</page.body>
|
||||
|
||||
</Rose::Layout::Page>
|
||||
Reference in new issue
Block a user