remote showall dialog

src/main.tsx

@@ -672,15 +672,54 @@ class TextAreaInput extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class InfoRemoteShowAll extends React.Component<{}, {}> {
+    clickRow(remoteId : string) : void {
+        GlobalCommandRunner.showRemote(remoteId);
+    }
+    
     render() {
         let inputModel = GlobalModel.inputModel;
         let infoMsg = inputModel.infoMsg.get();
         if (infoMsg == null || !infoMsg.remoteshowall) {
             return null;
         }
+        let remotes = GlobalModel.remotes ?? [];
+        let remote : RemoteType = null;
+        let idx : number = 0;
+        remotes = sortAndFilterRemotes(remotes);
         return (
             <div className="info-remote-showall">
-                showall
+                <table className="remotes-table">
+                    <thead>
+                        <tr>
+                            <th>status</th>
+                            <th>id</th>
+                            <th>alias</th>
+                            <th>user@host</th>
+                            <th>connectmode</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <For each="remote" of={remotes}>
+                            <tr key={remote.remoteid} onClick={() => this.clickRow(remote.remoteid)}>
+                                <td className="status-cell">
+                                    <div><RemoteStatusLight status={remote.status}/></div>
+                                </td>
+                                <td>
+                                    {remote.remoteid.substr(0, 8)}
+                                </td>
+                                <td>
+                                    {isBlank(remote.remotealias) ? "-" : remote.remotealias}
+                                </td>
+                                <td>
+                                    {remote.remotecanonicalname}
+                                </td>
+                                <td>
+                                    {remote.connectmode}
+                                </td>
+                            </tr>
+                        </For>
+                    </tbody>
+                </table>
             </div>
         );
     }
@@ -856,7 +895,7 @@ class InfoRemoteShow extends React.Component<{}, {}> {
 class InfoRemoteEdit extends React.Component<{}, {}> {
     alias : mobx.IObservableValue<string>;
     hostName : mobx.IObservableValue<string>;
-    userName : mobx.IObservableValue<string>;
+    keyStr : mobx.IObservableValue<string>;
     portStr : mobx.IObservableValue<string>;
     colorStr : mobx.IObservableValue<string>;
     connectMode : mobx.IObservableValue<string>;
@@ -871,7 +910,7 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
     resetForm() {
         this.alias = mobx.observable.box("");
         this.hostName = mobx.observable.box("");
-        this.userName = mobx.observable.box("");
+        this.keyStr = mobx.observable.box("");
         this.portStr = mobx.observable.box("22");
         this.colorStr = mobx.observable.box("");
         this.connectMode = mobx.observable.box("startup");
@@ -881,7 +920,7 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
 
     @boundMethod
     doCreateRemote() {
-        let cname = this.userName.get() + "@" + this.hostName.get();
+        let cname = this.hostName.get();
         let kwargs : Record<string, string> = {};
         if (this.alias.get() != "") {
             kwargs["alias"] = this.alias.get();
@@ -895,6 +934,9 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
         if (this.colorStr.get() != "") {
             kwargs["color"] = this.colorStr.get();
         }
+        if (this.keyStr.get() != "") {
+            kwargs["key"] = this.keyStr.get();
+        }
         kwargs["connectmode"] = this.connectMode.get();
         if (!this.autoInstallBool.get()) {
             kwargs["autoinstall"] = "0";
@@ -904,7 +946,6 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
         console.log("create remote", cname, kwargs);
         mobx.action(() => {
             GlobalCommandRunner.createRemote(cname, kwargs);
-            this.resetForm();
         })();
     }
 
@@ -945,9 +986,9 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    onChangeUserName(e : any) {
+    onChangeKeyStr(e : any) {
         mobx.action(() => {
-            this.userName.set(e.target.value);
+            this.keyStr.set(e.target.value);
         })();
     }
 
@@ -991,6 +1032,13 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
         })();
     }
 
+    remoteCName() : string {
+        if (this.hostName.get() == "") {
+            return "[no host]";
+        }
+        return this.hostName.get();
+    }
+
     render() {
         let inputModel = GlobalModel.inputModel;
         let infoMsg = inputModel.infoMsg.get();
@@ -1013,7 +1061,7 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
             <form className="info-remote">
                 <div className="info-title">
                     <If condition={isBlank(redit.remoteid)}>
-                        add new remote
+                        add new remote '{this.remoteCName()}'
                     </If>
                     <If condition={!isBlank(redit.remoteid)}>
                         edit remote
@@ -1032,15 +1080,15 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
                     </div>
                 </div>
                 <div className="remote-input-field">
-                    <div className="remote-field-label">hostname</div>
+                    <div className="remote-field-label">user@host</div>
                     <div className="remote-field-control text-input">
                         <input type="text" onChange={this.onChangeHostName} value={this.hostName.get()}/>
                     </div>
                 </div>
                 <div className="remote-input-field">
-                    <div className="remote-field-label">username</div>
+                    <div className="remote-field-label">ssh keyfile</div>
                     <div className="remote-field-control text-input">
-                        <input type="text" onChange={this.onChangeUserName} value={this.userName.get()}/>
+                        <input type="text" onChange={this.onChangeKeyStr} value={this.keyStr.get()}/>
                     </div>
                 </div>
                 <div className="remote-input-field">
@@ -1049,7 +1097,7 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
                         <input type="number" placeholder="22" onChange={this.onChangePortStr} value={this.portStr.get()}/>
                     </div>
                 </div>
-                <div className="remote-input-field">
+                <div className="remote-input-field" style={{display: "none"}}>
                     <div className="remote-field-label">sudo</div>
                     <div className="remote-field-control checkbox-input">
                         <input type="checkbox" onChange={this.onChangeSudo} checked={this.sudoBool.get()}/>
@@ -1082,6 +1130,16 @@ class InfoRemoteEdit extends React.Component<{}, {}> {
                         </select>
                     </div>
                 </div>
+                <If condition={!isBlank(redit.errorstr)}>
+                    <div className="info-error">
+                        {redit.errorstr}
+                    </div>
+                </If>
+                <If condition={!isBlank(redit.infostr)}>
+                    <div className="info-msg">
+                        {redit.infostr}
+                    </div>
+                </If>
                 <div style={{marginTop: 15, marginBottom: 10}} className="remote-input-field">
                     <a tabIndex={0} style={{marginRight: 20}} onClick={this.doCreateRemote} onKeyDown={this.keyDownCreateRemote} className="text-button success-button">[create remote]</a>
                     {"|"}
@@ -1139,7 +1197,9 @@ class InfoMsg extends React.Component<{}, {}> {
                         </For>
                     </div>
                 </If>
-                <InfoRemoteEdit key="inforemoteedit"/>
+                <If condition={infoMsg && infoMsg.remoteedit}>
+                    <InfoRemoteEdit key="inforemoteedit"/>
+                </If>
                 <InfoRemoteShow key="inforemoteshow"/>
                 <InfoRemoteShowAll key="inforemoteshowall"/>
                 <If condition={infoMsg && infoMsg.infocomps != null && infoMsg.infocomps.length > 0}>
@@ -1720,9 +1780,7 @@ class MainSideBar extends React.Component<{}, {}> {
     }
 
     clickRemotes() {
-        mobx.action(() => {
-            GlobalModel.remotesModalOpen.set(true);
-        })();
+        GlobalCommandRunner.showAllRemotes();
     }
 
     remoteDisplayName(remote : RemoteType) : any {

src/model.ts

@@ -1868,6 +1868,10 @@ class CommandRunner {
         GlobalModel.submitCommand("remote", "show", null, {"nohist": "1", "remote": remoteid}, true);
     }
 
+    showAllRemotes() {
+        GlobalModel.submitCommand("remote", "showall", null, {"nohist": "1"}, true);
+    }
+
     connectRemote(remoteid : string) {
         GlobalModel.submitCommand("remote", "connect", null, {"nohist": "1", "remote": remoteid}, true);
     }

src/sh2.less

@@ -28,6 +28,8 @@
 @tab-black-text: #333;
 @tab-white-text: #d7d7d7;
 
+@soft-blue: #729fcf;
+
 .mono-font(@size: inherit, @weight: inherit) {
     font-family: 'JetBrains Mono', monospace;
     font-size: @size;
@@ -510,11 +512,11 @@ html, body, #main {
         }
 
         &.status-running {
-            background-color: #729fcf;
+            background-color: @soft-blue;
         }
 
         &.status-detached {
-            background-color: #729fcf;
+            background-color: @soft-blue;
             .status-icon {
                 top: 3px;
                 right: 3px;
@@ -530,7 +532,7 @@ html, body, #main {
         margin-top: -4px;
         
         .user {
-            color: lighten(#729fcf, 10%);
+            color: lighten(@soft-blue, 10%);
             font-weight: bold;
             margin-top: 1px;
             margin-right: 10px;
@@ -720,7 +722,7 @@ body .xterm .xterm-viewport {
             left: 20px;
             background-color: black;
             .mono-font(12px, 600);
-            color: #729fcf;
+            color: @soft-blue;
             padding-bottom: 4px;
             display: flex;
             flex-direction: row;
@@ -800,19 +802,19 @@ body .xterm .xterm-viewport {
         
         .info-msg {
             .mono-font(14px, 400);
-            color: #729fcf;
+            color: @soft-blue;
             padding-bottom: 2px;
         }
 
         .info-title {
             .mono-font(14px, 600);
-            color: #729fcf;
+            color: @soft-blue;
             padding-bottom: 2px;
         }
 
         .info-lines {
             .mono-font(12px);
-            color: #d3d7cf;
+            color: @term-white;
             white-space: pre;
             padding-bottom: 6px;
         }
@@ -825,20 +827,45 @@ body .xterm .xterm-viewport {
             
             .info-comp {
                 min-width: 200px;
-                color: #d3d7cf;
+                color: @term-white;
             }
 
             .metacmd-comp {
-                color: #8ae234;
+                color: @term-bright-green;
             }
         }
 
         .info-error {
             .mono-font(14px, 600);
-            color: #cc0000;
+            color: @term-red;
             padding-bottom: 2px;
         }
 
+        .info-remote-showall {
+            table.remotes-table {
+                th {
+                    color: white;
+                    font-weight: bold;
+                }
+                
+                th, td {
+                    padding: 3px 8px 3px 8px;
+                }
+
+                td {
+                    cursor: pointer;
+                }
+
+                td.status-cell {
+                    text-align: center;
+                }
+
+                tr:hover td {
+                    background-color: #333;
+                }
+            }
+        }
+
         .info-remote {
             color: #d3d7cf;
             .mono-font(12px);
@@ -848,6 +875,11 @@ body .xterm .xterm-viewport {
                 color: @term-cyan;
             }
 
+            .info-error, .info-msg {
+                margin-top: 5px;
+                padding: 5px;
+            }
+
             .remote-field {
                 display: flex;
                 flex-direction: row;

src/types.ts

@@ -284,6 +284,7 @@ type RemoteEditType = {
     remoteedit : boolean,
     remoteid? : string,
     errorstr? : string,
+    infostr? : string,
 };
 
 type InfoType = {