Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 20:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework modals and more

Browse Source
This commit is contained in:
Matt Hill
2021-07-05 20:26:42 -06:00
committed by Aiden McClelland
parent d9f1c9b021
commit b7bd147c76
84 changed files with 380 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/app/services/api/api-types.ts
View File

@@ -1,7 +1,7 @@
import { Dump, Revision } from 'patch-db-client'
import { PackagePropertiesVersioned } from 'src/app/util/properties.util'
import { ConfigSpec } from 'src/app/pkg-config/config-types'
import { DataModel, DependencyError, Manifest, URL } from 'src/app/models/patch-db/data-model'
import { DataModel, DependencyError, Manifest, URL } from 'src/app/services/patch-db/data-model'
export module RR {
@@ -187,6 +187,8 @@ export interface AvailablePreview {
export interface AvailableShow {
icon: URL
license: URL
instructions: URL
manifest: Manifest
categories: string[]
versions: string[]

29
ui/src/app/services/api/api.service.ts
View File

@@ -1,22 +1,17 @@
import { Subject, Observable } from 'rxjs'
import { Http, Update, Operation, Revision } from 'patch-db-client'
import { Http, Update, Operation, Revision, Source, Store } from 'patch-db-client'
import { RR } from './api-types'
import { DataModel } from 'src/app/models/patch-db/data-model'
import { filter } from 'rxjs/operators'
import { DataModel } from 'src/app/services/patch-db/data-model'
export abstract class ApiService implements Http<DataModel> {
export abstract class ApiService implements Source<DataModel>, Http<DataModel> {
protected readonly sync = new Subject<Update<DataModel>>()
private syncing = true
/** PatchDb Source interface. Post/Patch requests provide a source of patches to the db. */
// sequenceStream '_' is not used by the live api, but is overridden by the mock
watch$ (_?: Observable<number>): Observable<Update<DataModel>> {
return this.sync.asObservable().pipe(filter(() => this.syncing))
watch$ (_?: Store<DataModel>): Observable<Update<DataModel>> {
return this.sync.asObservable()
}
// used for determining internet connectivity
abstract echo (): Promise<string>
// for getting static files: ex icons, instructions, licenses
abstract getStatic (url: string): Promise<string>
@@ -189,18 +184,4 @@ export abstract class ApiService implements Http<DataModel> {
}) as any
}
}
// @TODO better types?
// private async process<T, F extends (args: object) => Promise<{ response: T, revision?: Revision }>> (f: F, temps: Operation[] = []): Promise<T> {
// let expireId = undefined
// if (temps.length) {
// expireId = uuid.v4()
// this.sync.next({ patch: temps, expiredBy: expireId })
// }
// const { response, revision } = await f({ ...f.arguments, expireId })
// if (revision) this.sync.next(revision)
// return response
// }
}
// used for type inference in syncResponse
type ExtractResultPromise<T extends Promise<any>> = T extends Promise<infer R> ? Promise<R> : any

4
ui/src/app/services/api/live-api.service.ts
View File

@@ -10,10 +10,6 @@ export class LiveApiService extends ApiService {
private readonly http: HttpService,
) { super() }
async echo (): Promise<string> {
return this.http.rpcRequest({ method: 'echo', params: { } })
}
async getStatic (url: string): Promise<string> {
return this.http.httpRequest({ method: Method.GET, url })
}

195
ui/src/app/services/api/md-sample.md
View File

@@ -1,195 +0,0 @@
# Size Limit [![Cult Of Martians][cult-img]][cult]
Size Limit is a performance budget tool for JavaScript. It checks every commit
on CI, calculates the real cost of your JS for end-users and throws an error
if the cost exceeds the limit.
* **ES modules** and **tree-shaking** support.
* Add Size Limit to **Travis CI**, **Circle CI**, **GitHub Actions**
or another CI system to know if a pull request adds a massive dependency.
* **Modular** to fit different use cases: big JS applications
that use their own bundler or small npm libraries with many files.
* Can calculate **the time** it would take a browser
to download and **execute** your JS. Time is a much more accurate
and understandable metric compared to the size in bytes.
* Calculations include **all dependencies and polyfills**
used in your JS.
<p align="center">
<img src="./img/example.png" alt="Size Limit CLI" width="738">
</p>
With **[GitHub action]** Size Limit will post bundle size changes as a comment
in pull request discussion.
<p align="center">
<img src="https://raw.githubusercontent.com/andresz1/size-limit-action/master/assets/pr.png"
alt="Size Limit comment in pull request about bundle size changes"
width="686" height="289">
</p>
With `--why`, Size Limit can tell you *why* your library is of this size
and show the real cost of all your internal dependencies.
<p align="center">
<img src="./img/why.png" alt="Bundle Analyzer example" width="650">
</p>
<p align="center">
<a href="https://evilmartians.com/?utm_source=size-limit">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="Sponsored by Evil Martians" width="236" height="54">
</a>
</p>
[GitHub action]: https://github.com/andresz1/size-limit-action
[cult-img]: http://cultofmartians.com/assets/badges/badge.svg
[cult]: http://cultofmartians.com/tasks/size-limit-config.html
## Who Uses Size Limit
* [MobX](https://github.com/mobxjs/mobx)
* [Material-UI](https://github.com/callemall/material-ui)
* [Autoprefixer](https://github.com/postcss/autoprefixer)
* [PostCSS](https://github.com/postcss/postcss) reduced
[25% of the size](https://github.com/postcss/postcss/commit/150edaa42f6d7ede73d8c72be9909f0a0f87a70f).
* [Browserslist](https://github.com/ai/browserslist) reduced
[25% of the size](https://github.com/ai/browserslist/commit/640b62fa83a20897cae75298a9f2715642531623).
* [EmojiMart](https://github.com/missive/emoji-mart) reduced
[20% of the size](https://github.com/missive/emoji-mart/pull/111)
* [nanoid](https://github.com/ai/nanoid) reduced
[33% of the size](https://github.com/ai/nanoid/commit/036612e7d6cc5760313a8850a2751a5e95184eab).
* [React Focus Lock](https://github.com/theKashey/react-focus-lock) reduced
[32% of the size](https://github.com/theKashey/react-focus-lock/pull/48).
* [Logux](https://github.com/logux) reduced
[90% of the size](https://github.com/logux/logux-client/commit/62b258e20e1818b23ae39b9c4cd49e2495781e91).
## How It Works
1. Size Limit contains a CLI tool, 3 plugins (`file`, `webpack`, `time`)
and 3 plugin presets for popular use cases (`app`, `big-lib`, `small-lib`).
A CLI tool finds plugins in `package.json` and loads the config.
2. If you use the `webpack` plugin, Size Limit will bundle your JS files into
a single file. It is important to track dependencies and webpack polyfills.
It is also useful for small libraries with many small files and without
a bundler.
3. The `webpack` plugin creates an empty webpack project, adds your library
and looks for the bundle size difference.
4. The `time` plugin compares the current machine performance with that of
a low-priced Android devices to calculate the CPU throttling rate.
5. Then the `time` plugin runs headless Chrome (or desktop Chrome if it’s
available) to track the time a browser takes to compile and execute your JS.
Note that these measurements depend on available resources and might
be unstable. [See here](https://github.com/mbalabash/estimo/issues/5)
for more details.
## Usage
### JS Applications
Suitable for applications that have their own bundler and send the JS bundle
directly to a client (without publishing it to npm). Think of a user-facing app
or website, like an email client, a CRM, a landing page or a blog with
interactive elements, using React/Vue/Svelte lib or vanilla JS.
<details><summary><b>Show instructions</b></summary>
1. Install the preset:
```sh
$ npm install --save-dev size-limit @size-limit/preset-app
```
2. Add the `size-limit` section and the `size` script to your `package.json`:
```diff
+ "size-limit": [
+ {
+ "path": "dist/app-*.js"
+ }
+ ],
"scripts": {
"build": "webpack ./webpack.config.js",
+ "size": "npm run build && size-limit",
"test": "jest && eslint ."
}
```
3. Here’s how you can get the size for your current project:
```sh
$ npm run size
Package size: 30.08 KB with all dependencies, minified and gzipped
Loading time: 602 ms on slow 3G
Running time: 214 ms on Snapdragon 410
Total time: 815 ms
```
4. Now, let’s set the limit. Add 25% to the current total time and use that as
the limit in your `package.json`:
```diff
"size-limit": [
{
+ "limit": "1 s",
"path": "dist/app-*.js"
}
],
```
5. Add the `size` script to your test suite:
```diff
"scripts": {
"build": "webpack ./webpack.config.js",
"size": "npm run build && size-limit",
- "test": "jest && eslint ."
+ "test": "jest && eslint . && npm run size"
}
```
6. If you don’t have a continuous integration service running, don’t forget
to add one — start with [Travis CI].
</details>
## Reports
Size Limit has a [GitHub action] that comments and rejects pull requests based
on Size Limit output.
1. Install and configure Size Limit as shown above.
2. Add the following action inside `.github/workflows/size-limit.yml`
```yaml
name: "size"
on:
pull_request:
branches:
- master
jobs:
size:
runs-on: ubuntu-latest
env:
CI_JOB_NUMBER: 1
steps:
- uses: actions/checkout@v1
- uses: andresz1/size-limit-action@v1.0.0
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
```
## JS API
```js
const sizeLimit = require('size-limit')
const filePlugin = require('@size-limit/file')
const webpackPlugin = require('@size-limit/webpack')
sizeLimit([filePlugin, webpackPlugin], [filePath]).then(result => {
result //=> { size: 12480 }
})
```

25
ui/src/app/services/api/mock-api.service.ts
View File

@@ -2,13 +2,14 @@ import { Injectable } from '@angular/core'
import { pauseFor } from '../../util/misc.util'
import { ApiService } from './api.service'
import { Observable } from 'rxjs'
import { PatchOp, Update } from 'patch-db-client'
import { DataModel, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/models/patch-db/data-model'
import { PatchOp, Store, Update } from 'patch-db-client'
import { DataModel, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
import { RR } from './api-types'
import { parsePropertiesPermissive } from 'src/app/util/properties.util'
import { Mock } from './mock-app-fixures'
import { HttpService } from '../http.service'
import { ConfigService } from '../config.service'
import markdown from 'raw-loader!src/assets/markdown/md-sample.md'
import { map } from 'rxjs/operators'
@Injectable()
export class MockApiService extends ApiService {
@@ -20,18 +21,20 @@ export class MockApiService extends ApiService {
) { super() }
// every time a patch is returned from the mock, we override its sequence to be 1 more than the last sequence in the patch-db as provided by `o`.
watch$ (sequenceStream: Observable<number>): Observable<Update<DataModel>> {
sequenceStream.subscribe(i => this.sequence < i ? (this.sequence = i) : { })
watch$ (store: Store<DataModel>): Observable<Update<DataModel>> {
store.watchCache$().pipe(map(cache => cache.sequence)).subscribe(seq => {
console.log('INCOMING: ', seq)
if (this.sequence < seq) {
console.log('hererereree')
this.sequence = seq
}
})
return super.watch$()
}
async echo (): Promise<string> {
console.log('echo...echo')
return ''
}
async getStatic (url: string): Promise<string> {
return Mock.DbDump.value['package-data']['bitcoind']['static-files'].instructions
await pauseFor(2000)
return markdown
}
// db

34
ui/src/app/services/api/mock-app-fixures.ts
View File

@@ -1,13 +1,12 @@
import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/models/patch-db/data-model'
import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
import { NotificationLevel, RR, ServerNotification, ServerNotifications } from './api-types'
import markdown from 'raw-loader!./md-sample.md'
export module Mock {
export const MarketplaceEos: RR.GetMarketplaceEOSRes = {
version: '1.0.0',
headline: 'Our biggest release ever.',
'release-notes': { '1.0.0': markdown },
'release-notes': { '1.0.0': 'Some **Markdown** release _notes_' },
}
export const AvailableList: RR.GetAvailableListRes = [
@@ -402,6 +401,8 @@ export module Mock {
'bitcoind': {
'0.19.2': {
icon: 'assets/img/service-icons/bitcoind.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: {
...Mock.MockManifestBitcoind,
version: '0.19.0',
@@ -417,6 +418,8 @@ export module Mock {
},
'0.20.0': {
icon: 'assets/img/service-icons/bitcoind.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: {
...Mock.MockManifestBitcoind,
version: '0.20.0',
@@ -432,6 +435,8 @@ export module Mock {
},
'0.21.0': {
icon: 'assets/img/service-icons/bitcoind.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: {
...Mock.MockManifestBitcoind,
version: '0.21.0',
@@ -448,6 +453,8 @@ export module Mock {
},
'latest': {
icon: 'assets/img/service-icons/bitcoind.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: {
...Mock.MockManifestBitcoind,
'release-notes': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
@@ -465,6 +472,8 @@ export module Mock {
'lnd': {
'0.11.0': {
icon: 'assets/img/service-icons/lnd.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: {
...Mock.MockManifestLnd,
version: '0.11.0',
@@ -490,6 +499,8 @@ export module Mock {
},
'0.11.1': {
icon: 'assets/img/service-icons/lnd.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: {
...Mock.MockManifestLnd,
version: '0.11.1',
@@ -515,6 +526,8 @@ export module Mock {
},
'latest': {
icon: 'assets/img/service-icons/lnd.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: Mock.MockManifestLnd,
categories: ['bitcoin', 'lightning', 'cryptocurrency'],
versions: ['0.11.0', '0.11.1'],
@@ -538,6 +551,8 @@ export module Mock {
'bitcoin-proxy': {
'latest': {
icon: 'assets/img/service-icons/bitcoin-proxy.png',
license: 'licenseUrl',
instructions: 'instructionsUrl',
manifest: Mock.MockManifestBitcoinProxy,
categories: ['bitcoin'],
versions: ['0.2.2'],
@@ -559,9 +574,9 @@ export module Mock {
export const bitcoind: PackageDataEntry = {
state: PackageState.Installed,
'static-files': {
license: 'licenseURL',
license: 'licenseUrl', // /public/package-data/bitcoind/0.21.1/LICENSE.md,
icon: 'assets/img/service-icons/bitcoind.png',
instructions: markdown, // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
instructions: 'instructionsUrl', // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
},
'temp-manifest': undefined,
installed: {
@@ -610,9 +625,9 @@ export module Mock {
export const lnd: PackageDataEntry = {
state: PackageState.Installed,
'static-files': {
license: 'licenseURL',
license: 'licenseUrl', // /public/package-data/lnd/0.21.1/LICENSE.md,
icon: 'assets/img/service-icons/lnd.png',
instructions: markdown, // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
},
'temp-manifest': undefined,
installed: {
@@ -662,9 +677,9 @@ export module Mock {
export const bitcoinproxy: PackageDataEntry = {
state: PackageState.Installed,
'static-files': {
license: 'licenseURL',
license: 'licenseUrl', // /public/package-data/bitcoinproxy/0.21.1/LICENSE.md,
icon: 'assets/img/service-icons/bitcoin-proxy.png',
instructions: '*These are some instructions.*', // /public/package-data/bitcoinproxy/0.2.2/INSTRUCTIONS.md
instructions: 'instructionsUrl', // /public/package-data/bitcoinproxy/0.2.2/INSTRUCTIONS.md
},
'temp-manifest': undefined,
installed: {
@@ -737,7 +752,6 @@ export module Mock {
'lnd': lnd,
},
ui: {
'server-name': 'My Embassy',
'welcome-ack': '1.0.0',
'auto-check-updates': true,
},