implemented ui for sources root

scm-ui/src/repos/sources/components/FileIcon.js

@@ -0,0 +1,20 @@
+// @flow
+import React from "react";
+import type { File } from "@scm-manager/ui-types";
+
+type Props = {
+  file: File
+};
+
+class FileIcon extends React.Component<Props> {
+  render() {
+    const { file } = this.props;
+    let icon = "file";
+    if (file.directory) {
+      icon = "folder";
+    }
+    return <i className={`fa fa-${icon}`} />;
+  }
+}
+
+export default FileIcon;

scm-ui/src/repos/sources/components/FileSize.js

@@ -0,0 +1,27 @@
+// @flow
+import React from "react";
+
+type Props = {
+  bytes: number
+};
+
+class FileSize extends React.Component<Props> {
+  static format(bytes) {
+    if (!bytes) {
+      return "";
+    }
+
+    const units = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+    const size = (bytes / 1024 ** i).toFixed(2);
+    return `${size} ${units[i]}`;
+  }
+
+  render() {
+    const formattedBytes = FileSize.format(this.props.bytes);
+    return <span>{formattedBytes}</span>;
+  }
+}
+
+export default FileSize;

scm-ui/src/repos/sources/components/FileSize.test.js

@@ -0,0 +1,9 @@
+import FileSize from "./FileSize";
+
+it("should format bytes", () => {
+  expect(FileSize.format(160)).toBe("160.00 B");
+  expect(FileSize.format(6304)).toBe("6.16 K");
+  expect(FileSize.format(28792588)).toBe("27.46 M");
+  expect(FileSize.format(1369510189)).toBe("1.28 G");
+  expect(FileSize.format(42949672960)).toBe("40.00 G");
+});

scm-ui/src/repos/sources/components/FileTree.js

@@ -0,0 +1,48 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import injectSheet from "react-jss";
+import FileTreeLeaf from "./FileTreeLeaf";
+import type { SourcesCollection } from "@scm-manager/ui-types";
+
+const styles = {
+  iconColumn: {
+    width: "16px"
+  }
+};
+
+type Props = {
+  tree: SourcesCollection,
+
+  // context props
+  classes: any,
+  t: string => string
+};
+
+class FileTree extends React.Component<Props> {
+  render() {
+    const { tree, classes, t } = this.props;
+
+    const files = tree._embedded.files;
+
+    return (
+      <table className="table table-hover table-sm is-fullwidth">
+        <thead>
+          <tr>
+            <th className={classes.iconColumn} />
+            <th>{t("sources.file-tree.name")}</th>
+            <th>{t("sources.file-tree.length")}</th>
+            <th>{t("sources.file-tree.lastModified")}</th>
+            <th>{t("sources.file-tree.description")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {files.map(file => (
+            <FileTreeLeaf key={file.name} file={file} />
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+export default injectSheet(styles)(translate("repos")(FileTree));

scm-ui/src/repos/sources/components/FileTreeLeaf.js

@@ -0,0 +1,49 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import { DateFromNow } from "@scm-manager/ui-components";
+import FileSize from "./FileSize";
+import FileIcon from "./FileIcon";
+import { Link } from "react-router-dom";
+import type { File } from "@scm-manager/ui-types";
+
+const styles = {
+  iconColumn: {
+    width: "16px"
+  }
+};
+
+type Props = {
+  file: File,
+
+  // context props
+  classes: any
+};
+
+class FileTreeLeaf extends React.Component<Props> {
+  render() {
+    const { file, classes } = this.props;
+
+    return (
+      <tr>
+        <td className={classes.iconColumn}>
+          <Link to="#todo">
+            <FileIcon file={file} />
+          </Link>
+        </td>
+        <td>
+          <Link to="#todo">{file.name}</Link>
+        </td>
+        <td>
+          <FileSize bytes={file.length} />
+        </td>
+        <td>
+          <DateFromNow date={file.lastModified} />
+        </td>
+        <td>{file.description}</td>
+      </tr>
+    );
+  }
+}
+
+export default injectSheet(styles)(FileTreeLeaf);