SirixDB Community Forum / Discussions

SirixDB front-end / first steps

Thinking of this:
https://element.eleme.io/#/en-US/component/tree#tree

1 Like

Yes, that’s what I thought :slight_smile:

1 Like

I probably won’t be able to continue until sunday, so here is what I have:

<template>
  <div class="databases">
    <h3>Databases</h3>
    <el-tree :data="databases" :props="defaultProps"></el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TreeView extends Vue {
  created() {
    console.log("begin");
    this.getDatabases().then(databases => {
      this.databases = databases;
    });
    this.databases.forEach(element => {
      for (let database in element.keys) {
        this.getResources(database);
      }
    });
  };

  private databases: Array<Map<string, string>> = [];
  private defaultProps = this.databases;

  private getDatabases(): Promise<Array<Map<string, string>>> {
    return this.$axios
      .$get("/")
      .then((res: any) => {
        return Promise.resolve(res.data);
      })
      .catch(() => {
        return 0;
      });
  }

  private getResources(database: string) {
    this.$axios
      .$get(`sirix/${database}`)
      .then((res: any) => {
        console.log(res.data);
      })
      .catch(() => {
        return 0;
      });
  }
}
</script>

Since routing to the server is done directly (without proxy) I seem to be running into CORS, I can’t continue dealing with this now, so I leave this to you.

1 Like

I think I got rid of the CORS error. You may have to update your sirix sources, as well as from the frontend and do a sudo docker-compose build server to rebuild your SirixDB HTTP-Server docker image.

However, this mocking bug seems to appear :frowning:

Sorry, still doesn’t seem to work. Even if I add the following in my sirix.conf:

“cors.allowedOriginPattern”: “http://localhost:3005”,
“cors.allowCredentials”: true

It seems that the SirixDB HTTP-Server somehow responds with an “Access-Control-Allow-Origin: *” header, but it must be restricted to for instance “http://localhost:3005” to work.

That said, I want to get the proxy stuff working as well. I think the full URL path needs to be specified:

  axios: {
    baseURL: 'https://localhost:9443',
    browserBaseURL: 'https://localhost:9443',
    proxyHeaders: true,
    proxy: true,
    debug: true,
    credentials: true
  },
  auth: {
    strategies: {
      keycloak: {
	_scheme: 'oauth2',
	authorization_endpoint: '/user/authorize',
	userinfo_endpoint: false,
	access_type: 'offline',
	access_token_endpoint: '/token',
	response_type: 'code',
	token_type: 'Bearer',
	token_key: 'access_token',
      },
    },
    redirect: {
      login: '/login',
      callback: '/callback',
      home: '/'
    },
  },
  router: {
    middleware: ['auth']
  },
  proxy: {
    '/user/authorize': {
      target: 'https://localhost:9443'
    },
    '/token': {
      target: 'https://localhost:9443'
    },
  }

This, however does not work because of my self signed certificate. I posted in the Vue.js Forum. Maybe someone knows why. Must have something to do with the proxy I guess and not with Axios itself :frowning:

Hmm. I’m not at my computer at the moment, but the proxy is meant to route connections from :3005 to :8080. I’m surprised that the auth and proxy config here (ignore the env config) doesn’t work for you. In fact, yestersay (I couldn’t resist trying again) I got the proxy to contact the database, I’ll post the config when I have a chance.

I’m using the following config:

auth: {
    strategies: {
      keycloak: {
	_scheme: 'oauth2',
	authorization_endpoint: 'https://192.168.99.101:9443/user/authorize',
	userinfo_endpoint: false,
	access_type: 'offline',
	access_token_endpoint: 'https://192.168.99.101:9443/token',
	response_type: 'code',
  token_type: 'Bearer',
  token_key: 'access_token',
  client_id: 'sirix',
  client_secret: '3ae9dfd6-cca4-49a9-b0be-0c74d9daba15',
  redirect_uri: 'http://localhost:3005/callback',
      },
    },
    redirect: {
      login: '/login',
      callback: '/callback',
      home: '/'
    },
  },
  router: {
    middleware: ['auth']
  },
  proxy: {
    '/auth/': {
      target: 'http://192.168.99.101:8080',
      pathRewrite: {'^/api/': ''}
    },
    '/sirix': {
      // target: 'https://localhost:9443/',
      target: 'https://192.168.99.101:9443/',
      pathRewrite: {'^/api/sirix/': ''}
    }
  }
}

1 Like

By the way, you should alter the plugins config to plugins: ['@/plugins/element-ui', '@/plugins/dependencyContainer.ts', '@/plugins/axios'],, otherwise the axios plugin doesn’t seem to be invoked. Unfortunately, the $axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false }) in the axios plugin doesn’t seem to be helping with the self signed certificate.

1 Like

Thanks, I’ve updated the nuxt config and the axios plugin. However, you’re right, that it doesn’t help.

Is the proxy working, at least?

Yes, I mean it’s trying to proxy :wink:

the error is:

ERROR [HPM] Error occurred while trying to proxy request /user/authorize?protocol=oauth2&response_type=code&access_type=offline&redirect_uri=http%3A%2F%2Flocalhost%3A3005%2Fcallback&state=Z7y9ab2KKQVj1H2YPaoDw from localhost:3005 to https://localhost:9443 (DEPTH_ZERO_SELF_SIGNED_CERT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

1 Like

I’ve also posted in their Discourse channel.

I found the problem. The axios plugin is client-side, but the certificate problem is server-side. So I changed the proxy config to as follows:

proxy: {
    '/auth/': {
      target: 'http://192.168.99.101:8080',
      pathRewrite: {'^/api/': ''}
    },
    '/sirix': {
      // target: 'https://localhost:9443/',
      target: 'https://192.168.99.101:9443/',
      pathRewrite: {'^/api/sirix/': ''},
      agent: new Agent({ rejectUnauthorized: false })
    }
  }

Note the “agent” option.
However, I then hit a Refused to set unsafe header "Origin" error, which it seems comes from the axios plugin attempting to set the “Origin” header of an ajax request, which is apparently not allowed. So I removed the appropriate lines from the axios plugin (though frankly, not sure if it’s needed at all). However, now the keycloak server is causing problems, I’ll update once I figure out what is going on.

1 Like

Yes, I’ve already removed all this stupid stuff, also imported https :wink:

I’m getting ReferenceError: Agent is not defined, when I simply add it in the proxy section

Whoops… have to add import { Agent } from 'https'; at the top.

I’m getting the following error from the sirix server: Exception in thread "vert.x-eventloop-thread-0" io.vertx.core.impl.NoStackTraceThrowable: Bad Request: {"error":"invalid_grant","error_description":"Code not valid"}

Is this during the authorization? Or when the API call is made?

On attempting to get the databases from the rest api.

Hm, from what I understand this error should only happen, when authenticating against the /token endpoint. Strange… however, also the proxy doesn’t seem to work again, or… at least Chrome sends a Preflight request and I’m getting a CORS-exception again, that the authorization header is not allowed.

However, I’ve configured it in the server