mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-30 21:19:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): webgui-compatible web component library (#1075)

Browse Source 
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Eli Bosley <ekbosley@gmail.com>

- **CI/CD**
	- Updated GitHub Actions workflow to build Unraid UI Web Components.
	- Adjusted artifact naming and download configurations.

- **Web Components**
	- Added new web components and registration mechanism.
	- Implemented toast notifications.
	- Enhanced UI component library.

- **Notifications**
	- Added real-time notification subscription.
	- Created notification settings page.
	- Implemented notification toast system.

- **API Improvements**
	- Refactored GraphQL schema loading.
	- Updated authentication and cookie handling.
	- Improved error logging and server initialization.

- **Development Tools**
	- Updated ESLint configuration.
	- Enhanced import path management.
	- Added new development dependencies.
This commit is contained in:
Pujit Mehrotra
2025-01-31 10:47:03 -05:00
committed by GitHub
parent 904cd466db
commit 61ee689658
59 changed files with 10229 additions and 14137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
.github/workflows/main.yml vendored
View File

@@ -101,42 +101,35 @@ jobs:
name: unraid-api
path: ${{ github.workspace }}/api/deploy/release/*.tgz
# build-unraid-ui:
# name: Build Unraid UI Library
# defaults:
# run:
# working-directory: unraid-ui
# runs-on: ubuntu-latest
# steps:
# - name: Checkout repo
# uses: actions/checkout@v4
#
# - name: Install node
# uses: actions/setup-node@v4
# with:
# cache: "npm"
# cache-dependency-path: |
# unraid-ui/package-lock.json
# node-version-file: ".nvmrc"
#
# - name: Install dependencies
# run: npm install
#
# - name: Build
# run: npm run build
#
# - name: Make Built Node Artifact
# run: |
# mkdir unraid-ui-dist
# mv dist/ unraid-ui-dist/dist/
# mv package.json unraid-ui-dist/package.json
# ls unraid-ui-dist
#
# - name: Upload Artifact to Github
# uses: actions/upload-artifact@v4
# with:
# name: unraid-ui
# path: unraid-ui/unraid-ui-dist
build-unraid-ui-webcomponents:
name: Build Unraid UI Library (Webcomponent Version)
defaults:
run:
working-directory: unraid-ui
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v4
- name: Install node
uses: actions/setup-node@v4
with:
cache: "npm"
cache-dependency-path: |
unraid-ui/package-lock.json
node-version-file: ".nvmrc"
- name: Install dependencies
run: npm install
- name: Build
run: npm run build:wc
- name: Upload Artifact to Github
uses: actions/upload-artifact@v4
with:
name: unraid-wc-ui
path: unraid-ui/dist/
build-web:
# needs: [build-unraid-ui]
@@ -190,11 +183,11 @@ jobs:
- name: Upload build to Github artifacts
uses: actions/upload-artifact@v4
with:
name: unraid-web
name: unraid-wc-rich
path: web/.nuxt/nuxt-custom-elements/dist/unraid-components
build-plugin:
needs: [build-test-api, build-web]
needs: [build-test-api, build-web, build-unraid-ui-webcomponents]
defaults:
run:
working-directory: plugin
@@ -206,11 +199,12 @@ jobs:
timezoneLinux: "America/Los_Angeles"
- name: Checkout repo
uses: actions/checkout@v4
- name: Download unraid web components
- name: Download Unraid Web Components
uses: actions/download-artifact@v4
with:
name: unraid-web
pattern: unraid-wc-*
path: ./plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components
merge-multiple: true
- name: Build Plugin
run: |
cd source/dynamix.unraid.net

17
api/.eslintrc.ts
View File

@@ -1,9 +1,13 @@
import type { Linter } from 'eslint';
import eslint from '@eslint/js';
import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
import prettier from 'eslint-plugin-prettier';
import tseslint from 'typescript-eslint';
export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, {
plugins: {
'no-relative-import-paths': noRelativeImportPaths,
prettier: prettier,
},
rules: {
'@typescript-eslint/no-redundant-type-constituents': 'off',
'@typescript-eslint/no-unsafe-call': 'off',
@@ -17,5 +21,14 @@ export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.r
'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 1 }],
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-unused-expressions': 'off',
'import/no-unresolved': 'off',
'import/extensions': 'off',
'import/no-absolute-path': 'off',
'import/prefer-default-export': 'off',
'no-relative-import-paths/no-relative-import-paths': [
'error',
{ allowSameFolder: false, rootDir: 'src', prefix: '@app' },
],
'prettier/prettier': 'error',
},
});

18584
api/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
api/package.json
View File

@@ -16,8 +16,8 @@
"codegen:watch": "DOTENV_CONFIG_PATH='./.env.staging' graphql-codegen --config codegen.ts --watch -r dotenv/config",
"codegen:local": "NODE_TLS_REJECT_UNAUTHORIZED=0 MOTHERSHIP_GRAPHQL_LINK='https://mothership.localhost/ws' graphql-codegen --config codegen.ts --watch",
"tsc": "tsc --noEmit",
"lint": "eslint --flag unstable_ts_config --config .eslintrc.ts src/",
"lint:fix": "eslint --flag unstable_ts_config --fix --config .eslintrc.ts src/",
"lint": "eslint --config .eslintrc.ts src/",
"lint:fix": "eslint --fix --config .eslintrc.ts src/",
"test:watch": "vitest --pool=forks",
"test": "vitest run --pool=forks",
"coverage": "vitest run --pool=forks --coverage",
@@ -44,7 +44,6 @@
"dependencies": {
"@apollo/client": "^3.11.8",
"@apollo/server": "^4.11.2",
"@as-integrations/fastify": "^2.1.1",
"@fastify/cookie": "^9.4.0",
"@graphql-codegen/client-preset": "^4.5.0",
"@graphql-tools/load-files": "^7.0.0",
@@ -62,7 +61,6 @@
"@reflet/cron": "^1.3.1",
"@runonflux/nat-upnp": "^1.0.2",
"accesscontrol": "^2.2.1",
"btoa": "^1.2.1",
"bycontract": "^2.0.11",
"bytes": "^3.1.2",
"cacheable-lookup": "^7.0.0",
@@ -73,13 +71,13 @@
"cli-table": "^0.3.11",
"command-exists": "^1.2.9",
"convert": "^5.5.1",
"cookie": "^1.0.2",
"cross-fetch": "^4.0.0",
"docker-event-emitter": "^0.3.0",
"dockerode": "^3.3.5",
"dotenv": "^16.4.5",
"execa": "^9.5.1",
"exit-hook": "^4.0.0",
"express": "^4.21.1",
"filenamify": "^6.0.0",
"fs-extra": "^11.2.0",
"glob": "^11.0.1",
@@ -105,12 +103,10 @@
"nestjs-pino": "^4.1.0",
"node-cache": "^5.1.2",
"node-window-polyfill": "^1.0.2",
"openid-client": "^6.1.3",
"p-retry": "^6.2.0",
"passport-custom": "^1.1.1",
"passport-http-header-strategy": "^1.1.0",
"path-type": "^6.0.0",
"pidusage": "^3.0.2",
"pino": "^9.5.0",
"pino-http": "^10.3.0",
"pino-pretty": "^11.3.0",
@@ -118,12 +114,10 @@
"reflect-metadata": "^0.1.14",
"request": "^2.88.2",
"semver": "^7.6.3",
"stoppable": "^1.1.0",
"strftime": "^0.10.3",
"systeminformation": "^5.23.5",
"systeminformation": "^5.25.11",
"uuid": "^11.0.2",
"ws": "^8.18.0",
"xhr2": "^0.2.1",
"zod": "^3.23.8"
},
"devDependencies": {
@@ -142,13 +136,11 @@
"@rollup/plugin-node-resolve": "^15.3.0",
"@swc/core": "^1.10.1",
"@types/async-exit-hook": "^2.0.2",
"@types/btoa": "^1.2.5",
"@types/bytes": "^3.1.4",
"@types/cli-table": "^0.3.4",
"@types/command-exists": "^1.2.3",
"@types/cors": "^2.8.17",
"@types/dockerode": "^3.3.31",
"@types/express": "^5.0.0",
"@types/graphql-fields": "^1.3.9",
"@types/graphql-type-uuid": "^0.2.6",
"@types/ini": "^4.1.1",
@@ -156,7 +148,6 @@
"@types/lodash": "^4.17.13",
"@types/mustache": "^4.2.5",
"@types/node": "^22.9.0",
"@types/pidusage": "^2.0.5",
"@types/pify": "^5.0.4",
"@types/semver": "^7.5.8",
"@types/sendmail": "^1.4.7",
@@ -169,6 +160,8 @@
"@vitest/ui": "^2.1.4",
"cz-conventional-changelog": "3.3.0",
"eslint": "^9.14.0",
"eslint-plugin-no-relative-import-paths": "^1.6.1",
"eslint-plugin-prettier": "^5.2.3",
"graphql-codegen-typescript-validation-schema": "^0.16.0",
"jiti": "^2.4.0",
"nodemon": "^3.1.7",
@@ -179,7 +172,6 @@
"unplugin-swc": "^1.5.1",
"vite": "^5.4.10",
"vite-plugin-node": "^4.0.0",
"vite-plugin-static-copy": "^2.0.0",
"vite-tsconfig-paths": "^5.1.0",
"vitest": "^2.1.8",
"zx": "^8.2.0"

2
api/src/cli.ts
View File

@@ -24,7 +24,7 @@ const getUnraidApiLocation = async () => {
try {
await CommandFactory.run(CliModule, {
cliName: 'unraid-api',
logger: LOG_LEVEL === 'TRACE' && new LogService(), // - enable this to see nest initialization issues
logger: LOG_LEVEL === 'TRACE' ? new LogService() : false, // - enable this to see nest initialization issues
completion: {
fig: false,
cmd: 'completion-script',

23
api/src/core/utils/files/load-file-from-path.ts Normal file
View File

@@ -0,0 +1,23 @@
import { readFile } from 'fs/promises';
import { extname } from 'path';
import { readFileSync } from 'fs';
import { fileExists, fileExistsSync } from '@app/core/utils/files/file-exists';
export const loadFileFromPath = async (filePath: string): Promise<{ fileContents: string; extension: string }> => {
if (await fileExists(filePath)) {
const fileContents = await readFile(filePath, 'utf-8');
const extension = extname(filePath);
return { fileContents, extension };
}
throw new Error(`Failed to load file at path: ${filePath}`);
};
export const loadFileFromPathSync = (filePath: string): string => {
if (fileExistsSync(filePath)) {
const fileContents = readFileSync(filePath, 'utf-8').toString();
return fileContents;
}
throw new Error(`Failed to load file at path: ${filePath}`);
};

19
api/src/core/utils/misc/get-key-file.ts Normal file
View File

@@ -0,0 +1,19 @@
import { type RootState, store } from '@app/store';
import { basename, join } from 'path';
import { readFile } from 'fs/promises';
// Get key file
export const getKeyFile = async function (appStore: RootState = store.getState()) {
const { emhttp, paths } = appStore;
// If emhttp's state isn't loaded then return null as we can't load the key yet
if (emhttp.var?.regFile === undefined) return null;
// If the key location is empty return an empty string as there is no key
if (emhttp.var?.regFile.trim() === '') return '';
const keyFileName = basename(emhttp.var?.regFile);
const registrationKeyFilePath = join(paths['keyfile-base'], keyFileName);
const keyFile = await readFile(registrationKeyFilePath, 'binary');
return Buffer.from(keyFile, 'binary').toString('base64').trim().replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
};

15
api/src/core/utils/misc/parse-config.ts
View File

@@ -5,6 +5,7 @@ import { accessSync, readFileSync } from 'fs';
import { access } from 'fs/promises';
import { F_OK } from 'constants';
import { extname } from 'path';
import { fileExistsSync } from '@app/core/utils/files/file-exists';
type ConfigType = 'ini' | 'cfg';
@@ -71,20 +72,6 @@ const fixObjectArrays = (object: Record<string, any>) => {
};
};
export const fileExists = async (path: string) =>
access(path, F_OK)
.then(() => true)
.catch(() => false);
export const fileExistsSync = (path: string) => {
try {
accessSync(path, F_OK);
return true;
} catch (error: unknown) {
return false;
}
};
export const getExtensionFromPath = (filePath: string): string => extname(filePath);
const isFilePathOptions = (

9
api/src/graphql/schema/index.ts
View File

@@ -1,9 +0,0 @@
import { join } from 'path';
import { loadFilesSync } from '@graphql-tools/load-files';
import { mergeTypeDefs } from '@graphql-tools/merge';
const files = loadFilesSync(join(import.meta.dirname, './types'), {
extensions: ['graphql'],
});
export const typeDefs = mergeTypeDefs(files);

26
api/src/graphql/schema/loadTypesDefs.ts Normal file
View File

@@ -0,0 +1,26 @@
import { mergeTypeDefs } from '@graphql-tools/merge';
import { logger } from '@app/core/log';
export const loadTypeDefs = async () => {
// TypeScript now knows this returns Record<string, () => Promise<string>>
const typeModules = import.meta.glob('./types/**/*.graphql', { query: '?raw', import: 'default' });
try {
const files = await Promise.all(
Object.values(typeModules).map(async (importFn) => {
const content = await importFn();
if (typeof content !== 'string') {
throw new Error('Invalid GraphQL type definition format');
}
return content;
})
);
if (!files.length) {
throw new Error('No GraphQL type definitions found');
}
return mergeTypeDefs(files);
} catch (error) {
logger.error('Failed to load GraphQL type definitions:', error);
throw error;
}
};

125
api/src/index.ts
View File

@@ -28,7 +28,6 @@ import { setupDynamixConfigWatch } from '@app/store/watch/dynamix-config-watch';
import { setupRegistrationKeyWatch } from '@app/store/watch/registration-watch';
import { StateManager } from '@app/store/watch/state-watch';
import { setupVarRunWatch } from '@app/store/watch/var-run-watch';
import { bootstrapNestServer } from '@app/unraid-api/main';
import { setupNewMothershipSubscription } from './mothership/subscribe-to-mothership';
@@ -40,82 +39,86 @@ const unlinkUnixPort = () => {
}
};
try {
environment.IS_MAIN_PROCESS = true;
export const viteNodeApp = async () => {
try {
environment.IS_MAIN_PROCESS = true;
logger.info('ENV %o', envVars);
logger.info('PATHS %o', store.getState().paths);
logger.info('ENV %o', envVars);
logger.info('PATHS %o', store.getState().paths);
const cacheable = new CacheableLookup();
const cacheable = new CacheableLookup();
Object.assign(global, { WebSocket });
// Ensure all DNS lookups are cached for their TTL
cacheable.install(http.globalAgent);
cacheable.install(https.globalAgent);
Object.assign(global, { WebSocket });
// Ensure all DNS lookups are cached for their TTL
cacheable.install(http.globalAgent);
cacheable.install(https.globalAgent);
// Start file <-> store sync
// Must occur before config is loaded to ensure that the handler can fix broken configs
await startStoreSync();
// Start file <-> store sync
// Must occur before config is loaded to ensure that the handler can fix broken configs
await startStoreSync();
// Load my servers config file into store
await store.dispatch(loadConfigFile());
// Load my servers config file into store
await store.dispatch(loadConfigFile());
// Load emhttp state into store
await store.dispatch(loadStateFiles());
// Load emhttp state into store
await store.dispatch(loadStateFiles());
// Load initial registration key into store
await store.dispatch(loadRegistrationKey());
// Load initial registration key into store
await store.dispatch(loadRegistrationKey());
// Load my dynamix config file into store
await store.dispatch(loadDynamixConfigFile());
// Load my dynamix config file into store
await store.dispatch(loadDynamixConfigFile());
await setupNewMothershipSubscription();
await setupNewMothershipSubscription();
// Start listening to file updates
StateManager.getInstance();
// Start listening to file updates
StateManager.getInstance();
// Start listening to key file changes
setupRegistrationKeyWatch();
// Start listening to key file changes
setupRegistrationKeyWatch();
// Start listening to docker events
setupVarRunWatch();
// Start listening to docker events
setupVarRunWatch();
// Start listening to dynamix config file changes
setupDynamixConfigWatch();
// Start listening to dynamix config file changes
setupDynamixConfigWatch();
// If port is unix socket, delete old socket before starting http server
unlinkUnixPort();
// If port is unix socket, delete old socket before starting http server
unlinkUnixPort();
startMiddlewareListeners();
startMiddlewareListeners();
// Start webserver
server = await bootstrapNestServer();
// Start webserver
const { bootstrapNestServer } = await import('@app/unraid-api/main');
asyncExitHook(
async (signal) => {
console.log('exithook', signal);
server = await bootstrapNestServer();
asyncExitHook(
async (signal) => {
logger.info('Exiting with signal %s', signal);
await server?.close?.();
// If port is unix socket, delete socket before exiting
unlinkUnixPort();
shutdownApiEvent();
gracefulExit();
},
{ wait: 9999 }
);
} catch (error: unknown) {
if (error instanceof Error) {
logger.error(error, 'API-ERROR');
} else {
logger.error(error, 'Encountered unexpected error');
}
if (server) {
await server?.close?.();
// If port is unix socket, delete socket before exiting
unlinkUnixPort();
shutdownApiEvent();
gracefulExit();
},
{ wait: 9999 }
);
// Start a loop to run the app
await new Promise(() => {});
} catch (error: unknown) {
if (error instanceof Error) {
logger.error(error, 'API-ERROR');
} else {
logger.error(error, 'Encountered unexpected error');
}
shutdownApiEvent();
// Kill application
gracefulExit(1);
}
if (server) {
await server?.close?.();
}
shutdownApiEvent();
// Kill application
gracefulExit(1);
}
};
await viteNodeApp();

56
api/src/mothership/jobs/token-refresh-jobs.ts
View File

@@ -1,56 +0,0 @@
import { OAUTH_CLIENT_ID, OAUTH_OPENID_CONFIGURATION_URL } from '@app/consts';
import { mothershipLogger } from '@app/core';
import { getters, store } from '@app/store';
import { updateAccessTokens } from '@app/store/modules/config';
import { Cron, Expression, Initializer } from '@reflet/cron';
import { Issuer } from 'openid-client';
export class TokenRefresh extends Initializer<typeof TokenRefresh> {
private issuer: Issuer | null = null;
@Cron.PreventOverlap
@Cron(Expression.EVERY_DAY_AT_NOON)
@Cron.RunOnInit
async getNewTokens() {
const {
remote: { refreshtoken },
} = getters.config();
if (!refreshtoken) {
mothershipLogger.debug('No JWT refresh token configured');
return;
}
if (!this.issuer) {
try {
this.issuer = await Issuer.discover(
OAUTH_OPENID_CONFIGURATION_URL
);
mothershipLogger.trace(
'Discovered Issuer %s',
this.issuer.issuer
);
} catch (error: unknown) {
mothershipLogger.error({ error }, 'Failed to discover issuer');
return;
}
}
const client = new this.issuer.Client({
client_id: OAUTH_CLIENT_ID,
token_endpoint_auth_method: 'none',
});
const newTokens = await client.refresh(refreshtoken);
mothershipLogger.debug('tokens %o', newTokens);
if (newTokens.access_token && newTokens.id_token) {
store.dispatch(
updateAccessTokens({
accesstoken: newTokens.access_token,
idtoken: newTokens.id_token,
})
);
}
}
}

43
api/src/store/watch/docker-watch.ts
View File

@@ -1,13 +1,14 @@
import { store } from '@app/store';
import { dockerLogger } from '@app/core/log';
import { updateDockerState } from '@app/store/modules/docker';
import { getDockerContainers } from '@app/core/modules/index';
import { docker } from '@app/core/utils/index';
import DockerEE from 'docker-event-emitter';
import { debounce } from 'lodash-es';
import { dockerLogger } from '@app/core/log';
import { docker } from '@app/core/utils/index';
import { store } from '@app/store';
import { updateDockerState } from '@app/store/modules/docker';
const updateContainerCache = async () => {
try {
const { getDockerContainers } = await import('@app/core/modules/docker');
await getDockerContainers({ useCache: false });
} catch (err) {
dockerLogger.warn('Caught error getting containers %o', err);
@@ -25,37 +26,21 @@ const debouncedContainerCacheUpdate = debounce(updateContainerCache, 500);
export const setupDockerWatch = async (): Promise<DockerEE> => {
// Only watch container events equal to start/stop
const watchedActions = [
'die',
'kill',
'oom',
'pause',
'restart',
'start',
'stop',
'unpause',
];
const watchedActions = ['die', 'kill', 'oom', 'pause', 'restart', 'start', 'stop', 'unpause'];
// Create docker event emitter instance
dockerLogger.debug('Creating docker event emitter instance');
const dee = new DockerEE(docker);
// On Docker event update info with { apps: { installed, started } }
dee.on(
'container',
async (data: {
Type: 'container';
Action: 'start' | 'stop';
from: string;
}) => {
// Only listen to container events
if (!watchedActions.includes(data.Action)) {
return;
}
dockerLogger.debug(`[${data.from}] ${data.Type}->${data.Action}`);
await debouncedContainerCacheUpdate();
dee.on('container', async (data: { Type: 'container'; Action: 'start' | 'stop'; from: string }) => {
// Only listen to container events
if (!watchedActions.includes(data.Action)) {
return;
}
);
dockerLogger.debug(`[${data.from}] ${data.Type}->${data.Action}`);
await debouncedContainerCacheUpdate();
});
// Get docker container count on first start
await debouncedContainerCacheUpdate();
await dee.start();

6
api/src/unraid-api/auth/api-key.service.ts
View File

@@ -38,8 +38,10 @@ export class ApiKeyService implements OnModuleInit {
async onModuleInit() {
this.memoryApiKeys = await this.loadAllFromDisk();
await this.createLocalApiKeyForConnectIfNecessary();
this.setupWatch();
if (environment.IS_MAIN_PROCESS) {
await this.createLocalApiKeyForConnectIfNecessary();
this.setupWatch();
}
}
public findAll(): ApiKey[] {

33
api/src/unraid-api/auth/auth.guard.ts
View File

@@ -4,13 +4,36 @@ import { Injectable, Logger, UnauthorizedException } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { AuthGuard } from '@nestjs/passport';
import type { IncomingMessage } from 'http';
import { parse as parseCookies } from 'cookie';
import { type Observable } from 'rxjs';
import type { FastifyRequest } from '@app/types/fastify';
import { apiLogger } from '@app/core/log';
import { ServerHeaderStrategy } from '@app/unraid-api/auth/header.strategy';
import { UserCookieStrategy } from './cookie.strategy';
/**
* Context of incoming requests.
* Websocket connection req's have connection params and must be treated differently from regular fastify requests.
*/
type GraphQLContext =
| {
connectionParams: Record<string, string>; // When connectionParams is present
req: {
headers?: Record<string, string>;
cookies?: Record<string, unknown>;
extra: {
request: IncomingMessage;
};
};
}
| {
connectionParams?: undefined; // When connectionParams is absent
req: FastifyRequest;
};
@Injectable()
export class GraphqlAuthGuard
extends AuthGuard([ServerHeaderStrategy.key, UserCookieStrategy.key])
@@ -54,7 +77,7 @@ export class GraphqlAuthGuard
if (context.getType<GqlContextType>() === 'graphql') {
// headers are either inside context.getContext().connectionParams or in the request, which is in context.getContext().req (see context.ts)
const ctx = GqlExecutionContext.create(context);
const fullContext = ctx.getContext<any>();
const fullContext = ctx.getContext<GraphQLContext>();
const request = fullContext.req ?? {};
const additionalConnectionParamHeaders = fullContext.connectionParams ?? {};
request.headers = {
@@ -62,6 +85,14 @@ export class GraphqlAuthGuard
...additionalConnectionParamHeaders,
};
// parse cookies from raw headers on initial web socket connection request
if (fullContext.connectionParams) {
const rawHeaders = fullContext.req.extra.request.rawHeaders;
const headerIndex = rawHeaders.findIndex((headerOrValue) => headerOrValue === 'Cookie');
const cookieString = rawHeaders[headerIndex + 1];
request.cookies = parseCookies(cookieString);
}
return request;
} else {
return context.switchToHttp().getRequest();

2
api/src/unraid-api/auth/cookie.service.ts
View File

@@ -2,9 +2,9 @@ import { Inject, Injectable, Logger } from '@nestjs/common';
import { readFile } from 'fs/promises';
import { join } from 'path';
import { fileExists } from '@app/core/utils/files/file-exists';
import { getters } from '@app/store';
import { batchProcess } from '@app/utils';
import { fileExists } from '@app/core/utils/files/file-exists';
/** token for dependency injection of a session cookie options object */
export const SESSION_COOKIE_CONFIG = 'SESSION_COOKIE_CONFIG';

56
api/src/unraid-api/graph/graph.module.ts
View File

@@ -13,7 +13,8 @@ import {
} from 'graphql-scalars';
import { GraphQLLong } from '@app/graphql/resolvers/graphql-type-long';
import { typeDefs } from '@app/graphql/schema/index';
import { loadTypeDefs } from '@app/graphql/schema/loadTypesDefs';
import { getters } from '@app/store/index';
import { idPrefixPlugin } from '@app/unraid-api/graph/id-prefix-plugin';
import { ConnectResolver } from './connect/connect.resolver';
@@ -23,38 +24,41 @@ import { ResolversModule } from './resolvers/resolvers.module';
import { sandboxPlugin } from './sandbox-plugin';
import { ServicesResolver } from './services/services.resolver';
import { SharesResolver } from './shares/shares.resolver';
import { getters } from '@app/store/index';
@Module({
imports: [
ResolversModule,
GraphQLModule.forRoot<ApolloDriverConfig>({
GraphQLModule.forRootAsync<ApolloDriverConfig>({
driver: ApolloDriver,
introspection: getters.config().local?.sandbox === 'yes' ? true : false,
playground: false,
context: ({ req, connectionParams, extra }) => ({
req,
connectionParams,
extra,
}),
plugins: [sandboxPlugin, idPrefixPlugin],
subscriptions: {
'graphql-ws': {
useFactory: async () => {
const typeDefs = await loadTypeDefs();
return {
introspection: getters.config()?.local?.sandbox === 'yes',
playground: false,
context: ({ req, connectionParams, extra }) => ({
req,
connectionParams,
extra,
}),
plugins: [sandboxPlugin, idPrefixPlugin],
subscriptions: {
'graphql-ws': {
path: '/graphql',
},
},
path: '/graphql',
},
typeDefs: print(typeDefs),
resolvers: {
JSON: JSONResolver,
Long: GraphQLLong,
UUID: UUIDResolver,
DateTime: DateTimeResolver,
Port: PortResolver,
URL: URLResolver,
},
validationRules: [NoUnusedVariablesRule],
};
},
path: '/graphql',
typeDefs: print(typeDefs),
resolvers: {
JSON: JSONResolver,
Long: GraphQLLong,
UUID: UUIDResolver,
DateTime: DateTimeResolver,
Port: PortResolver,
URL: URLResolver,
},
validationRules: [NoUnusedVariablesRule],
// schema: schema
}),
],
providers: [NetworkResolver, ServicesResolver, SharesResolver, ConnectResolver, ConnectService],

3
api/src/unraid-api/graph/resolvers/docker/docker.resolver.ts
View File

@@ -2,7 +2,6 @@ import { Query, ResolveField, Resolver } from '@nestjs/graphql';
import { AuthActionVerb, AuthPossession, UsePermissions } from 'nest-authz';
import { getDockerContainers } from '@app/core/modules/index';
import { Resource } from '@app/graphql/generated/api/types';
@Resolver('Docker')
@@ -26,6 +25,8 @@ export class DockerResolver {
})
@ResolveField()
public async containers() {
const { getDockerContainers } = await import('@app/core/modules/docker');
return getDockerContainers({ useCache: false });
}
}

12
api/src/unraid-api/main.ts
View File

@@ -5,8 +5,6 @@ import { FastifyAdapter } from '@nestjs/platform-fastify';
import fastifyCookie from '@fastify/cookie';
import Fastify from 'fastify';
import { LoggerErrorInterceptor, Logger as PinoLogger } from 'nestjs-pino';
import type { FastifyInstance } from '@app/types/fastify';
import { apiLogger } from '@app/core/log';
import { PORT } from '@app/environment';
import { GraphQLExceptionsFilter } from '@app/unraid-api/exceptions/graphql-exceptions.filter';
@@ -17,17 +15,15 @@ import { configureFastifyCors } from './app/cors';
import { CookieService } from './auth/cookie.service';
export async function bootstrapNestServer(): Promise<NestFastifyApplication> {
const server = Fastify({
logger: false,
}) as FastifyInstance;
apiLogger.debug('Creating Nest Server');
const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter(server), {
const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter(), {
bufferLogs: false,
});
app.register(fastifyCookie); // parse cookies before cors
const server = app.getHttpAdapter().getInstance();
await app.register(fastifyCookie); // parse cookies before cors
const cookieService = app.get(CookieService);
app.enableCors(configureFastifyCors(cookieService));

1208
api/src/unraid-api/unraid-file-modifier/modifications/__fixtures__/DefaultPageLayout.php Normal file
View File

File diff suppressed because it is too large Load Diff

286
api/src/unraid-api/unraid-file-modifier/modifications/__fixtures__/Notifications.page Normal file
View File

@@ -0,0 +1,286 @@
Menu="UserPreferences"
Type="xmenu"
Title="Notification Settings"
Icon="icon-notifications"
Tag="phone-square"
---
<?PHP
/* Copyright 2005-2023, Lime Technology
* Copyright 2012-2023, Bergware International.
* Copyright 2012, Andrew Hamer-Adams, http://www.pixeleyes.co.nz.
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License version 2,
* as published by the Free Software Foundation.
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*/
?>
<?
$events = explode('|', $notify['events'] ?? '');
$disabled = $notify['system'] ? '' : 'disabled';
?>
<script>
function prepareNotify(form) {
form.entity.value = form.normal1.checked | form.warning1.checked | form.alert1.checked;
form.normal.value = form.normal1.checked*1 + form.normal2.checked*2 + form.normal3.checked*4;
form.warning.value = form.warning1.checked*1 + form.warning2.checked*2 + form.warning3.checked*4;
form.alert.value = form.alert1.checked*1 + form.alert2.checked*2 + form.alert3.checked*4;
form.unraid.value = form.unraid1.checked*1 + form.unraid2.checked*2 + form.unraid3.checked*4;
form.plugin.value = form.plugin1.checked*1 + form.plugin2.checked*2 + form.plugin3.checked*4;
form.docker_notify.value = form.docker_notify1.checked*1 + form.docker_notify2.checked*2 + form.docker_notify3.checked*4;
form.language_notify.value = form.language_notify1.checked*1 + form.language_notify2.checked*2 + form.language_notify3.checked*4;
form.report.value = form.report1.checked*1 + form.report2.checked*2 + form.report3.checked*4;
form.normal1.disabled = true;
form.normal2.disabled = true;
form.normal3.disabled = true;
form.warning1.disabled = true;
form.warning2.disabled = true;
form.warning3.disabled = true;
form.alert1.disabled = true;
form.alert2.disabled = true;
form.alert3.disabled = true;
form.unraid1.disabled = true;
form.unraid2.disabled = true;
form.unraid3.disabled = true;
form.plugin1.disabled = true;
form.plugin2.disabled = true;
form.plugin3.disabled = true;
form.docker_notify1.disabled = true;
form.docker_notify2.disabled = true;
form.docker_notify3.disabled = true;
form.language_notify1.disabled = true;
form.language_notify2.disabled = true;
form.language_notify3.disabled = true;
form.report1.disabled = true;
form.report2.disabled = true;
form.report3.disabled = true;
}
function prepareSystem(index) {
if (index==0) $('.checkbox').attr('disabled','disabled'); else $('.checkbox').removeAttr('disabled');
}
function prepareTitle() {
var title = '_(Available notifications)_:';
$('#unraidTitle,#pluginTitle,#dockerTitle,#languageTitle,#reportTitle').html('&nbsp;');
if ($('.unraid').is(':visible')) {$('#unraidTitle').html(title); return;}
if ($('.plugin').is(':visible')) {$('#pluginTitle').html(title); return;}
if ($('.docker').is(':visible')) {$('#dockerTitle').html(title); return;}
if ($('.language').is(':visible')) {$('#languageTitle').html(title); return;}
if ($('.report').is(':visible')) {$('#reportTitle').html(title); return;}
}
function prepareUnraid(value) {
if (value=='') $('.unraid').hide(); else $('.unraid').show();
prepareTitle();
}
function preparePlugin(value) {
if (value=='') $('.plugin').hide(); else $('.plugin').show();
prepareTitle();
}
function prepareDocker(value) {
if (value=='') $('.docker').hide(); else $('.docker').show();
prepareTitle();
}
function prepareLanguage(value) {
if (value=='') $('.language').hide(); else $('.language').show();
prepareTitle();
}
function prepareReport(value) {
if (value=='') $('.report').hide(); else $('.report').show();
prepareTitle();
}
$(function(){
prepareUnraid(document.notify_settings.unraidos.value);
preparePlugin(document.notify_settings.version.value);
prepareDocker(document.notify_settings.docker_update.value);
prepareLanguage(document.notify_settings.language_update.value);
prepareReport(document.notify_settings.status.value);
});
</script>
<form markdown="1" name="notify_settings" method="POST" action="/update.php" target="progressFrame" onsubmit="prepareNotify(this)">
<input type="hidden" name="#file" value="dynamix/dynamix.cfg">
<input type="hidden" name="#section" value="notify">
<input type="hidden" name="#command" value="/webGui/scripts/notify">
<input type="hidden" name="#arg[1]" value="cron-init">
<input type="hidden" name="entity">
<input type="hidden" name="normal">
<input type="hidden" name="warning">
<input type="hidden" name="alert">
<input type="hidden" name="unraid">
<input type="hidden" name="plugin">
<input type="hidden" name="docker_notify">
<input type="hidden" name="language_notify">
<input type="hidden" name="report">
_(Notifications display)_:
: <select class="a" name="display">
<?=mk_option($notify['display'], "0", _("Detailed"))?>
<?=mk_option($notify['display'], "1", _("Summarized"))?>
</select>
:notifications_display_help:
_(Display position)_:
: <select name="position" class="a">
<?=mk_option($notify['position'], "top-left", _("top-left"))?>
<?=mk_option($notify['position'], "top-right", _("top-right"))?>
<?=mk_option($notify['position'], "bottom-left", _("bottom-left"))?>
<?=mk_option($notify['position'], "bottom-right", _("bottom-right"))?>
<?=mk_option($notify['position'], "center", _("center"))?>
</select>
:notifications_display_position_help:
_(Auto-close)_ (_(seconds)_):
: <input type="number" name="life" class="a" min="0" max="60" value="<?=$notify['life']?>"> _(a value of zero means no automatic closure)_
:notifications_auto_close_help:
_(Date format)_:
: <select name="date" class="a">
<?=mk_option($notify['date'], "d-m-Y", _("DD-MM-YYYY"))?>
<?=mk_option($notify['date'], "m-d-Y", _("MM-DD-YYYY"))?>
<?=mk_option($notify['date'], "Y-m-d", _("YYYY-MM-DD"))?>
</select>
:notifications_date_format_help:
_(Time format)_:
: <select name="time" class="a">
<?=mk_option($notify['time'], "h:i A", _("12 hours"))?>
<?=mk_option($notify['time'], "H:i", _("24 hours"))?>
</select>
:notifications_time_format_help:
_(Store notifications to flash)_:
: <select name="path" class="a">
<?=mk_option($notify['path'], "/tmp/notifications", _("No"))?>
<?=mk_option($notify['path'], "/boot/config/plugins/dynamix/notifications", _("Yes"))?>
</select>
:notifications_store_flash_help:
_(System notifications)_:
: <select name="system" class="a" onchange="prepareSystem(this.selectedIndex)">
<?=mk_option($notify['system'], "", _("Disabled"))?>
<?=mk_option($notify['system'], "*/1 * * * *", _("Enabled"))?>
</select>
:notifications_system_help:
_(Unraid OS update notification)_:
: <select name="unraidos" class="a" onchange="prepareUnraid(this.value)">
<?=mk_option($notify['unraidos'], "", _("Never check"))?>
<?=mk_option($notify['unraidos'], "11 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['unraidos'], "11 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['unraidos'], "11 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['unraidos'], "11 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['unraidos'], "11 0 1 * *", _("Check once a month"))?>
</select>
:notifications_os_update_help:
_(Plugins update notification)_:
: <select name="version" class="a" onchange="preparePlugin(this.value)">
<?=mk_option($notify['version'], "", _("Never check"))?>
<?=mk_option($notify['version'], "10 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['version'], "10 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['version'], "10 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['version'], "10 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['version'], "10 0 1 * *", _("Check once a month"))?>
</select>
:notifications_plugins_update_help:
_(Docker update notification)_:
: <select name="docker_update" class="a" onchange="prepareDocker(this.value)">
<?=mk_option($notify['docker_update'], "", _("Never check"))?>
<?=mk_option($notify['docker_update'], "10 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['docker_update'], "10 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['docker_update'], "10 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['docker_update'], "10 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['docker_update'], "10 0 1 * *", _("Check once a month"))?>
</select>
:notifications_docker_update_help:
_(Language update notification)_:
: <select name="language_update" class="a" onchange="prepareLanguage(this.value)">
<?=mk_option($notify['language_update'], "", _("Never check"))?>
<?=mk_option($notify['language_update'], "10 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['language_update'], "10 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['language_update'], "10 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['language_update'], "10 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['language_update'], "10 0 1 * *", _("Check once a month"))?>
</select>
_(Array status notification)_:
: <select name="status" class="a" onchange="prepareReport(this.value)">
<?=mk_option($notify['status'], "", _("Never send"))?>
<?=mk_option($notify['status'], "20 * * * *", _("Send every hour"))?>
<?=mk_option($notify['status'], "20 */2 * * *", _("Send every two hours"))?>
<?=mk_option($notify['status'], "20 */6 * * *", _("Send four times a day"))?>
<?=mk_option($notify['status'], "20 */8 * * *", _("Send three times a day"))?>
<?=mk_option($notify['status'], "20 0,12 * * *", _("Send twice a day"))?>
<?=mk_option($notify['status'], "20 0 * * *", _("Send once a day"))?>
<?=mk_option($notify['status'], "20 0 * * 1", _("Send once a week"))?>
<?=mk_option($notify['status'], "20 0 1 * *", _("Send once a month"))?>
</select>
:notifications_array_status_help:
<span id="unraidTitle" class="unraid" style="display:none">&nbsp;</span>
: <span class="unraid" style="display:none"><span class="a">_(Unraid OS update)_</span>
<input type="checkbox" name="unraid1"<?=($notify['unraid'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="unraid2"<?=($notify['unraid'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="unraid3"<?=($notify['unraid'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="pluginTitle" class="plugin" style="display:none">&nbsp;</span>
: <span class="plugin" style="display:none"><span class="a">_(Plugins update)_</span>
<input type="checkbox" name="plugin1"<?=($notify['plugin'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="plugin2"<?=($notify['plugin'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="plugin3"<?=($notify['plugin'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="dockerTitle" class="docker" style="display:none">&nbsp;</span>
: <span class="docker" style="display:none"><span class="a">_(Docker update)_</span>
<input type="checkbox" name="docker_notify1"<?=($notify['docker_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="docker_notify2"<?=($notify['docker_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="docker_notify3"<?=($notify['docker_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="languageTitle" class="language" style="display:none">&nbsp;</span>
: <span class="language" style="display:none"><span class="a">_(Language update)_</span>
<input type="checkbox" name="language_notify1"<?=($notify['language_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="language_notify2"<?=($notify['language_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="language_notify3"<?=($notify['language_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="reportTitle" class="report" style="display:none">&nbsp;</span>
: <span class="report" style="display:none"><span class="a">_(Array status)_</span>
<input type="checkbox" name="report1"<?=($notify['report'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="report2"<?=($notify['report'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="report3"<?=($notify['report'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
:notifications_agent_selection_help:
_(Notification entity)_:
: <span class="a">_(Notices)_</span>
<input type="checkbox" class="checkbox" name="normal1"<?=($notify['normal'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
<input type="checkbox" class="checkbox" name="normal2"<?=($notify['normal'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
<input type="checkbox" class="checkbox" name="normal3"<?=($notify['normal'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
&nbsp;
: <span class="a">_(Warnings)_</span>
<input type="checkbox" class="checkbox" name="warning1"<?=($notify['warning'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
<input type="checkbox" class="checkbox" name="warning2"<?=($notify['warning'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
<input type="checkbox" class="checkbox" name="warning3"<?=($notify['warning'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
&nbsp;
: <span class="a">_(Alerts)_</span>
<input type="checkbox" class="checkbox" name="alert1"<?=($notify['alert'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
<input type="checkbox" class="checkbox" name="alert2"<?=($notify['alert'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
<input type="checkbox" class="checkbox" name="alert3"<?=($notify['alert'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
:notifications_classification_help:
<input type="submit" name="#default" value="_(Default)_">
: <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
</form>

1192
api/src/unraid-api/unraid-file-modifier/modifications/__test__/DefaultPageLayout.modified.php Normal file
View File

File diff suppressed because it is too large Load Diff

270
api/src/unraid-api/unraid-file-modifier/modifications/__test__/Notifications.modified.page Normal file
View File

@@ -0,0 +1,270 @@
Menu="UserPreferences"
Type="xmenu"
Title="Notification Settings"
Icon="icon-notifications"
Tag="phone-square"
---
<?PHP
/* Copyright 2005-2023, Lime Technology
* Copyright 2012-2023, Bergware International.
* Copyright 2012, Andrew Hamer-Adams, http://www.pixeleyes.co.nz.
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License version 2,
* as published by the Free Software Foundation.
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*/
?>
<?
$events = explode('|', $notify['events'] ?? '');
$disabled = $notify['system'] ? '' : 'disabled';
?>
<script>
function prepareNotify(form) {
form.entity.value = form.normal1.checked | form.warning1.checked | form.alert1.checked;
form.normal.value = form.normal1.checked*1 + form.normal2.checked*2 + form.normal3.checked*4;
form.warning.value = form.warning1.checked*1 + form.warning2.checked*2 + form.warning3.checked*4;
form.alert.value = form.alert1.checked*1 + form.alert2.checked*2 + form.alert3.checked*4;
form.unraid.value = form.unraid1.checked*1 + form.unraid2.checked*2 + form.unraid3.checked*4;
form.plugin.value = form.plugin1.checked*1 + form.plugin2.checked*2 + form.plugin3.checked*4;
form.docker_notify.value = form.docker_notify1.checked*1 + form.docker_notify2.checked*2 + form.docker_notify3.checked*4;
form.language_notify.value = form.language_notify1.checked*1 + form.language_notify2.checked*2 + form.language_notify3.checked*4;
form.report.value = form.report1.checked*1 + form.report2.checked*2 + form.report3.checked*4;
form.normal1.disabled = true;
form.normal2.disabled = true;
form.normal3.disabled = true;
form.warning1.disabled = true;
form.warning2.disabled = true;
form.warning3.disabled = true;
form.alert1.disabled = true;
form.alert2.disabled = true;
form.alert3.disabled = true;
form.unraid1.disabled = true;
form.unraid2.disabled = true;
form.unraid3.disabled = true;
form.plugin1.disabled = true;
form.plugin2.disabled = true;
form.plugin3.disabled = true;
form.docker_notify1.disabled = true;
form.docker_notify2.disabled = true;
form.docker_notify3.disabled = true;
form.language_notify1.disabled = true;
form.language_notify2.disabled = true;
form.language_notify3.disabled = true;
form.report1.disabled = true;
form.report2.disabled = true;
form.report3.disabled = true;
}
function prepareSystem(index) {
if (index==0) $('.checkbox').attr('disabled','disabled'); else $('.checkbox').removeAttr('disabled');
}
function prepareTitle() {
var title = '_(Available notifications)_:';
$('#unraidTitle,#pluginTitle,#dockerTitle,#languageTitle,#reportTitle').html('&nbsp;');
if ($('.unraid').is(':visible')) {$('#unraidTitle').html(title); return;}
if ($('.plugin').is(':visible')) {$('#pluginTitle').html(title); return;}
if ($('.docker').is(':visible')) {$('#dockerTitle').html(title); return;}
if ($('.language').is(':visible')) {$('#languageTitle').html(title); return;}
if ($('.report').is(':visible')) {$('#reportTitle').html(title); return;}
}
function prepareUnraid(value) {
if (value=='') $('.unraid').hide(); else $('.unraid').show();
prepareTitle();
}
function preparePlugin(value) {
if (value=='') $('.plugin').hide(); else $('.plugin').show();
prepareTitle();
}
function prepareDocker(value) {
if (value=='') $('.docker').hide(); else $('.docker').show();
prepareTitle();
}
function prepareLanguage(value) {
if (value=='') $('.language').hide(); else $('.language').show();
prepareTitle();
}
function prepareReport(value) {
if (value=='') $('.report').hide(); else $('.report').show();
prepareTitle();
}
$(function(){
prepareUnraid(document.notify_settings.unraidos.value);
preparePlugin(document.notify_settings.version.value);
prepareDocker(document.notify_settings.docker_update.value);
prepareLanguage(document.notify_settings.language_update.value);
prepareReport(document.notify_settings.status.value);
});
</script>
<form markdown="1" name="notify_settings" method="POST" action="/update.php" target="progressFrame" onsubmit="prepareNotify(this)">
<input type="hidden" name="#file" value="dynamix/dynamix.cfg">
<input type="hidden" name="#section" value="notify">
<input type="hidden" name="#command" value="/webGui/scripts/notify">
<input type="hidden" name="#arg[1]" value="cron-init">
<input type="hidden" name="entity">
<input type="hidden" name="normal">
<input type="hidden" name="warning">
<input type="hidden" name="alert">
<input type="hidden" name="unraid">
<input type="hidden" name="plugin">
<input type="hidden" name="docker_notify">
<input type="hidden" name="language_notify">
<input type="hidden" name="report">
_(Notifications display)_:
: <select class="a" name="display">
<?=mk_option($notify['display'], "0", _("Detailed"))?>
<?=mk_option($notify['display'], "1", _("Summarized"))?>
</select>
:notifications_display_help:
_(Display position)_:
: <select name="position" class="a">
<?=mk_option($notify['position'], "top-left", _("top-left"))?>
<?=mk_option($notify['position'], "top-right", _("top-right"))?>
<?=mk_option($notify['position'], "bottom-left", _("bottom-left"))?>
<?=mk_option($notify['position'], "bottom-right", _("bottom-right"))?>
<?=mk_option($notify['position'], "center", _("center"))?>
</select>
:notifications_display_position_help:
_(Auto-close)_ (_(seconds)_):
: <input type="number" name="life" class="a" min="0" max="60" value="<?=$notify['life']?>"> _(a value of zero means no automatic closure)_
:notifications_auto_close_help:
_(Store notifications to flash)_:
: <select name="path" class="a">
<?=mk_option($notify['path'], "/tmp/notifications", _("No"))?>
<?=mk_option($notify['path'], "/boot/config/plugins/dynamix/notifications", _("Yes"))?>
</select>
:notifications_store_flash_help:
_(System notifications)_:
: <select name="system" class="a" onchange="prepareSystem(this.selectedIndex)">
<?=mk_option($notify['system'], "", _("Disabled"))?>
<?=mk_option($notify['system'], "*/1 * * * *", _("Enabled"))?>
</select>
:notifications_system_help:
_(Unraid OS update notification)_:
: <select name="unraidos" class="a" onchange="prepareUnraid(this.value)">
<?=mk_option($notify['unraidos'], "", _("Never check"))?>
<?=mk_option($notify['unraidos'], "11 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['unraidos'], "11 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['unraidos'], "11 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['unraidos'], "11 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['unraidos'], "11 0 1 * *", _("Check once a month"))?>
</select>
:notifications_os_update_help:
_(Plugins update notification)_:
: <select name="version" class="a" onchange="preparePlugin(this.value)">
<?=mk_option($notify['version'], "", _("Never check"))?>
<?=mk_option($notify['version'], "10 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['version'], "10 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['version'], "10 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['version'], "10 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['version'], "10 0 1 * *", _("Check once a month"))?>
</select>
:notifications_plugins_update_help:
_(Docker update notification)_:
: <select name="docker_update" class="a" onchange="prepareDocker(this.value)">
<?=mk_option($notify['docker_update'], "", _("Never check"))?>
<?=mk_option($notify['docker_update'], "10 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['docker_update'], "10 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['docker_update'], "10 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['docker_update'], "10 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['docker_update'], "10 0 1 * *", _("Check once a month"))?>
</select>
:notifications_docker_update_help:
_(Language update notification)_:
: <select name="language_update" class="a" onchange="prepareLanguage(this.value)">
<?=mk_option($notify['language_update'], "", _("Never check"))?>
<?=mk_option($notify['language_update'], "10 */6 * * *", _("Check four times a day"))?>
<?=mk_option($notify['language_update'], "10 0,12 * * *", _("Check twice a day"))?>
<?=mk_option($notify['language_update'], "10 0 * * *", _("Check once a day"))?>
<?=mk_option($notify['language_update'], "10 0 * * 1", _("Check once a week"))?>
<?=mk_option($notify['language_update'], "10 0 1 * *", _("Check once a month"))?>
</select>
_(Array status notification)_:
: <select name="status" class="a" onchange="prepareReport(this.value)">
<?=mk_option($notify['status'], "", _("Never send"))?>
<?=mk_option($notify['status'], "20 * * * *", _("Send every hour"))?>
<?=mk_option($notify['status'], "20 */2 * * *", _("Send every two hours"))?>
<?=mk_option($notify['status'], "20 */6 * * *", _("Send four times a day"))?>
<?=mk_option($notify['status'], "20 */8 * * *", _("Send three times a day"))?>
<?=mk_option($notify['status'], "20 0,12 * * *", _("Send twice a day"))?>
<?=mk_option($notify['status'], "20 0 * * *", _("Send once a day"))?>
<?=mk_option($notify['status'], "20 0 * * 1", _("Send once a week"))?>
<?=mk_option($notify['status'], "20 0 1 * *", _("Send once a month"))?>
</select>
:notifications_array_status_help:
<span id="unraidTitle" class="unraid" style="display:none">&nbsp;</span>
: <span class="unraid" style="display:none"><span class="a">_(Unraid OS update)_</span>
<input type="checkbox" name="unraid1"<?=($notify['unraid'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="unraid2"<?=($notify['unraid'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="unraid3"<?=($notify['unraid'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="pluginTitle" class="plugin" style="display:none">&nbsp;</span>
: <span class="plugin" style="display:none"><span class="a">_(Plugins update)_</span>
<input type="checkbox" name="plugin1"<?=($notify['plugin'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="plugin2"<?=($notify['plugin'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="plugin3"<?=($notify['plugin'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="dockerTitle" class="docker" style="display:none">&nbsp;</span>
: <span class="docker" style="display:none"><span class="a">_(Docker update)_</span>
<input type="checkbox" name="docker_notify1"<?=($notify['docker_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="docker_notify2"<?=($notify['docker_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="docker_notify3"<?=($notify['docker_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="languageTitle" class="language" style="display:none">&nbsp;</span>
: <span class="language" style="display:none"><span class="a">_(Language update)_</span>
<input type="checkbox" name="language_notify1"<?=($notify['language_notify'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="language_notify2"<?=($notify['language_notify'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="language_notify3"<?=($notify['language_notify'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
<span id="reportTitle" class="report" style="display:none">&nbsp;</span>
: <span class="report" style="display:none"><span class="a">_(Array status)_</span>
<input type="checkbox" name="report1"<?=($notify['report'] & 1)==1 ? ' checked' : ''?>>_(Browser)_ &nbsp;
<input type="checkbox" name="report2"<?=($notify['report'] & 2)==2 ? ' checked' : ''?>>_(Email)_ &nbsp;
<input type="checkbox" name="report3"<?=($notify['report'] & 4)==4 ? ' checked' : ''?>>_(Agents)_ &nbsp;</span>
:notifications_agent_selection_help:
_(Notification entity)_:
: <span class="a">_(Notices)_</span>
<input type="checkbox" class="checkbox" name="normal1"<?=($notify['normal'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
<input type="checkbox" class="checkbox" name="normal2"<?=($notify['normal'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
<input type="checkbox" class="checkbox" name="normal3"<?=($notify['normal'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
&nbsp;
: <span class="a">_(Warnings)_</span>
<input type="checkbox" class="checkbox" name="warning1"<?=($notify['warning'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
<input type="checkbox" class="checkbox" name="warning2"<?=($notify['warning'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
<input type="checkbox" class="checkbox" name="warning3"<?=($notify['warning'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
&nbsp;
: <span class="a">_(Alerts)_</span>
<input type="checkbox" class="checkbox" name="alert1"<?=($notify['alert'] & 1)==1 ? " checked $disabled" : $disabled?>>_(Browser)_ &nbsp;
<input type="checkbox" class="checkbox" name="alert2"<?=($notify['alert'] & 2)==2 ? " checked $disabled" : $disabled?>>_(Email)_ &nbsp;
<input type="checkbox" class="checkbox" name="alert3"<?=($notify['alert'] & 4)==4 ? " checked $disabled" : $disabled?>>_(Agents)_ &nbsp;
:notifications_classification_help:
<input type="submit" name="#default" value="_(Default)_">
: <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
</form>

19
api/src/unraid-api/unraid-file-modifier/modifications/__test__/default-page-layout.modification.spec.ts Normal file
View File

@@ -0,0 +1,19 @@
import { readFile } from 'fs/promises';
import { resolve } from 'path';
import { describe, expect, test } from 'vitest';
import DefaultPageLayoutModification from '../default-page-layout.modification';
describe('DefaultPageLayout.php modifier', () => {
test('correctly applies to fresh install', async () => {
const fileContent = await readFile(
resolve(__dirname, '../__fixtures__/DefaultPageLayout.php'),
'utf-8'
);
expect(fileContent.length).toBeGreaterThan(0);
await expect(DefaultPageLayoutModification.applyToSource(fileContent)).toMatchFileSnapshot(
'DefaultPageLayout.modified.php'
);
});
});

19
api/src/unraid-api/unraid-file-modifier/modifications/__test__/notifications-page.modification.spec.ts Normal file
View File

@@ -0,0 +1,19 @@
import { readFile } from 'fs/promises';
import { resolve } from 'path';
import { describe, expect, test } from 'vitest';
import NotificationsPageModification from '../notifications-page.modification';
describe('Notifications.page modifier', () => {
test('correctly applies to fresh install', async () => {
const fileContent = await readFile(
resolve(__dirname, '../__fixtures__/Notifications.page'),
'utf-8'
);
expect(fileContent.length).toBeGreaterThan(0);
await expect(NotificationsPageModification.applyToSource(fileContent)).toMatchFileSnapshot(
'Notifications.modified.page'
);
});
});

69
api/src/unraid-api/unraid-file-modifier/modifications/default-page-layout.modification.ts Normal file
View File

@@ -0,0 +1,69 @@
import type { Logger } from '@nestjs/common';
import { readFile, writeFile } from 'node:fs/promises';
import {
FileModification,
ShouldApplyWithReason,
} from '@app/unraid-api/unraid-file-modifier/unraid-file-modifier.service';
import { backupFile, restoreFile } from '@app/utils';
export default class DefaultPageLayoutModification implements FileModification {
id: string = 'DefaultPageLayout.php';
logger: Logger;
filePath: string = '/usr/local/emhttp/plugins/dynamix/include/DefaultPageLayout.php';
constructor(logger: Logger) {
this.logger = logger;
}
async apply(): Promise<void> {
await backupFile(this.filePath, true);
const fileContent = await readFile(this.filePath, 'utf-8');
await writeFile(this.filePath, DefaultPageLayoutModification.applyToSource(fileContent));
this.logger.log(`${this.id} replaced successfully.`);
}
async rollback(): Promise<void> {
const restored = await restoreFile(this.filePath, false);
if (restored) {
this.logger.debug(`${this.id} restored.`);
} else {
this.logger.warn(`Could not restore ${this.id}`);
}
}
async shouldApply(): Promise<ShouldApplyWithReason> {
return {
shouldApply: true,
reason: 'Always apply the allowed file changes to ensure compatibility.',
};
}
static applyToSource(fileContent: string): string {
const transformers = [
DefaultPageLayoutModification.removeNotificationBell,
DefaultPageLayoutModification.replaceToasts,
DefaultPageLayoutModification.addToaster,
];
return transformers.reduce((content, fn) => fn(content), fileContent);
}
static addToaster(source: string): string {
if (source.includes('unraid-toaster')) {
return source;
}
const insertion = `<unraid-toaster rich-colors close-button position="<?= ($notify['position'] === 'center') ? 'top-center' : $notify['position'] ?>"></unraid-toaster>`;
return source.replace(/<\/body>/, `${insertion}\n</body>`);
}
static removeNotificationBell(source: string): string {
return source.replace(/^.*(id='bell'|#bell).*$/gm, '');
}
static replaceToasts(source: string): string {
// matches jgrowl calls up to the second `)};`
const jGrowlPattern =
/\$\.jGrowl\(notify\.subject\+'<br>'\+notify\.description,\s*\{(?:[\s\S]*?\}\);[\s\S]*?)}\);/g;
return source.replace(jGrowlPattern, '');
}
}

2
api/src/unraid-api/unraid-file-modifier/modifications/log-rotate.modification.ts
View File

@@ -3,11 +3,11 @@ import { rm, writeFile } from 'node:fs/promises';
import { execa } from 'execa';
import { fileExists } from '@app/core/utils/misc/parse-config';
import {
FileModification,
ShouldApplyWithReason,
} from '@app/unraid-api/unraid-file-modifier/unraid-file-modifier.service';
import { fileExists } from '@app/core/utils/files/file-exists';
export class LogRotateModification implements FileModification {
id: string = 'log-rotate';

51
api/src/unraid-api/unraid-file-modifier/modifications/notifications-page.modification.ts Normal file
View File

@@ -0,0 +1,51 @@
import type { Logger } from '@nestjs/common';
import { readFile, writeFile } from 'node:fs/promises';
import {
FileModification,
ShouldApplyWithReason,
} from '@app/unraid-api/unraid-file-modifier/unraid-file-modifier.service';
import { backupFile, restoreFile } from '@app/utils';
export default class NotificationsPageModification implements FileModification {
id: string = 'Notifications.page';
logger: Logger;
filePath: string = '/usr/local/emhttp/plugins/dynamix/Notifications.page';
constructor(logger: Logger) {
this.logger = logger;
}
async apply(): Promise<void> {
await backupFile(this.filePath, true);
const fileContent = await readFile(this.filePath, 'utf-8');
await writeFile(this.filePath, NotificationsPageModification.applyToSource(fileContent));
this.logger.log(`${this.id} replaced successfully.`);
}
async rollback(): Promise<void> {
const restored = await restoreFile(this.filePath, false);
if (restored) {
this.logger.debug(`${this.id} restored.`);
} else {
this.logger.warn(`Could not restore ${this.id}`);
}
}
async shouldApply(): Promise<ShouldApplyWithReason> {
return {
shouldApply: true,
reason: 'Always apply the allowed file changes to ensure compatibility.',
};
}
static applyToSource(fileContent: string): string {
return (
fileContent
// Remove lines between _(Date format)_: and :notifications_date_format_help:
.replace(/^\s*_\(Date format\)_:(?:[^\n]*\n)*?\s*:notifications_date_format_help:/gm, '')
// Remove lines between _(Time format)_: and :notifications_time_format_help:
.replace(/^\s*_\(Time format\)_:(?:[^\n]*\n)*?\s*:notifications_time_format_help:/gm, '')
);
}
}

7
api/src/unraid-api/unraid-file-modifier/unraid-file-modifier.service.ts
View File

@@ -1,8 +1,11 @@
import { Injectable, Logger, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
import AuthRequestModification from '@app/unraid-api/unraid-file-modifier/modifications/auth-request.modification';
import SSOFileModification from '@app/unraid-api/unraid-file-modifier/modifications/sso.modification';
import { LogRotateModification } from '@app/unraid-api/unraid-file-modifier/modifications/log-rotate.modification';
import SSOFileModification from '@app/unraid-api/unraid-file-modifier/modifications/sso.modification';
import DefaultPageLayoutModification from './modifications/default-page-layout.modification';
import NotificationsPageModification from './modifications/notifications-page.modification';
export interface ShouldApplyWithReason {
shouldApply: boolean;
@@ -46,6 +49,8 @@ export class UnraidFileModificationService implements OnModuleInit, OnModuleDest
LogRotateModification,
AuthRequestModification,
SSOFileModification,
DefaultPageLayoutModification,
NotificationsPageModification,
];
for (const ModificationClass of modificationClasses) {
const instance = new ModificationClass(this.logger);

1
api/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

12
api/vite.config.ts
View File

@@ -1,14 +1,15 @@
import type { ViteUserConfig } from 'vitest/config';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import nodeExternals from 'rollup-plugin-node-externals';
import swc from 'unplugin-swc';
import { VitePluginNode } from 'vite-plugin-node';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';
export default defineConfig(({ mode }) => {
export default defineConfig(({ mode }): ViteUserConfig => {
return {
assetsInclude: ['src/**/*.graphql'],
plugins: [
tsconfigPaths(),
nodeExternals(),
@@ -19,9 +20,6 @@ export default defineConfig(({ mode }) => {
viteCommonjs({
include: ['@fastify/type-provider-typebox', 'node_modules/**'],
}),
viteStaticCopy({
targets: [{ src: 'src/graphql/schema/types', dest: '' }],
}),
...(mode === 'development'
? VitePluginNode({
adapter: 'nest',
@@ -73,7 +71,6 @@ export default defineConfig(({ mode }) => {
include: [
'@nestjs/common',
'@nestjs/core',
'@nestjs/platform-express',
'reflect-metadata',
'fastify',
'passport',
@@ -81,7 +78,8 @@ export default defineConfig(({ mode }) => {
],
},
build: {
sourcemap: true,
ssr: true,
sourcemap: false,
outDir: 'dist',
rollupOptions: {
input: {

104
plugin/plugins/dynamix.unraid.net.plg
View File

@@ -48,6 +48,20 @@ exit 0
<FILE Run="/bin/bash" Method="install">
<INLINE>
<![CDATA[
# Check available disk space on /usr
echo -n "Checking disk space on /usr... "
FREE_SPACE=$(df -m /usr | awk 'NR==2 {print $4}')
if [ -z "$FREE_SPACE" ]; then
echo "⚠️ Error: Unable to determine free space on /usr"
exit 1
fi
if [ "$FREE_SPACE" -lt 300 ]; then
echo "⚠️ Error: Insufficient disk space on /usr. Need at least 300MB free, only ${FREE_SPACE}MB available"
exit 1
fi
echo "ok. (${FREE_SPACE}MB free)"
version=
# shellcheck disable=SC1091
source /etc/unraid-version
@@ -104,7 +118,6 @@ sha256check() {
exit 0
</INLINE>
</FILE>
<!-- download node - older OS releases -->
<FILE Name="/boot/config/plugins/dynamix.my.servers/&NODEJS_FILENAME;">
<URL>&NODEJS_TXZ;</URL>
<SHA256>&NODEJS_SHA256;</SHA256>
@@ -113,47 +126,32 @@ sha256check() {
<INLINE>
NODE_FILE="&NODEJS_FILENAME;"
<![CDATA[
if [[ -f "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" ]]; then
# Create temp directory with error checking
TEMP_DIR=$(mktemp -d) || { echo "Failed to create temp directory"; exit 1; }
# Extract with error checking
if ! tar --strip-components=1 -xf "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" -C "${TEMP_DIR}"; then
echo "Failed to extract Node.js archive"
rm -rf "${TEMP_DIR}"
# Check if the Node.js archive exists
if [[ ! -f "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" ]]; then
echo "Node.js archive not found at /boot/config/plugins/dynamix.my.servers/${NODE_FILE}"
exit 1
fi
# Verify extracted files exist before copying
for DIR in bin lib include share; do
if [[ ! -d "${TEMP_DIR}/${DIR}" ]]; then
echo "Missing ${DIR} directory in Node.js archive"
rm -rf "${TEMP_DIR}"
exit 1
fi
done
# Perform a dry run to verify the archive is valid
if ! tar --strip-components=1 -tf "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" > /dev/null; then
echo "Node.js archive is corrupt or invalid"
exit 1
fi
# Create destination directories if they don't exist
for DIR in bin lib include share; do
mkdir -p "/usr/local/${DIR}"
done
# Define the target directory for Node.js
NODE_DIR="/usr/local/node"
# Copy files with individual error checking
for DIR in bin lib include share; do
if ! cp -rf "${TEMP_DIR}/${DIR}"/* "/usr/local/${DIR}/"; then
echo "Failed to copy ${DIR} files"
rm -rf "${TEMP_DIR}"
exit 1
fi
done
# Create the target directory if it doesn't exist
mkdir -p "${NODE_DIR}" || { echo "Failed to create ${NODE_DIR}"; exit 1; }
# Extract the archive to the target directory
if ! tar --strip-components=1 -xf "/boot/config/plugins/dynamix.my.servers/${NODE_FILE}" -C "${NODE_DIR}"; then
echo "Failed to extract Node.js archive"
exit 1
fi
echo "Node.js installation successful"
rm -rf "${TEMP_DIR}"
else
echo "Node.js archive not found at /boot/config/plugins/dynamix.my.servers/${NODE_FILE}"
exit 1
fi
exit 0
exit 0
]]>
</INLINE>
</FILE>
@@ -440,6 +438,8 @@ appendTextIfMissing() {
echo "${TEXT}">>"${FILE}"
fi
}
source /root/.bashrc
echo "PATH: $PATH"
version=
# shellcheck disable=SC1091
@@ -481,7 +481,6 @@ echo
# skip: do not perform any action if there is a manifest version difference
preserveFilesDirs=(
"move:/usr/local/emhttp/plugins/dynamix/Registration.page:preventDowngrade"
"copy:/usr/local/emhttp/plugins/dynamix/Notifications.page:preventDowngrade"
"move:/usr/local/emhttp/plugins/dynamix/include/UpdateDNS.php:preventDowngrade"
"move:/usr/local/emhttp/plugins/dynamix.plugin.manager/Downgrade.page:preventDowngrade"
"move:/usr/local/emhttp/plugins/dynamix.plugin.manager/Update.page:preventDowngrade"
@@ -548,13 +547,6 @@ if [[ -n $LINENUM ]]; then
mv -f "$FILE~" "$FILE"
fi
# Remove lines containing id='bell' or #bell and write to intermediate temporary file.
# This effectively removes the old notification bell from the webgui (via DefaultPageLayout.php).
TMP_FILE=$(mktemp)
grep -Ev "id='bell'|#bell" "$FILE" > "$TMP_FILE"
mv "$TMP_FILE" "$FILE"
echo "Removed notification-bell-related lines from $FILE"
# patch: showchanges, starting with 6.11.0-rc1
# ShowChanges.php, in 6.10
# search text: $valid = ['/var/tmp/','/tmp/plugins/'];
@@ -568,19 +560,6 @@ for FILE in "${FILES[@]}"; do
fi
done
# patch: Notifications.page
#
# Remove date and time format settings from Notification Settings
# search text: _(Date format)_:
# search text: _(Time format)_:
FILE=/usr/local/emhttp/plugins/dynamix/Notifications.page
TMP_FILE=$(mktemp)
cp "$FILE" "$TMP_FILE"
sed -i '/_(Date format)_:/,/:notifications_date_format_help:/d' $TMP_FILE
sed -i '/_(Time format)_:/,/:notifications_time_format_help:/d' $TMP_FILE
mv "$TMP_FILE" "$FILE"
# remove keys.limetechnology.com from hosts file
# brings older versions of Unraid in sync with 6.12.12
# no need to restore original file on uninstall
@@ -905,15 +884,20 @@ mkdir -p /var/log/unraid-api
tar -C "${api_base_directory}" -xzf "${flash}/unraid-api.tgz" --strip 1
# Copy env file
cp "${api_base_directory}/.env.${env}" "${api_base_directory}/.env"
npm link "${api_base_directory}" --force
# Create Symlink from /usr/local/unraid-api/dist/cli.js to /usr/local/bin/unraid-api
ln -sf "${api_base_directory}/dist/cli.js" "${unraid_binary_path}"
# Create symlink to unraid-api binary (to allow usage elsewhere)
ln -sf /usr/local/bin/unraid-api /usr/local/sbin/unraid-api
ln -sf /usr/local/bin/unraid-api /usr/bin/unraid-api
ln -sf ${unraid_binary_path} /usr/local/sbin/unraid-api
ln -sf ${unraid_binary_path} /usr/bin/unraid-api
# bail if expected file does not exist
[[ ! -f "${api_base_directory}/package.json" ]] && echo "unraid-api install failed" && exit 1
logger "Starting flash backup (if enabled)"
echo "/etc/rc.d/rc.flash_backup start" | at -M now &>/dev/null
. /root/.bashrc
echo "PATH: $PATH"
logger "Starting Unraid API"
${unraid_binary_path} start
@@ -942,4 +926,4 @@ exit 0
</INLINE>
</FILE>
</PLUGIN>
</PLUGIN>

6
plugin/source/dynamix.unraid.net/etc/profile.d/node.sh Executable file
View File

@@ -0,0 +1,6 @@
#! /bin/bash
# Add Node.js binary path to PATH if not already present
if [[ ":$PATH:" != *":/usr/local/node/bin:"* ]]; then
export PATH="/usr/local/node/bin:$PATH"
fi

70
plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php
View File

@@ -1,36 +1,64 @@
<?php
$docroot = $docroot ?? $_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp';
class WebComponentsExtractor {
private const MANIFEST_FILE = '/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/manifest.json';
private const SEARCH_TEXT = 'unraid-components.client.mjs';
class WebComponentsExtractor
{
private const PREFIXED_PATH = '/plugins/dynamix.my.servers/unraid-components/';
private const RICH_COMPONENTS_ENTRY = 'unraid-components.client.mjs';
private const UI_ENTRY = 'src/register.ts';
private const UI_STYLES_ENTRY = 'style.css';
private string $jsFileName = '';
public function __construct() {}
public function __construct() {
$localManifest = json_decode(file_get_contents(self::MANIFEST_FILE), true);
public function getAssetPath(string $asset): string
{
return self::PREFIXED_PATH . $asset;
}
public function getManifestContents(string $pathFromComponents): array
{
$filePath = '/usr/local/emhttp' . $this->getAssetPath($pathFromComponents);
return json_decode(file_get_contents($filePath), true);
}
private function getRichComponentsFile(): string
{
$localManifest = $this->getManifestContents('manifest.json');
foreach ($localManifest as $key => $value) {
if (strpos($key, self::SEARCH_TEXT) !== false && isset($value["file"])) {
$this->jsFileName = $value["file"];
break;
if (strpos($key, self::RICH_COMPONENTS_ENTRY) !== false && isset($value["file"])) {
return $value["file"];
}
}
}
public function getJsFileName(): string {
return $this->jsFileName;
}
public function getJSFileRelativePath(): string {
return self::PREFIXED_PATH . $this->jsFileName;
}
public function getScriptTagHtml(): string {
if (empty($this->jsFileName)) {
return '<script>console.error("%cNo matching key containing \'' . self::SEARCH_TEXT . '\' found.", "font-weight: bold; color: white; background-color: red");</script>';
private function getRichComponentsScript(): string
{
$jsFile = $this->getRichComponentsFile();
if (empty($jsFile)) {
return '<script>console.error("%cNo matching key containing \'' . self::RICH_COMPONENTS_ENTRY . '\' found.", "font-weight: bold; color: white; background-color: red");</script>';
}
return '<script src="' . $this->getAssetPath($jsFile) . '"></script>';
}
private function getUnraidUiScriptHtml(): string
{
$manifest = $this->getManifestContents('ui.manifest.json');
$jsFile = $manifest[self::UI_ENTRY]['file'];
$cssFile = $manifest[self::UI_STYLES_ENTRY]['file'];
return '<script defer type="module">
import { registerAllComponents } from "' . $this->getAssetPath($jsFile) . '";
registerAllComponents({ pathToSharedCss: "' . $this->getAssetPath($cssFile) . '" });
</script>';
}
public function getScriptTagHtml(): string
{
try {
return $this->getRichComponentsScript() . $this->getUnraidUiScriptHtml();
} catch (\Exception $e) {
error_log("Error in WebComponentsExtractor::getScriptTagHtml: " . $e->getMessage());
return "";
}
return '<script src="' . $this->getJSFileRelativePath() . '"></script>';
}
}

41
unraid-ui/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body class="p-12">
<div id="app"></div>
<unraid-badge>Hello world</unraid-badge>
<unraid-button>woah</unraid-button>
<unraid-brand-button>woah2</unraid-brand-button>
<div class="w-[200px]"><unraid-brand-loading></unraid-brand-loading></div>
<div class="w-[200px] bg-neutral-900 p-6 rounded"><unraid-brand-loading-white></unraid-brand-loading-white></div>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
<unraid-toaster close-button rich-colors></unraid-toaster>
<!-- <unraid-dropdown-menu-label>My Account</unraid-dropdown-menu-label>
<unraid-dropdown-menu-separator class="bg-black"></unraid-dropdown-menu-separator>
<unraid-dropdown-menu-trigger>
<unraid-button variant="secondary">Open Menu</unraid-button>
</unraid-dropdown-menu-trigger>
<unraid-dropdown-menu>
<unraid-dropdown-menu-trigger>
<unraid-button variant="secondary">Open Menu</unraid-button>
</unraid-dropdown-menu-trigger>
<unraid-dropdown-menu-content>
<unraid-dropdown-menu-label>My Account</unraid-dropdown-menu-label>
<unraid-dropdown-menu-separator></unraid-dropdown-menu-separator>
<unraid-dropdown-menu-item>Profile</unraid-dropdown-menu-item>
<unraid-dropdown-menu-item>Settings</unraid-dropdown-menu-item>
<unraid-dropdown-menu-item>Logout</unraid-dropdown-menu-item>
</unraid-dropdown-menu-content>
</unraid-dropdown-menu> -->
<script type="module">
import { registerAllComponents } from '/src/register.ts';
registerAllComponents();
</script>
</body>
</html>

8
unraid-ui/justfile
View File

@@ -10,4 +10,10 @@ setup:
clean:
npm run clean
rm -rf node_modules
rm -rf node_modules
build-wc:
REM_PLUGIN=true npx vite build -c vite.web-component.ts --mode production
deploy server_name:
rsync -avz -e ssh ./dist/ root@{{server_name}}:/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components

921
unraid-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
unraid-ui/package.json
View File

@@ -14,6 +14,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"build:wc": "REM_PLUGIN=true npx vite build -c vite.web-component.ts --mode production",
"preview": "vite preview",
"test": "vitest",
"test:ui": "vitest --ui",
@@ -34,12 +35,15 @@
"@vueuse/core": "^10.0.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"kebab-case": "^2.0.1",
"lucide-vue-next": "^0.468.0",
"radix-vue": "^1.9.11",
"shadcn-vue": "^0.11.3",
"tailwind-merge": "^2.5.5"
"tailwind-merge": "^2.5.5",
"vue-sonner": "^1.3.0"
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
@@ -50,6 +54,7 @@
"@types/node": "^20.0.0",
"@types/testing-library__vue": "^5.0.0",
"@vitejs/plugin-vue": "^5.0.0",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"@vitest/coverage-v8": "^1.0.0",
"@vitest/ui": "^1.0.0",
"@vue/test-utils": "^2.4.0",
@@ -61,11 +66,13 @@
"happy-dom": "^12.0.0",
"postcss": "^8.4.49",
"prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^3.0.0",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.0.0",
"vite": "^5.0.0",
"vite-plugin-dts": "^3.0.0",
"vite-plugin-vue-devtools": "^7.7.1",
"vitest": "^1.0.0",
"vue": "^3.3.0",
"vue-tsc": "^1.8.0"

2
unraid-ui/src/components/brand/BrandLoading.vue → unraid-ui/src/components/brand/BrandLoading.ce.vue
View File

@@ -83,7 +83,7 @@ withDefaults(defineProps<Props>(), {
</svg>
</template>
<style lang="postcss">
<style scoped lang="css">
.unraid_mark_2,
.unraid_mark_4 {
animation: mark_2 1.5s ease infinite;

2
unraid-ui/src/components/brand/BrandLoadingWhite.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import BrandLoading from './BrandLoading.vue';
import BrandLoading from './BrandLoading.ce.vue';
</script>
<template>

2
unraid-ui/src/components/brand/index.ts
View File

@@ -1,6 +1,6 @@
export { default as BrandButton } from "./BrandButton.vue";
export { brandButtonVariants } from "./brand-button.variants";
export { default as BrandLoading } from "./BrandLoading.vue";
export { default as BrandLoading } from "./BrandLoading.ce.vue";
export { default as BrandLoadingWhite } from "./BrandLoadingWhite.vue";
export { default as BrandLogo } from "./BrandLogo.vue";
export { default as BrandLogoConnect } from "./BrandLogoConnect.vue";

2
unraid-ui/src/components/common/button/button.variants.ts
View File

@@ -1,7 +1,7 @@
import { cva } from "class-variance-authority";
export const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {

29
unraid-ui/src/components/common/toast/Toaster.vue Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Toaster as Sonner, toast, type ToasterProps } from 'vue-sonner';
const props = defineProps<ToasterProps>();
onMounted(() => {
globalThis.toast = toast;
});
</script>
<template>
<Sonner
class="toaster group"
v-bind="props"
:toast-options="{
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
error: '[&>div>svg]:fill-unraid-red-500',
warning: '[&>div>svg]:fill-yellow-500',
info: '[&>div>svg]:fill-blue-500',
},
}"
/>
</template>

1
unraid-ui/src/components/common/toast/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as Toaster } from './Toaster.vue';

58
unraid-ui/src/components/index.ts Normal file
View File

@@ -0,0 +1,58 @@
export { Badge } from '@/components/common/badge';
export {
BrandButton,
BrandLoading,
BrandLoadingWhite,
BrandLogo,
BrandLogoConnect,
} from '@/components/brand';
export { Button } from '@/components/common/button';
export { CardWrapper, PageContainer } from '@/components/layout';
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuRadioGroup,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuShortcut,
DropdownMenuSeparator,
DropdownMenuLabel,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
} from '@/components/common/dropdown-menu';
export { Bar, Error, Spinner } from '@/components/common/loading';
export { Input } from '@/components/form/input';
export { Label } from '@/components/form/label';
export { Lightswitch } from '@/components/form/lightswitch';
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectItemText,
SelectLabel,
SelectScrollUpButton,
SelectScrollDownButton,
SelectSeparator,
SelectTrigger,
SelectValue,
} from '@/components/form/select';
export { Switch, SwitchHeadlessUI } from '@/components/form/switch';
export { ScrollArea, ScrollBar } from '@/components/common/scroll-area';
export {
Sheet,
SheetTrigger,
SheetContent,
SheetClose,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
} from '@/components/common/sheet';
export { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/common/tabs';
export { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/common/tooltip';
export { Toaster } from '@/components/common/toast';

8
unraid-ui/src/global.d.ts vendored Normal file
View File

@@ -0,0 +1,8 @@
/* eslint-disable no-var */
declare global {
/** loaded by Toaster.vue */
var toast: (typeof import('vue-sonner'))['toast'];
}
// an export or import statement is required to make this file a module
export {};

1
unraid-ui/src/index.ts
View File

@@ -149,3 +149,4 @@ export {
TooltipProvider,
useTeleport,
};
export { Toaster } from '@/components/common/toast';

34
unraid-ui/src/register.ts Normal file
View File

@@ -0,0 +1,34 @@
import { defineCustomElement } from 'vue';
import './styles/index.css';
import * as Components from '@/components';
import kebabCase from 'kebab-case';
const debugImports = process.env.NODE_ENV !== 'production';
type RegisterParams = {
namePrefix?: string;
pathToSharedCss?: string;
};
export function registerAllComponents(params: RegisterParams = {}) {
const { namePrefix = 'unraid', pathToSharedCss = './src/styles/index.css' } = params;
Object.entries(Components).forEach(([name, component]) => {
// add our shared css to each web component
component.styles ??= [];
component.styles.unshift(`@import "${pathToSharedCss}"`);
// translate ui component names from PascalCase to kebab-case
let elementName = kebabCase(name);
if (!elementName) {
console.log('[register components] Could not translate component name to kebab-case:', name);
elementName = name;
}
elementName = namePrefix + elementName;
// register custom web components
if (debugImports) {
console.log(name, elementName, component.styles);
}
customElements.define(elementName, defineCustomElement(component));
});
}

1
unraid-ui/src/styles/index.css
View File

@@ -1,3 +1,4 @@
/* global styles for unraid-ui */
@import "./globals.css";
@import "./sonner.css";

665
unraid-ui/src/styles/sonner.css Normal file
View File

@@ -0,0 +1,665 @@
/**------------------------------------------------------------------------------------------------
* SONNER.CSS
* This is a copy of Sonner's `style.css` as of commit a5b77c2df08d5c05aa923170176168102855533d
*
* This was necessary because I couldn't find a simple way to include Sonner's styles in vite's
* css build output. They wouldn't show up even though the toaster was included, and vue-sonner
* currently doesn't export its stylesheet (it appears to be inlined, but styles weren't applied
* to the unraid-toaster component for some reason).
*------------------------------------------------------------------------------------------------**/
:where(html[dir='ltr']),
:where([data-sonner-toaster][dir='ltr']) {
--toast-icon-margin-start: -3px;
--toast-icon-margin-end: 4px;
--toast-svg-margin-start: -1px;
--toast-svg-margin-end: 0px;
--toast-button-margin-start: auto;
--toast-button-margin-end: 0;
--toast-close-button-start: 0;
--toast-close-button-end: unset;
--toast-close-button-transform: translate(-35%, -35%);
}
:where(html[dir='rtl']),
:where([data-sonner-toaster][dir='rtl']) {
--toast-icon-margin-start: 4px;
--toast-icon-margin-end: -3px;
--toast-svg-margin-start: 0px;
--toast-svg-margin-end: -1px;
--toast-button-margin-start: 0;
--toast-button-margin-end: auto;
--toast-close-button-start: unset;
--toast-close-button-end: 0;
--toast-close-button-transform: translate(35%, -35%);
}
:where([data-sonner-toaster]) {
position: fixed;
width: var(--width);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
--gray1: hsl(0, 0%, 99%);
--gray2: hsl(0, 0%, 97.3%);
--gray3: hsl(0, 0%, 95.1%);
--gray4: hsl(0, 0%, 93%);
--gray5: hsl(0, 0%, 90.9%);
--gray6: hsl(0, 0%, 88.7%);
--gray7: hsl(0, 0%, 85.8%);
--gray8: hsl(0, 0%, 78%);
--gray9: hsl(0, 0%, 56.1%);
--gray10: hsl(0, 0%, 52.3%);
--gray11: hsl(0, 0%, 43.5%);
--gray12: hsl(0, 0%, 9%);
--border-radius: 8px;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style: none;
outline: none;
z-index: 999999999;
transition: transform 400ms ease;
}
:where([data-sonner-toaster][data-lifted='true']) {
transform: translateY(-10px);
}
@media (hover: none) and (pointer: coarse) {
:where([data-sonner-toaster][data-lifted='true']) {
transform: none;
}
}
:where([data-sonner-toaster][data-x-position='right']) {
right: max(var(--offset), env(safe-area-inset-right));
}
:where([data-sonner-toaster][data-x-position='left']) {
left: max(var(--offset), env(safe-area-inset-left));
}
:where([data-sonner-toaster][data-x-position='center']) {
left: 50%;
transform: translateX(-50%);
}
:where([data-sonner-toaster][data-y-position='top']) {
top: max(var(--offset), env(safe-area-inset-top));
}
:where([data-sonner-toaster][data-y-position='bottom']) {
bottom: max(var(--offset), env(safe-area-inset-bottom));
}
:where([data-sonner-toast]) {
--y: translateY(100%);
--lift-amount: calc(var(--lift) * var(--gap));
z-index: var(--z-index);
position: absolute;
opacity: 0;
transform: var(--y);
filter: blur(0);
/* https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not */
touch-action: none;
transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
box-sizing: border-box;
outline: none;
overflow-wrap: anywhere;
}
:where([data-sonner-toast][data-styled='true']) {
padding: 16px;
background: var(--normal-bg);
border: 1px solid var(--normal-border);
color: var(--normal-text);
border-radius: var(--border-radius);
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
width: var(--width);
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
:where([data-sonner-toast]:focus-visible) {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
}
:where([data-sonner-toast][data-y-position='top']) {
top: 0;
--y: translateY(-100%);
--lift: 1;
--lift-amount: calc(1 * var(--gap));
}
:where([data-sonner-toast][data-y-position='bottom']) {
bottom: 0;
--y: translateY(100%);
--lift: -1;
--lift-amount: calc(var(--lift) * var(--gap));
}
:where([data-sonner-toast]) :where([data-description]) {
font-weight: 400;
line-height: 1.4;
color: inherit;
}
:where([data-sonner-toast]) :where([data-title]) {
font-weight: 500;
line-height: 1.5;
color: inherit;
}
:where([data-sonner-toast]) :where([data-icon]) {
display: flex;
height: 16px;
width: 16px;
position: relative;
justify-content: flex-start;
align-items: center;
flex-shrink: 0;
margin-left: var(--toast-icon-margin-start);
margin-right: var(--toast-icon-margin-end);
}
:where([data-sonner-toast][data-promise='true']) :where([data-icon]) > svg {
opacity: 0;
transform: scale(0.8);
transform-origin: center;
animation: sonner-fade-in 300ms ease forwards;
}
:where([data-sonner-toast]) :where([data-icon]) > * {
flex-shrink: 0;
}
:where([data-sonner-toast]) :where([data-icon]) svg {
margin-left: var(--toast-svg-margin-start);
margin-right: var(--toast-svg-margin-end);
}
:where([data-sonner-toast]) :where([data-content]) {
display: flex;
flex-direction: column;
gap: 2px;
}
[data-sonner-toast][data-styled='true'] [data-button] {
border-radius: 4px;
padding-left: 8px;
padding-right: 8px;
height: 24px;
font-size: 12px;
color: var(--normal-bg);
background: var(--normal-text);
margin-left: var(--toast-button-margin-start);
margin-right: var(--toast-button-margin-end);
border: none;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
flex-shrink: 0;
transition: opacity 400ms, box-shadow 200ms;
}
:where([data-sonner-toast]) :where([data-button]):focus-visible {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
:where([data-sonner-toast]) :where([data-button]):first-of-type {
margin-left: var(--toast-button-margin-start);
margin-right: var(--toast-button-margin-end);
}
:where([data-sonner-toast]) :where([data-cancel]) {
color: var(--normal-text);
background: rgba(0, 0, 0, 0.08);
}
:where([data-sonner-toast][data-theme='dark']) :where([data-cancel]) {
background: rgba(255, 255, 255, 0.3);
}
[data-sonner-toast] [data-close-button] {
position: absolute;
left: var(--toast-close-button-start);
right: var(--toast-close-button-end);
top: 0;
height: 20px;
width: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
color: var(--gray12);
border: 1px solid var(--gray4);
transform: var(--toast-close-button-transform);
border-radius: 50%;
cursor: pointer;
z-index: 1;
transition: opacity 100ms, background 200ms, border-color 200ms;
}
[data-sonner-toast] [data-close-button] {
background: var(--gray1);
}
:where([data-sonner-toast]) :where([data-close-button]):focus-visible {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
}
:where([data-sonner-toast]) :where([data-disabled='true']) {
cursor: not-allowed;
}
[data-sonner-toast]:hover [data-close-button]:hover {
background: var(--gray2);
border-color: var(--gray5);
}
/* Leave a ghost div to avoid setting hover to false when swiping out */
:where([data-sonner-toast][data-swiping='true'])::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 100%;
z-index: -1;
}
:where([data-sonner-toast][data-y-position='top'][data-swiping='true'])::before {
/* y 50% needed to distribute height additional height evenly */
bottom: 50%;
transform: scaleY(3) translateY(50%);
}
:where([data-sonner-toast][data-y-position='bottom'][data-swiping='true'])::before {
/* y -50% needed to distribute height additional height evenly */
top: 50%;
transform: scaleY(3) translateY(-50%);
}
/* Leave a ghost div to avoid setting hover to false when transitioning out */
:where([data-sonner-toast][data-swiping='false'][data-removed='true'])::before {
content: '';
position: absolute;
inset: 0;
transform: scaleY(2);
}
/* Needed to avoid setting hover to false when inbetween toasts */
:where([data-sonner-toast])::after {
content: '';
position: absolute;
left: 0;
height: calc(var(--gap) + 1px);
bottom: 100%;
width: 100%;
}
:where([data-sonner-toast][data-mounted='true']) {
--y: translateY(0);
opacity: 1;
}
:where([data-sonner-toast][data-expanded='false'][data-front='false']) {
--scale: var(--toasts-before) * 0.05 + 1;
--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
height: var(--front-toast-height);
}
:where([data-sonner-toast]) > * {
transition: opacity 400ms;
}
:where([data-sonner-toast][data-expanded='false'][data-front='false'][data-styled='true']) > * {
opacity: 0;
}
:where([data-sonner-toast][data-visible='false']) {
opacity: 0;
pointer-events: none;
}
:where([data-sonner-toast][data-mounted='true'][data-expanded='true']) {
--y: translateY(calc(var(--lift) * var(--offset)));
height: var(--initial-height);
}
:where([data-sonner-toast][data-removed='true'][data-front='true'][data-swipe-out='false']) {
--y: translateY(calc(var(--lift) * -100%));
opacity: 0;
}
:where([data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true']) {
--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
opacity: 0;
}
:where([data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false']) {
--y: translateY(40%);
opacity: 0;
transition: transform 500ms, opacity 200ms;
}
/* Bump up the height to make sure hover state doesn't get set to false */
:where([data-sonner-toast][data-removed='true'][data-front='false'])::before {
height: calc(var(--initial-height) + 20%);
}
[data-sonner-toast][data-swiping='true'] {
transform: var(--y) translateY(var(--swipe-amount, 0px));
transition: none;
}
[data-sonner-toast][data-swiped='true'] {
user-select: none;
}
[data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
[data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
animation: swipe-out 200ms ease-out forwards;
}
@keyframes swipe-out {
from {
transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));
opacity: 1;
}
to {
transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));
opacity: 0;
}
}
@media (max-width: 600px) {
[data-sonner-toaster] {
position: fixed;
--mobile-offset: 16px;
right: var(--mobile-offset);
left: var(--mobile-offset);
width: 100%;
}
[data-sonner-toaster][dir='rtl'] {
left: calc(var(--mobile-offset) * -1);
}
[data-sonner-toaster] [data-sonner-toast] {
left: 0;
right: 0;
width: calc(100% - var(--mobile-offset) * 2);
}
[data-sonner-toaster][data-x-position='left'] {
left: var(--mobile-offset);
}
[data-sonner-toaster][data-y-position='bottom'] {
bottom: 20px;
}
[data-sonner-toaster][data-y-position='top'] {
top: 20px;
}
[data-sonner-toaster][data-x-position='center'] {
left: var(--mobile-offset);
right: var(--mobile-offset);
transform: none;
}
}
[data-sonner-toaster][data-theme='light'] {
--normal-bg: #fff;
--normal-border: var(--gray4);
--normal-text: var(--gray12);
--success-bg: hsl(143, 85%, 96%);
--success-border: hsl(145, 92%, 91%);
--success-text: hsl(140, 100%, 27%);
--info-bg: hsl(208, 100%, 97%);
--info-border: hsl(221, 91%, 91%);
--info-text: hsl(210, 92%, 45%);
--warning-bg: hsl(49, 100%, 97%);
--warning-border: hsl(49, 91%, 91%);
--warning-text: hsl(31, 92%, 45%);
--error-bg: hsl(359, 100%, 97%);
--error-border: hsl(359, 100%, 94%);
--error-text: hsl(360, 100%, 45%);
}
[data-sonner-toaster][data-theme='light'] [data-sonner-toast][data-invert='true'] {
--normal-bg: #000;
--normal-border: hsl(0, 0%, 20%);
--normal-text: var(--gray1);
}
[data-sonner-toaster][data-theme='dark'] [data-sonner-toast][data-invert='true'] {
--normal-bg: #fff;
--normal-border: var(--gray3);
--normal-text: var(--gray12);
}
[data-sonner-toaster][data-theme='dark'] {
--normal-bg: #000;
--normal-border: hsl(0, 0%, 20%);
--normal-text: var(--gray1);
--success-bg: hsl(150, 100%, 6%);
--success-border: hsl(147, 100%, 12%);
--success-text: hsl(150, 86%, 65%);
--info-bg: hsl(215, 100%, 6%);
--info-border: hsl(223, 100%, 12%);
--info-text: hsl(216, 87%, 65%);
--warning-bg: hsl(64, 100%, 6%);
--warning-border: hsl(60, 100%, 12%);
--warning-text: hsl(46, 87%, 65%);
--error-bg: hsl(358, 76%, 10%);
--error-border: hsl(357, 89%, 16%);
--error-text: hsl(358, 100%, 81%);
}
[data-rich-colors='true'][data-sonner-toast][data-type='success'] {
background: var(--success-bg);
border-color: var(--success-border);
color: var(--success-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='success'] [data-close-button] {
background: var(--success-bg);
border-color: var(--success-border);
color: var(--success-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='info'] {
background: var(--info-bg);
border-color: var(--info-border);
color: var(--info-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='info'] [data-close-button] {
background: var(--info-bg);
border-color: var(--info-border);
color: var(--info-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='warning'] {
background: var(--warning-bg);
border-color: var(--warning-border);
color: var(--warning-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='warning'] [data-close-button] {
background: var(--warning-bg);
border-color: var(--warning-border);
color: var(--warning-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='error'] {
background: var(--error-bg);
border-color: var(--error-border);
color: var(--error-text);
}
[data-rich-colors='true'][data-sonner-toast][data-type='error'] [data-close-button] {
background: var(--error-bg);
border-color: var(--error-border);
color: var(--error-text);
}
.sonner-loading-wrapper {
--size: 16px;
height: var(--size);
width: var(--size);
position: absolute;
inset: 0;
z-index: 10;
}
.sonner-loading-wrapper[data-visible='false'] {
transform-origin: center;
animation: sonner-fade-out 0.2s ease forwards;
}
.sonner-spinner {
position: relative;
top: 50%;
left: 50%;
height: var(--size);
width: var(--size);
}
.sonner-loading-bar {
animation: sonner-spin 1.2s linear infinite;
background: var(--gray11);
border-radius: 6px;
height: 8%;
left: -10%;
position: absolute;
top: -3.9%;
width: 24%;
}
.sonner-loading-bar:nth-child(1) {
animation-delay: -1.2s;
transform: rotate(0.0001deg) translate(146%);
}
.sonner-loading-bar:nth-child(2) {
animation-delay: -1.1s;
transform: rotate(30deg) translate(146%);
}
.sonner-loading-bar:nth-child(3) {
animation-delay: -1s;
transform: rotate(60deg) translate(146%);
}
.sonner-loading-bar:nth-child(4) {
animation-delay: -0.9s;
transform: rotate(90deg) translate(146%);
}
.sonner-loading-bar:nth-child(5) {
animation-delay: -0.8s;
transform: rotate(120deg) translate(146%);
}
.sonner-loading-bar:nth-child(6) {
animation-delay: -0.7s;
transform: rotate(150deg) translate(146%);
}
.sonner-loading-bar:nth-child(7) {
animation-delay: -0.6s;
transform: rotate(180deg) translate(146%);
}
.sonner-loading-bar:nth-child(8) {
animation-delay: -0.5s;
transform: rotate(210deg) translate(146%);
}
.sonner-loading-bar:nth-child(9) {
animation-delay: -0.4s;
transform: rotate(240deg) translate(146%);
}
.sonner-loading-bar:nth-child(10) {
animation-delay: -0.3s;
transform: rotate(270deg) translate(146%);
}
.sonner-loading-bar:nth-child(11) {
animation-delay: -0.2s;
transform: rotate(300deg) translate(146%);
}
.sonner-loading-bar:nth-child(12) {
animation-delay: -0.1s;
transform: rotate(330deg) translate(146%);
}
@keyframes sonner-fade-in {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes sonner-fade-out {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
@keyframes sonner-spin {
0% {
opacity: 1;
}
100% {
opacity: 0.15;
}
}
@media (prefers-reduced-motion) {
[data-sonner-toast],
[data-sonner-toast] > *,
.sonner-loading-bar {
transition: none !important;
animation: none !important;
}
}
.sonner-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: center;
transition: opacity 200ms, transform 200ms;
}
.sonner-loader[data-visible='false'] {
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
}

2
unraid-ui/stories/components/brand/BrandLoading.stories.ts
View File

@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/vue3";
import BrandLoading from "../../../src/components/brand/BrandLoading.vue";
import BrandLoading from "../../../src/components/brand/BrandLoading.ce.vue";
const meta = {
title: "Components/Brand",

37
unraid-ui/tailwind.config.ts
View File

@@ -1,31 +1,34 @@
import type { Config } from "tailwindcss";
import { unraidPreset } from "./src/theme/preset";
import tailwindRemToRem from './src/lib/tailwind-rem-to-rem';
import type { Config } from 'tailwindcss';
import { unraidPreset } from './src/theme/preset';
export default {
presets: [unraidPreset],
content: [
"./src/components/**/*.{js,vue,ts}",
"./src/composables/**/*.{js,vue,ts}",
"./stories/**/*.stories.{js,ts,jsx,tsx,mdx}",
'./src/components/**/*.{js,vue,ts}',
'./src/composables/**/*.{js,vue,ts}',
'./stories/**/*.stories.{js,ts,jsx,tsx,mdx}',
'./index.html',
],
safelist: [
"dark",
"DropdownWrapper_blip",
"unraid_mark_1",
"unraid_mark_2",
"unraid_mark_3",
"unraid_mark_4",
"unraid_mark_6",
"unraid_mark_7",
"unraid_mark_8",
"unraid_mark_9",
'dark',
'DropdownWrapper_blip',
'unraid_mark_1',
'unraid_mark_2',
'unraid_mark_3',
'unraid_mark_4',
'unraid_mark_6',
'unraid_mark_7',
'unraid_mark_8',
'unraid_mark_9',
{
pattern: /^text-(header-text-secondary|orange-dark)$/,
variants: ['group-hover', 'group-focus']
variants: ['group-hover', 'group-focus'],
},
{
pattern: /^(underline|no-underline)$/,
variants: ['group-hover', 'group-focus']
variants: ['group-hover', 'group-focus'],
},
],
plugins: [tailwindRemToRem({ baseFontSize: 16, newFontSize: process.env.REM_PLUGIN ? 10 : 16 })],
} satisfies Partial<Config>;

41
unraid-ui/vite.web-component.ts Normal file
View File

@@ -0,0 +1,41 @@
import { fileURLToPath, URL } from 'node:url';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import tailwindcss from 'tailwindcss';
import { defineConfig } from 'vite';
import vueDevTools from 'vite-plugin-vue-devtools';
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx(), vueDevTools()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
},
css: {
postcss: {
plugins: [tailwindcss()],
},
},
build: {
manifest: 'ui.manifest.json',
sourcemap: true,
cssCodeSplit: false,
lib: {
entry: fileURLToPath(new URL('./src/register.ts', import.meta.url)),
name: 'unraid-web-components',
formats: ['es'],
},
rollupOptions: {
output: {
entryFileNames: '[name].[hash].js',
chunkFileNames: '[name].[hash].js',
assetFileNames: '[name].[hash][extname]',
},
},
},
});

24
web/components/Notifications/Sidebar.vue
View File

@@ -1,14 +1,17 @@
<script setup lang="ts">
import { Button } from '@/components/shadcn/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
import { useMutation, useQuery } from '@vue/apollo-composable';
import { useMutation, useQuery, useSubscription } from '@vue/apollo-composable';
import { useFragment } from '~/composables/gql';
// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
import { Importance, NotificationType } from '~/composables/gql/graphql';
import {
archiveAllNotifications,
deleteArchivedNotifications,
NOTIFICATION_FRAGMENT,
notificationsOverview,
} from './graphql/notification.query';
import { notificationAddedSubscription } from './graphql/notification.subscription';
const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
const { mutate: deleteArchives, loading: loadingDeleteAll } = useMutation(deleteArchivedNotifications);
@@ -35,6 +38,25 @@ const { result } = useQuery(notificationsOverview, null, {
pollInterval: 2_000, // 2 seconds
});
const { onResult: onNotificationAdded } = useSubscription(notificationAddedSubscription);
onNotificationAdded(({ data }) => {
if (!data) return;
const notif = useFragment(NOTIFICATION_FRAGMENT, data.notificationAdded);
const funcMapping: Record<Importance, (typeof globalThis)['toast']['info' | 'error' | 'warning']> = {
[Importance.Alert]: globalThis.toast.error,
[Importance.Warning]: globalThis.toast.warning,
[Importance.Info]: globalThis.toast.info,
};
const toast = funcMapping[notif.importance];
const createOpener = () => ({ label: 'Open', onClick: () => location.assign(notif.link as string) });
toast(notif.title, {
description: notif.subject,
action: notif.link ? createOpener() : undefined,
});
});
const overview = computed(() => {
if (!result.value) {
return;

9
web/components/Notifications/graphql/notification.subscription.ts Normal file
View File

@@ -0,0 +1,9 @@
import { graphql } from '~/composables/gql/gql';
export const notificationAddedSubscription = graphql(/* GraphQL */ `
subscription NotificationAddedSub {
notificationAdded {
...NotificationFragment
}
}
`);

5
web/composables/gql/gql.ts
View File

@@ -22,6 +22,7 @@ const documents = {
"\n mutation DeleteNotification($id: String!, $type: NotificationType!) {\n deleteNotification(id: $id, type: $type) {\n archive {\n total\n }\n }\n }\n": types.DeleteNotificationDocument,
"\n mutation DeleteAllNotifications {\n deleteArchivedNotifications {\n archive {\n total\n }\n unread {\n total\n }\n }\n }\n": types.DeleteAllNotificationsDocument,
"\n query Overview {\n notifications {\n id\n overview {\n unread {\n info\n warning\n alert\n total\n }\n archive {\n total\n }\n }\n }\n }\n": types.OverviewDocument,
"\n subscription NotificationAddedSub {\n notificationAdded {\n ...NotificationFragment\n }\n }\n": types.NotificationAddedSubDocument,
"\n mutation ConnectSignIn($input: ConnectSignInInput!) {\n connectSignIn(input: $input)\n }\n": types.ConnectSignInDocument,
"\n mutation SignOut {\n connectSignOut\n }\n": types.SignOutDocument,
"\n fragment PartialCloud on Cloud {\n error\n apiKey {\n valid\n error\n }\n cloud {\n status\n error\n }\n minigraphql {\n status\n error\n }\n relay {\n status\n error\n }\n }\n": types.PartialCloudFragmentDoc,
@@ -78,6 +79,10 @@ export function graphql(source: "\n mutation DeleteAllNotifications {\n dele
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query Overview {\n notifications {\n id\n overview {\n unread {\n info\n warning\n alert\n total\n }\n archive {\n total\n }\n }\n }\n }\n"): (typeof documents)["\n query Overview {\n notifications {\n id\n overview {\n unread {\n info\n warning\n alert\n total\n }\n archive {\n total\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n subscription NotificationAddedSub {\n notificationAdded {\n ...NotificationFragment\n }\n }\n"): (typeof documents)["\n subscription NotificationAddedSub {\n notificationAdded {\n ...NotificationFragment\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

11
web/composables/gql/graphql.ts
View File

@@ -351,8 +351,6 @@ export enum ContainerState {
export type CreateApiKeyInput = {
description?: InputMaybe<Scalars['String']['input']>;
/** Whether to create the key in memory only (true), or on disk (false) - memory only keys will not persist through reboots of the API */
memory?: InputMaybe<Scalars['Boolean']['input']>;
name: Scalars['String']['input'];
/** This will replace the existing key if one already exists with the same name, otherwise returns the existing key */
overwrite?: InputMaybe<Scalars['Boolean']['input']>;
@@ -1792,6 +1790,14 @@ export type OverviewQueryVariables = Exact<{ [key: string]: never; }>;
export type OverviewQuery = { __typename?: 'Query', notifications: { __typename?: 'Notifications', id: string, overview: { __typename?: 'NotificationOverview', unread: { __typename?: 'NotificationCounts', info: number, warning: number, alert: number, total: number }, archive: { __typename?: 'NotificationCounts', total: number } } } };
export type NotificationAddedSubSubscriptionVariables = Exact<{ [key: string]: never; }>;
export type NotificationAddedSubSubscription = { __typename?: 'Subscription', notificationAdded: (
{ __typename?: 'Notification' }
& { ' $fragmentRefs'?: { 'NotificationFragmentFragment': NotificationFragmentFragment } }
) };
export type ConnectSignInMutationVariables = Exact<{
input: ConnectSignInInput;
}>;
@@ -1847,6 +1853,7 @@ export const ArchiveAllNotificationsDocument = {"kind":"Document","definitions":
export const DeleteNotificationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteNotification"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"type"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"NotificationType"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteNotification"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"type"},"value":{"kind":"Variable","name":{"kind":"Name","value":"type"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteNotificationMutation, DeleteNotificationMutationVariables>;
export const DeleteAllNotificationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteAllNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteArchivedNotifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]} as unknown as DocumentNode<DeleteAllNotificationsMutation, DeleteAllNotificationsMutationVariables>;
export const OverviewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"notifications"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"overview"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unread"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"info"}},{"kind":"Field","name":{"kind":"Name","value":"warning"}},{"kind":"Field","name":{"kind":"Name","value":"alert"}},{"kind":"Field","name":{"kind":"Name","value":"total"}}]}},{"kind":"Field","name":{"kind":"Name","value":"archive"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OverviewQuery, OverviewQueryVariables>;
export const NotificationAddedSubDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"NotificationAddedSub"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"notificationAdded"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"NotificationFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"NotificationFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Notification"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"subject"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"importance"}},{"kind":"Field","name":{"kind":"Name","value":"link"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"timestamp"}},{"kind":"Field","name":{"kind":"Name","value":"formattedTimestamp"}}]}}]} as unknown as DocumentNode<NotificationAddedSubSubscription, NotificationAddedSubSubscriptionVariables>;
export const ConnectSignInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ConnectSignIn"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ConnectSignInInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignIn"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<ConnectSignInMutation, ConnectSignInMutationVariables>;
export const SignOutDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignOut"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"connectSignOut"}}]}}]} as unknown as DocumentNode<SignOutMutation, SignOutMutationVariables>;
export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PartialCloud"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updateExpiration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PartialCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;

4
web/helpers/create-apollo-client.ts
View File

@@ -25,9 +25,7 @@ const httpLink = createHttpLink({
const wsLink = new GraphQLWsLink(
createClient({
url: wsEndpoint.toString(),
connectionParams: () => ({
headers,
}),
connectionParams: () => headers,
})
);

8
web/package-lock.json generated
View File

@@ -83,12 +83,15 @@
"@vueuse/core": "^10.0.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"kebab-case": "^2.0.1",
"lucide-vue-next": "^0.468.0",
"radix-vue": "^1.9.11",
"shadcn-vue": "^0.11.3",
"tailwind-merge": "^2.5.5"
"tailwind-merge": "^2.5.5",
"vue-sonner": "^1.3.0"
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
@@ -99,6 +102,7 @@
"@types/node": "^20.0.0",
"@types/testing-library__vue": "^5.0.0",
"@vitejs/plugin-vue": "^5.0.0",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"@vitest/coverage-v8": "^1.0.0",
"@vitest/ui": "^1.0.0",
"@vue/test-utils": "^2.4.0",
@@ -110,11 +114,13 @@
"happy-dom": "^12.0.0",
"postcss": "^8.4.49",
"prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^3.0.0",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.0.0",
"vite": "^5.0.0",
"vite-plugin-dts": "^3.0.0",
"vite-plugin-vue-devtools": "^7.7.1",
"vitest": "^1.0.0",
"vue": "^3.3.0",
"vue-tsc": "^1.8.0"