wip: download and delete features for logfiles

composer.json

@@ -7,10 +7,12 @@
     "type": "flarum-extension",
     "license": "MIT",
     "support": {
-        "forum": "https://discuss.flarum.org/d/31932-flarum-log-viewer"
+        "forum": "https://discuss.flarum.org/d/31932-flarum-log-viewer",
+        "source": "https://github.com/imorland/flarum-ext-log-viewer",
+        "issues": "https://github.com/imorland/flarum-ext-log-viewer/issues"
     },
     "require": {
-        "flarum/core": "^1.2.0"
+        "flarum/core": "^1.8.2"
     },
     "authors": [
         {
@@ -29,9 +31,9 @@
             "title": "Log Viewer",
             "category": "feature",
             "icon": {
-                "name": "far fa-file-alt",
-                "color": "#0072e3",
-                "backgroundColor": "#fff"
+                "name": "fas fa-file-alt",
+                "color": "#fff",
+                "backgroundColor": "#0072e3"
             }
         },
         "flarum-cli": {

extend.php

@@ -24,7 +24,9 @@
 
     (new Extend\Routes('api'))
         ->get('/logs', 'logs.index', Api\Controller\ListLogfilesController::class)
-        ->get('/logs/{file}', 'logs.show', Api\Controller\ShowLogFileController::class),
+        ->get('/logs/{file}', 'logs.show', Api\Controller\ShowLogFileController::class)
+        ->get('/logs/download/{file}', 'logs.download', Api\Controller\DownloadLogFileController::class)
+        ->delete('/logs/{file}', 'logs.delete', Api\Controller\DeleteLogFileController::class),
 
     (new Extend\Settings())
         ->default('ianm-log-viewer.purge-days', 90)

js/package.json

@@ -3,14 +3,14 @@
     "private": true,
     "version": "0.0.0",
     "devDependencies": {
-        "flarum-webpack-config": "^2.0.0",
-        "webpack": "^5.88.2",
-        "webpack-cli": "^5.1.4",
-        "prettier": "^3.0.3",
         "@flarum/prettier-config": "^1.0.0",
         "flarum-tsconfig": "^1.0.2",
-        "typescript": "^4.5.4",
-        "typescript-coverage-report": "^0.6.1"
+        "flarum-webpack-config": "^2.0.2",
+        "prettier": "^3.0.3",
+        "typescript": "^5.2.2",
+        "typescript-coverage-report": "^0.8.0",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4"
     },
     "scripts": {
         "dev": "webpack --mode development --watch",

js/src/admin/components/LogFileList.tsx

@@ -1,36 +1,41 @@
 import app from 'flarum/admin/app';
-import Component from 'flarum/common/Component';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import type Mithril from 'mithril';
 import LogFileListItem from './LogFileListItem';
+import LogFile from '../models/LogFile';
+import LogFileState from '../state/LogFileState';
 
-export default class LogFileList extends Component {
-  oninit(vnode) {
-    super.oninit(vnode);
+interface LogFileListAttrs extends ComponentAttrs {
+  state: LogFileState;
+}
 
-    this.loading = true;
-    this.files = [];
+export default class LogFileList extends Component<LogFileListAttrs> {
+  loading: boolean = true;
+  files: LogFile[] = [];
+  logFileState!: LogFileState;
 
-    this.state = this.attrs.state;
+  oninit(vnode: Mithril.Vnode<LogFileListAttrs, this>) {
+    super.oninit(vnode);
 
+    this.logFileState = vnode.attrs.state;
     this.refresh();
   }
 
   view() {
     if (this.loading) {
       return <LoadingIndicator />;
     }
-
     return (
       <div className="LogViewerPage--fileListItems">
         {this.files.map((file) => {
-          return <LogFileListItem file={file} state={this.state} />;
+          return <LogFileListItem file={file} state={this.logFileState} />;
         })}
       </div>
     );
   }
 
-  refresh(clear = true) {
+  refresh(clear: boolean = true) {
     if (clear) {
       this.loading = true;
       this.files = [];
@@ -39,15 +44,14 @@ export default class LogFileList extends Component {
     return this.loadResults().then(this.parseResults.bind(this));
   }
 
-  loadResults() {
-    return app.store.find('logs');
+  async loadResults(): Promise<LogFile[]> {
+    const results = await app.store.find('logs');
+    return results as unknown as Promise<LogFile[]>;
   }
 
-  parseResults(results) {
+  parseResults(results: LogFile[]) {
     this.files.push(...results);
-
     this.loading = false;
-
     m.redraw();
     return results;
   }

js/src/admin/components/LogFileListItem.tsx

@@ -1,52 +1,117 @@
 import app from 'flarum/admin/app';
-import Component from 'flarum/common/Component';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
 import Button from 'flarum/common/components/Button';
 import humanTime from 'flarum/common/utils/humanTime';
-import classList from 'flarum/common/utils/classList';
 import icon from 'flarum/common/helpers/icon';
+import LogFile from '../models/LogFile';
+import LogFileState from '../state/LogFileState';
+import Mithril from 'mithril';
+import LogFileViewModal from './LogFileViewModal';
+import ItemList from 'flarum/common/utils/ItemList';
+import LabelValue from 'flarum/common/components/LabelValue';
+import Tooltip from 'flarum/common/components/Tooltip';
 
-export default class LogFileListItem extends Component {
-  oninit(vnode) {
-    super.oninit(vnode);
+interface LogFileListItemAttrs extends ComponentAttrs {
+  file: LogFile;
+  state: LogFileState;
+}
 
-    this.file = this.attrs.file;
-    this.state = this.attrs.state;
+export default class LogFileListItem extends Component<LogFileListItemAttrs> {
+  file!: LogFile;
+  logFileState!: LogFileState;
+
+  oninit(vnode: Mithril.Vnode<LogFileListItemAttrs, this>) {
+    super.oninit(vnode);
+    this.file = vnode.attrs.file;
+    this.logFileState = vnode.attrs.state;
   }
 
   view() {
-    const file = this.file;
-    const selected = this.state?.file?.data.id === file?.data.id;
-
     return (
       <div className="LogFile-item">
+        <div className="LogFile-item--icon">{icon('fas fa-file-alt')}</div>
+        <div className="LogFile-item--info">{this.infoItems().toArray()}</div>
+        <div className="LogFile-item--actions">{this.actionItems().toArray()}</div>
+      </div>
+    );
+  }
+
+  infoItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'fileName',
+      <div className="fileName">
+        <code>{this.file.fileName()}</code>
+      </div>,
+      100
+    );
+
+    items.add(
+      'fileDate',
+      <div className="fileDate">
+        <LabelValue label={app.translator.trans('ianm-log-viewer.admin.viewer.last_updated')} value={humanTime(this.file.modified())} />
+      </div>,
+      80
+    );
+
+    items.add(
+      'fileInfo',
+      <div className="fileInfo">
+        <LabelValue label={app.translator.trans('ianm-log-viewer.admin.viewer.size_label')} value={this.file.formattedSize()} />
+      </div>,
+      60
+    );
+
+    return items;
+  }
+
+  actionItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+    const fileName = this.file.fileName();
+
+    items.add(
+      'view',
+      <Tooltip text={app.translator.trans('ianm-log-viewer.admin.viewer.view_label')}>
         <Button
-          className={classList('Button Button--logFile', { active: selected })}
+          icon="fas fa-eye"
+          className="Button Button--icon"
           onclick={() => {
-            this.setFile(file.fileName());
+            app.modal.show(LogFileViewModal, { logFileState: this.logFileState, file: this.file });
           }}
-        >
-          <div>
-            <div className="fileName">
-              {icon('far fa-file-alt')}
-              <code>{file.fileName()}</code>
-            </div>
-            <div className="fileDate">
-              {app.translator.trans('ianm-log-viewer.admin.viewer.last_updated', {
-                updated: humanTime(file.modified()),
-              })}
-            </div>
-            <div className="fileInfo">
-              {app.translator.trans('ianm-log-viewer.admin.viewer.file_size', {
-                size: file.size(),
-              })}
-            </div>
-          </div>
-        </Button>
-      </div>
+        />
+      </Tooltip>,
+      50
+    );
+
+    items.add(
+      'download',
+      <Tooltip text={app.translator.trans('ianm-log-viewer.admin.viewer.download_label')}>
+        <Button
+          icon="fas fa-download"
+          className="Button Button--icon"
+          onclick={() => {
+            this.logFileState.downloadFile(fileName);
+          }}
+        />
+      </Tooltip>,
+      40
+    );
+
+    items.add(
+      'delete',
+      <Tooltip text={app.translator.trans('ianm-log-viewer.admin.viewer.delete_label')}>
+        <Button
+          icon="fas fa-trash-alt"
+          className="Button Button--icon Button--danger"
+          onclick={() => {
+            this.logFileState.deleteFile(fileName);
+          }}
+        />
+      </Tooltip>,
+      20
     );
-  }
 
-  setFile(fileName: string) {
-    this.state.loadLogFile(fileName);
+    return items;
   }
 }