First version of the scheduler UI

.gitignore

@@ -3,6 +3,10 @@
 *.pyo
 build
 
+# Package files
+src/grimoirelab/core/static
+src/grimoirelab/core/templates
+
 # JavaScript files
 node_modules
 dist

pyproject.toml

@@ -21,6 +21,10 @@ packages = [
     { include = "grimoirelab", from = "src" },
 ]
 
+exclude = [
+    "grimoirelab/core/static"
+]
+
 classifiers = [
    "Development Status :: 4 - Beta",
    "Intended Audience :: Developers",

src/grimoirelab/core/app/urls.py

@@ -1,10 +1,12 @@
 """GrimoireLab URL Configuration"""
 
 
-from django.urls import path, include
+from django.urls import path, include, re_path
+from django.views.generic import TemplateView
 
 from grimoirelab.core.scheduler.urls import urlpatterns as sched_urlpatterns
 
 urlpatterns = [
-    path("scheduler/", include(sched_urlpatterns))
+    path("scheduler/", include(sched_urlpatterns)),
+    re_path(r'^(?!static|scheduler).*$', TemplateView.as_view(template_name="index.html"))
 ]

src/grimoirelab/core/config/settings.py

@@ -114,7 +114,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [BASE_DIR / 'templates'],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -225,7 +225,9 @@
 #
 
 STATIC_URL = '/static/'
-
+STATICFILES_DIRS = [
+    BASE_DIR / 'templates/static'
+]
 
 # UI static files will be copied to the next path when
 # 'collectstatic' is run.
@@ -234,6 +236,10 @@
 
 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 
+# MEDIA_URL is only needed when DEBUG is set to True.
+# Modify this URL if you want to run the server in developer mode.
+
+MEDIA_URL = 'http://media.localhost/'
 
 #
 # Default primary key field type

src/grimoirelab/core/runner/commands/admin.py

@@ -54,6 +54,7 @@ def _setup():
 
     _create_database()
     _setup_database()
+    _install_static_files()
 
     click.secho("\nGrimoirelab configuration completed", fg='bright_cyan')
 
@@ -98,6 +99,20 @@ def _setup_database(database: str = 'default'):
     click.echo()
 
 
+def _install_static_files():
+    """Collect static files and install them."""
+
+    click.secho('## GrimoireLab static files installation\n',
+                fg='bright_cyan')
+
+    django.core.management.call_command('collectstatic',
+                                        ignore=['admin', 'rest_framework'],
+                                        clear=True,
+                                        interactive=False)
+
+    click.echo()
+
+
 @admin.group()
 @click.pass_context
 def queues(ctx: Context):

ui/.eslintrc.cjs

@@ -0,0 +1,26 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-strongly-recommended',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier',
+    'plugin:storybook/recommended',
+    'plugin:storybook/recommended'
+  ],
+  overrides: [
+    {
+      files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
+      extends: ['plugin:cypress/recommended']
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

ui/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+.yarn/*
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+*storybook.log

ui/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

ui/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config

ui/.storybook/preview.js

@@ -0,0 +1,21 @@
+import { setup } from '@storybook/vue3';
+import vuetify from '../src/plugins/vuetify'
+import '../src/assets/main.css';
+
+setup((app) => {
+  app.use(vuetify);
+});
+
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview

ui/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

ui/README.md

@@ -0,0 +1,31 @@
+# ui
+
+## Install dependencies
+
+```sh
+yarn
+```
+
+### Run in development mode
+
+```sh
+yarn serve
+```
+
+### Compile for production
+
+```sh
+yarn build
+```
+
+### Run Storybook
+
+```sh
+yarn storybook
+```
+
+### Lint and fix files
+
+```sh
+yarn lint
+```

ui/cypress.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="./src/assets/favicon-grimoirelab.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GrimoireLab</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

ui/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

ui/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build --emptyOutDir",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "axios": "^1.6.8",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vuetify": "^3.5.9"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.25",
+    "@mdi/font": "^7.4.47",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@storybook/vue3": "^8.0.4",
+    "@storybook/vue3-vite": "^8.0.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "cypress": "^13.7.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.0.3",
+    "sass": "^1.72.0",
+    "start-server-and-test": "^2.0.3",
+    "storybook": "^8.0.4",
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0"
+  },
+  "resolutions": {
+    "string-width": "^4.2.0"
+  }
+}

ui/src/App.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { RouterView } from 'vue-router'
+import BreadCrumbs from './components/BreadCrumbs.vue'
+</script>
+
+<template>
+  <v-app>
+    <v-app-bar color="primary" density="compact" flat>
+      <template #prepend>
+        <img src="./assets/favicon.png" height="30" />
+      </template>
+    </v-app-bar>
+    <v-navigation-drawer class="pa-2" color="transparent" permanent>
+      <v-list color="primary" density="compact">
+        <v-list-item :to="{ name: 'taskList' }">
+          <template #prepend>
+            <v-icon>mdi-calendar</v-icon>
+          </template>
+          <v-list-item-title>Tasks</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    <v-main>
+      <BreadCrumbs />
+      <RouterView />
+    </v-main>
+  </v-app>
+</template>
+
+<style scoped lang="scss">
+:deep(.v-toolbar__prepend) {
+  margin-inline: 14px auto;
+}
+.v-navigation-drawer {
+  .v-list-item.v-list-item--density-compact {
+    border-radius: 4px;
+    padding-inline: 8px;
+
+    :deep(.v-list-item__spacer) {
+      width: 16px;
+    }
+  }
+  .v-list-item-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.375rem;
+    letter-spacing: 0.0071428571em;
+  }
+}
+</style>

ui/src/assets/cards.scss

@@ -0,0 +1,9 @@
+.v-card--variant-outlined {
+  background: rgb(var(--v-theme-surface));
+  border: thin solid rgba(0, 0, 0, 0.08);
+  border-left: 6px solid rgb(var(--v-border-color));
+}
+
+.v-chip.v-chip--density-compact {
+  height: calc(var(--v-chip-height) + -6px);
+}