Instead of subsytems overview a tag overview page

package.json

@@ -20,7 +20,7 @@
     "highlightjs": "^9.10.0",
     "jquery": "^3.4.0",
     "js-cookie": "^2.2.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.13",
     "marked": "^0.6.2",
     "mithril": "^1.1.6",
     "popper.js": "^1.14.4",

src/app/app.tsx

@@ -10,9 +10,9 @@ import * as m from 'mithril';
 import '../scss/main.scss';
 import 'bootstrap';
 import * as Cookie from 'js-cookie';
-import { Setting } from './interfaces/Setting';
+import { ISetting } from './interfaces/Setting';
 import { CronJob } from 'cron';
-import { ResponseObject } from './interfaces/ResponseObject';
+import { ISuccessObject } from './interfaces/ResponseObject';
 import LogPage from './pages/LogPage';
 import LogsPage from './pages/LogsPage';
 import RunsPage from './pages/RunsPage';
@@ -23,8 +23,11 @@ import SubsystemsOverviewPage from './pages/SubsystemsOverviewPage';
 import ProfilePage from './pages/ProfilePage';
 import LoginPage from './pages/LoginPage';
 import AuthorizingPage from './pages/AuthorizingPage';
+import { APPLICATION_NAME } from './constants/constants';
+import TagsOverviewPage from './pages/TagsOverviewPage';
 
 m.route.prefix('');
+document.title = APPLICATION_NAME;
 /**
  * Routes enabled when user is authenticated.
  */
@@ -49,6 +52,11 @@ const authenticatedRoutes = {
             <CreateLogPage runNumber={vnode.attrs.id} />
         ),
     },
+    '/logs/create/comments/:id': {
+        view: (vnode: m.Vnode<{ id: number }>) => (
+            <CreateLogPage logNumber={vnode.attrs.id} />
+        ),
+    },
     '/logs/:id': {
         view: (vnode: m.Vnode<{ id: number }>) => (
             <LogPage logId={vnode.attrs.id} />
@@ -78,6 +86,11 @@ const authenticatedRoutes = {
         view: (vnode: m.Vnode<{ userId: number }>) => (
             <ProfilePage userId={vnode.attrs.userId} />
         ),
+    },
+    '/tags': {
+        view: () => (
+            <TagsOverviewPage />
+        ),
     }
 };
 
@@ -102,6 +115,16 @@ const lockedOutRoutes = {
  * (logged in is in essence: does the user have a cookie with a JWT)
  */
 export const initialize = () => {
+    const allowAnonymous = process.env.ALLOW_ANONYMOUS;
+
+    if (typeof(allowAnonymous) !== 'undefined' && allowAnonymous.toLowerCase() === 'true') {
+        if (!Cookie.get('token')) {
+            Cookie.set('token', 'TEST');
+        }
+    } else if (Cookie.get('token') && Cookie.get('token') === 'TEST') {
+        Cookie.remove('token');
+    }
+
     const token = Cookie.get('token');
     if (token) {
         m.route(document.body, '/', authenticatedRoutes);
@@ -111,25 +134,26 @@ export const initialize = () => {
 };
 
 /**
- * Creates a request to the /setting endpoint in order to retrieve settings for the authentication.
+ * Creates a request to the /setting endpoint in order to retrieve settings for the authentication and others.
  */
-export const getAuthSettings = () => {
+export const getSettings = () => {
     return m.request({
         method: 'GET',
         url: `${process.env.API_URL}setting`
-    }).then((result: ResponseObject<Setting>) => {
-        // setting['date'] = new Date().valueOf();
-        localStorage.setItem('USE_CERN_SSO', result.data.item.USE_CERN_SSO);
-        localStorage.setItem('AUTH_URL', result.data.item.AUTH_URL);
+    }).then((result: ISuccessObject<ISetting>) => {
+        const settingsArray = Object.entries(result.data.item);
+        settingsArray.forEach((setting: [string, string | number | boolean]) => {
+            localStorage.setItem(setting[0], setting[1].toString());
+        });
     });
 };
 
 /**
  * Schedule a daily cronjob to check if the settings are up to date.
  */
 new CronJob('0 2 * * *', () => {
-    getAuthSettings();
+    getSettings();
 }).start();
 
-getAuthSettings();
+getSettings();
 initialize();

src/app/atoms/Badges.tsx

@@ -9,13 +9,13 @@
 import * as m from 'mithril';
 import { MithrilTsxComponent } from 'mithril-tsx-component';
 import * as _ from 'lodash';
-import { FilterState, FilterValue } from '../interfaces/Filter';
+import { IFilterState, FilterValue } from '../interfaces/Filter';
 
 interface Attrs {
     /**
      * The values of the filters.
      */
-    filters: FilterState;
+    filters: IFilterState;
 
     /**
      * Function being called when the event happens on a button click.
@@ -37,11 +37,11 @@ type Vnode = m.Vnode<Attrs, Badges>;
 
 export default class Badges extends MithrilTsxComponent<Attrs> {
 
-    filteredFilters(filters: FilterState, ignoredFilters: string[]) {
+    filteredFilters(filters: IFilterState, ignoredFilters: string[]) {
         return _.omit(filters, ignoredFilters);
     }
 
-    assertActiveFilters(filters: FilterState) {
+    assertActiveFilters(filters: IFilterState) {
         let assertActiveFilters: boolean = false;
         Object.keys(filters).map((key: string) => {
             if (filters[key] !== null) {

src/app/atoms/Button.tsx

@@ -8,7 +8,7 @@
 
 import * as m from 'mithril';
 import { MithrilTsxComponent } from 'mithril-tsx-component';
-import { Event } from '../interfaces/Event';
+import { IEvent } from '../interfaces/Event';
 
 /**
  * Css class that defines the size (bootstrap)
@@ -27,7 +27,8 @@ export enum ButtonClass {
     SUCCESS = 'btn btn-success',
     NAV = 'dropdown-item jf-dropdown-item',
     CLOSE = 'close',
-    INFO = 'btn btn-info'
+    INFO = 'btn btn-info',
+    SMALL = 'btn btn-sm btn-secondary'
 }
 
 /**
@@ -47,7 +48,7 @@ interface Attrs {
     id?: string | number;
     margin?: string;
     href?: string;
-    onClick?: (event?: Event) => void;
+    onClick?: (event?: IEvent) => void;
     name?: string;
     value?: string | number;
     dataToggle?: string;

src/app/atoms/Collapse.tsx

@@ -8,7 +8,7 @@
 
 import * as m from 'mithril';
 import { MithrilTsxComponent } from 'mithril-tsx-component';
-import { Event } from '../interfaces/Event';
+import { IEvent } from '../interfaces/Event';
 import { store } from '../redux/configureStore';
 import { toggleCollapse, addCollapse } from '../redux/ducks/ui/actions';
 import { selectCollapsableItem } from '../redux/ducks/ui/selectors';
@@ -31,6 +31,7 @@ interface Attrs {
      * Whether the component is initially collapsed.
      */
     isInitiallyCollapsed?: boolean;
+    style?: object;
 }
 
 type Vnode = m.Vnode<Attrs, Collapse>;
@@ -49,13 +50,13 @@ export default class Collapse extends MithrilTsxComponent<Attrs> {
      * Toggles the collapsed state of the component.
      * @param event
      */
-    toggleCollapse(event: Event) {
+    toggleCollapse(event: IEvent) {
         const id = event.target.id;
         store.dispatch(toggleCollapse(id));
     }
 
     view(vnode: Vnode) {
-        const { icon, title, id } = vnode.attrs;
+        const { icon, title, id, style } = vnode.attrs;
         const collapsableItem = selectCollapsableItem(store.getState(), id);
         return (
             <div>
@@ -67,9 +68,10 @@ export default class Collapse extends MithrilTsxComponent<Attrs> {
                             aria-expanded={collapsableItem && collapsableItem.isCollapsed ? 'false' : 'true'}
                             data-fa-transform="grow-10"
                             onclick={this.toggleCollapse}
+                            style={style}
                         >
                             {icon}
-                            &nbsp;{title}
+                            {title}
                         </div>
                         <div class={collapsableItem && collapsableItem.isCollapsed ? 'jf-collapse-in' : ''} id={id}>
                             {vnode.children}

src/app/atoms/DescriptionList.tsx

@@ -8,9 +8,9 @@
 
 import * as m from 'mithril';
 import { MithrilTsxComponent } from 'mithril-tsx-component';
-import { Description } from '../interfaces/Description';
-import { Log } from '../interfaces/Log';
-import { Run } from '../interfaces/Run';
+import { IDescription } from '../interfaces/Description';
+import { ILog } from '../interfaces/Log';
+import { IRun } from '../interfaces/Run';
 
 interface Attrs {
     /**
@@ -22,7 +22,7 @@ interface Attrs {
     /**
      * List of descriptions (label, value)
      */
-    descriptions: Description[];
+    descriptions: IDescription[];
 
     /**
      * Optional number that determine the length of the first list.
@@ -32,7 +32,7 @@ interface Attrs {
     /**
      * The entity to display the details of.
      */
-    entity: Log | Run | null;
+    entity: ILog | IRun | null;
 }
 
 type Vnode = m.Vnode<Attrs, DescriptionList>;
@@ -51,7 +51,7 @@ export default class DescriptionList extends MithrilTsxComponent<Attrs> {
                             </div>
                             <div class="col-md-6">
                                 {
-                                    descriptions.map((description: Description) => (
+                                    descriptions.map((description: IDescription) => (
                                         <dl class="row" style="margin-block-end: 0;">
                                             <dt class="col-sm-6">{description.label}</dt>
                                             <dd class="col-sm-6">{description.value(entity)}</dd>
@@ -66,7 +66,7 @@ export default class DescriptionList extends MithrilTsxComponent<Attrs> {
                             <div class="col-md-6">
                                 {
                                     listLength &&
-                                    descriptions.slice(0, listLength).map((description: Description) => (
+                                    descriptions.slice(0, listLength).map((description: IDescription) => (
                                         <dl class="row" style="margin-block-end: 0;">
                                             <dt class="col-sm-6">{description.label}</dt>
                                             <dd class="col-sm-6">{description.value(entity)}</dd>
@@ -77,7 +77,7 @@ export default class DescriptionList extends MithrilTsxComponent<Attrs> {
                             <div class="col-md-6">
                                 {
                                     listLength &&
-                                    descriptions.slice(listLength).map((description: Description) => (
+                                    descriptions.slice(listLength).map((description: IDescription) => (
                                         <dl class="row" style="margin-block-end: 0;">
                                             <dt class="col-sm-6">{description.label}</dt>
                                             <dd class="col-sm-6">{description.value(entity)}</dd>

src/app/atoms/HttpErrorAlert.tsx

@@ -7,7 +7,7 @@
  */
 
 import * as m from 'mithril';
-import { HttpError } from '../interfaces/HttpError';
+import { IHttpError } from '../interfaces/HttpError';
 import { MithrilTsxComponent } from 'mithril-tsx-component';
 import { extractErrors } from '../redux/ducks/error/operations';
 import { store } from '../redux/configureStore';
@@ -23,7 +23,7 @@ interface Attrs {
 type Vnode = m.Vnode<Attrs, HttpErrorAlert>;
 
 export default class HttpErrorAlert extends MithrilTsxComponent<Attrs> {
-    errors: HttpError[] = [];
+    errors: Array<IHttpError<any>> = [];
 
     async oninit() {
         const fetchedErrors = await store.dispatch(extractErrors());
@@ -46,12 +46,12 @@ export default class HttpErrorAlert extends MithrilTsxComponent<Attrs> {
                     <div className="row">
                         <div className="col-md-12">
                             <div className="text-center">
-                            {errors.map((error: HttpError) => {
+                                {errors.map((error: IHttpError<any>) => {
                                     return (
                                         // tslint:disable-next-line:jsx-key
                                         <div class="alert alert-danger">
-                                            <h4 class="alert-heading">{error.statusCode} {error.error}</h4>
-                                            <p>{error.message}</p>
+                                            <h4 class="alert-heading">{error.error.code} {error.error.error}</h4>
+                                            <p>{error.error.message}</p>
                                         </div>
                                     );
                                 })}

src/app/atoms/Input.tsx

@@ -8,7 +8,7 @@
 
 import * as m from 'mithril';
 import { MithrilTsxComponent } from 'mithril-tsx-component';
-import { Event } from '../interfaces/Event';
+import { IEvent } from '../interfaces/Event';
 
 export enum InputSize {
     SMALL = 'col-md-2',
@@ -27,7 +27,8 @@ interface Attrs {
     required?: boolean;
     dataShowCaption?: string;
     value?: string | number;
-    oninput?: (event: Event) => void;
+    oninput?: (event: IEvent) => void;
+    children?: JSX.Element;
 }
 
 type Vnode = m.Vnode<Attrs, Input>;
@@ -45,7 +46,8 @@ export default class Input extends MithrilTsxComponent<Attrs> {
             required,
             dataShowCaption,
             value,
-            oninput
+            oninput,
+            children
         } = vnode.attrs;
         return (
             <input
@@ -59,7 +61,9 @@ export default class Input extends MithrilTsxComponent<Attrs> {
                 value={value}
                 data-show-caption={dataShowCaption}
                 oninput={oninput}
-            />
+            >
+                {children}
+            </input>
         );
     }
 }

src/app/atoms/Label.tsx

@@ -13,15 +13,16 @@ interface Attrs {
     id: string;
     text: string;
     className?: string;
+    autofocus?: string;
 }
 
 type Vnode = m.Vnode<Attrs, Label>;
 
 export default class Label extends MithrilTsxComponent<Attrs> {
     view(vnode: Vnode) {
-        const { id, text, className } = vnode.attrs;
+        const { id, text, className, autofocus } = vnode.attrs;
         return (
-            <label class={className} for={id}>{text}</label>
+            <label autofocus={autofocus} class={className} for={id}>{text}</label>
         );
     }
 }