mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
458 changed files with 35183 additions and 11632 deletions
@ -0,0 +1,52 @@
|
||||
version: '3' |
||||
|
||||
x-uffizzi: |
||||
ingress: |
||||
service: nocodb |
||||
port: 8080 |
||||
|
||||
services: |
||||
postgres: |
||||
image: postgres |
||||
environment: |
||||
POSTGRES_PASSWORD: password |
||||
POSTGRES_USER: postgres |
||||
POSTGRES_DB: root_db |
||||
deploy: |
||||
resources: |
||||
limits: |
||||
memory: 500M |
||||
mssql: |
||||
image: "mcr.microsoft.com/mssql/server:2017-latest" |
||||
environment: |
||||
ACCEPT_EULA: "Y" |
||||
SA_PASSWORD: Password123. |
||||
deploy: |
||||
resources: |
||||
limits: |
||||
memory: 1000M |
||||
mysql: |
||||
environment: |
||||
MYSQL_DATABASE: root_db |
||||
MYSQL_PASSWORD: password |
||||
MYSQL_ROOT_PASSWORD: password |
||||
MYSQL_USER: noco |
||||
image: "mysql:8.0.32" |
||||
deploy: |
||||
resources: |
||||
limits: |
||||
memory: 500M |
||||
nocodb: |
||||
image: "${NOCODB_IMAGE}" |
||||
ports: |
||||
- "8080:8080" |
||||
entrypoint: /bin/sh |
||||
command: ["-c", "apk add wait4ports && wait4ports tcp://localhost:5432 && /usr/src/appEntry/start.sh"] |
||||
environment: |
||||
NC_DB: "pg://localhost:5432?u=postgres&p=password&d=root_db" |
||||
NC_ADMIN_EMAIL: admin@nocodb.com |
||||
NC_ADMIN_PASSWORD: password |
||||
deploy: |
||||
resources: |
||||
limits: |
||||
memory: 500M |
||||
@ -0,0 +1,89 @@
|
||||
name: Deploy Uffizzi Preview |
||||
|
||||
on: |
||||
workflow_run: |
||||
workflows: |
||||
- "PR Release" |
||||
types: |
||||
- completed |
||||
|
||||
jobs: |
||||
cache-compose-file: |
||||
name: Cache Compose File |
||||
runs-on: ubuntu-latest |
||||
if: ${{ github.event.workflow_run.conclusion == 'success' }} |
||||
outputs: |
||||
compose-file-cache-key: ${{ env.COMPOSE_FILE_HASH }} |
||||
pr-number: ${{ env.PR_NUMBER }} |
||||
steps: |
||||
- name: 'Download artifacts' |
||||
# Fetch output (zip archive) from the workflow run that triggered this workflow. |
||||
uses: actions/github-script@v6 |
||||
with: |
||||
script: | |
||||
let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({ |
||||
owner: context.repo.owner, |
||||
repo: context.repo.repo, |
||||
run_id: context.payload.workflow_run.id, |
||||
}); |
||||
let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => { |
||||
return artifact.name == "preview-spec" |
||||
})[0]; |
||||
let download = await github.rest.actions.downloadArtifact({ |
||||
owner: context.repo.owner, |
||||
repo: context.repo.repo, |
||||
artifact_id: matchArtifact.id, |
||||
archive_format: 'zip', |
||||
}); |
||||
let fs = require('fs'); |
||||
fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/preview-spec.zip`, Buffer.from(download.data)); |
||||
|
||||
- name: 'Unzip artifact' |
||||
run: unzip preview-spec.zip |
||||
|
||||
- name: Read Event into ENV |
||||
run: | |
||||
echo 'EVENT_JSON<<EOF' >> $GITHUB_ENV |
||||
cat event.json >> $GITHUB_ENV |
||||
echo 'EOF' >> $GITHUB_ENV |
||||
|
||||
- name: Hash Rendered Compose File |
||||
id: hash |
||||
# If the previous workflow was triggered by a PR close event, we will not have a compose file artifact. |
||||
if: ${{ fromJSON(env.EVENT_JSON).action != 'closed' }} |
||||
run: echo "COMPOSE_FILE_HASH=$(md5sum docker-compose.rendered.yml | awk '{ print $1 }')" >> $GITHUB_ENV |
||||
|
||||
- name: Cache Rendered Compose File |
||||
if: ${{ fromJSON(env.EVENT_JSON).action != 'closed' }} |
||||
uses: actions/cache@v3 |
||||
with: |
||||
path: docker-compose.rendered.yml |
||||
key: ${{ env.COMPOSE_FILE_HASH }} |
||||
|
||||
- name: Read PR Number From Event Object |
||||
id: pr |
||||
run: echo "PR_NUMBER=${{ fromJSON(env.EVENT_JSON).number }}" >> $GITHUB_ENV |
||||
|
||||
- name: DEBUG - Print Job Outputs |
||||
if: ${{ runner.debug }} |
||||
run: | |
||||
echo "PR number: ${{ env.PR_NUMBER }}" |
||||
echo "Compose file hash: ${{ env.COMPOSE_FILE_HASH }}" |
||||
cat event.json |
||||
|
||||
deploy-uffizzi-preview: |
||||
name: Use Remote Workflow to Preview on Uffizzi |
||||
needs: |
||||
- cache-compose-file |
||||
uses: UffizziCloud/preview-action/.github/workflows/reusable.yaml@v2 |
||||
with: |
||||
# If this workflow was triggered by a PR close event, cache-key will be an empty string |
||||
# and this reusable workflow will delete the preview deployment. |
||||
compose-file-cache-key: ${{ needs.cache-compose-file.outputs.compose-file-cache-key }} |
||||
compose-file-cache-path: docker-compose.rendered.yml |
||||
server: https://app.uffizzi.com |
||||
pr-number: ${{ needs.cache-compose-file.outputs.pr-number }} |
||||
permissions: |
||||
contents: read |
||||
pull-requests: write |
||||
id-token: write |
||||
@ -0,0 +1,23 @@
|
||||
# Patterns to ignore when building packages. |
||||
# This supports shell glob matching, relative path matching, and |
||||
# negation (prefixed with !). Only one pattern per line. |
||||
.DS_Store |
||||
# Common VCS dirs |
||||
.git/ |
||||
.gitignore |
||||
.bzr/ |
||||
.bzrignore |
||||
.hg/ |
||||
.hgignore |
||||
.svn/ |
||||
# Common backup files |
||||
*.swp |
||||
*.bak |
||||
*.tmp |
||||
*.orig |
||||
*~ |
||||
# Various IDEs |
||||
.project |
||||
.idea/ |
||||
*.tmproj |
||||
.vscode/ |
||||
@ -0,0 +1,12 @@
|
||||
apiVersion: v2 |
||||
appVersion: 0.100.2 |
||||
dependencies: |
||||
- condition: postgresql.enabled |
||||
name: postgresql |
||||
repository: https://charts.bitnami.com/bitnami |
||||
version: ~11.6.6 |
||||
description: A Helm chart for Kubernetes |
||||
maintainers: [] |
||||
name: nocodb |
||||
type: application |
||||
version: 0.3.0 |
||||
@ -0,0 +1,22 @@
|
||||
1. Get the application URL by running these commands: |
||||
{{- if .Values.ingress.enabled }} |
||||
{{- range $host := .Values.ingress.hosts }} |
||||
{{- range .paths }} |
||||
http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ . }} |
||||
{{- end }} |
||||
{{- end }} |
||||
{{- else if contains "NodePort" .Values.service.type }} |
||||
export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "nocodb.fullname" . }}) |
||||
export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}") |
||||
echo http://$NODE_IP:$NODE_PORT |
||||
{{- else if contains "LoadBalancer" .Values.service.type }} |
||||
NOTE: It may take a few minutes for the LoadBalancer IP to be available. |
||||
You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "nocodb.fullname" . }}' |
||||
export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "nocodb.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}") |
||||
echo http://$SERVICE_IP:{{ .Values.service.port }} |
||||
{{- else if contains "ClusterIP" .Values.service.type }} |
||||
export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "nocodb.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}") |
||||
export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}") |
||||
echo "Visit http://127.0.0.1:8080 to use your application" |
||||
kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT |
||||
{{- end }} |
||||
@ -0,0 +1,82 @@
|
||||
{{/* |
||||
Expand the name of the chart. |
||||
*/}} |
||||
{{- define "nocodb.name" -}} |
||||
{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }} |
||||
{{- end }} |
||||
|
||||
{{/* |
||||
Create a default fully qualified app name. |
||||
We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec). |
||||
If release name contains chart name it will be used as a full name. |
||||
*/}} |
||||
{{- define "nocodb.fullname" -}} |
||||
{{- if .Values.fullnameOverride }} |
||||
{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }} |
||||
{{- else }} |
||||
{{- $name := default .Chart.Name .Values.nameOverride }} |
||||
{{- if contains $name .Release.Name }} |
||||
{{- .Release.Name | trunc 63 | trimSuffix "-" }} |
||||
{{- else }} |
||||
{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }} |
||||
{{- end }} |
||||
{{- end }} |
||||
{{- end }} |
||||
|
||||
{{/* |
||||
Create chart name and version as used by the chart label. |
||||
*/}} |
||||
{{- define "nocodb.chart" -}} |
||||
{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }} |
||||
{{- end }} |
||||
|
||||
{{/* |
||||
Common labels |
||||
*/}} |
||||
{{- define "nocodb.labels" -}} |
||||
helm.sh/chart: {{ include "nocodb.chart" . }} |
||||
{{ include "nocodb.selectorLabels" . }} |
||||
{{- if .Chart.AppVersion }} |
||||
app.kubernetes.io/version: {{ .Chart.AppVersion | quote }} |
||||
{{- end }} |
||||
app.kubernetes.io/managed-by: {{ .Release.Service }} |
||||
{{- end }} |
||||
|
||||
{{/* |
||||
Selector labels |
||||
*/}} |
||||
{{- define "nocodb.selectorLabels" -}} |
||||
app.kubernetes.io/name: {{ include "nocodb.name" . }} |
||||
app.kubernetes.io/instance: {{ .Release.Name }} |
||||
{{- end }} |
||||
|
||||
{{/* |
||||
Create the name of the service account to use |
||||
*/}} |
||||
{{- define "nocodb.serviceAccountName" -}} |
||||
{{- if .Values.serviceAccount.create }} |
||||
{{- default (include "nocodb.fullname" .) .Values.serviceAccount.name }} |
||||
{{- else }} |
||||
{{- default "default" .Values.serviceAccount.name }} |
||||
{{- end }} |
||||
{{- end }} |
||||
|
||||
{{- define "postgresHost" -}} |
||||
{{- printf "%s-postgresql" .Release.Name }} |
||||
{{- end }} |
||||
|
||||
{{- define "postgresDatabase" -}} |
||||
{{- .Values.postgresql.auth.database }} |
||||
{{- end }} |
||||
|
||||
{{- define "postgresUsername" -}} |
||||
{{- .Values.postgresql.auth.username }} |
||||
{{- end }} |
||||
|
||||
{{- define "postgresPassword" -}} |
||||
{{- .Values.postgresql.auth.password }} |
||||
{{- end }} |
||||
|
||||
{{- define "databaseUri" -}} |
||||
{{- printf "pg://%s:5432?u=%s&p=%s&d=%s" (include "postgresHost" .) (include "postgresUsername" .) (include "postgresPassword" .) (include "postgresDatabase" .) }} |
||||
{{- end }} |
||||
@ -0,0 +1,13 @@
|
||||
{{- if .Values.extraEnvs }} |
||||
apiVersion: v1 |
||||
kind: ConfigMap |
||||
metadata: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
data: |
||||
{{- range $key, $value := .Values.extraEnvs }} |
||||
{{ $key }}: |- |
||||
{{- $value | nindent 4 }} |
||||
{{- end }} |
||||
{{- end }} |
||||
@ -0,0 +1,73 @@
|
||||
apiVersion: apps/v1 |
||||
kind: Deployment |
||||
metadata: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
spec: |
||||
{{- if not .Values.autoscaling.enabled }} |
||||
replicas: {{ .Values.replicaCount }} |
||||
{{- end }} |
||||
selector: |
||||
matchLabels: |
||||
{{- include "nocodb.selectorLabels" . | nindent 6 }} |
||||
template: |
||||
metadata: |
||||
{{- with .Values.podAnnotations }} |
||||
annotations: |
||||
{{- toYaml . | nindent 8 }} |
||||
{{- end }} |
||||
labels: |
||||
{{- include "nocodb.selectorLabels" . | nindent 8 }} |
||||
spec: |
||||
{{- with .Values.imagePullSecrets }} |
||||
imagePullSecrets: |
||||
{{- toYaml . | nindent 8 }} |
||||
{{- end }} |
||||
serviceAccountName: {{ include "nocodb.serviceAccountName" . }} |
||||
securityContext: |
||||
{{- toYaml .Values.podSecurityContext | nindent 8 }} |
||||
containers: |
||||
- name: {{ .Chart.Name }} |
||||
securityContext: |
||||
{{- toYaml .Values.securityContext | nindent 12 }} |
||||
image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}" |
||||
imagePullPolicy: {{ .Values.image.pullPolicy }} |
||||
volumeMounts: |
||||
- name: {{ include "nocodb.fullname" . }} |
||||
mountPath: /usr/app/data |
||||
envFrom: |
||||
- configMapRef: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
- secretRef: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
ports: |
||||
- name: http |
||||
containerPort: 8080 |
||||
protocol: TCP |
||||
livenessProbe: |
||||
httpGet: |
||||
path: / |
||||
port: http |
||||
readinessProbe: |
||||
httpGet: |
||||
path: / |
||||
port: http |
||||
resources: |
||||
{{- toYaml .Values.resources | nindent 12 }} |
||||
{{- with .Values.nodeSelector }} |
||||
nodeSelector: |
||||
{{- toYaml . | nindent 8 }} |
||||
{{- end }} |
||||
{{- with .Values.affinity }} |
||||
affinity: |
||||
{{- toYaml . | nindent 8 }} |
||||
{{- end }} |
||||
{{- with .Values.tolerations }} |
||||
tolerations: |
||||
{{- toYaml . | nindent 8 }} |
||||
{{- end }} |
||||
volumes: |
||||
- name: {{ include "nocodb.fullname" . }} |
||||
persistentVolumeClaim: |
||||
claimName: {{ include "nocodb.fullname" . }} |
||||
@ -0,0 +1,28 @@
|
||||
{{- if .Values.autoscaling.enabled }} |
||||
apiVersion: autoscaling/v2beta1 |
||||
kind: HorizontalPodAutoscaler |
||||
metadata: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
spec: |
||||
scaleTargetRef: |
||||
apiVersion: apps/v1 |
||||
kind: Deployment |
||||
name: {{ include "nocodb.fullname" . }} |
||||
minReplicas: {{ .Values.autoscaling.minReplicas }} |
||||
maxReplicas: {{ .Values.autoscaling.maxReplicas }} |
||||
metrics: |
||||
{{- if .Values.autoscaling.targetCPUUtilizationPercentage }} |
||||
- type: Resource |
||||
resource: |
||||
name: cpu |
||||
targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }} |
||||
{{- end }} |
||||
{{- if .Values.autoscaling.targetMemoryUtilizationPercentage }} |
||||
- type: Resource |
||||
resource: |
||||
name: memory |
||||
targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }} |
||||
{{- end }} |
||||
{{- end }} |
||||
@ -0,0 +1,61 @@
|
||||
{{- if .Values.ingress.enabled -}} |
||||
{{- $fullName := include "nocodb.fullname" . -}} |
||||
{{- $svcPort := .Values.ingress.port -}} |
||||
{{- if and .Values.ingress.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }} |
||||
{{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }} |
||||
{{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}} |
||||
{{- end }} |
||||
{{- end }} |
||||
{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}} |
||||
apiVersion: networking.k8s.io/v1 |
||||
{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}} |
||||
apiVersion: networking.k8s.io/v1beta1 |
||||
{{- else -}} |
||||
apiVersion: extensions/v1beta1 |
||||
{{- end }} |
||||
kind: Ingress |
||||
metadata: |
||||
name: {{ $fullName }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
{{- with .Values.ingress.annotations }} |
||||
annotations: |
||||
{{- toYaml . | nindent 4 }} |
||||
{{- end }} |
||||
spec: |
||||
{{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }} |
||||
ingressClassName: {{ .Values.ingress.className }} |
||||
{{- end }} |
||||
{{- if .Values.ingress.tls }} |
||||
tls: |
||||
{{- range .Values.ingress.tls }} |
||||
- hosts: |
||||
{{- range .hosts }} |
||||
- {{ . | quote }} |
||||
{{- end }} |
||||
secretName: {{ .secretName }} |
||||
{{- end }} |
||||
{{- end }} |
||||
rules: |
||||
{{- range .Values.ingress.hosts }} |
||||
- host: {{ .host | quote }} |
||||
http: |
||||
paths: |
||||
{{- range .paths }} |
||||
- path: {{ .path }} |
||||
{{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }} |
||||
pathType: {{ .pathType }} |
||||
{{- end }} |
||||
backend: |
||||
{{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }} |
||||
service: |
||||
name: {{ $fullName }} |
||||
port: |
||||
number: {{ $svcPort }} |
||||
{{- else }} |
||||
serviceName: {{ $fullName }} |
||||
servicePort: {{ $svcPort }} |
||||
{{- end }} |
||||
{{- end }} |
||||
{{- end }} |
||||
{{- end }} |
||||
@ -0,0 +1,14 @@
|
||||
apiVersion: v1 |
||||
kind: PersistentVolumeClaim |
||||
metadata: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
labels: |
||||
{{- include "nocodb.selectorLabels" . | nindent 8 }} |
||||
spec: |
||||
accessModes: |
||||
- ReadWriteMany |
||||
resources: |
||||
requests: |
||||
storage: {{ .Values.storage.size }} |
||||
storageClassName: {{ .Values.storage.storageClassName }} |
||||
volumeMode: Filesystem |
||||
@ -0,0 +1,13 @@
|
||||
{{- if .Values.extraSecretEnvs }} |
||||
apiVersion: v1 |
||||
kind: Secret |
||||
metadata: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
data: |
||||
NC_DB: {{ include "databaseUri" . | b64enc}} |
||||
{{- range $key, $value := .Values.extraSecretEnvs }} |
||||
{{ $key }}: '{{ $value | b64enc }}' |
||||
{{- end }} |
||||
{{- end }} |
||||
@ -0,0 +1,15 @@
|
||||
apiVersion: v1 |
||||
kind: Service |
||||
metadata: |
||||
name: {{ include "nocodb.fullname" . }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
spec: |
||||
type: {{ .Values.service.type }} |
||||
ports: |
||||
- port: {{ .Values.service.port }} |
||||
targetPort: http |
||||
protocol: TCP |
||||
name: http |
||||
selector: |
||||
{{- include "nocodb.selectorLabels" . | nindent 4 }} |
||||
@ -0,0 +1,12 @@
|
||||
{{- if .Values.serviceAccount.create -}} |
||||
apiVersion: v1 |
||||
kind: ServiceAccount |
||||
metadata: |
||||
name: {{ include "nocodb.serviceAccountName" . }} |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
{{- with .Values.serviceAccount.annotations }} |
||||
annotations: |
||||
{{- toYaml . | nindent 4 }} |
||||
{{- end }} |
||||
{{- end }} |
||||
@ -0,0 +1,15 @@
|
||||
apiVersion: v1 |
||||
kind: Pod |
||||
metadata: |
||||
name: "{{ include "nocodb.fullname" . }}-test-connection" |
||||
labels: |
||||
{{- include "nocodb.labels" . | nindent 4 }} |
||||
annotations: |
||||
"helm.sh/hook": test |
||||
spec: |
||||
containers: |
||||
- name: wget |
||||
image: busybox |
||||
command: ['wget'] |
||||
args: ['{{ include "nocodb.fullname" . }}:{{ .Values.service.port }}'] |
||||
restartPolicy: Never |
||||
@ -0,0 +1,98 @@
|
||||
# Default values for nocodb. |
||||
# This is a YAML-formatted file. |
||||
# Declare variables to be passed into your templates. |
||||
|
||||
replicaCount: 1 |
||||
|
||||
image: |
||||
repository: nocodb/nocodb |
||||
pullPolicy: IfNotPresent |
||||
# Overrides the image tag whose default is the chart appVersion. |
||||
tag: "" |
||||
|
||||
imagePullSecrets: [] |
||||
nameOverride: "" |
||||
fullnameOverride: "" |
||||
|
||||
serviceAccount: |
||||
# Specifies whether a service account should be created |
||||
create: false |
||||
# Annotations to add to the service account |
||||
annotations: {} |
||||
# The name of the service account to use. |
||||
# If not set and create is true, a name is generated using the fullname template |
||||
name: "" |
||||
|
||||
podAnnotations: {} |
||||
|
||||
podSecurityContext: {} |
||||
# fsGroup: 2000 |
||||
|
||||
securityContext: {} |
||||
# capabilities: |
||||
# drop: |
||||
# - ALL |
||||
# readOnlyRootFilesystem: true |
||||
# runAsNonRoot: true |
||||
# runAsUser: 1000 |
||||
|
||||
service: |
||||
type: ClusterIP |
||||
port: 8080 |
||||
|
||||
ingress: |
||||
enabled: false |
||||
annotations: {} |
||||
# kubernetes.io/ingress.class: nginx |
||||
# kubernetes.io/tls-acme: "true" |
||||
hosts: |
||||
- host: chart-example.local |
||||
paths: [] |
||||
tls: [] |
||||
# - secretName: chart-example-tls |
||||
# hosts: |
||||
# - chart-example.local |
||||
|
||||
resources: {} |
||||
# We usually recommend not to specify default resources and to leave this as a conscious |
||||
# choice for the user. This also increases chances charts run on environments with little |
||||
# resources, such as Minikube. If you do want to specify resources, uncomment the following |
||||
# lines, adjust them as necessary, and remove the curly braces after 'resources:'. |
||||
# limits: |
||||
# cpu: 100m |
||||
# memory: 128Mi |
||||
# requests: |
||||
# cpu: 100m |
||||
# memory: 128Mi |
||||
|
||||
autoscaling: |
||||
enabled: false |
||||
minReplicas: 1 |
||||
maxReplicas: 100 |
||||
targetCPUUtilizationPercentage: 80 |
||||
# targetMemoryUtilizationPercentage: 80 |
||||
|
||||
nodeSelector: {} |
||||
|
||||
tolerations: [] |
||||
|
||||
affinity: {} |
||||
|
||||
extraEnvs: |
||||
NC_PUBLIC_URL: https:/nocodb.local.org |
||||
|
||||
extraSecretEnvs: |
||||
NC_AUTH_JWT_SECRET: secretString |
||||
|
||||
storage: |
||||
size: 3Gi |
||||
storageClassName: "" |
||||
|
||||
postgresql: |
||||
enabled: false |
||||
auth: |
||||
database: nocodb |
||||
username: nocodb |
||||
password: secretPass |
||||
persistence: |
||||
size: 8Gi |
||||
|
After Width: | Height: | Size: 925 B |
|
After Width: | Height: | Size: 586 B |
|
After Width: | Height: | Size: 437 B |
|
After Width: | Height: | Size: 757 B |
@ -0,0 +1,24 @@
|
||||
<script setup lang="ts"> |
||||
const props = defineProps<{ |
||||
value?: string | number | null |
||||
lines?: number |
||||
}>() |
||||
|
||||
const wrapper = ref() |
||||
|
||||
const key = ref(0) |
||||
|
||||
onMounted(() => { |
||||
const observer = new ResizeObserver(() => { |
||||
key.value++ |
||||
}) |
||||
|
||||
observer.observe(wrapper.value) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div ref="wrapper"> |
||||
<text-clamp :key="key" class="w-full h-full break-all" :text="`${props.value || ''}`" :max-lines="props.lines" /> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,85 @@
|
||||
<script lang="ts" setup> |
||||
import { generateUniqueName, onKeyStroke, onMounted, reactive, ref } from '#imports' |
||||
|
||||
const props = defineProps<{ |
||||
title: string |
||||
}>() |
||||
|
||||
const emit = defineEmits<{ |
||||
(event: 'rename', value: string): void |
||||
(event: 'cancel'): void |
||||
}>() |
||||
|
||||
const inputEl = ref() |
||||
|
||||
const visible = ref(true) |
||||
|
||||
const form = reactive({ |
||||
title: props.title, |
||||
}) |
||||
|
||||
function renameFile(fileName: string) { |
||||
visible.value = false |
||||
emit('rename', fileName) |
||||
} |
||||
|
||||
async function useRandomName() { |
||||
form.title = await generateUniqueName() |
||||
} |
||||
|
||||
const rules = { |
||||
title: [{ required: true, message: 'title is required.' }], |
||||
} |
||||
|
||||
function onCancel() { |
||||
visible.value = false |
||||
emit('cancel') |
||||
} |
||||
|
||||
onKeyStroke('Escape', onCancel) |
||||
|
||||
onMounted(() => { |
||||
inputEl.value.select() |
||||
inputEl.value.focus() |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-modal |
||||
:visible="visible" |
||||
:closable="false" |
||||
:mask-closable="false" |
||||
destroy-on-close |
||||
title="Rename file" |
||||
class="nc-attachment-rename-modal" |
||||
width="min(100%, 620px)" |
||||
:footer="null" |
||||
centered |
||||
@cancel="onCancel" |
||||
> |
||||
<div class="flex flex-col items-center justify-center h-full"> |
||||
<a-form class="w-full h-full" no-style :model="form" @finish="renameFile(form.title)"> |
||||
<a-form-item class="w-full" name="title" :rules="rules.title"> |
||||
<a-input ref="inputEl" v-model:value="form.title" class="w-full" :placeholder="$t('general.rename')" /> |
||||
</a-form-item> |
||||
<div class="flex items-center justify-center gap-6 w-full mt-4"> |
||||
<button class="scaling-btn bg-opacity-100" type="submit"> |
||||
<span>{{ $t('general.confirm') }}</span> |
||||
</button> |
||||
<button class="scaling-btn bg-opacity-100" type="button" @click="useRandomName"> |
||||
<span>{{ $t('title.generateRandomName') }}</span> |
||||
</button> |
||||
</div> |
||||
</a-form> |
||||
</div> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-attachment-rename-modal { |
||||
.ant-input-affix-wrapper, |
||||
.ant-input { |
||||
@apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,430 @@
|
||||
<script setup lang="ts"> |
||||
import Draggable from 'vuedraggable' |
||||
import type { BaseType } from 'nocodb-sdk' |
||||
import CreateBase from './data-sources/CreateBase.vue' |
||||
import EditBase from './data-sources/EditBase.vue' |
||||
import Metadata from './Metadata.vue' |
||||
import UIAcl from './UIAcl.vue' |
||||
import Erd from './Erd.vue' |
||||
import { ClientType, DataSourcesSubTab } from '~/lib' |
||||
import { useNuxtApp, useProject } from '#imports' |
||||
|
||||
interface Props { |
||||
state: string |
||||
reload: boolean |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const emits = defineEmits(['update:state', 'update:reload', 'awaken']) |
||||
|
||||
const vState = useVModel(props, 'state', emits) |
||||
const vReload = useVModel(props, 'reload', emits) |
||||
|
||||
const { $api, $e } = useNuxtApp() |
||||
const { project, loadProject } = useProject() |
||||
|
||||
let sources = $ref<BaseType[]>([]) |
||||
let activeBaseId = $ref('') |
||||
let metadiffbases = $ref<string[]>([]) |
||||
let clientType = $ref<ClientType>(ClientType.MYSQL) |
||||
let isReloading = $ref(false) |
||||
let forceAwakened = $ref(false) |
||||
|
||||
async function loadBases() { |
||||
try { |
||||
if (!project.value?.id) return |
||||
|
||||
isReloading = true |
||||
vReload.value = true |
||||
const baseList = await $api.base.list(project.value?.id) |
||||
if (baseList.bases.list && baseList.bases.list.length) { |
||||
sources = baseList.bases.list |
||||
} |
||||
} catch (e) { |
||||
console.error(e) |
||||
} finally { |
||||
vReload.value = false |
||||
isReloading = false |
||||
} |
||||
} |
||||
|
||||
async function loadMetaDiff() { |
||||
try { |
||||
if (!project.value?.id) return |
||||
|
||||
metadiffbases = [] |
||||
|
||||
const metadiff = await $api.project.metaDiffGet(project.value?.id) |
||||
for (const model of metadiff) { |
||||
if (model.detectedChanges?.length > 0) { |
||||
metadiffbases.push(model.base_id) |
||||
} |
||||
} |
||||
} catch (e) { |
||||
console.error(e) |
||||
} |
||||
} |
||||
|
||||
const baseAction = (baseId?: string, action?: string) => { |
||||
if (!baseId) return |
||||
activeBaseId = baseId |
||||
vState.value = action || '' |
||||
} |
||||
|
||||
const deleteBase = (base: BaseType) => { |
||||
$e('c:base:delete') |
||||
|
||||
Modal.confirm({ |
||||
title: `Do you want to delete '${base.alias}' project?`, |
||||
wrapClassName: 'nc-modal-base-delete', |
||||
okText: 'Yes', |
||||
okType: 'danger', |
||||
cancelText: 'No', |
||||
async onOk() { |
||||
try { |
||||
await $api.base.delete(base.project_id as string, base.id as string) |
||||
|
||||
$e('a:base:delete') |
||||
|
||||
sources.splice(sources.indexOf(base), 1) |
||||
await loadProject() |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
}, |
||||
style: 'top: 30%!important', |
||||
}) |
||||
} |
||||
|
||||
const toggleBase = async (base: BaseType, state: boolean) => { |
||||
try { |
||||
if (!state && sources.filter((src) => src.enabled).length < 2) { |
||||
message.info('There should be at least one enabled base!') |
||||
return |
||||
} |
||||
base.enabled = state |
||||
await $api.base.update(base.project_id as string, base.id as string, { |
||||
id: base.id, |
||||
project_id: base.project_id, |
||||
enabled: base.enabled, |
||||
}) |
||||
await loadProject() |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const moveBase = async (e: any) => { |
||||
try { |
||||
if (e.oldIndex === e.newIndex) return |
||||
// sources list is mutated so we have to get the new index and mirror it to backend |
||||
const base = sources[e.newIndex] |
||||
if (base) { |
||||
if (!base.order) { |
||||
// empty update call to reorder bases (migration) |
||||
await $api.base.update(base.project_id as string, base.id as string, { |
||||
id: base.id, |
||||
project_id: base.project_id, |
||||
}) |
||||
message.info('Bases are migrated. Please try again.') |
||||
} else { |
||||
await $api.base.update(base.project_id as string, base.id as string, { |
||||
id: base.id, |
||||
project_id: base.project_id, |
||||
order: e.newIndex + 1, |
||||
}) |
||||
} |
||||
} |
||||
await loadProject() |
||||
await loadBases() |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const forceAwaken = () => { |
||||
forceAwakened = !forceAwakened |
||||
emits('awaken', forceAwakened) |
||||
} |
||||
|
||||
onMounted(async () => { |
||||
if (sources.length === 0) { |
||||
await loadBases() |
||||
await loadMetaDiff() |
||||
} |
||||
}) |
||||
|
||||
watch( |
||||
() => props.reload, |
||||
async (reload) => { |
||||
if (reload && !isReloading) { |
||||
await loadBases() |
||||
await loadMetaDiff() |
||||
} |
||||
}, |
||||
) |
||||
|
||||
watch( |
||||
() => sources.length, |
||||
(l) => { |
||||
if (l > 1 && !forceAwakened) { |
||||
emits('awaken', false) |
||||
} else { |
||||
emits('awaken', true) |
||||
} |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
watch( |
||||
vState, |
||||
async (newState) => { |
||||
if (!sources.length) { |
||||
await loadBases() |
||||
} |
||||
switch (newState) { |
||||
case ClientType.MYSQL: |
||||
clientType = ClientType.MYSQL |
||||
vState.value = DataSourcesSubTab.New |
||||
break |
||||
case ClientType.PG: |
||||
clientType = ClientType.PG |
||||
vState.value = DataSourcesSubTab.New |
||||
break |
||||
case ClientType.SQLITE: |
||||
clientType = ClientType.SQLITE |
||||
vState.value = DataSourcesSubTab.New |
||||
break |
||||
case ClientType.MSSQL: |
||||
clientType = ClientType.MSSQL |
||||
vState.value = DataSourcesSubTab.New |
||||
break |
||||
case ClientType.SNOWFLAKE: |
||||
clientType = ClientType.SNOWFLAKE |
||||
vState.value = DataSourcesSubTab.New |
||||
break |
||||
case DataSourcesSubTab.New: |
||||
if (sources.length > 1 && !forceAwakened) { |
||||
vState.value = '' |
||||
} |
||||
break |
||||
} |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="flex flex-row w-full h-full"> |
||||
<div class="flex flex-col w-full overflow-auto"> |
||||
<div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto"> |
||||
<div class="ds-table-head"> |
||||
<div class="ds-table-row"> |
||||
<div class="ds-table-col ds-table-name">Name</div> |
||||
<div class="ds-table-col ds-table-actions">Actions</div> |
||||
<div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">Show / Hide</div> |
||||
</div> |
||||
</div> |
||||
<div class="ds-table-body"> |
||||
<Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase"> |
||||
<template #header> |
||||
<div v-if="sources[0]" class="ds-table-row border-gray-200"> |
||||
<div class="ds-table-col ds-table-name"> |
||||
<div class="flex items-center gap-1"> |
||||
<GeneralBaseLogo :base-type="sources[0].type" /> |
||||
BASE |
||||
<span class="text-gray-400 text-xs">({{ sources[0].type }})</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="ds-table-col ds-table-actions"> |
||||
<div class="flex items-center gap-2"> |
||||
<a-button |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<a-tooltip v-if="metadiffbases.includes(sources[0].id as string)"> |
||||
<template #title>Out of sync</template> |
||||
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> |
||||
</a-tooltip> |
||||
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" /> |
||||
Sync Metadata |
||||
</div> |
||||
</a-button> |
||||
<a-button |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> |
||||
UI ACL |
||||
</div> |
||||
</a-button> |
||||
<a-button |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<MdiGraphOutline class="text-lg group-hover:text-accent" /> |
||||
ERD |
||||
</div> |
||||
</a-button> |
||||
<a-button |
||||
v-if="!sources[0].is_meta" |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<MdiEditOutline class="text-lg group-hover:text-accent" /> |
||||
Edit |
||||
</div> |
||||
</a-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="ds-table-col ds-table-enabled"> |
||||
<div class="flex items-center gap-1 cursor-pointer"> |
||||
<a-tooltip> |
||||
<template #title> |
||||
<template v-if="sources[0].enabled">Hide in UI</template> |
||||
<template v-else>Show in UI</template> |
||||
</template> |
||||
<a-switch :checked="sources[0].enabled ? true : false" @change="toggleBase(sources[0], $event)" /> |
||||
</a-tooltip> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template #item="{ element: base, index }"> |
||||
<div v-if="index !== 0" class="ds-table-row border-gray-200"> |
||||
<div class="ds-table-col ds-table-name"> |
||||
<MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" /> |
||||
<div class="flex items-center gap-1"> |
||||
<GeneralBaseLogo :base-type="base.type" /> |
||||
{{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="ds-table-col ds-table-actions"> |
||||
<div class="flex items-center gap-2"> |
||||
<a-button |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(base.id, DataSourcesSubTab.Metadata)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<a-tooltip v-if="metadiffbases.includes(base.id as string)"> |
||||
<template #title>Out of sync</template> |
||||
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> |
||||
</a-tooltip> |
||||
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" /> |
||||
Sync Metadata |
||||
</div> |
||||
</a-button> |
||||
<a-button |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(base.id, DataSourcesSubTab.UIAcl)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> |
||||
UI ACL |
||||
</div> |
||||
</a-button> |
||||
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)"> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<MdiGraphOutline class="text-lg group-hover:text-accent" /> |
||||
ERD |
||||
</div> |
||||
</a-button> |
||||
<a-button |
||||
v-if="!base.is_meta" |
||||
class="nc-action-btn cursor-pointer outline-0" |
||||
@click="baseAction(base.id, DataSourcesSubTab.Edit)" |
||||
> |
||||
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||
<MdiEditOutline class="text-lg group-hover:text-accent" /> |
||||
Edit |
||||
</div> |
||||
</a-button> |
||||
<a-button v-if="!base.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(base)"> |
||||
<div class="flex items-center gap-2 text-red-500 font-light"> |
||||
<MdiDeleteOutline class="text-lg group-hover:text-accent" /> |
||||
Delete |
||||
</div> |
||||
</a-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="ds-table-col ds-table-enabled"> |
||||
<div class="flex items-center gap-1 cursor-pointer"> |
||||
<a-tooltip> |
||||
<template #title> |
||||
<template v-if="base.enabled">Hide in UI</template> |
||||
<template v-else>Show in UI</template> |
||||
</template> |
||||
<a-switch :checked="base.enabled ? true : false" @change="toggleBase(base, $event)" /> |
||||
</a-tooltip> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</Draggable> |
||||
</div> |
||||
</div> |
||||
<div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto"> |
||||
<CreateBase :connection-type="clientType" @base-created="loadBases" /> |
||||
</div> |
||||
<div v-else-if="vState === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto"> |
||||
<Metadata :base-id="activeBaseId" @base-synced="loadBases" /> |
||||
</div> |
||||
<div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto"> |
||||
<UIAcl :base-id="activeBaseId" /> |
||||
</div> |
||||
<div v-else-if="vState === DataSourcesSubTab.ERD" class="h-full overflow-y-auto"> |
||||
<Erd :base-id="activeBaseId" /> |
||||
</div> |
||||
<div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto"> |
||||
<EditBase :base-id="activeBaseId" @base-updated="loadBases" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style> |
||||
.ds-table-head { |
||||
@apply flex items-center border-t bg-gray-100 font-bold text-gray-500; |
||||
} |
||||
|
||||
.ds-table-body { |
||||
@apply flex flex-col; |
||||
} |
||||
|
||||
.ds-table-row { |
||||
@apply grid grid-cols-20 border-b w-full h-full border-l border-r; |
||||
} |
||||
|
||||
.ds-table-col { |
||||
@apply flex items-center p-3 border-r-1 mr-2 h-50px; |
||||
} |
||||
|
||||
.ds-table-enabled { |
||||
@apply col-span-2 flex justify-center; |
||||
} |
||||
|
||||
.ds-table-name { |
||||
@apply col-span-8; |
||||
} |
||||
|
||||
.ds-table-actions { |
||||
@apply col-span-10; |
||||
} |
||||
|
||||
.ds-table-col:last-child { |
||||
@apply border-r-0; |
||||
} |
||||
|
||||
.ds-table-handle { |
||||
@apply cursor-pointer justify-self-start mr-2; |
||||
} |
||||
</style> |
||||
@ -1,5 +1,11 @@
|
||||
<script setup lang="ts"> |
||||
const props = defineProps<{ |
||||
baseId: string |
||||
}>() |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="w-full h-full !p-0 h-70vh"> |
||||
<ErdView /> |
||||
<div class="w-full h-full !p-0"> |
||||
<ErdView :base-id="props.baseId" /> |
||||
</div> |
||||
</template> |
||||
|
||||
@ -0,0 +1,676 @@
|
||||
<script lang="ts" setup> |
||||
import { Form, Modal, message } from 'ant-design-vue' |
||||
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' |
||||
import type { ProjectCreateForm } from '#imports' |
||||
import { |
||||
CertTypes, |
||||
ClientType, |
||||
DefaultConnection, |
||||
SQLiteConnection, |
||||
SSLUsage, |
||||
clientTypes as _clientTypes, |
||||
computed, |
||||
extractSdkResponseErrorMsg, |
||||
fieldRequiredValidator, |
||||
generateUniqueName, |
||||
getDefaultConnectionConfig, |
||||
getTestDatabaseName, |
||||
nextTick, |
||||
onMounted, |
||||
projectTitleValidator, |
||||
readFile, |
||||
ref, |
||||
useApi, |
||||
useGlobal, |
||||
useI18n, |
||||
useNuxtApp, |
||||
watch, |
||||
} from '#imports' |
||||
|
||||
const { connectionType } = defineProps<{ connectionType: ClientType }>() |
||||
|
||||
const emit = defineEmits(['baseCreated']) |
||||
|
||||
const { appInfo } = useGlobal() |
||||
|
||||
const { project, loadProject } = useProject() |
||||
|
||||
const useForm = Form.useForm |
||||
|
||||
const testSuccess = ref(false) |
||||
|
||||
const form = ref<typeof Form>() |
||||
|
||||
const { api } = useApi() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||
|
||||
let formState = $ref<ProjectCreateForm>({ |
||||
title: '', |
||||
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||
inflection: { |
||||
inflectionColumn: 'camelize', |
||||
inflectionTable: 'camelize', |
||||
}, |
||||
sslUse: SSLUsage.No, |
||||
extraParameters: [], |
||||
}) |
||||
|
||||
const customFormState = ref<ProjectCreateForm>({ |
||||
title: '', |
||||
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||
inflection: { |
||||
inflectionColumn: 'camelize', |
||||
inflectionTable: 'camelize', |
||||
}, |
||||
sslUse: SSLUsage.No, |
||||
extraParameters: [], |
||||
}) |
||||
|
||||
const clientTypes = computed(() => { |
||||
return _clientTypes.filter((type) => { |
||||
return appInfo.value?.ee || type.value !== ClientType.SNOWFLAKE |
||||
}) |
||||
}) |
||||
|
||||
const validators = computed(() => { |
||||
let clientValidations: Record<string, any[]> = { |
||||
'dataSource.connection.host': [fieldRequiredValidator()], |
||||
'dataSource.connection.port': [fieldRequiredValidator()], |
||||
'dataSource.connection.user': [fieldRequiredValidator()], |
||||
'dataSource.connection.password': [fieldRequiredValidator()], |
||||
'dataSource.connection.database': [fieldRequiredValidator()], |
||||
} |
||||
|
||||
switch (formState.dataSource.client) { |
||||
case ClientType.SQLITE: |
||||
clientValidations = { |
||||
'dataSource.connection.connection.filename': [fieldRequiredValidator()], |
||||
} |
||||
break |
||||
case ClientType.SNOWFLAKE: |
||||
clientValidations = { |
||||
'dataSource.connection.account': [fieldRequiredValidator()], |
||||
'dataSource.connection.username': [fieldRequiredValidator()], |
||||
'dataSource.connection.password': [fieldRequiredValidator()], |
||||
'dataSource.connection.warehouse': [fieldRequiredValidator()], |
||||
'dataSource.connection.database': [fieldRequiredValidator()], |
||||
'dataSource.connection.schema': [fieldRequiredValidator()], |
||||
} |
||||
break |
||||
case ClientType.PG: |
||||
case ClientType.MSSQL: |
||||
clientValidations['dataSource.searchPath.0'] = [fieldRequiredValidator()] |
||||
break |
||||
} |
||||
|
||||
return { |
||||
'title': [ |
||||
{ |
||||
required: true, |
||||
message: 'Base name is required', |
||||
}, |
||||
projectTitleValidator, |
||||
], |
||||
'extraParameters': [extraParameterValidator], |
||||
'dataSource.client': [fieldRequiredValidator()], |
||||
...clientValidations, |
||||
} |
||||
}) |
||||
|
||||
const { validate, validateInfos } = useForm(formState, validators) |
||||
|
||||
const populateName = (v: string) => { |
||||
formState.dataSource.connection.database = `${v.trim()}_noco` |
||||
} |
||||
|
||||
const onClientChange = () => { |
||||
formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) } |
||||
populateName(formState.title) |
||||
} |
||||
|
||||
const onSSLModeChange = ((mode: SSLUsage) => { |
||||
if (formState.dataSource.client !== ClientType.SQLITE) { |
||||
const connection = formState.dataSource.connection as DefaultConnection |
||||
switch (mode) { |
||||
case SSLUsage.No: |
||||
delete connection.ssl |
||||
break |
||||
case SSLUsage.Allowed: |
||||
connection.ssl = 'true' |
||||
break |
||||
default: |
||||
connection.ssl = { |
||||
ca: '', |
||||
cert: '', |
||||
key: '', |
||||
} |
||||
break |
||||
} |
||||
} |
||||
}) as SelectHandler |
||||
|
||||
const updateSSLUse = () => { |
||||
if (formState.dataSource.client !== ClientType.SQLITE) { |
||||
const connection = formState.dataSource.connection as DefaultConnection |
||||
if (connection.ssl) { |
||||
if (typeof connection.ssl === 'string') { |
||||
formState.sslUse = SSLUsage.Allowed |
||||
} else { |
||||
formState.sslUse = SSLUsage.Preferred |
||||
} |
||||
} else { |
||||
formState.sslUse = SSLUsage.No |
||||
} |
||||
} |
||||
} |
||||
|
||||
const addNewParam = () => { |
||||
formState.extraParameters.push({ key: '', value: '' }) |
||||
} |
||||
|
||||
const removeParam = (index: number) => { |
||||
formState.extraParameters.splice(index, 1) |
||||
} |
||||
|
||||
const inflectionTypes = ['camelize', 'none'] |
||||
const importURL = ref('') |
||||
const configEditDlg = ref(false) |
||||
const importURLDlg = ref(false) |
||||
|
||||
const caFileInput = ref<HTMLInputElement>() |
||||
const keyFileInput = ref<HTMLInputElement>() |
||||
const certFileInput = ref<HTMLInputElement>() |
||||
|
||||
const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => { |
||||
if (!el) return |
||||
|
||||
readFile(el, (content) => { |
||||
if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object') |
||||
formState.dataSource.connection.ssl[key] = content ?? '' |
||||
}) |
||||
} |
||||
|
||||
const sslFilesRequired = computed( |
||||
() => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed, |
||||
) |
||||
|
||||
function getConnectionConfig() { |
||||
const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value]))) |
||||
|
||||
const connection = { |
||||
...formState.dataSource.connection, |
||||
...extraParameters, |
||||
} |
||||
|
||||
if ('ssl' in connection && connection.ssl) { |
||||
if ( |
||||
formState.sslUse === SSLUsage.No || |
||||
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) |
||||
) { |
||||
delete connection.ssl |
||||
} |
||||
} |
||||
return connection |
||||
} |
||||
|
||||
const focusInvalidInput = () => { |
||||
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() |
||||
} |
||||
|
||||
const createBase = async () => { |
||||
try { |
||||
await validate() |
||||
} catch (e) { |
||||
focusInvalidInput() |
||||
return |
||||
} |
||||
|
||||
try { |
||||
if (!project.value?.id) return |
||||
|
||||
const connection = getConnectionConfig() |
||||
|
||||
const config = { ...formState.dataSource, connection } |
||||
|
||||
await api.base.create(project.value?.id, { |
||||
alias: formState.title, |
||||
type: formState.dataSource.client, |
||||
config, |
||||
inflection_column: formState.inflection.inflectionColumn, |
||||
inflection_table: formState.inflection.inflectionTable, |
||||
}) |
||||
|
||||
$e('a:base:create:extdb') |
||||
|
||||
await loadProject() |
||||
emit('baseCreated') |
||||
message.success('Base created!') |
||||
toggleDialog(true, 'dataSources', '') |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const testConnection = async () => { |
||||
try { |
||||
await validate() |
||||
} catch (e) { |
||||
focusInvalidInput() |
||||
return |
||||
} |
||||
|
||||
$e('a:base:create:extdb:test-connection', []) |
||||
|
||||
try { |
||||
if (formState.dataSource.client === ClientType.SQLITE) { |
||||
testSuccess.value = true |
||||
} else { |
||||
const connection = getConnectionConfig() |
||||
|
||||
connection.database = getTestDatabaseName(formState.dataSource)! |
||||
|
||||
const testConnectionConfig = { |
||||
...formState.dataSource, |
||||
connection, |
||||
} |
||||
|
||||
const result = await api.utils.testConnection(testConnectionConfig) |
||||
|
||||
if (result.code === 0) { |
||||
testSuccess.value = true |
||||
|
||||
Modal.confirm({ |
||||
title: t('msg.info.dbConnected'), |
||||
icon: null, |
||||
type: 'success', |
||||
okText: 'Ok & Add Base', |
||||
okType: 'primary', |
||||
cancelText: t('general.cancel'), |
||||
onOk: createBase, |
||||
style: 'top: 30%!important', |
||||
}) |
||||
} else { |
||||
testSuccess.value = false |
||||
|
||||
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
||||
} |
||||
} |
||||
} catch (e: any) { |
||||
testSuccess.value = false |
||||
|
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const handleImportURL = async () => { |
||||
if (!importURL.value || importURL.value === '') return |
||||
|
||||
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value }) |
||||
|
||||
if (connectionConfig) { |
||||
formState.dataSource.client = connectionConfig.client |
||||
formState.dataSource.connection = { ...connectionConfig.connection } |
||||
} else { |
||||
message.error(t('msg.error.invalidURL')) |
||||
} |
||||
importURLDlg.value = false |
||||
updateSSLUse() |
||||
} |
||||
|
||||
const handleEditJSON = () => { |
||||
customFormState.value = { ...formState } |
||||
configEditDlg.value = true |
||||
} |
||||
|
||||
const handleOk = () => { |
||||
formState = { ...customFormState.value } |
||||
configEditDlg.value = false |
||||
updateSSLUse() |
||||
} |
||||
|
||||
// reset test status on config change |
||||
watch( |
||||
() => formState.dataSource, |
||||
() => (testSuccess.value = false), |
||||
{ deep: true }, |
||||
) |
||||
|
||||
// populate database name based on title |
||||
watch( |
||||
() => formState.title, |
||||
(v) => populateName(v), |
||||
) |
||||
|
||||
// select and focus title field on load |
||||
onMounted(async () => { |
||||
formState.title = await generateUniqueName() |
||||
nextTick(() => { |
||||
// todo: replace setTimeout and follow better approach |
||||
setTimeout(() => { |
||||
const input = form.value?.$el?.querySelector('input[type=text]') |
||||
input.setSelectionRange(0, formState.title.length) |
||||
input.focus() |
||||
}, 500) |
||||
}) |
||||
}) |
||||
|
||||
watch( |
||||
() => connectionType, |
||||
(v) => { |
||||
formState.dataSource.client = v |
||||
onClientChange() |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="create-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8"> |
||||
<h1 class="prose-2xl font-bold self-center my-4">New Base</h1> |
||||
|
||||
<a-form |
||||
ref="form" |
||||
:model="formState" |
||||
name="external-project-create-form" |
||||
layout="horizontal" |
||||
no-style |
||||
:label-col="{ span: 8 }" |
||||
> |
||||
<a-form-item label="Base Name" v-bind="validateInfos.title"> |
||||
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> |
||||
<a-select |
||||
v-model:value="formState.dataSource.client" |
||||
class="nc-extdb-db-type" |
||||
dropdown-class-name="nc-dropdown-ext-db-type" |
||||
@change="onClientChange" |
||||
> |
||||
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value" |
||||
>{{ client.text }} |
||||
</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<!-- SQLite File --> |
||||
<a-form-item |
||||
v-if="formState.dataSource.client === ClientType.SQLITE" |
||||
:label="$t('labels.sqliteFile')" |
||||
v-bind="validateInfos['dataSource.connection.connection.filename']" |
||||
> |
||||
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> |
||||
</a-form-item> |
||||
|
||||
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE"> |
||||
<!-- Account --> |
||||
<a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']"> |
||||
<a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Username --> |
||||
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']"> |
||||
<a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Password --> |
||||
<a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']"> |
||||
<a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Warehouse --> |
||||
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']"> |
||||
<a-input v-model:value="formState.dataSource.connection.warehouse" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Database --> |
||||
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||
<!-- Database : create if not exists --> |
||||
<a-input |
||||
v-model:value="formState.dataSource.connection.database" |
||||
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||
class="nc-extdb-host-database" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Schema name --> |
||||
<a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']"> |
||||
<a-input v-model:value="formState.dataSource.connection.schema" /> |
||||
</a-form-item> |
||||
</template> |
||||
|
||||
<template v-else> |
||||
<!-- Host Address --> |
||||
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> |
||||
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Port Number --> |
||||
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> |
||||
<a-input-number |
||||
v-model:value="(formState.dataSource.connection as DefaultConnection).port" |
||||
class="!w-full nc-extdb-host-port" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Username --> |
||||
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> |
||||
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Password --> |
||||
<a-form-item :label="$t('labels.password')"> |
||||
<a-input-password |
||||
v-model:value="(formState.dataSource.connection as DefaultConnection).password" |
||||
class="nc-extdb-host-password" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Database --> |
||||
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||
<!-- Database : create if not exists --> |
||||
<a-input |
||||
v-model:value="formState.dataSource.connection.database" |
||||
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||
class="nc-extdb-host-database" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Schema name --> |
||||
<a-form-item |
||||
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" |
||||
:label="$t('labels.schemaName')" |
||||
v-bind="validateInfos['dataSource.searchPath.0']" |
||||
> |
||||
<a-input v-model:value="formState.dataSource.searchPath[0]" /> |
||||
</a-form-item> |
||||
|
||||
<a-collapse ghost expand-icon-position="right" class="!mt-6"> |
||||
<a-collapse-panel key="1"> |
||||
<template #header> |
||||
<div class="flex items-center gap-2"> |
||||
<!-- Use Connection URL --> |
||||
<a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true"> |
||||
{{ $t('activity.useConnectionUrl') }} |
||||
</a-button> |
||||
<span>{{ $t('title.advancedParameters') }}</span> |
||||
</div> |
||||
</template> |
||||
<a-form-item label="SSL mode"> |
||||
<a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange"> |
||||
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="SSL keys"> |
||||
<div class="flex gap-2"> |
||||
<a-tooltip placement="top"> |
||||
<!-- Select .cert file --> |
||||
<template #title> |
||||
<span>{{ $t('tooltip.clientCert') }}</span> |
||||
</template> |
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()"> |
||||
{{ $t('labels.clientCert') }} |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip placement="top"> |
||||
<!-- Select .key file --> |
||||
<template #title> |
||||
<span>{{ $t('tooltip.clientKey') }}</span> |
||||
</template> |
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()"> |
||||
{{ $t('labels.clientKey') }} |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip placement="top"> |
||||
<!-- Select CA file --> |
||||
<template #title> |
||||
<span>{{ $t('tooltip.clientCA') }}</span> |
||||
</template> |
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()"> |
||||
{{ $t('labels.serverCA') }} |
||||
</a-button> |
||||
</a-tooltip> |
||||
</div> |
||||
</a-form-item> |
||||
|
||||
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" /> |
||||
|
||||
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" /> |
||||
|
||||
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" /> |
||||
|
||||
<a-divider /> |
||||
|
||||
<!-- Extra connection parameters --> |
||||
<a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters"> |
||||
<a-card> |
||||
<div v-for="(item, index) of formState.extraParameters" :key="index"> |
||||
<div class="flex py-1 items-center gap-1"> |
||||
<a-input v-model:value="item.key" /> |
||||
|
||||
<span>:</span> |
||||
|
||||
<a-input v-model:value="item.value" /> |
||||
|
||||
<MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" /> |
||||
</div> |
||||
</div> |
||||
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam"> |
||||
<div class="flex items-center justify-center"><MdiPlus /></div> |
||||
</a-button> |
||||
</a-card> |
||||
</a-form-item> |
||||
|
||||
<a-divider /> |
||||
|
||||
<a-form-item :label="$t('labels.inflection.tableName')"> |
||||
<a-select |
||||
v-model:value="formState.inflection.inflectionTable" |
||||
dropdown-class-name="nc-dropdown-inflection-table-name" |
||||
> |
||||
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('labels.inflection.columnName')"> |
||||
<a-select |
||||
v-model:value="formState.inflection.inflectionColumn" |
||||
dropdown-class-name="nc-dropdown-inflection-column-name" |
||||
> |
||||
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<div class="flex justify-end"> |
||||
<a-button class="!shadow-md" @click="handleEditJSON()"> |
||||
<!-- Edit connection JSON --> |
||||
{{ $t('activity.editConnJson') }} |
||||
</a-button> |
||||
</div> |
||||
</a-collapse-panel> |
||||
</a-collapse> |
||||
</template> |
||||
|
||||
<a-form-item class="flex justify-center !mt-5"> |
||||
<div class="flex justify-center gap-2"> |
||||
<a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection"> |
||||
{{ $t('activity.testDbConn') }} |
||||
</a-button> |
||||
|
||||
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createBase"> |
||||
{{ $t('general.submit') }} |
||||
</a-button> |
||||
</div> |
||||
</a-form-item> |
||||
</a-form> |
||||
|
||||
<a-modal |
||||
v-model:visible="configEditDlg" |
||||
:title="$t('activity.editConnJson')" |
||||
width="600px" |
||||
wrap-class-name="nc-modal-edit-connection-json" |
||||
@ok="handleOk" |
||||
> |
||||
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> |
||||
</a-modal> |
||||
|
||||
<!-- Use Connection URL --> |
||||
<a-modal |
||||
v-model:visible="importURLDlg" |
||||
:title="$t('activity.useConnectionUrl')" |
||||
width="600px" |
||||
:ok-text="$t('general.ok')" |
||||
:cancel-text="$t('general.cancel')" |
||||
wrap-class-name="nc-modal-connection-url" |
||||
@ok="handleImportURL" |
||||
> |
||||
<a-input v-model:value="importURL" /> |
||||
</a-modal> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.ant-collapse-header) { |
||||
@apply !pr-10 !-mt-4 text-right justify-end; |
||||
} |
||||
|
||||
:deep(.ant-collapse-content-box) { |
||||
@apply !px-0; |
||||
} |
||||
|
||||
:deep(.ant-form-item-explain-error) { |
||||
@apply !text-xs; |
||||
} |
||||
|
||||
:deep(.ant-form-item) { |
||||
@apply mb-2; |
||||
} |
||||
|
||||
:deep(.ant-form-item-with-help .ant-form-item-explain) { |
||||
@apply !min-h-0; |
||||
} |
||||
|
||||
.create-base { |
||||
:deep(.ant-input-affix-wrapper), |
||||
:deep(.ant-input), |
||||
:deep(.ant-select) { |
||||
@apply !appearance-none border-1 border-solid rounded; |
||||
} |
||||
|
||||
:deep(.ant-input-password) { |
||||
input { |
||||
@apply !border-none my-0; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,652 @@
|
||||
<script lang="ts" setup> |
||||
import type { BaseType } from 'nocodb-sdk' |
||||
import { Form, Modal, message } from 'ant-design-vue' |
||||
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' |
||||
import type { ProjectCreateForm } from '#imports' |
||||
import { |
||||
CertTypes, |
||||
ClientType, |
||||
DefaultConnection, |
||||
SQLiteConnection, |
||||
SSLUsage, |
||||
clientTypes, |
||||
computed, |
||||
extractSdkResponseErrorMsg, |
||||
fieldRequiredValidator, |
||||
getDefaultConnectionConfig, |
||||
getTestDatabaseName, |
||||
onMounted, |
||||
projectTitleValidator, |
||||
readFile, |
||||
ref, |
||||
useApi, |
||||
useI18n, |
||||
useNuxtApp, |
||||
watch, |
||||
} from '#imports' |
||||
|
||||
const props = defineProps<{ |
||||
baseId: string |
||||
}>() |
||||
|
||||
const emit = defineEmits(['baseUpdated']) |
||||
|
||||
const { project, loadProject } = useProject() |
||||
|
||||
const useForm = Form.useForm |
||||
|
||||
const testSuccess = ref(false) |
||||
|
||||
const form = ref<typeof Form>() |
||||
|
||||
const { api } = useApi() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||
|
||||
const formState = ref<ProjectCreateForm>({ |
||||
title: '', |
||||
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||
inflection: { |
||||
inflectionColumn: 'camelize', |
||||
inflectionTable: 'camelize', |
||||
}, |
||||
sslUse: SSLUsage.No, |
||||
extraParameters: [], |
||||
}) |
||||
|
||||
const customFormState = ref<ProjectCreateForm>({ |
||||
title: '', |
||||
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||
inflection: { |
||||
inflectionColumn: 'camelize', |
||||
inflectionTable: 'camelize', |
||||
}, |
||||
sslUse: SSLUsage.No, |
||||
extraParameters: [], |
||||
}) |
||||
|
||||
const validators = computed(() => { |
||||
return { |
||||
'title': [projectTitleValidator], |
||||
'extraParameters': [extraParameterValidator], |
||||
'dataSource.client': [fieldRequiredValidator()], |
||||
...(formState.value.dataSource.client === ClientType.SQLITE |
||||
? { |
||||
'dataSource.connection.connection.filename': [fieldRequiredValidator()], |
||||
} |
||||
: formState.value.dataSource.client === ClientType.SNOWFLAKE |
||||
? { |
||||
'dataSource.connection.account': [fieldRequiredValidator()], |
||||
'dataSource.connection.username': [fieldRequiredValidator()], |
||||
'dataSource.connection.password': [fieldRequiredValidator()], |
||||
'dataSource.connection.warehouse': [fieldRequiredValidator()], |
||||
'dataSource.connection.database': [fieldRequiredValidator()], |
||||
'dataSource.connection.schema': [fieldRequiredValidator()], |
||||
} |
||||
: { |
||||
'dataSource.connection.host': [fieldRequiredValidator()], |
||||
'dataSource.connection.port': [fieldRequiredValidator()], |
||||
'dataSource.connection.user': [fieldRequiredValidator()], |
||||
'dataSource.connection.password': [fieldRequiredValidator()], |
||||
'dataSource.connection.database': [fieldRequiredValidator()], |
||||
...([ClientType.PG, ClientType.MSSQL].includes(formState.value.dataSource.client) |
||||
? { |
||||
'dataSource.searchPath.0': [fieldRequiredValidator()], |
||||
} |
||||
: {}), |
||||
}), |
||||
} |
||||
}) |
||||
|
||||
const { validate, validateInfos } = useForm(formState, validators) |
||||
|
||||
const onClientChange = () => { |
||||
formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) } |
||||
} |
||||
|
||||
const onSSLModeChange = ((mode: SSLUsage) => { |
||||
if (formState.value.dataSource.client !== ClientType.SQLITE) { |
||||
const connection = formState.value.dataSource.connection as DefaultConnection |
||||
switch (mode) { |
||||
case SSLUsage.No: |
||||
delete connection.ssl |
||||
break |
||||
case SSLUsage.Allowed: |
||||
connection.ssl = 'true' |
||||
break |
||||
default: |
||||
connection.ssl = { |
||||
ca: '', |
||||
cert: '', |
||||
key: '', |
||||
} |
||||
break |
||||
} |
||||
} |
||||
}) as SelectHandler |
||||
|
||||
const updateSSLUse = () => { |
||||
if (formState.value.dataSource.client !== ClientType.SQLITE) { |
||||
const connection = formState.value.dataSource.connection as DefaultConnection |
||||
if (connection.ssl) { |
||||
if (typeof connection.ssl === 'string') { |
||||
formState.value.sslUse = SSLUsage.Allowed |
||||
} else { |
||||
formState.value.sslUse = SSLUsage.Preferred |
||||
} |
||||
} else { |
||||
formState.value.sslUse = SSLUsage.No |
||||
} |
||||
} |
||||
} |
||||
|
||||
const addNewParam = () => { |
||||
formState.value.extraParameters.push({ key: '', value: '' }) |
||||
} |
||||
|
||||
const removeParam = (index: number) => { |
||||
formState.value.extraParameters.splice(index, 1) |
||||
} |
||||
|
||||
const inflectionTypes = ['camelize', 'none'] |
||||
const importURL = ref('') |
||||
const configEditDlg = ref(false) |
||||
const importURLDlg = ref(false) |
||||
|
||||
const caFileInput = ref<HTMLInputElement>() |
||||
const keyFileInput = ref<HTMLInputElement>() |
||||
const certFileInput = ref<HTMLInputElement>() |
||||
|
||||
const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => { |
||||
if (!el) return |
||||
|
||||
readFile(el, (content) => { |
||||
if ('ssl' in formState.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object') |
||||
formState.value.dataSource.connection.ssl[key] = content ?? '' |
||||
}) |
||||
} |
||||
|
||||
const sslFilesRequired = computed( |
||||
() => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed, |
||||
) |
||||
|
||||
function getConnectionConfig() { |
||||
const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.map((object) => [object.key, object.value]))) |
||||
|
||||
const connection = { |
||||
...formState.value.dataSource.connection, |
||||
...extraParameters, |
||||
} |
||||
|
||||
if ('ssl' in connection && connection.ssl) { |
||||
if ( |
||||
formState.value.sslUse === SSLUsage.No || |
||||
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) |
||||
) { |
||||
delete connection.ssl |
||||
} |
||||
} |
||||
return connection |
||||
} |
||||
|
||||
const focusInvalidInput = () => { |
||||
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() |
||||
} |
||||
|
||||
const editBase = async () => { |
||||
try { |
||||
await validate() |
||||
} catch (e) { |
||||
focusInvalidInput() |
||||
return |
||||
} |
||||
|
||||
try { |
||||
if (!project.value?.id) return |
||||
|
||||
const connection = getConnectionConfig() |
||||
|
||||
const config = { ...formState.value.dataSource, connection } |
||||
|
||||
await api.base.update(project.value?.id, props.baseId, { |
||||
alias: formState.value.title, |
||||
type: formState.value.dataSource.client, |
||||
config, |
||||
inflection_column: formState.value.inflection.inflectionColumn, |
||||
inflection_table: formState.value.inflection.inflectionTable, |
||||
}) |
||||
|
||||
$e('a:base:edit:extdb') |
||||
|
||||
await loadProject() |
||||
emit('baseUpdated') |
||||
message.success('Base updated!') |
||||
toggleDialog(true, 'dataSources', '') |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const testConnection = async () => { |
||||
try { |
||||
await validate() |
||||
} catch (e) { |
||||
focusInvalidInput() |
||||
return |
||||
} |
||||
|
||||
$e('a:base:edit:extdb:test-connection', []) |
||||
|
||||
try { |
||||
if (formState.value.dataSource.client === ClientType.SQLITE) { |
||||
testSuccess.value = true |
||||
} else { |
||||
const connection = getConnectionConfig() |
||||
|
||||
connection.database = getTestDatabaseName(formState.value.dataSource)! |
||||
|
||||
const testConnectionConfig = { |
||||
...formState.value.dataSource, |
||||
connection, |
||||
} |
||||
|
||||
const result = await api.utils.testConnection(testConnectionConfig) |
||||
|
||||
if (result.code === 0) { |
||||
testSuccess.value = true |
||||
|
||||
Modal.confirm({ |
||||
title: t('msg.info.dbConnected'), |
||||
icon: null, |
||||
type: 'success', |
||||
okText: 'Ok & Edit Base', |
||||
okType: 'primary', |
||||
cancelText: t('general.cancel'), |
||||
onOk: editBase, |
||||
style: 'top: 30%!important', |
||||
}) |
||||
} else { |
||||
testSuccess.value = false |
||||
|
||||
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
||||
} |
||||
} |
||||
} catch (e: any) { |
||||
testSuccess.value = false |
||||
|
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const handleImportURL = async () => { |
||||
if (!importURL.value || importURL.value === '') return |
||||
|
||||
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value }) |
||||
|
||||
if (connectionConfig) { |
||||
formState.value.dataSource.client = connectionConfig.client |
||||
formState.value.dataSource.connection = { ...connectionConfig.connection } |
||||
} else { |
||||
message.error(t('msg.error.invalidURL')) |
||||
} |
||||
importURLDlg.value = false |
||||
updateSSLUse() |
||||
} |
||||
|
||||
const handleEditJSON = () => { |
||||
customFormState.value = formState.value |
||||
configEditDlg.value = true |
||||
} |
||||
|
||||
const handleOk = () => { |
||||
formState.value = customFormState.value |
||||
configEditDlg.value = false |
||||
updateSSLUse() |
||||
} |
||||
|
||||
// reset test status on config change |
||||
watch( |
||||
() => formState.value.dataSource, |
||||
() => (testSuccess.value = false), |
||||
{ deep: true }, |
||||
) |
||||
|
||||
// load base config |
||||
onMounted(async () => { |
||||
if (project.value?.id) { |
||||
const definedParameters = ['host', 'port', 'user', 'password', 'database'] |
||||
|
||||
const activeBase = (await api.base.read(project.value?.id, props.baseId)) as BaseType |
||||
|
||||
const tempParameters = Object.entries(activeBase.config.connection) |
||||
.filter(([key]) => !definedParameters.includes(key)) |
||||
.map(([key, value]) => ({ key: key as string, value: value as string })) |
||||
|
||||
formState.value = { |
||||
title: activeBase.alias || '', |
||||
dataSource: activeBase.config, |
||||
inflection: { |
||||
inflectionColumn: activeBase.inflection_column, |
||||
inflectionTable: activeBase.inflection_table, |
||||
}, |
||||
extraParameters: tempParameters, |
||||
sslUse: SSLUsage.No, |
||||
} |
||||
updateSSLUse() |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="edit-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8"> |
||||
<h1 class="prose-2xl font-bold self-center my-4">Edit Base</h1> |
||||
|
||||
<a-form |
||||
ref="form" |
||||
:model="formState" |
||||
name="external-project-create-form" |
||||
layout="horizontal" |
||||
no-style |
||||
:label-col="{ span: 8 }" |
||||
> |
||||
<a-form-item label="Base Name" v-bind="validateInfos.title"> |
||||
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> |
||||
<a-select |
||||
v-model:value="formState.dataSource.client" |
||||
class="nc-extdb-db-type" |
||||
dropdown-class-name="nc-dropdown-ext-db-type" |
||||
@change="onClientChange" |
||||
> |
||||
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value" |
||||
>{{ client.text }} |
||||
</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<!-- SQLite File --> |
||||
<a-form-item |
||||
v-if="formState.dataSource.client === ClientType.SQLITE" |
||||
:label="$t('labels.sqliteFile')" |
||||
v-bind="validateInfos['dataSource.connection.connection.filename']" |
||||
> |
||||
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> |
||||
</a-form-item> |
||||
|
||||
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE"> |
||||
<!-- Account --> |
||||
<a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']"> |
||||
<a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Username --> |
||||
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']"> |
||||
<a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Password --> |
||||
<a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']"> |
||||
<a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Warehouse --> |
||||
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']"> |
||||
<a-input v-model:value="formState.dataSource.connection.warehouse" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Database --> |
||||
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||
<!-- Database : create if not exists --> |
||||
<a-input |
||||
v-model:value="formState.dataSource.connection.database" |
||||
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||
class="nc-extdb-host-database" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Schema name --> |
||||
<a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']"> |
||||
<a-input v-model:value="formState.dataSource.connection.schema" /> |
||||
</a-form-item> |
||||
</template> |
||||
|
||||
<template v-else> |
||||
<!-- Host Address --> |
||||
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> |
||||
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Port Number --> |
||||
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> |
||||
<a-input-number |
||||
v-model:value="(formState.dataSource.connection as DefaultConnection).port" |
||||
class="!w-full nc-extdb-host-port" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Username --> |
||||
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> |
||||
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" /> |
||||
</a-form-item> |
||||
|
||||
<!-- Password --> |
||||
<a-form-item :label="$t('labels.password')"> |
||||
<a-input-password |
||||
v-model:value="(formState.dataSource.connection as DefaultConnection).password" |
||||
class="nc-extdb-host-password" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Database --> |
||||
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||
<!-- Database : create if not exists --> |
||||
<a-input |
||||
v-model:value="formState.dataSource.connection.database" |
||||
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||
class="nc-extdb-host-database" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<!-- Schema name --> |
||||
<a-form-item |
||||
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" |
||||
:label="$t('labels.schemaName')" |
||||
v-bind="validateInfos['dataSource.searchPath.0']" |
||||
> |
||||
<a-input v-model:value="formState.dataSource.searchPath[0]" /> |
||||
</a-form-item> |
||||
|
||||
<a-collapse ghost expand-icon-position="right" class="!mt-6"> |
||||
<a-collapse-panel key="1"> |
||||
<template #header> |
||||
<div class="flex items-center gap-2"> |
||||
<!-- Use Connection URL --> |
||||
<a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true"> |
||||
{{ $t('activity.useConnectionUrl') }} |
||||
</a-button> |
||||
<span>{{ $t('title.advancedParameters') }}</span> |
||||
</div> |
||||
</template> |
||||
<a-form-item label="SSL mode"> |
||||
<a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange"> |
||||
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="SSL keys"> |
||||
<div class="flex gap-2"> |
||||
<a-tooltip placement="top"> |
||||
<!-- Select .cert file --> |
||||
<template #title> |
||||
<span>{{ $t('tooltip.clientCert') }}</span> |
||||
</template> |
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()"> |
||||
{{ $t('labels.clientCert') }} |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip placement="top"> |
||||
<!-- Select .key file --> |
||||
<template #title> |
||||
<span>{{ $t('tooltip.clientKey') }}</span> |
||||
</template> |
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()"> |
||||
{{ $t('labels.clientKey') }} |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip placement="top"> |
||||
<!-- Select CA file --> |
||||
<template #title> |
||||
<span>{{ $t('tooltip.clientCA') }}</span> |
||||
</template> |
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()"> |
||||
{{ $t('labels.serverCA') }} |
||||
</a-button> |
||||
</a-tooltip> |
||||
</div> |
||||
</a-form-item> |
||||
|
||||
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" /> |
||||
|
||||
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" /> |
||||
|
||||
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" /> |
||||
|
||||
<a-divider /> |
||||
|
||||
<!-- Extra connection parameters --> |
||||
<a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters"> |
||||
<a-card> |
||||
<div v-for="(item, index) of formState.extraParameters" :key="index"> |
||||
<div class="flex py-1 items-center gap-1"> |
||||
<a-input v-model:value="item.key" /> |
||||
|
||||
<span>:</span> |
||||
|
||||
<a-input v-model:value="item.value" /> |
||||
|
||||
<MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" /> |
||||
</div> |
||||
</div> |
||||
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam"> |
||||
<div class="flex items-center justify-center"><MdiPlus /></div> |
||||
</a-button> |
||||
</a-card> |
||||
</a-form-item> |
||||
|
||||
<a-divider /> |
||||
|
||||
<a-form-item :label="$t('labels.inflection.tableName')"> |
||||
<a-select |
||||
v-model:value="formState.inflection.inflectionTable" |
||||
dropdown-class-name="nc-dropdown-inflection-table-name" |
||||
> |
||||
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('labels.inflection.columnName')"> |
||||
<a-select |
||||
v-model:value="formState.inflection.inflectionColumn" |
||||
dropdown-class-name="nc-dropdown-inflection-column-name" |
||||
> |
||||
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
|
||||
<div class="flex justify-end"> |
||||
<a-button class="!shadow-md" @click="handleEditJSON()"> |
||||
<!-- Edit connection JSON --> |
||||
{{ $t('activity.editConnJson') }} |
||||
</a-button> |
||||
</div> |
||||
</a-collapse-panel> |
||||
</a-collapse> |
||||
</template> |
||||
|
||||
<a-form-item class="flex justify-center !mt-5"> |
||||
<div class="flex justify-center gap-2"> |
||||
<a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection"> |
||||
{{ $t('activity.testDbConn') }} |
||||
</a-button> |
||||
|
||||
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="editBase"> |
||||
{{ $t('general.submit') }} |
||||
</a-button> |
||||
</div> |
||||
</a-form-item> |
||||
<div class="w-full flex items-center mt-2 text-[#e65100]"> |
||||
<MdiWarning class="mr-1" /> |
||||
Please make sure database you are trying to connect is valid! This operation can cause schema loss!! |
||||
</div> |
||||
</a-form> |
||||
|
||||
<a-modal |
||||
v-model:visible="configEditDlg" |
||||
:title="$t('activity.editConnJson')" |
||||
width="600px" |
||||
wrap-class-name="nc-modal-edit-connection-json" |
||||
@ok="handleOk" |
||||
> |
||||
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> |
||||
</a-modal> |
||||
|
||||
<!-- Use Connection URL --> |
||||
<a-modal |
||||
v-model:visible="importURLDlg" |
||||
:title="$t('activity.useConnectionUrl')" |
||||
width="600px" |
||||
:ok-text="$t('general.ok')" |
||||
:cancel-text="$t('general.cancel')" |
||||
wrap-class-name="nc-modal-connection-url" |
||||
@ok="handleImportURL" |
||||
> |
||||
<a-input v-model:value="importURL" /> |
||||
</a-modal> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.ant-collapse-header) { |
||||
@apply !pr-10 !-mt-4 text-right justify-end; |
||||
} |
||||
|
||||
:deep(.ant-collapse-content-box) { |
||||
@apply !px-0; |
||||
} |
||||
|
||||
:deep(.ant-form-item-explain-error) { |
||||
@apply !text-xs; |
||||
} |
||||
|
||||
:deep(.ant-form-item) { |
||||
@apply mb-2; |
||||
} |
||||
|
||||
:deep(.ant-form-item-with-help .ant-form-item-explain) { |
||||
@apply !min-h-0; |
||||
} |
||||
|
||||
.edit-base { |
||||
:deep(.ant-input-affix-wrapper), |
||||
:deep(.ant-input), |
||||
:deep(.ant-select) { |
||||
@apply !appearance-none border-1 border-solid rounded; |
||||
} |
||||
|
||||
:deep(.ant-input-password) { |
||||
input { |
||||
@apply !border-none my-0; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup> |
||||
import { Panel, PanelPosition } from '@vue-flow/additional-components' |
||||
import type { ERDConfig } from './utils' |
||||
import MiFullscreen from '~icons/material-symbols/fullscreen' |
||||
import MiFullscreenExit from '~icons/material-symbols/fullscreen-exit' |
||||
|
||||
const props = defineProps<{ |
||||
config: ERDConfig |
||||
}>() |
||||
|
||||
const emit = defineEmits(['toggleFullScreen']) |
||||
|
||||
const { config } = toRefs(props) |
||||
|
||||
const toggleFullScreen = () => { |
||||
emit('toggleFullScreen') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<Panel |
||||
class="text-xs bg-white border-1 rounded-md p-0.5 border-gray-50 z-50 nc-erd-histogram cursor-pointer hover:bg-gray-100" |
||||
:position="PanelPosition.TopLeft" |
||||
> |
||||
<div class="flex"> |
||||
<MiFullscreenExit v-if="config.isFullScreen" class="h-5 w-5" @click="toggleFullScreen" /> |
||||
<MiFullscreen v-else class="h-5 w-5" @click="toggleFullScreen" /> |
||||
</div> |
||||
</Panel> |
||||
</template> |
||||
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts"> |
||||
const { isUIAllowed } = useUIPermission() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
v-if="isUIAllowed('settings')" |
||||
class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)" |
||||
@click="toggleDialog(true)" |
||||
> |
||||
<div> |
||||
<div class="flex items-center space-x-1"> |
||||
<RiTeamFill class="mr-1 nc-new-base" /> |
||||
<div>{{ t('title.teamAndSettings') }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,31 @@
|
||||
<script setup lang="ts"> |
||||
import LogosMysqlIcon from '~icons/logos/mysql-icon' |
||||
import LogosPostgresql from '~icons/logos/postgresql' |
||||
import VscodeIconsFileTypeSqlite from '~icons/vscode-icons/file-type-sqlite' |
||||
import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserver' |
||||
import LogosSnowflakeIcon from '~icons/logos/snowflake-icon' |
||||
import MdiDatabaseOutline from '~icons/mdi/database-outline' |
||||
|
||||
const { baseType } = defineProps<{ baseType?: string }>() |
||||
|
||||
const baseIcon = computed(() => { |
||||
switch (baseType) { |
||||
case ClientType.MYSQL: |
||||
return LogosMysqlIcon |
||||
case ClientType.PG: |
||||
return LogosPostgresql |
||||
case ClientType.SQLITE: |
||||
return VscodeIconsFileTypeSqlite |
||||
case ClientType.MSSQL: |
||||
return SimpleIconsMicrosoftsqlserver |
||||
case ClientType.SNOWFLAKE: |
||||
return LogosSnowflakeIcon |
||||
default: |
||||
return MdiDatabaseOutline |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<component :is="baseIcon" /> |
||||
</template> |
||||
@ -0,0 +1,58 @@
|
||||
<script lang="ts" setup> |
||||
import { Icon } from '@iconify/vue' |
||||
import InfiniteLoading from 'v3-infinite-loading' |
||||
import { emojiIcons } from '#imports' |
||||
|
||||
const emit = defineEmits(['selectIcon']) |
||||
let search = $ref('') |
||||
|
||||
// keep a variable to load icons with infinite scroll |
||||
// set initial value to 60 to load first 60 icons (index - `0 - 59`) |
||||
// and next value will be 120 and shows first 120 icons ( index - `0 - 129`) |
||||
let toIndex = $ref(60) |
||||
|
||||
const filteredIcons = computed(() => { |
||||
return emojiIcons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex) |
||||
}) |
||||
|
||||
const load = () => { |
||||
// increment `toIndex` to include next set of icons |
||||
toIndex += Math.min(filteredIcons.value.length, toIndex + 60) |
||||
if (toIndex > filteredIcons.value.length) { |
||||
toIndex = filteredIcons.value.length |
||||
} |
||||
} |
||||
|
||||
const selectIcon = (icon: string) => { |
||||
search = '' |
||||
emit('selectIcon', `emojione:${icon}`) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container"> |
||||
<div @click.stop> |
||||
<input |
||||
v-model="search" |
||||
data-testid="nc-emoji-filter" |
||||
class="p-1 text-xs border-1 w-full overflow-y-auto" |
||||
placeholder="Search" |
||||
@input="toIndex = 60" |
||||
/> |
||||
</div> |
||||
<div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull"> |
||||
<div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)"> |
||||
<span class="cursor-pointer nc-emoji-item"> |
||||
<Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon> |
||||
</span> |
||||
</div> |
||||
<InfiniteLoading @infinite="load"><span /></InfiniteLoading> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.nc-emoji-item { |
||||
@apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center; |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue