feat: Improve web-ui for listing of repositories

src/main/java/com/artipie/front/Service.java

@@ -137,6 +137,19 @@ void start(final int port, final String rest) {
                 );
             }
         );
+        this.ignite.path(
+            "/signout",
+            () -> {
+                this.ignite.get(
+                    "",
+                    (req, rsp) -> {
+                        req.session().invalidate();
+                        rsp.redirect("/dashboard");
+                        return "Ok";
+                    }
+                );
+            }
+        );
         this.ignite.path(
             "/api",
             () -> {

src/main/java/com/artipie/front/rest/RepositoryService.java

@@ -74,6 +74,16 @@ public List<String> list(final String token, final String uname) {
      * @return Repository content.
      */
     public String repo(final String token, final RepositoryName rname) {
+        return this.repo(token, rname.toString());
+    }
+
+    /**
+     * Obtain repository content.
+     * @param token Token.
+     * @param rname Repository name.
+     * @return Repository content.
+     */
+    public String repo(final String token, final String rname) {
         return BaseService.handle(
             this.httpGet(
                 Optional.of(token),

src/main/java/com/artipie/front/rest/SettingsService.java

@@ -7,6 +7,7 @@
 import com.artipie.front.Layout;
 import java.util.Optional;
 import java.util.concurrent.atomic.AtomicReference;
+import java.util.function.Function;
 import javax.json.JsonObject;
 
 /**
@@ -15,11 +16,22 @@
  * @since 1.0
  */
 public class SettingsService extends BaseService {
+    /**
+     * Path to port rest-api.
+     */
+    private static final String PORT_PATH = "/api/v1/settings/port";
+
     /**
      * Path to layout rest-api.
      */
     private static final String LAYOUT_PATH = "/api/v1/settings/layout";
 
+    /**
+     * Port.
+     */
+    @SuppressWarnings("PMD.AvoidFieldNameMatchingMethodName")
+    private final AtomicReference<Integer> port;
+
     /**
      * Layout.
      */
@@ -32,24 +44,54 @@ public class SettingsService extends BaseService {
      */
     public SettingsService(final String rest) {
         super(rest);
+        this.port = new AtomicReference<>();
         this.layout = new AtomicReference<>();
     }
 
+    /**
+     * Obtain Artipie layout.
+     * @return Artipie layout
+     */
+    public int port() {
+        return this.value(
+            this.port,
+            SettingsService.PORT_PATH,
+            json -> json.getInt("port")
+        );
+    }
+
     /**
      * Obtain Artipie layout.
      * @return Artipie layout
      */
     public Layout layout() {
-        if (this.layout.get() == null) {
-            final Layout value = BaseService.handle(
-                this.httpGet(Optional.empty(), SettingsService.LAYOUT_PATH),
+        return this.value(
+            this.layout,
+            SettingsService.LAYOUT_PATH,
+            json -> Layout.byName(json.getString("layout"))
+        );
+    }
+
+    /**
+     * Obtain Artipie setting's value.
+     * @param ref Reference to setting value
+     * @param path Path to rest service
+     * @param handler Handler of json content
+     * @param <T> Resulting type of handler
+     * @return Artipie layout
+     */
+    private <T> T value(final AtomicReference<T> ref, final String path,
+        final Function<JsonObject, T> handler) {
+        if (ref.get() == null) {
+            final T value = BaseService.handle(
+                this.httpGet(Optional.empty(), path),
                 res -> {
                     final JsonObject json = BaseService.jsonObject(res);
-                    return Layout.byName(json.getString("layout"));
+                    return handler.apply(json);
                 }
             );
-            this.layout.compareAndSet(null, value);
+            ref.compareAndSet(null, value);
         }
-        return this.layout.get();
+        return ref.get();
     }
 }

src/main/java/com/artipie/front/ui/repository/RepoList.java

@@ -4,13 +4,18 @@
  */
 package com.artipie.front.ui.repository;
 
+import com.amihaiemil.eoyaml.Yaml;
+import com.amihaiemil.eoyaml.YamlMapping;
 import com.artipie.front.Layout;
 import com.artipie.front.misc.RouteWrap;
 import com.artipie.front.rest.RepositoryService;
 import com.artipie.front.rest.SettingsService;
 import com.artipie.front.ui.HbPage;
+import java.io.IOException;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
+import java.util.Optional;
 
 /**
  * List of repositories page.
@@ -33,12 +38,23 @@ public RepoList(final RepositoryService repository, final SettingsService settin
                 req -> {
                     final String uid = req.session().attribute("uid");
                     final String token = req.session().attribute("token");
-                    final List<String> repos;
+                    final List<String> names;
                     if (settings.layout() == Layout.FLAT) {
-                        repos = repository.list(token);
+                        names = repository.list(token);
                     } else {
-                        repos = repository.list(token, uid);
+                        names = repository.list(token, uid);
                     }
+                    final List<Repo> repos = new ArrayList<>(names.size());
+                    names.stream().sorted().forEach(
+                        name ->
+                            repos.add(
+                                new Repo(
+                                    Integer.toString(settings.port()),
+                                    name,
+                                    repository.repo(token, name)
+                                )
+                            )
+                    );
                     return Map.of(
                         "title", "Repository list",
                         "repos", repos
@@ -47,4 +63,76 @@ public RepoList(final RepositoryService repository, final SettingsService settin
             )
         );
     }
+
+    /**
+     * Repository information.
+     * @since 0.1.3
+     */
+    public static class Repo {
+        /**
+         * Repository name.
+         */
+        @SuppressWarnings("PMD.AvoidFieldNameMatchingMethodName")
+        private final String name;
+
+        /**
+         * Artipie server port.
+         */
+        @SuppressWarnings("PMD.AvoidFieldNameMatchingMethodName")
+        private final String port;
+
+        /**
+         * Repository configuration.
+         */
+        private Optional<YamlMapping> conf;
+
+        /**
+         * Ctor.
+         * @param port Artipie's default port
+         * @param name Name of repository.
+         * @param conf Repository configuration content
+         */
+        @SuppressWarnings("PMD.ConstructorOnlyInitializesOrCallOtherConstructors")
+        public Repo(final String port, final String name, final String conf) {
+            this.port = port;
+            this.name = name;
+            try {
+                this.conf = Optional.of(Yaml.createYamlInput(conf).readYamlMapping());
+            } catch (final IOException exc) {
+                this.conf = Optional.empty();
+            }
+        }
+
+        /**
+         * Name of repository.
+         * @return Name of repository.
+         */
+        public String name() {
+            return this.name;
+        }
+
+        /**
+         * Type of repository defined in configuration.
+         * @return Repository type or empty string
+         */
+        public String type() {
+            return this.repo().map(repo -> repo.string("type")).orElse("");
+        }
+
+        /**
+         * Port of repository defined in configuration.
+         * @return Repository port or default Artipie port
+         */
+        public String port() {
+            return this.repo().map(repo -> repo.string("port")).orElse(this.port);
+        }
+
+        /**
+         * Repository repo-section in yaml.
+         * @return Repository repo-configuration
+         */
+        private Optional<YamlMapping> repo() {
+            return this.conf.map(value -> value.yamlMapping("repo"));
+        }
+    }
 }

src/main/resources/html/base

@@ -7,6 +7,7 @@
     <link rel="shortcut icon" href="/logo.png"/>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css.min.css"/>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/yegor256/drops@gh-pages/drops.min.css"/>
+    <link rel="stylesheet" href="/css/style.css"/>
     <script src="/scripts/jquery-3.6.1.min.js"></script>
   </head>
   <body>
@@ -19,33 +20,34 @@
         </ul>
       </nav>
     </header>
-    <table>
-    <tr>
-      <td>
-        <ul id="navMenu">
-          <li><a href="/dashboard/repository/list">Repositories</a>
-            <ul>
+    <main>
+      <div class="main">
+        <div class="menu">
+          <ul id="navMenu">
+            <li><a href="/dashboard/repository/list">Repositories</a>
+              <ul>
                 <li><a href="/dashboard/repository/create">Create</a></li>
-            </ul>
-          </li>
-          <li>Artipie
-            <ul>
+              </ul>
+            </li>
+            <li>Artipie
+              <ul>
                 <li><a href="https://github.com/artipie">Github</a></li>
                 <li><a href="https://github.com/artipie/artipie/wiki">Wiki</a></li>
-            </ul>
-          </li>
-        </ul>
-      </td>
-      <td>
-        <section style="width:90%">
-          <article>
-            {{#block "content"}}
-            {{/block}}
-          </article>
-        </section>
-      </td>
-    </tr>
-    </table>
+              </ul>
+            </li>
+            <li><a href="/signout">Sign out</a></li>
+          </ul>
+        </div>
+        <div class="content">
+          <section style="width:100%">
+            <article>
+              {{#block "content"}}
+              {{/block}}
+            </article>
+          </section>
+        </div>
+      </div>
+    </main>
     <footer>
       <nav>
         <ul>

src/main/resources/html/repository/list

@@ -1,14 +1,70 @@
 {{#partial "content"}}
+<style>
+ #search {
+  background-image: url('/images/searchicon.png');
+  background-position: 10px 12px;
+  background-repeat: no-repeat;
+  width: 100%;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
+
+#repos {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #ddd;
+  font-size: 18px;
+}
+
+#repos th, #repos td {
+  text-align: left;
+  padding: 12px;
+}
+
+#repos tr {
+  border-bottom: 1px solid #ddd;
+}
+
+#repos tr.header, #repos tr:hover {
+  background-color: #f1f1f1;
+}
+</style>
+<script>
+function filterReposByName() {
+  let filter = $("#search").val().toUpperCase();
+  $("#repos tr").each(function(i, tr) {
+    let td = tr.getElementsByTagName("td")[0];
+    if (td) {
+      let txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr.style.display = "";
+      } else {
+        tr.style.display = "none";
+      }
+    }
+  });
+}
+</script>
 <p>
   Your repositories:
 </p>
-<ul>
+<input type="text" id="search" onkeyup="filterReposByName()" placeholder="Search for names..">
+<table id="repos">
+  <tr class="header">
+    <th style="width:50%;">Name</th>
+    <th style="width:25%;">Type</th>
+    <th style="width:25%;">Port</th>
+  </tr>
 {{#repos}}
-  <li>
-    <a href="/dashboard/repository/edit/{{this}}">{{this}}</a>
-  </li>
+  <tr>
+    <td><a href="/dashboard/repository/edit/{{this.name}}">{{this.name}}</a></td>
+    <td>{{this.type}}</td>
+    <td>{{this.port}}</td>
+  </tr>
 {{/repos}}
-</ul>
+</table>
 
 <p>
   <span class="firebrick">DISCLAIMER</span>: